File "pp-product-tabs.js"

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

Download   Open   Edit   Advanced Editor   Back

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

		getDefaultSettings: function () {
			var elementSettings = this.getElementSettings();

			return {
				selectors: {
					widgetContainer: ".pp-woo-product-tabs-wrapper",
					tabWrapper: ".woocommerce-tabs",
					tabListWrapper: ".wc-tabs-wrapper",
					tabList: ".wc-tabs",
					tabItem: ".wc-tabs li",
				},
				classes: {
					tabListWrapper: "wc-tabs-wrapper",
					tabList: "wc-tabs",
					itemActive: "active",
				},
			};
		},

		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
				),
				$tabList: this.$element.find(settings.selectors.tabList),
				$tabWrapper: this.$element.find(settings.selectors.tabWrapper),
				$tabItem: this.$element.find(settings.selectors.tabItem),
			};
		},

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

			this.elements.$tabItem.hover(
				function () {
					$(this).toggleClass("hover");
				},
				function (event) {
					$(this).toggleClass("hover");
				}
			);
		},

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

			var mode =
				this.getElementSettings(
					"woo_products_tab__active_tab_indicator_horizontal"
				) ||
				this.getElementSettings(
					"woo_products_tab__active_tab_indicator_vertical"
				);
			var position =
				this.getElementSettings(
					"woo-products-tab__active-tab-indicator-position-horizontal"
				) ||
				this.getElementSettings(
					"woo-products-tab__active-tab-indicator-position-vertical"
				) ||
				"";

			this.elements.$tabList.toggleClass(mode);
			this.elements.$tabList.toggleClass(position);
		},

		setActiveTab: function setActiveTab(id) {
			// Select tabs container and run click event on it
			$(".wc-tabs, ul.tabs li:nth-child(" + id + ") a").click();
		},

		tabMode: function tabMode() {
			// Check position of icon and add tab flex-class top, bottom, left, right.

			var iconPosition = this.getElementSettings(
				"woo-product-tabs__icon-position"
			);
			this.elements.$tabList.toggleClass(iconPosition);
		},

		layoutMode: function layoutMode() {
			var mode = this.getElementSettings("woo_product_tabs__tab_layout");

			this.elements.$tabWrapper.toggleClass(mode);
		},

		addIcons: function addIcons() {
			//Check Mode

			if (
				"icon" ===
				this.getElementSettings("woo-product-tabs__tab-style")
			) {
				this.elements.$tabItem.each(function () {
					this.childNodes[1].childNodes[0].data = "";
				});
			}

			//Declare variables
			var icon, iconType;

			// Get Repeater Control's settings

			var x = this.getElementSettings("product_tabs--repeater-section");

			// Iterate over all the elements in the tab list to get the right icon

			this.elements.$tabList.children().each(function () {
				var id = $(this).attr("id").replace("tab-title-", "");

				x.forEach(function (item, index) {
					if (item._id === id) {
						icon = item.product_tab_icon.value;
						iconType = item.product_tab_icon.library;
					}
				});

				// Add the icon to the element
				var y = this.firstElementChild;
				y.insertAdjacentHTML(
					"afterbegin",
					'<i class="pp-icon ' + icon + " " + iconType + '"></i>'
				);
			});
		},

		responsiveMode: function responsiveMode() {
			//Swtich off default click action by WooCommerce's JS
			$(".wc-tabs li a, ul.tabs li a").off("click");

			// Hide tab list
			$("ul.tabs.wc-tabs").empty();

			// Append tab titles to content panels

			// 1. Get repeater IDs
			var $repeater = this.getElementSettings('product_tabs--repeater-section');

			// 2. Get Panel IDs
			var $panels = $('.woocommerce-Tabs-panel');
			$panels.css('display', 'block');

			var $repeater = this.getElementSettings(
				"product_tabs--repeater-section"
			);

			// Compare IDs

			_.each($repeater, function ($r) {
				$panels.each(function () {
					if ("tab-" + $r._id === $(this).attr("id")) {
						var html =
							'<div id="tab-title-' +
							$r._id +
							'" role="tab" ><a href="#tab-' +
							$r._id +
							'">' +
							$r.title +
							"</a></div>";

						this.insertAdjacentHTML("afterbegin", html);

						$("#tab-" + $r.id).on("click", function () {
							event.preventDefault();
						})
					}
				});
			});
		},

		initJS: function initJS() {
			// Trigger WooCommerce's Single Product JS manually on widget load
			this.elements.$tabWrapper.trigger("init");
		},

		run: function run() {
			// Initialize WooCommerce JS for Tabs
			this.initJS();

			//Add icons to tabs

			if (
				"title" !==
				this.getElementSettings("woo-product-tabs__tab-style")
			) {
				this.addIcons();
			}

			//Add layout class
			this.layoutMode();

			//Add icon class
			this.tabMode();

			//Init active tab indicator
			if (
				"" !==
				this.getElementSettings(
					"woo-products-tab__active-tab-indicator"
				)
			) {
				this.activeTabIndicator();
			}

			// Activate default tab
			if (this.getElementSettings("woo-product-tabs__default-tab") > 0) {
				this.setActiveTab(
					this.getElementSettings("woo-product-tabs__default-tab")
				);
			}
		},

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

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

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

	jQuery(window).on("elementor/frontend/init", function () {
		var addHandler = function ($element) {
			elementorFrontend.elementsHandler.addHandler(PPWooTabsHandler, {
				$element: $element,
			});
		};
		elementorFrontend.hooks.addAction(
			"frontend/element_ready/pp-woo-product-tabs.default",
			addHandler
		);
	});
})(jQuery);