@leapdev/gui 0.2.240 → 0.2.241

package/dist/scss/xsf-crx/sf-leap.js

@@ -48,19 +48,11 @@
 	win.ready = ready;
 })(this);
 
+//LEAP Help Centre JS for Components generated via Chrome Extension
 (function () {
-	var getChildren = function (n, skipMe) {
-		var r = [];
-		for (; n; n = n.nextSibling)
-			if (n.nodeType == 1 && n != skipMe) r.push(n);
-		return r;
-	};
-
-	var getSiblings = function (n) {
-		return getChildren(n.parentNode.firstChild, n);
-	};
+	const topicsTabAccordion = {};
 
-	var getClosestParent = function (elem, selector) {
+	const getClosestParent = function (elem, selector) {
 		if (!Element.prototype.matches) {
 			Element.prototype.matches =
 				Element.prototype.matchesSelector ||
@@ -83,15 +75,18 @@
 		return null;
 	};
 
-	// For Version 1 the order of Hash appendages is Tab -> Accordion -> Subaccordion
-	var appendHash = function (str) {
-		window.location.hash = (() => {
-			const lowercasedStr = str.toLowerCase();
-			return lowercasedStr.split(' ').join('-');
-		})();
+	const getChildren = function (n, skipMe) {
+		let r = [];
+		for (; n; n = n.nextSibling)
+			if (n.nodeType == 1 && n != skipMe) r.push(n);
+		return r;
+	};
+
+	const getSiblings = function (n) {
+		return getChildren(n.parentNode.firstChild, n);
 	};
 
-	var getDeviceType = function () {
+	const getDeviceType = function () {
 		const ua = navigator.userAgent;
 		const isiOS = () => {
 			return /iPad|iPhone/.test(ua) || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
@@ -109,18 +104,28 @@
 		return;
 	};
 
-	var getURLHashList = function () {
-		return window.location.hash !== '' ? window.location.hash.substring(1).split('#') : undefined;
+	// #@desktop:accordion-2;sub-accordion-1@parent-accordion-1
+	const urlHash = {
+		list: window.location.hash,
+		init: function () {
+			this.openedTopics = window.location.hash.substring(1).split('@').splice(1);
+		},
+		setItem: function (id) {
+			const childText = topicsTabAccordion[id].isMainParent ? '' : (':' + topicsTabAccordion[id].text);
+			const parentText = topicsTabAccordion[id].isMainParent ? topicsTabAccordion[id].text : topicsTabAccordion[id].parentLabel;
+			return `@${parentText}${childText}`;
+		}
 	};
 
+	// Tab and Accordion Toggling
 	document.addEventListener('click', function (event) {
-		var
+		const
 			targetElem = event.target,
 			className = targetElem.classList;
 
 		if (className.value.indexOf('sf-tab-item-link') !== -1) {
 			event.preventDefault();
-			var targetID,
+			let targetID,
 				activeTabBtn,
 				targetTab,
 				targetTabSiblings,
@@ -136,8 +141,6 @@
 			activeTabBtn.classList.add('active');
 			targetTab.classList.add('in');
 
-			appendHash(targetElem.textContent);
-
 			activeBtnTabSiblings.forEach(function (element) {
 				if (element.classList.value.indexOf('active') !== -1) element.classList.remove('active');
 			});
@@ -147,58 +150,128 @@
 		}
 
 		if (className.value.indexOf('sf-accordion-toggle') !== -1) {
-			appendHash(targetElem.querySelector('.sf-accordion-text').textContent);
-			className.value.indexOf('in') == -1 ?
-				className.add('in') : className.remove('in');
+			className.value.indexOf('in') == -1 ? className.add('in') : className.remove('in');
+		}
+
+		if (
+			className.value.indexOf('sf-tab-item-link') !== -1 ||
+			className.value.indexOf('sf-accordion-toggle') !== -1
+		) {
+			window.location.hash = urlHash.setItem(targetElem.id);
 		}
 
 		return false;
 	}, false);
 
-	const openParent = (childElement) => {
-		const closestTab = getClosestParent(childElement, '.sf-tab-content');
-		const closestAccordion = getClosestParent(childElement, '.sf-accordion-content');
+	// Set default tab via URL hash parameters or device type if present on tabs
+	let articleTabsInit = false;
+	let articleAccordionInit = false;
 
-		if (closestTab !== null) {
-			document.getElementById(`target_${closestTab.id}`).click();
-		}
-		if (closestAccordion !== null) {
-			document.getElementById(`target_${closestAccordion.id}`).click();
-		}
+	urlHash.init();
+
+	const closestParent = (child) => {
+		const tabContent = getClosestParent(child, '.sf-tab-content');
+		const accordionContent = getClosestParent(child, '.sf-accordion-content');
+		const parentLabel = () => {
+			if (tabContent !== null) {
+				return document.getElementById(`target_${tabContent.id}`).textContent;
+			}
+			else if (accordionContent !== null) {
+				return document.getElementById(`target_${accordionContent.id}`).querySelector('.sf-accordion-text').textContent;
+			}
+			else {
+				return '';
+			}
+		};
+		return {
+			parentLabel: parentLabel().split(' ').join('-').toLowerCase(),
+			flag: tabContent !== null || accordionContent !== null ? false : true
+		};
 	};
 
-	// Set default tab via URL hash or device type if present on tabs
 	ready('.sf-tabs', function () {
-		const urlHashList = getURLHashList();
-		document.querySelectorAll('.sf-tabs').forEach(tab => {
-			const deviceType = getDeviceType();
-			tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
-				console.log(tabitem);
-				const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
-				console.log(tabItemText, deviceType, typeof (urlHashList));
-
-				if (tabItemText === deviceType && typeof (urlHashList) === 'undefined') {
-					tabitem.click();
-				}
-				else if (typeof (urlHashList) !== 'undefined' && urlHashList.includes(tabItemText)) {
-					openParent(tabitem);
-					tabitem.click();
-				}
+		if (!articleTabsInit) {
+
+			const toggleTabs = (params) => {
+				// Remove existing active CSS classes
+				const currentTabContentID = params.tabNav.querySelector('.sf-tab-item.active').firstElementChild.id.substring(7);
+				params.tabNav.querySelector('.sf-tab-item.active').classList.remove('active');
+				document.getElementById(currentTabContentID).classList.remove('in');
+
+				//Update tab according to device with active and in css class
+				params.targetTabLink.parentNode.classList.add('active');
+				document.getElementById(params.targetTabLink.id.substring(7)).classList.add('in');
+			};
+
+			document.querySelectorAll('.sf-tabs').forEach(tab => {
+				const deviceType = getDeviceType();
+				tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
+					const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
+
+					const _closestParent = closestParent(tabitem);
+
+					topicsTabAccordion[tabitem.id] = {
+						text: tabItemText,
+						isMainParent: _closestParent.flag,
+						parentLabel: _closestParent.parentLabel
+					};
+
+					// If URL hash is not present, we locate the name of the device tab
+					const sfTabNav = tabitem.parentNode.parentNode;
+					if (tabItemText === deviceType && urlHash.list === '') {
+						if (sfTabNav.querySelector('.sf-tab-item.active').classList.contains('active')) {
+							toggleTabs({
+								targetTabLink: tabitem,
+								tabNav: sfTabNav
+							});
+						}
+					}
+
+					if (urlHash.list !== '' && urlHash.list.search(tabItemText) > -1) {
+						Object.keys(topicsTabAccordion).forEach(key => {
+							if (tabItemText == topicsTabAccordion[key].text) {
+								toggleTabs({
+									targetTabLink: tabitem,
+									tabNav: sfTabNav
+								});
+							}
+						});
+					}
+				});
 			});
-		});
+
+			articleTabsInit = true;
+			console.log(topicsTabAccordion);
+		}
 	});
 
 	ready('.sf-accordion', function () {
-		const urlHashList = getURLHashList();
-		document.querySelectorAll('.sf-accordion-toggle').forEach(accordionToggle => {
-			const accordionText = accordionToggle
-				.querySelector('.sf-accordion-text')
-				.textContent.split(' ').join('-').toLowerCase();
-
-			if (typeof (urlHashList) !== 'undefined' && urlHashList.includes(accordionText)) {
-				openParent(accordionToggle);
-				accordionToggle.click();
-			}
-		});
+		if (!articleAccordionInit) {
+			const urlHashList = window.location.hash;
+			document.querySelectorAll('.sf-accordion-toggle').forEach(accordionToggle => {
+				const accordionText = accordionToggle
+					.querySelector('.sf-accordion-text')
+					.textContent.split(' ').join('-').toLowerCase();
+
+				const _closestParent = closestParent(accordionToggle);
+
+				topicsTabAccordion[accordionToggle.id] = {
+					text: accordionText,
+					isMainParent: _closestParent.flag,
+					parentLabel: _closestParent.parentLabel
+				};
+
+				if (urlHashList !== '' && urlHash.list.search(accordionText) > -1) {
+					Object.keys(topicsTabAccordion).forEach(key => {
+						if (accordionText == topicsTabAccordion[key].text) {
+							document.getElementById(key).classList.add('in');
+							return;
+						}
+					});
+				}
+			});
+
+			articleAccordionInit = true;
+		}
 	});
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapdev/gui",
-  "version": "0.2.240",
+  "version": "0.2.241",
   "description": "LEAP GUI",
   "author": "LEAP Dev",
   "license": "ISC",