@leapdev/gui 0.2.241 → 0.2.244
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/scss/xsf-crx/sf-leap.js +145 -119
- package/package.json +1 -1
|
@@ -50,8 +50,6 @@
|
|
|
50
50
|
|
|
51
51
|
//LEAP Help Centre JS for Components generated via Chrome Extension
|
|
52
52
|
(function () {
|
|
53
|
-
const topicsTabAccordion = {};
|
|
54
|
-
|
|
55
53
|
const getClosestParent = function (elem, selector) {
|
|
56
54
|
if (!Element.prototype.matches) {
|
|
57
55
|
Element.prototype.matches =
|
|
@@ -105,18 +103,157 @@
|
|
|
105
103
|
};
|
|
106
104
|
|
|
107
105
|
// #@desktop:accordion-2;sub-accordion-1@parent-accordion-1
|
|
108
|
-
|
|
106
|
+
// Set default tab via URL hash parameters or device type if present on tabs
|
|
107
|
+
window['urlHash'] = {
|
|
108
|
+
topicsTabAccordion: {},
|
|
109
|
+
articleTabsInit: false,
|
|
110
|
+
articleAccordionInit: false,
|
|
111
|
+
deviceType: getDeviceType(),
|
|
109
112
|
list: window.location.hash,
|
|
110
113
|
init: function () {
|
|
111
|
-
|
|
114
|
+
// window.urlHash.openedTopics = window.location.hash.substring(1).split('@').splice(1);
|
|
115
|
+
|
|
116
|
+
ready('.sf-tabs', function () {
|
|
117
|
+
if (!window.urlHash.articleTabsInit) {
|
|
118
|
+
|
|
119
|
+
const toggleTabs = (params) => {
|
|
120
|
+
// Remove existing active CSS classes
|
|
121
|
+
const currentTabContentID = params.tabNav.querySelector('.sf-tab-item.active').firstElementChild.id.substring(7);
|
|
122
|
+
params.tabNav.querySelector('.sf-tab-item.active').classList.remove('active');
|
|
123
|
+
document.getElementById(currentTabContentID).classList.remove('in');
|
|
124
|
+
|
|
125
|
+
//Update tab according to device with active and in css class
|
|
126
|
+
params.targetTabLink.parentNode.classList.add('active');
|
|
127
|
+
document.getElementById(params.targetTabLink.id.substring(7)).classList.add('in');
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
document.querySelectorAll('.sf-tabs').forEach(tab => {
|
|
131
|
+
tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
|
|
132
|
+
const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
|
|
133
|
+
|
|
134
|
+
const _closestParent = window.urlHash.closestParent(tabitem);
|
|
135
|
+
|
|
136
|
+
window.urlHash.topicsTabAccordion[tabitem.id] = {
|
|
137
|
+
text: tabItemText,
|
|
138
|
+
isMainParent: _closestParent.flag,
|
|
139
|
+
parentLabel: _closestParent.parentLabel,
|
|
140
|
+
directParentID: _closestParent.directParentID
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
// If URL hash is not present, we locate the name of the device tab
|
|
144
|
+
const sfTabNav = tabitem.parentNode.parentNode;
|
|
145
|
+
if (tabItemText === window.urlHash.deviceType && urlHash.list === '') {
|
|
146
|
+
if (sfTabNav.querySelector('.sf-tab-item.active').classList.contains('active')) {
|
|
147
|
+
toggleTabs({
|
|
148
|
+
targetTabLink: tabitem,
|
|
149
|
+
tabNav: sfTabNav
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
if (window.urlHash.list !== '' && window.urlHash.list.search(tabItemText) > -1) {
|
|
155
|
+
Object.keys(window.urlHash.topicsTabAccordion).forEach(key => {
|
|
156
|
+
if (tabItemText == window.urlHash.topicsTabAccordion[key].text) {
|
|
157
|
+
toggleTabs({
|
|
158
|
+
targetTabLink: tabitem,
|
|
159
|
+
tabNav: sfTabNav
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
window.urlHash.articleTabsInit = true;
|
|
168
|
+
|
|
169
|
+
if (window.location.pathname.includes('/article')) {
|
|
170
|
+
window.urlHash.observe();
|
|
171
|
+
}
|
|
172
|
+
console.log(window.urlHash.topicsTabAccordion);
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
ready('.sf-accordion', function () {
|
|
177
|
+
if (!window.urlHash.articleAccordionInit) {
|
|
178
|
+
const urlHashList = window.location.hash;
|
|
179
|
+
document.querySelectorAll('.sf-accordion-toggle').forEach(accordionToggle => {
|
|
180
|
+
const accordionText = accordionToggle
|
|
181
|
+
.querySelector('.sf-accordion-text')
|
|
182
|
+
.textContent.split(' ').join('-').toLowerCase();
|
|
183
|
+
|
|
184
|
+
const _closestParent = window.urlHash.closestParent(accordionToggle);
|
|
185
|
+
|
|
186
|
+
window.urlHash.topicsTabAccordion[accordionToggle.id] = {
|
|
187
|
+
text: accordionText,
|
|
188
|
+
isMainParent: _closestParent.flag,
|
|
189
|
+
parentLabel: _closestParent.parentLabel
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
if (urlHashList !== '' && window.urlHash.list.split(':')[1] === accordionText) {
|
|
193
|
+
Object.keys(window.urlHash.topicsTabAccordion).forEach(key => {
|
|
194
|
+
if (accordionText == window.urlHash.topicsTabAccordion[key].text) {
|
|
195
|
+
document.getElementById(key).classList.add('in');
|
|
196
|
+
|
|
197
|
+
const hasAccordionParent = getClosestParent(accordionToggle, '.sf-accordion-content');
|
|
198
|
+
if (hasAccordionParent !== null) {
|
|
199
|
+
document.getElementById(`target_${hasAccordionParent.id}`).classList.add('in');
|
|
200
|
+
}
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
});
|
|
206
|
+
|
|
207
|
+
urlHash.articleAccordionInit = true;
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
},
|
|
211
|
+
observe: function () {
|
|
212
|
+
let previousState = window.history.state;
|
|
213
|
+
let t = setInterval(function () {
|
|
214
|
+
if (previousState !== window.history.state) {
|
|
215
|
+
previousState = window.history.state;
|
|
216
|
+
clearInterval(t);
|
|
217
|
+
window.urlHash.reset();
|
|
218
|
+
}
|
|
219
|
+
}, 100);
|
|
220
|
+
},
|
|
221
|
+
closestParent: function (child) {
|
|
222
|
+
const tabContent = getClosestParent(child, '.sf-tab-content');
|
|
223
|
+
const accordionContent = getClosestParent(child, '.sf-accordion-content');
|
|
224
|
+
const parentLabel = () => {
|
|
225
|
+
if (tabContent !== null) {
|
|
226
|
+
return document.getElementById(`target_${tabContent.id}`).textContent;
|
|
227
|
+
}
|
|
228
|
+
else if (accordionContent !== null) {
|
|
229
|
+
return document.getElementById(`target_${accordionContent.id}`).querySelector('.sf-accordion-text').textContent;
|
|
230
|
+
}
|
|
231
|
+
else {
|
|
232
|
+
return '';
|
|
233
|
+
}
|
|
234
|
+
};
|
|
235
|
+
// console.log(tabContent, accordionContent);
|
|
236
|
+
return {
|
|
237
|
+
parentLabel: parentLabel().split(' ').join('-').toLowerCase(),
|
|
238
|
+
flag: tabContent !== null || accordionContent !== null ? false : true,
|
|
239
|
+
directParentID: 'test'
|
|
240
|
+
};
|
|
112
241
|
},
|
|
113
242
|
setItem: function (id) {
|
|
114
|
-
|
|
115
|
-
const
|
|
243
|
+
// console.log(window.urlHash.topicsTabAccordion);
|
|
244
|
+
const childText = window.urlHash.topicsTabAccordion[id].isMainParent ? '' : (':' + window.urlHash.topicsTabAccordion[id].text);
|
|
245
|
+
const parentText = window.urlHash.topicsTabAccordion[id].isMainParent ? window.urlHash.topicsTabAccordion[id].text : window.urlHash.topicsTabAccordion[id].parentLabel;
|
|
116
246
|
return `@${parentText}${childText}`;
|
|
247
|
+
},
|
|
248
|
+
reset: function () {
|
|
249
|
+
window.urlHash.topicsTabAccordion = {};
|
|
250
|
+
window.urlHash.articleTabsInit = false;
|
|
251
|
+
window.urlHash.articleAccordionInit = false;
|
|
252
|
+
window.urlHash.init();
|
|
117
253
|
}
|
|
118
254
|
};
|
|
119
255
|
|
|
256
|
+
window.urlHash.init();
|
|
120
257
|
// Tab and Accordion Toggling
|
|
121
258
|
document.addEventListener('click', function (event) {
|
|
122
259
|
const
|
|
@@ -157,121 +294,10 @@
|
|
|
157
294
|
className.value.indexOf('sf-tab-item-link') !== -1 ||
|
|
158
295
|
className.value.indexOf('sf-accordion-toggle') !== -1
|
|
159
296
|
) {
|
|
160
|
-
window.
|
|
297
|
+
// console.log(window.urlHash.topicsTabAccordion);
|
|
298
|
+
window.location.hash = window.urlHash.setItem(targetElem.id);
|
|
161
299
|
}
|
|
162
300
|
|
|
163
301
|
return false;
|
|
164
302
|
}, false);
|
|
165
|
-
|
|
166
|
-
// Set default tab via URL hash parameters or device type if present on tabs
|
|
167
|
-
let articleTabsInit = false;
|
|
168
|
-
let articleAccordionInit = false;
|
|
169
|
-
|
|
170
|
-
urlHash.init();
|
|
171
|
-
|
|
172
|
-
const closestParent = (child) => {
|
|
173
|
-
const tabContent = getClosestParent(child, '.sf-tab-content');
|
|
174
|
-
const accordionContent = getClosestParent(child, '.sf-accordion-content');
|
|
175
|
-
const parentLabel = () => {
|
|
176
|
-
if (tabContent !== null) {
|
|
177
|
-
return document.getElementById(`target_${tabContent.id}`).textContent;
|
|
178
|
-
}
|
|
179
|
-
else if (accordionContent !== null) {
|
|
180
|
-
return document.getElementById(`target_${accordionContent.id}`).querySelector('.sf-accordion-text').textContent;
|
|
181
|
-
}
|
|
182
|
-
else {
|
|
183
|
-
return '';
|
|
184
|
-
}
|
|
185
|
-
};
|
|
186
|
-
return {
|
|
187
|
-
parentLabel: parentLabel().split(' ').join('-').toLowerCase(),
|
|
188
|
-
flag: tabContent !== null || accordionContent !== null ? false : true
|
|
189
|
-
};
|
|
190
|
-
};
|
|
191
|
-
|
|
192
|
-
ready('.sf-tabs', function () {
|
|
193
|
-
if (!articleTabsInit) {
|
|
194
|
-
|
|
195
|
-
const toggleTabs = (params) => {
|
|
196
|
-
// Remove existing active CSS classes
|
|
197
|
-
const currentTabContentID = params.tabNav.querySelector('.sf-tab-item.active').firstElementChild.id.substring(7);
|
|
198
|
-
params.tabNav.querySelector('.sf-tab-item.active').classList.remove('active');
|
|
199
|
-
document.getElementById(currentTabContentID).classList.remove('in');
|
|
200
|
-
|
|
201
|
-
//Update tab according to device with active and in css class
|
|
202
|
-
params.targetTabLink.parentNode.classList.add('active');
|
|
203
|
-
document.getElementById(params.targetTabLink.id.substring(7)).classList.add('in');
|
|
204
|
-
};
|
|
205
|
-
|
|
206
|
-
document.querySelectorAll('.sf-tabs').forEach(tab => {
|
|
207
|
-
const deviceType = getDeviceType();
|
|
208
|
-
tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
|
|
209
|
-
const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
|
|
210
|
-
|
|
211
|
-
const _closestParent = closestParent(tabitem);
|
|
212
|
-
|
|
213
|
-
topicsTabAccordion[tabitem.id] = {
|
|
214
|
-
text: tabItemText,
|
|
215
|
-
isMainParent: _closestParent.flag,
|
|
216
|
-
parentLabel: _closestParent.parentLabel
|
|
217
|
-
};
|
|
218
|
-
|
|
219
|
-
// If URL hash is not present, we locate the name of the device tab
|
|
220
|
-
const sfTabNav = tabitem.parentNode.parentNode;
|
|
221
|
-
if (tabItemText === deviceType && urlHash.list === '') {
|
|
222
|
-
if (sfTabNav.querySelector('.sf-tab-item.active').classList.contains('active')) {
|
|
223
|
-
toggleTabs({
|
|
224
|
-
targetTabLink: tabitem,
|
|
225
|
-
tabNav: sfTabNav
|
|
226
|
-
});
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
if (urlHash.list !== '' && urlHash.list.search(tabItemText) > -1) {
|
|
231
|
-
Object.keys(topicsTabAccordion).forEach(key => {
|
|
232
|
-
if (tabItemText == topicsTabAccordion[key].text) {
|
|
233
|
-
toggleTabs({
|
|
234
|
-
targetTabLink: tabitem,
|
|
235
|
-
tabNav: sfTabNav
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
|
-
});
|
|
239
|
-
}
|
|
240
|
-
});
|
|
241
|
-
});
|
|
242
|
-
|
|
243
|
-
articleTabsInit = true;
|
|
244
|
-
console.log(topicsTabAccordion);
|
|
245
|
-
}
|
|
246
|
-
});
|
|
247
|
-
|
|
248
|
-
ready('.sf-accordion', function () {
|
|
249
|
-
if (!articleAccordionInit) {
|
|
250
|
-
const urlHashList = window.location.hash;
|
|
251
|
-
document.querySelectorAll('.sf-accordion-toggle').forEach(accordionToggle => {
|
|
252
|
-
const accordionText = accordionToggle
|
|
253
|
-
.querySelector('.sf-accordion-text')
|
|
254
|
-
.textContent.split(' ').join('-').toLowerCase();
|
|
255
|
-
|
|
256
|
-
const _closestParent = closestParent(accordionToggle);
|
|
257
|
-
|
|
258
|
-
topicsTabAccordion[accordionToggle.id] = {
|
|
259
|
-
text: accordionText,
|
|
260
|
-
isMainParent: _closestParent.flag,
|
|
261
|
-
parentLabel: _closestParent.parentLabel
|
|
262
|
-
};
|
|
263
|
-
|
|
264
|
-
if (urlHashList !== '' && urlHash.list.search(accordionText) > -1) {
|
|
265
|
-
Object.keys(topicsTabAccordion).forEach(key => {
|
|
266
|
-
if (accordionText == topicsTabAccordion[key].text) {
|
|
267
|
-
document.getElementById(key).classList.add('in');
|
|
268
|
-
return;
|
|
269
|
-
}
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
});
|
|
273
|
-
|
|
274
|
-
articleAccordionInit = true;
|
|
275
|
-
}
|
|
276
|
-
});
|
|
277
303
|
})();
|