File "pp-toc.js"

Full path: /home/kosmetik/public_html/wp-content/plugins/powerpack-elements/assets/js/pp-toc.js
File size: 15.81 B
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

(function ($) {
	var PPToCHandler = elementorModules.frontend.handlers.Base.extend({
		stretchElement: null,

		getDefaultSettings: function () {
			var elementSettings = this.getElementSettings(),
				listWrapperTag =
					"numbers" === elementSettings.marker_view ? "ol" : "ul";

			return {
				selectors: {
					widgetContainer: ".pp-toc",
					container:
						'.elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"])',
					expandButton: ".pp-toc__header",
					collapseButton: ".pp-toc__header",
					body: ".pp-toc__body",
					headerTitle: ".pp-toc__header-title",
					scrollTop: ".pp-toc__scroll-to-top--container",
				},
				classes: {
					anchor: "pp-toc-menu-anchor",
					listWrapper: "pp-toc__list-wrapper",
					listItem: "pp-toc__list-item",
					listTextWrapper: "pp-toc__list-item-text-wrapper",
					firstLevelListItem: "pp-toc__top-level",
					listItemText: "pp-toc__list-item-text",
					activeItem: "pp-toc-item-active",
					headingAnchor: "pp-toc__heading-anchor",
					collapsed: "pp-toc--collapsed",
				},
				listWrapperTag: listWrapperTag,
			};
		},

		getDefaultElements: function getDefaultElements() {
			var settings = this.getSettings(),
				elementSettings = this.getElementSettings();

			return {
				$pageContainer: jQuery(
					elementSettings.container || settings.selectors.container
				),
				$widgetContainer: this.$element.find(
					settings.selectors.widgetContainer
				),
				$expandButton: this.$element.find(settings.selectors.expandButton),
				$collapseButton: this.$element.find(settings.selectors.collapseButton),
				$tocBody: this.$element.find(settings.selectors.body),
				$listItems: this.$element.find("." + settings.classes.listItem),
				$scrollTop: this.$element.find(settings.selectors.scrollTop),
			};
		},

		bindEvents: function bindEvents() {
			var self = this;

			var elementSettings = this.getElementSettings();

			if (elementSettings.minimize_box) {
				this.elements.$expandButton.on("click", function () {
					if (
						!$(self.$element).hasClass(
							self.getSettings("classes.collapsed")
						)
					) {
						return self.collapseBox();
					} else {
						return self.expandBox();
					}
				});
			}

			if (elementSettings.collapse_subitems) {
				this.elements.$listItems.hover(function (event) {
					return jQuery(event.target).slideToggle();
				});
			}

			if (elementSettings.sticky_toc_toggle) {
				elementorFrontend.elements.$window.on("resize", this.handleStickyToc);
			}

			if (elementSettings.scroll_to_top_toggle) {
				this.elements.$scrollTop.on("click", function () {
					self.scrollToTop();
				});
			}
		},

		getHeadings: function getHeadings() {
			// Get all headings from document by user-selected tags
			var elementSettings = this.getElementSettings(),
				tags = elementSettings.headings_by_tags.join(","),
				selectors = this.getSettings("selectors"),
				excludedSelectors = elementSettings.exclude_headings_by_selector;

			return this.elements.$pageContainer
				.find(tags)
				.not(selectors.headerTitle)
				.filter(function (index, heading) {
					return !jQuery(heading).closest(excludedSelectors).length; // Handle excluded selectors if there are any
				});
		},

		addAnchorsBeforeHeadings: function addAnchorsBeforeHeadings() {
			// Add an anchor element right before each TOC heading to create anchors for TOC links
			var classes = this.getSettings("classes");

			this.elements.$headings.before(function (index) {
				return (
					'<span id="' +
					classes.headingAnchor +
					"-" +
					index +
					'" class="' +
					classes.anchor +
					' "></span>'
				);
			});
		},

		activateItem: function activateItem($listItem) {
			var classes = this.getSettings("classes");

			this.deactivateActiveItem($listItem);

			$listItem.addClass(classes.activeItem);

			this.$activeItem = $listItem;

			if (!this.getElementSettings("collapse_subitems")) {
				return;
			}

			var $activeList = void 0;

			if ($listItem.hasClass(classes.firstLevelListItem)) {
				$activeList = $listItem.parent().next();
			} else {
				$activeList = $listItem.parents("." + classes.listWrapper).eq(-2);
			}

			if (!$activeList.length) {
				delete this.$activeList;

				return;
			}

			this.$activeList = $activeList;

			this.$activeList.stop().slideDown();
		},

		deactivateActiveItem: function deactivateActiveItem($activeToBe) {
			if (!this.$activeItem || this.$activeItem.is($activeToBe)) {
				return;
			}

			var _getSettings = this.getSettings(),
				classes = _getSettings.classes;

			this.$activeItem.removeClass(classes.activeItem);

			if (
				this.$activeList &&
				(!$activeToBe || !this.$activeList[0].contains($activeToBe[0]))
			) {
				this.$activeList.slideUp();
			}
		},

		followAnchor: function followAnchor($element, index) {
			var self = this;

			var anchorSelector = $element[0].hash;

			var $anchor = void 0;

			try {
				// `decodeURIComponent` for UTF8 characters in the hash.
				$anchor = jQuery(decodeURIComponent(anchorSelector));
			} catch (e) {
				return;
			}

			if (0 === index) {
				elementorFrontend.waypoint(
					$anchor,
					function (direction) {
						if (self.itemClicked) {
							return;
						}

						if ("down" === direction) {
							self.activateItem($element);
						} else {
							self.deactivateActiveItem();
						}
					},
					{ offset: "bottom-in-view", triggerOnce: false }
				);
			}

			elementorFrontend.waypoint(
				$anchor,
				function (direction) {
					if (self.itemClicked) {
						return;
					}

					if ("down" === direction) {
						self.activateItem(self.$listItemTexts.eq(index + 1));
					} else {
						self.activateItem($element);
					}
				},
				{ offset: 0, triggerOnce: false }
			);
		},

		followAnchors: function followAnchors() {
			var self = this;

			this.$listItemTexts.each(function (index, element) {
				return self.followAnchor(jQuery(element), index);
			});
		},

		setOffset: function setOffset($listItem) {
			var self = this;

			var settings = this.getSettings();
			var list = this.$element.find("." + settings.classes.listItem);

			var offset = this.getCurrentDeviceSetting("scroll_offset");

			list.each(function () {
				$('a', this).on('click', function (e) {
					e.preventDefault();
					var hash = this.hash;

					$('html, body').animate({
						scrollTop: ($(hash).offset().top - parseInt(offset.size))
					}, 800);
				});
			});
		},

		populateTOC: function populateTOC() {

			var self = this;

			this.listItemPointer = 0;

			var elementSettings = this.getElementSettings();

			if (elementSettings.hierarchical_view) {
				this.createNestedList();
			} else {
				this.createFlatList();
			}

			this.$listItemTexts = this.$element.find(".pp-toc__list-item-text");

			this.$listItemTexts.on("click", this.onListItemClick.bind(this));

			if (!elementorFrontend.isEditMode()) {
				this.followAnchors();
			}

			$(window).on('scroll', function(){

				if ("window_top" === elementSettings.scroll_to_top_option) {

					if( $(window).scrollTop() > 0 ){
						self.elements.$scrollTop.show();
					} else {
						self.elements.$scrollTop.hide();
					}
				} else {

					var $id = self.getID().parents('.elementor-widget-wrap');

					if( $id.offset().top >= $(window).scrollTop() ) {
						self.elements.$scrollTop.hide();
					} else {
						self.elements.$scrollTop.show();
					}
				}
			});
		},

		createNestedList: function createNestedList() {
			var self = this;

			this.headingsData.forEach(function (heading, index) {
				heading.level = 0;

				for (var i = index - 1; i >= 0; i--) {
					var currentOrderedItem = self.headingsData[i];

					if (currentOrderedItem.tag <= heading.tag) {
						heading.level = currentOrderedItem.level;

						if (currentOrderedItem.tag < heading.tag) {
							heading.level++;
						}

						break;
					}
				}
			});

			this.elements.$tocBody.html(this.getNestedLevel(0));
		},

		createFlatList: function createFlatList() {
			this.elements.$tocBody.html(this.getNestedLevel());
		},

		getNestedLevel: function getNestedLevel(level) {
			var settings = this.getSettings(),
				elementSettings = this.getElementSettings(),
				icon = this.getElementSettings("icon");

			// Open new list/nested list
			var html =
				"<" +
				settings.listWrapperTag +
				' class="' +
				settings.classes.listWrapper +
				'">';

			// for each list item, build its markup.
			while (this.listItemPointer < this.headingsData.length) {
				var currentItem = this.headingsData[this.listItemPointer];

				var listItemTextClasses = settings.classes.listItemText;

				if (0 === currentItem.level) {
					// If the current list item is a top level item, give it the first level class
					listItemTextClasses += " " + settings.classes.firstLevelListItem;
				}

				if (level > currentItem.level) {
					break;
				}

				if (level === currentItem.level) {
					html +=
						'<li class="' +
						settings.classes.listItem +
						" " +
						"level-" +
						level +
						'">';

					html += '<div class="' + settings.classes.listTextWrapper + '">';

					var liContent =
						'<a href="#' +
						settings.classes.headingAnchor +
						"-" +
						this.listItemPointer +
						'" class="' +
						listItemTextClasses +
						'">' +
						currentItem.text +
						"</a>";

					// If list type is bullets, add the bullet icon as an <i> tag
					if ("bullets" === elementSettings.marker_view && icon) {
						liContent = '<i class="' + icon.value + '"></i>' + liContent;
					}

					html += liContent;

					html += "</div>";

					this.listItemPointer++;

					var nextItem = this.headingsData[this.listItemPointer];

					if (nextItem && level < nextItem.level) {
						// If a new nested list has to be created under the current item,
						// this entire method is called recursively (outside the while loop, a list wrapper is created)
						html += this.getNestedLevel(nextItem.level);
					}

					html += "</li>";
				}
			}

			html += "</" + settings.listWrapperTag + ">";

			return html;
		},

		handleNoHeadingsFound: function handleNoHeadingsFound() {
			
			var _messages = ppToc;

			if (elementorFrontend.isEditMode()) {
				return this.elements.$tocBody.html(
					_messages.no_headings_found
				);
			}
		},

		collapseOnInit: function collapseOnInit() {
			self = this;
			var minimizedOn = this.getElementSettings("minimized_on"),
				currentDeviceMode = elementorFrontend.getCurrentDeviceMode();

			if ("" !== minimizedOn && "array" !== typeof minimizedOn) {
				minimizedOn = [minimizedOn];
			}

			if ( 0 !== minimizedOn.length  && "object" === typeof minimizedOn ) {
				minimizedOn.forEach(function (value) {
					if (
						( "desktop" === value[0] && "desktop" == currentDeviceMode && $(window).width() < elementorFrontend.config.breakpoints.xxl ) ||
						( "tablet" === value[0] && "tablet" === currentDeviceMode && $(window).width() < elementorFrontend.config.breakpoints.lg ) ||
						( "mobile" === value[0] && "mobile" === currentDeviceMode && $(window).width() < elementorFrontend.config.breakpoints.md )
					) {
						self.collapseBox();
					}
				});
			}
		},

		setHeadingsData: function setHeadingsData() {
			var self = this;

			this.headingsData = [];

			// Create an array for simplifying TOC list creation
			this.elements.$headings.each(function (index, element) {
				self.headingsData.push({
					tag: +element.nodeName.slice(1),
					text: element.textContent,
				});
			});
		},

		run: function run() {

			elementSettings = this.getElementSettings();

			this.elements.$headings = this.getHeadings();

			if (!this.elements.$headings.length) {
				return this.handleNoHeadingsFound();
			}

			this.setHeadingsData();

			if (!elementorFrontend.isEditMode()) {
				this.addAnchorsBeforeHeadings();
			}

			this.populateTOC();

			if (elementSettings.minimize_box) {
				this.collapseOnInit();
			}

			if (elementSettings.sticky_toc_toggle) {
				this.handleStickyToc();
			}

			if ( "" !== elementSettings.scroll_offset.size && undefined !== elementSettings.scroll_offset.size ) {
				this.setOffset();
			}
		},

		expandBox: function expandBox() {
			var boxHeight = this.getCurrentDeviceSetting("min_height");

			this.$element.removeClass(this.getSettings("classes.collapsed"));

			this.elements.$tocBody.slideDown();

			// return container to the full height in case a min-height is defined by the user
			this.elements.$widgetContainer.css(
				"min-height",
				boxHeight.size + boxHeight.unit
			);
		},

		collapseBox: function collapseBox() {
			this.$element.addClass(this.getSettings("classes.collapsed"));

			this.elements.$tocBody.slideUp();

			// close container in case a min-height is defined by the user
			this.elements.$widgetContainer.css("min-height", "0px");
		},

		onInit: function onInit() {
			var self = this;

			this.initElements();
			this.bindEvents();

			jQuery(document).ready(function () {
				return self.run();
			});
		},

		onListItemClick: function onListItemClick(event) {
			var self = this;

			this.itemClicked = true;

			setTimeout(function () {
				return (self.itemClicked = false);
			}, 2000);

			var $clickedItem = jQuery(event.target),
				$list = $clickedItem.parent().next(),
				collapseNestedList = this.getElementSettings("collapse_subitems");

			var listIsActive = void 0;

			if (
				collapseNestedList &&
				$clickedItem.hasClass(this.getSettings("classes.firstLevelListItem"))
			) {
				if ($list.is(":visible")) {
					listIsActive = true;
				}
			}

			this.activateItem($clickedItem);

			if (collapseNestedList && listIsActive) {
				$list.slideUp();
			}
		},

		handleStickyToc: function handleStickyToc() {

			var self = this;

			var elementSettings = this.getElementSettings();

			var currentDeviceMode = elementorFrontend.getCurrentDeviceMode();

			var $devices = elementSettings.sticky_toc_disable_on;

			var target = this.getID();			

			var type = elementSettings.sticky_toc_type;

			if ("in-place" === type) {				
				
				var parentWidth = target.parent().parent().outerWidth();

				target.css("width", parentWidth);
				tocWidth = parentWidth;
			} else if( "custom-position" === type ) {
				target.css("width", "");
			}

			if (-1 !== $.inArray(currentDeviceMode, $devices) ) {

				target.removeClass('floating-toc');
				$(window).off('scroll', this.stickyScroll);

				return;
			}		

			$(window).on('scroll', $.proxy( this.stickyScroll, this ));		
		},

		stickyScroll: function (){

			var target = this.getID();
			var elementSettings = this.getElementSettings();
			var item = document.querySelector(".elementor-widget-pp-table-of-contents");			

			var bound, tocHeight;

			bound = item.getBoundingClientRect();

			tocHeight = target.outerHeight();

			if (target.hasClass("floating-toc")) {
				target.parent().parent().css("height", tocHeight);
			} else {
				target.parent().parent().css("height", '');
			}

			if (bound.y + bound.height / 2 < 0) {
				
				if(target.hasClass('floating-toc')){
					return;
				}

				target.fadeOut(250, function(){
					target.addClass("floating-toc");
					target.fadeIn();
				});

			} else {
				
				if(!target.hasClass('floating-toc')){
					return;
				}

				target.fadeOut(250, function(){
					target.removeClass("floating-toc");
					target.fadeIn();
				});
			}
		},
	

		scrollToTop: function scrollToTop() {
			var self = this;

			var scrollTo = this.getElementSettings("scroll_to_top_option");

			if ("window_top" === scrollTo) {
				$("html, body").animate({
					scrollTop: 0
				}, 250 );
			} else {

				var $id = this.getID().parents('.elementor-widget-pp-table-of-contents');

				$("html, body").animate({
					scrollTop: $($id).offset().top - 60,
				}, 250 );
			}
		},

		getID: function getID() {
			return $("#pp-toc-" + this.$element[0].attributes["data-id"].nodeValue);
		},
	});

	jQuery(window).on("elementor/frontend/init", function () {
		var addHandler = function ($element) {
			elementorFrontend.elementsHandler.addHandler(PPToCHandler, {
				$element: $element,
			});
		};
		elementorFrontend.hooks.addAction(
			"frontend/element_ready/pp-table-of-contents.default",
			addHandler
		);
	});
})(jQuery);