@leapdev/gui 0.2.241 → 0.2.242

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

@@ -50,8 +50,6 @@
 
 //LEAP Help Centre JS for Components generated via Chrome Extension
 (function () {
-	const topicsTabAccordion = {};
-
 	const getClosestParent = function (elem, selector) {
 		if (!Element.prototype.matches) {
 			Element.prototype.matches =
@@ -105,18 +103,156 @@
 	};
 
 	// #@desktop:accordion-2;sub-accordion-1@parent-accordion-1
+	// Set default tab via URL hash parameters or device type if present on tabs
 	const urlHash = {
+		topicsTabAccordion: {},
+		articleTabsInit: false,
+		articleAccordionInit: false,
+		deviceType: getDeviceType(),
 		list: window.location.hash,
 		init: function () {
-			this.openedTopics = window.location.hash.substring(1).split('@').splice(1);
+			urlHash.openedTopics = window.location.hash.substring(1).split('@').splice(1);
+
+			ready('.sf-tabs', function () {
+				if (!urlHash.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 => {
+						tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
+							const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
+
+							const _closestParent = urlHash.closestParent(tabitem);
+
+							urlHash.topicsTabAccordion[tabitem.id] = {
+								text: tabItemText,
+								isMainParent: _closestParent.flag,
+								parentLabel: _closestParent.parentLabel,
+								directParentID: _closestParent.directParentID
+							};
+
+							// If URL hash is not present, we locate the name of the device tab
+							const sfTabNav = tabitem.parentNode.parentNode;
+							if (tabItemText === urlHash.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(urlHash.topicsTabAccordion).forEach(key => {
+									if (tabItemText == urlHash.topicsTabAccordion[key].text) {
+										toggleTabs({
+											targetTabLink: tabitem,
+											tabNav: sfTabNav
+										});
+									}
+								});
+							}
+						});
+					});
+
+					urlHash.articleTabsInit = true;
+					console.log(urlHash.topicsTabAccordion);
+				}
+			});
+
+			ready('.sf-accordion', function () {
+				if (!urlHash.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 = urlHash.closestParent(accordionToggle);
+
+						urlHash.topicsTabAccordion[accordionToggle.id] = {
+							text: accordionText,
+							isMainParent: _closestParent.flag,
+							parentLabel: _closestParent.parentLabel
+						};
+
+						if (urlHashList !== '' && urlHash.list.split(':')[1] === accordionText) {
+							Object.keys(urlHash.topicsTabAccordion).forEach(key => {
+								if (accordionText == urlHash.topicsTabAccordion[key].text) {
+									document.getElementById(key).classList.add('in');
+
+									const hasAccordionParent = getClosestParent(accordionToggle, '.sf-accordion-content');
+									if (hasAccordionParent !== null) {
+										document.getElementById(`target_${hasAccordionParent.id}`).classList.add('in');
+									}
+									return;
+								}
+							});
+						}
+					});
+
+					urlHash.articleAccordionInit = true;
+				}
+			});
+
+			if (window.location.pathname.includes('/article')) {
+				urlHash.observe();
+			}
+		},
+		observe: function () {
+			const previousState = window.history.state;
+			let t = setInterval(function () {
+				if (previousState !== window.history.state) {
+					previousState = window.history.state;
+					clearInterval(t);
+					urlHash.reset();
+				}
+			}, 100);
+		},
+		closestParent: function (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 '';
+				}
+			};
+			// console.log(tabContent, accordionContent);
+			return {
+				parentLabel: parentLabel().split(' ').join('-').toLowerCase(),
+				flag: tabContent !== null || accordionContent !== null ? false : true,
+				directParentID: 'test'
+			};
 		},
 		setItem: function (id) {
-			const childText = topicsTabAccordion[id].isMainParent ? '' : (':' + topicsTabAccordion[id].text);
-			const parentText = topicsTabAccordion[id].isMainParent ? topicsTabAccordion[id].text : topicsTabAccordion[id].parentLabel;
+			const childText = urlHash.topicsTabAccordion[id].isMainParent ? '' : (':' + urlHash.topicsTabAccordion[id].text);
+			const parentText = urlHash.topicsTabAccordion[id].isMainParent ? urlHash.topicsTabAccordion[id].text : urlHash.topicsTabAccordion[id].parentLabel;
 			return `@${parentText}${childText}`;
+		},
+		reset: function () {
+			urlHash.topicsTabAccordion = {};
+			urlHash.articleTabsInit = false;
+			urlHash.articleAccordionInit = false;
+			urlHash.init();
 		}
 	};
 
+	urlHash.init();
 	// Tab and Accordion Toggling
 	document.addEventListener('click', function (event) {
 		const
@@ -157,121 +293,10 @@
 			className.value.indexOf('sf-tab-item-link') !== -1 ||
 			className.value.indexOf('sf-accordion-toggle') !== -1
 		) {
+			// console.log(urlHash.topicsTabAccordion);
 			window.location.hash = urlHash.setItem(targetElem.id);
 		}
 
 		return false;
 	}, false);
-
-	// Set default tab via URL hash parameters or device type if present on tabs
-	let articleTabsInit = false;
-	let articleAccordionInit = false;
-
-	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
-		};
-	};
-
-	ready('.sf-tabs', function () {
-		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 () {
-		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.241",
+  "version": "0.2.242",
   "description": "LEAP GUI",
   "author": "LEAP Dev",
   "license": "ISC",