|
44 | 44 | setCloudServerDefault(); |
45 | 45 | window.addEventListener('popstate', onPopPricingState); |
46 | 46 | onPopPricingState(); |
| 47 | + setTimeout(()=> popCopyButton(), 200); |
47 | 48 | }); |
48 | 49 | } |
49 | 50 |
|
|
57 | 58 | } |
58 | 59 |
|
59 | 60 | function onPopPricingState() { |
60 | | - var params = Qs.parse(window.location.search, { ignoreQueryPrefix: true }); |
61 | | - var sectionId = params['section'] || params['active']; |
| 61 | + const params = Qs.parse(window.location.search, { ignoreQueryPrefix: true }); |
| 62 | + let sectionId = params['section'] || params['active']; |
62 | 63 | if (!sectionId) { |
63 | 64 | sectionId = '{{page.defaultActivePricingSection}}'; |
64 | 65 | } |
65 | 66 | setActivePricingSection(sectionId); |
66 | | - var productId = params['product']; |
| 67 | + const productId = params['product']; |
67 | 68 | if (productId) { |
68 | 69 | setActiveProductSection(productId); |
69 | 70 | } |
70 | | - var solutionId = params['solution']; |
| 71 | + let solutionId = params['solution']; |
71 | 72 | if (solutionId) { |
72 | 73 | setActiveSolutionSection(solutionId); |
73 | 74 | } |
| 75 | + let faqSection = params['faqSection']; |
| 76 | + if (faqSection) { |
| 77 | + switchFaqSection(faqSection); |
| 78 | + const questionEl = document.querySelector(`div[data-item-id="${window.location.hash.replace('#', '')}"]`); |
| 79 | + if (Array.from(questionEl.parentNode.children).indexOf(questionEl) > 6) { |
| 80 | + loadMoreFaq(questionEl.parentNode.children[6]); |
| 81 | + } |
| 82 | + checkIfOpenedRetryClear(`div[data-item-id="${window.location.hash.replace('#', '')}"]`); |
| 83 | + } |
74 | 84 | } |
75 | 85 |
|
76 | 86 | function activatePricingSection(sectionId) { |
77 | 87 | updateQueryParam({section: sectionId, product: null, solution: null}); |
78 | 88 | setActivePricingSection(sectionId); |
| 89 | + switchFaqContainer(sectionId); |
79 | 90 | } |
80 | 91 |
|
81 | 92 | function activateProductSection(productId) { |
|
95 | 106 | setActiveSolutionSection(solutionId); |
96 | 107 | } |
97 | 108 |
|
98 | | - function updateQueryParam(setParams) { |
| 109 | + function updateQueryParam(setParams, clear = false) { |
99 | 110 | var params = Qs.parse(window.location.search, { ignoreQueryPrefix: true }); |
100 | 111 | for (var paramName of Object.keys(setParams)) { |
101 | 112 | var paramValue = setParams[paramName]; |
|
105 | 116 | params[paramName] = undefined; |
106 | 117 | } |
107 | 118 | } |
| 119 | + if (clear) { |
| 120 | + delete params.faqSection; |
| 121 | + } |
108 | 122 | var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + Qs.stringify(params); |
109 | | - if (window.location.hash) { |
| 123 | + if (window.location.hash && !clear) { |
110 | 124 | newurl += window.location.hash; |
111 | 125 | } |
112 | 126 | window.history.pushState({ path: newurl }, '', newurl); |
|
131 | 145 | var solutionId = getDefaultSolutionIdBySectionId(sectionId); |
132 | 146 | if (solutionId) { |
133 | 147 | setActiveSolutionSection(solutionId); |
| 148 | + } else { |
| 149 | + switchFaqContainer('thingsboard-ce'); |
134 | 150 | } |
135 | 151 | } |
136 | 152 |
|
|
148 | 164 | var solutionId = getDefaultSolutionIdBySectionId(sectionId); |
149 | 165 | setActiveSolutionSection(solutionId); |
150 | 166 | reportPriceOpen(sectionId); |
| 167 | + switchFaqContainer(sectionId); |
151 | 168 | } |
152 | 169 | } |
153 | 170 |
|
|
169 | 186 | var headerId = $solutionButtonElement.attr("data-description-toggle"); |
170 | 187 | $('.pricing-div .pricing-section'+id).addClass("active"); |
171 | 188 | $('.pricing-content-header .pricing-content-description'+headerId).addClass("active"); |
| 189 | + switchFaqContainer(sectionId); |
172 | 190 | } |
173 | 191 | } |
174 | 192 |
|
|
247 | 265 | "event_category": solutionId |
248 | 266 | }); |
249 | 267 | } |
| 268 | + |
| 269 | + let currentFaqContainer = 'thingsboard-cloud'; |
| 270 | + let sectionSwitched = false; |
| 271 | + |
| 272 | + function switchFaqContainer(containerId) { |
| 273 | + if (changeFaqHeader(containerId)) { |
| 274 | + currentFaqContainer = containerId; |
| 275 | + document.querySelectorAll('#FAQ section').forEach(el => el.classList.remove('active')); |
| 276 | + document.getElementById(`faq-${containerId}`).classList.add('active'); |
| 277 | + } |
| 278 | + } |
| 279 | + |
| 280 | + function changeFaqHeader(id) { |
| 281 | + let correspondingHeader; |
| 282 | + switch (id) { |
| 283 | + case 'thingsboard-ce': |
| 284 | + correspondingHeader = 'ThingsBoard Community Edition FAQs'; |
| 285 | + break; |
| 286 | + case 'thingsboard-cloud': |
| 287 | + correspondingHeader = 'ThingsBoard Cloud FAQs'; |
| 288 | + break; |
| 289 | + case 'pe-pay-as-you-go': |
| 290 | + correspondingHeader = 'ThingsBoard Professional Edition: Self-managed Subscriptions FAQs'; |
| 291 | + break; |
| 292 | + case 'pe-perpetual': |
| 293 | + correspondingHeader = 'ThingsBoard Professional Edition: Self-managed Perpetual FAQs'; |
| 294 | + break; |
| 295 | + case 'trendz-pay-as-you-go': |
| 296 | + correspondingHeader = 'Trendz Analytics: Self-managed Subscriptions FAQs'; |
| 297 | + break; |
| 298 | + case 'trendz-perpetual': |
| 299 | + correspondingHeader = 'Trendz Analytics: Self-managed Perpetual FAQs'; |
| 300 | + break; |
| 301 | + case 'trendz-cloud': |
| 302 | + correspondingHeader = 'Trendz Analytics Cloud FAQs'; |
| 303 | + break; |
| 304 | + case 'edge-community': |
| 305 | + correspondingHeader = 'Edge Community FAQs'; |
| 306 | + break; |
| 307 | + case 'edge-pay-as-you-go': |
| 308 | + correspondingHeader = 'Edge Subscriptions FAQs'; |
| 309 | + break; |
| 310 | + case 'edge-perpetual': |
| 311 | + correspondingHeader = 'Edge Perpetual FAQs'; |
| 312 | + break; |
| 313 | + } |
| 314 | + if (correspondingHeader) { |
| 315 | + document.getElementById('faq-header').innerText = correspondingHeader; |
| 316 | + } |
| 317 | + return correspondingHeader; |
| 318 | + } |
| 319 | + |
| 320 | + function switchFaqSection(sectionId, el) { |
| 321 | + if (el?.classList.contains('active')) return |
| 322 | + document.querySelectorAll(`#faq-${currentFaqContainer} .faq-section-option`).forEach(el => el.classList.remove('active')); |
| 323 | + document.querySelectorAll(`#faq-${currentFaqContainer} .pi-accordion`).forEach(el => el.classList.remove('active')); |
| 324 | + document.getElementById(`faq-${currentFaqContainer}-${sectionId}`).classList.add('active'); |
| 325 | + el ? el.classList.add('active') : document.querySelector(`#faq-${currentFaqContainer} #${sectionId}`).classList.add('active'); |
| 326 | + sectionSwitched = true; |
| 327 | + } |
| 328 | + |
| 329 | + function loadMoreFaq(el) { |
| 330 | + while(el) { |
| 331 | + el.classList.toggle('hidden'); |
| 332 | + el = el.nextElementSibling; |
| 333 | + } |
| 334 | + } |
| 335 | + |
| 336 | + function copyQuestionLink(event, questionId, button) { |
| 337 | + event.stopPropagation(); |
| 338 | + const params = Qs.parse(window.location.search, { ignoreQueryPrefix: true }); |
| 339 | + params['faqSection'] = document.querySelector(`#faq-${currentFaqContainer} .faq-section-option.active`).id; |
| 340 | + const questionUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + Qs.stringify(params) + '#' + questionId; |
| 341 | + const $temp = $("<input>"); |
| 342 | + $("body").append($temp); |
| 343 | + window.getSelection().removeAllRanges(); |
| 344 | + $temp.val(questionUrl).select(); |
| 345 | + document.execCommand("copy"); |
| 346 | + $temp.remove(); |
| 347 | + button.classList.toggle('copied'); |
| 348 | + const tooltipEl = button.firstElementChild; |
| 349 | + tooltipEl.innerHTML = "Copied"; |
| 350 | + setTimeout(() => { |
| 351 | + tooltipEl.innerHTML = 'Copy question link'; |
| 352 | + button.classList.toggle('copied'); |
| 353 | + }, 1500); |
| 354 | + } |
| 355 | + |
| 356 | + function popCopyButton() { |
| 357 | + if (document.querySelector('.item').querySelector('.title')) { |
| 358 | + document.querySelectorAll('.item').forEach(el => { |
| 359 | + const clipButton = $(` |
| 360 | + <button class="clipboard-btn" onmousedown="this.style.backgroundColor='#e8f1ff'" |
| 361 | + onmouseup="this.style.removeProperty('background-color')" |
| 362 | + onclick="copyQuestionLink(event, '${el.getAttribute('data-item-id')}', this)"> |
| 363 | + <span class="tooltiptext">Copy question link</span> |
| 364 | + </button>`); |
| 365 | + $(el).find('.title').append(clipButton); |
| 366 | + }); |
| 367 | + } else { |
| 368 | + setTimeout(() => popCopyButton(), 100); |
| 369 | + } |
| 370 | + } |
| 371 | + |
| 372 | + function checkIfOpenedRetryClear(questionId) { |
| 373 | + const question = document.querySelector(questionId); |
| 374 | + if (question.classList.contains('on')){ |
| 375 | + updateQueryParam({}, true); |
| 376 | + } else { |
| 377 | + setTimeout(() => checkIfOpenedRetryClear(questionId), 100) |
| 378 | + } |
| 379 | + } |
| 380 | + |
250 | 381 | </script> |
251 | 382 |
|
252 | 383 | {% include cookie-consent.html %} |
|
0 commit comments