1class ScrCookieBar { 2 constructor( 3 necessaryScripts, analyticsScripts, marketingScripts, //scripts list 4 necessaryCookies, analyticsCookies, marketingCookies, //cookies list 5 textStringsObj, //object with text variables 6 buttonsColors //object with colors strings 7 ) { 8 this.isNecessaryCookie = true; 9 this.isAnalyticsCookie = false; 10 this.isMarketingCookie = false; 11 this.cookieString = '1-0-0'; 12 this.necessaryScripts = necessaryScripts; 13 this.analyticsScripts = analyticsScripts; 14 this.marketingScripts = marketingScripts; 15 this.necessaryCookies = necessaryCookies; 16 this.analyticsCookies = analyticsCookies; 17 this.marketingCookies = marketingCookies; 18 this.textStrings = textStringsObj; 19 this.buttonsColors = buttonsColors; 20 21 /*** Base html as strings array ***/ 22 this.popupHtml = `<div class="scr-adv-cookies__sub" id="cookies-simple"> 23 <h3 class="cookie-h3">${this.textStrings.cookies__01_hl}</h3> 24 25 <p class="cookie-p">${this.textStrings.cookies__01_p} 26 <a class="cookie-a" href="${this.textStrings.cookies_learn_more_link}">${this.textStrings.cookies__01_bt_learn_more}</a> 27 </p> 28 29 <div class="scr-adv-cookies__close__wrp"> 30 <button 31 id="js_cookies_manage" 32 class="cookie-button scr-adv-cookies__more scr-adv-cookies__close__btn" 33 > 34 ${this.textStrings.cookies__01_bt_settings} 35 </button> 36 <div class="scr-adv-cookies__close__r"> 37 <button class="cookie-button scr-adv-cookies__more js_cookies_none scr-adv-cookies__close__btn"> 38 ${this.textStrings.cookies__01_bt_none} 39 </button> 40 <button class="cookie-button scr-adv-cookies__bt js_cookies_all scr-adv-cookies__close__btn"> 41 ${this.textStrings.cookies__01_bt_all} 42 </button> 43 </div> 44 </div> 45 </div> 46 47 <div class="scr-adv-cookies__sub hidden" id="cookies-detail"> 48 <h3 class="cookie-h3" >${this.textStrings.cookies__01_hl}</h3> 49 <div class="scr-adv-cookies__tabs"> 50 <button 51 id="cookie_tab_0" 52 class="cookie-button scr-adv-cookies__tabbt active" 53 data-tab="0" 54 > 55 ${this.textStrings.cookies__02_tab} 56 </button> 57 <button 58 id="cookie_tab_1" 59 class="cookie-button scr-adv-cookies__tabbt" 60 data-tab="1" 61 > 62 ${this.textStrings.cookies__03_tab} 63 </button> 64 </div> 65 66 <div class="scr-adv-cookies__tabscd"> 67 <p class="cookie-p">${this.textStrings.cookies__02_p} 68 <a class="cookie-a" href="${this.textStrings.cookies_learn_more_link}">${this.textStrings.cookies__01_bt_learn_more}</a> 69 <br/><br/><br/> 70 </p> 71 72 <div class="scr-adv-cookies__tabscdi scr-adv-cookies__lt" data-index="0"> 73 <form class="scr-adv-cookies__form"> 74 <div class="scr-adv-cookies__form-chk"> 75 <div class="cookie-chkbox"> 76 <input 77 id="scr-adv-cookies__nesseary" 78 type="checkbox" 79 name="scr-adv-cookies__nesseary" 80 required="required" 81 disabled="disabled" 82 checked="checked" 83 /> 84 <span></span> 85 </div> 86 <p class="cookie-p scr-adv-cookies__form-chk-p"><strong>${this.textStrings.cookies__02_checkHL_1}</strong><br/> 87 <span class="scr-adv-cookies__inf">${this.textStrings.cookies__02_checkTXT_1}</span> 88 </p> 89 </div> 90 91 <div class="scr-adv-cookies__form-chk form-chkbox"> 92 <div class="cookie-chkbox"> 93 <input 94 id="scr-adv-cookies__analytics" 95 type="checkbox" 96 name="scr-adv-cookies__analytics" 97 /> 98 <span></span> 99 </div>
100 <p class="cookie-p scr-adv-cookies__form-chk-p"><strong>${this.textStrings.cookies__02_checkHL_2}</strong><br/> 101 <span class="scr-adv-cookies__inf">${this.textStrings.cookies__02_checkTXT_2}</span> 102 </p> 103 </div> 104 105 <div class="scr-adv-cookies__form-chk form-chkbox"> 106 <div class="cookie-chkbox"> 107 <input 108 id="scr-adv-cookies__marketing" 109 type="checkbox" 110 name="scr-adv-cookies__marketing" 111 /> 112 <span></span> 113 </div> 114 <p class="cookie-p scr-adv-cookies__form-chk-p"><strong>${this.textStrings.cookies__02_checkHL_3}</strong><br/> 115 <span class="scr-adv-cookies__inf">${this.textStrings.cookies__02_checkTXT_3}</span> 116 </p> 117 </div> 118 </form> 119 </div> 120 121 <div class="scr-adv-cookies__tabscdi scr-adv-cookies__declaration hidden" data-index="1"> 122 <p class="cookie-p"> 123 <strong>${this.textStrings.cookies__02_checkHL_1}</strong><br/> 124 <span class="scr-adv-cookies__inf">${this.textStrings.cookies__02_checkTXT_1}</span> 125 </p> 126 127 <!-- Necessary cookies table --> 128 <div id="necessary-table-wrap" class="table-wrap"></div> 129 130 <p class="cookie-p"> 131 <strong>${this.textStrings.cookies__02_checkHL_2}</strong><br/> 132 <span class="scr-adv-cookies__inf">${this.textStrings.cookies__02_checkTXT_2}</span> 133 </p> 134 135 <!-- Analytics cookies table --> 136 <div id="analytics-table-wrap" class="table-wrap"></div> 137 138 <p class="cookie-p"> 139 <strong>${this.textStrings.cookies__02_checkHL_3}</strong><br/> 140 <span class="scr-adv-cookies__inf">${this.textStrings.cookies__02_checkTXT_3}</span> 141 </p> 142 143 <!-- Marketing cookies table --> 144 <div id="marketing-table-wrap" class="table-wrap"></div> 145 </div> 146 147 </div> 148 149 <div class="scr-adv-cookies__close__wrp"> 150 <button 151 id="js_cookies__save" 152 class="cookie-button scr-adv-cookies__more scr-adv-cookies__close__btn" 153 > 154 ${this.textStrings.cookies__02_bt_save} 155 </button> 156 <div class="scr-adv-cookies__close__r"> 157 <button class="cookie-button scr-adv-cookies__more js_cookies_none scr-adv-cookies__close__btn"> 158 ${this.textStrings.cookies__01_bt_none} 159 </button> 160 <button class="cookie-button scr-adv-cookies__bt js_cookies_all scr-adv-cookies__close__btn"> 161 ${this.textStrings.cookies__01_bt_all} 162 </button> 163 </div> 164 </div> 165 166 </div> 167 `; 168 } 169 addEvents() { 170 //Settings button 171 document.getElementById('js_cookies_manage').onclick = () => { 172 this.onClickSettings(); 173 }; 174 175 //Select none buttons 176 const selectNoneBtns = document.getElementsByClassName('js_cookies_none'); 177 Array.from(selectNoneBtns).forEach((el) => { 178 el.onclick = () => { 179 this.onClickNoneBtn(); 180 } 181 }); 182 183 //Select all buttons 184 const selectAllBtns = document.getElementsByClassName('js_cookies_all'); 185 Array.from(selectAllBtns).forEach((el) => { 186 el.onclick = () => { 187 this.onClickAllBtn(); 188 } 189 }); 190 191 //Save button 192 document.getElementById('js_cookies__save').onclick = () => { 193 this.onClickSaveBtn(); 194 }; 195 196 //Tab 0 197 document.getElementById('cookie_tab_0').onclick = () => { 198 this.onClickTab_0(); 199 }; 200 201 //Tab 1 202 document.getElementById('cookie_tab_1').onclick = () => { 203 this.onClickTab_1(); 204 }; 205 206 //Analytics checkbox 207 document.getElementById('scr-adv-cookies__analytics').onchange = () => { 208 this.toggleAnalyticsChechbox(); 209 }; 210 211 //Marketing checkbox 212 document.getElementById('scr-adv-cookies__marketing').onchange = () => { 213 this.toggleMarketingChechbox(); 214 }; 215 } 216 getCookies() {
217 const cookies = this.getScrCookie('_scr_cookie'); 218 if (!cookies) { 219 this.renderCookieBar(); 220 } else { 221 const cookiesArr = cookies.split('-'); 222 if (cookiesArr.length === 3){ 223 this.isNecessaryCookie = !!Number(cookiesArr[0]); 224 this.isAnalyticsCookie = !!Number(cookiesArr[1]); 225 this.isMarketingCookie = !!Number(cookiesArr[2]); 226 this.cookieString = cookies; 227 228 //Set defferent cookies 229 this.setCookies(); 230 } 231 } 232 } 233 getScrCookie(name) { 234 let cookieVal = `; ${document.cookie}`; 235 let parts = cookieVal.split(`; ${name}=`); 236 if (parts.length === 2) return parts.pop().split(';').shift(); 237 } 238 239 //Set cookies into browser 240 setNecessaryCookies() { 241 document.cookie = `_scr_cookie=${this.cookieString}; path=/; max-age=${60 * 60 * 24 * 14};`; // expires in two weeks 242 } 243 244 /* SET AND RUN SCRIPTS */ 245 setScriptsArray(scriptsArr, scriptType) { 246 scriptsArr.forEach(script => { 247 this.setScriptAtTheHeadTop(script.strHead, scriptType); 248 this.setScriptAtTheBodyTop(script.strbody, scriptType); 249 }); 250 } 251 252 setScriptAtTheHeadTop(scriptString, scriptType) { 253 const headElem = document.getElementsByTagName('head')[0]; 254 const scriptIsAdded = this.checkDomElements(headElem, scriptType); 255 const newScript = document.createElement('script'); 256 newScript.dataset.type = scriptType; 257 newScript.textContent = scriptString; 258 if (!scriptIsAdded) headElem.prepend(newScript); 259 } 260 261 setScriptAtTheBodyTop(scriptString, scriptType) { 262 const scriptIsAdded = this.checkDomElements(document.body, scriptType); 263 if (!scriptIsAdded) document.body.insertAdjacentHTML('afterbegin', scriptString); 264 } 265 266 checkDomElements(parentEl, scriptType) { 267 let exists = false; 268 parentEl.childNodes.forEach(el => { 269 if (el && (el.dataset !== undefined) && el.dataset.type && (el.dataset.type === scriptType)) { 270 exists = true; 271 } 272 }); 273 return exists; 274 } 275 276 //DELETE scripts code from DOM 277 deleteScripts(scriptsArr, scriptType, domElem) { 278 const list = domElem; 279 let deletedElems = 0; 280 for (let i = 0; i < list.childNodes.length; i++) { 281 const elem = list.childNodes[i]; 282 if (elem.dataset.type === scriptType) { 283 list.removeChild(elem); 284 deletedElems++; 285 if (deletedElems === scriptsArr.length) break; 286 } 287 } 288 } 289 290 deleteCookiesScripts(scriptsArr, scriptType) { 291 const headElem = document.getElementsByTagName('head')[0]; 292 const bodyElem = document.body; 293 this.deleteScripts(scriptsArr, scriptType, headElem); 294 this.deleteScripts(scriptsArr, scriptType, bodyElem); 295 } 296 297 // 1. bg - background-color for pale buttons 298 // 2. color - text color for pale buttons 299 // 3. activeBg - background-color for bright buttons, buttons hover and checked checkboxes 300 // 4. activeColor - text color for bright buttons 301 // 5. activeBgImg - background-image for bright buttons 302 setButtonsColors(bg, color, activeBg, activeColor, activeBgImg = false) { 303 const style = document.createElement('style'); 304 const brightBtnBg = activeBgImg ? `background-image: ${activeBgImg};` : `background-color: ${activeBg};`; 305 style.innerHTML = 306 'button.scr-adv-cookies__bt {' + 307 `${brightBtnBg}` + 308 `color: ${activeColor};` + 309 '}' + ' ' + 310 311 'button.scr-adv-cookies__more {' + 312 `background-color: ${bg};` + 313 `color: ${color};` + 314 '}' + ' ' + 315 316 'button.scr-adv-cookies__more:hover {' + 317 `${brightBtnBg}` + 318 `color: ${activeColor};` + 319 '}' + ' ' + 320 321 '.cookie-chkbox > input:checked + span {' + 322 `background-color: ${activeBg};` + 323 '}' + ' ' + 324 325 '.scr-adv-cookies__form-chk > a {' + 326 `color: ${activeBg};` + 327 '}'; 328 329 document.getElementsByTagName('head')[0].appendChild(style); 330 } 331 332 //SET COOKIES 333 setCookies() { 334 335 window.dataLayer = window.dataLayer || []; 336 function gtag(){dataLayer.push(arguments);} 337 338 // set default value for consent 339 gtag('consent', 'default', { 340 'functionality_storage': 'granted', 341 'security_storage': 'granted', 342 'ad_storage': 'denied', 343 'ad_user_data': 'denied', 344 'ad_personalization': 'denied', 345 'personalization_storage': 'denied',
346 'analytics_storage': 'denied', 347 }); 348 349 // update analytics consent config 350 function updateAnalyticsConsent(value) { 351 gtag('consent', 'update', { 352 'analytics_storage': value, 353 }) 354 } 355 356 // update marketing consent config 357 function updateMarketingConsent(value) { 358 gtag('consent', 'update', { 359 'ad_storage': value, 360 'ad_user_data': value, 361 'ad_personalization': value, 362 'personalization_storage': value, 363 }) 364 } 365 366 if (this.isNecessaryCookie) { 367 this.setNecessaryCookies(); 368 } 369 if (this.isAnalyticsCookie) { 370 this.setScriptsArray(this.analyticsScripts, 'analyticsScript'); 371 updateAnalyticsConsent('granted') 372 } else { 373 this.deleteCookiesScripts(this.analyticsScripts, 'analyticsScript'); 374 updateAnalyticsConsent('denied') 375 } 376 if (this.isMarketingCookie) { 377 this.setScriptsArray(this.marketingScripts, 'marketingScript'); 378 updateMarketingConsent('granted') 379 } 380 else { 381 this.deleteCookiesScripts(this.marketingScripts, 'marketingScript'); 382 updateMarketingConsent('denied') 383 384 } 385 } 386 387 //MAIN RENDER 388 renderCookieBar() { 389 const popup = document.createElement('div'); 390 popup.setAttribute("id", "scr-adv-cookies"); 391 //Add html as string 392 popup.innerHTML = this.popupHtml; 393 document.body.appendChild(popup); 394 395 //COOKIE BAR IS CREATED NOW! 396 397 const analyticsCheckbox = document.getElementById('scr-adv-cookies__analytics'); 398 const marketingCheckbox = document.getElementById('scr-adv-cookies__marketing'); 399 400 //Set checkboxes 401 document.getElementById('scr-adv-cookies__nesseary').checked = this.isNecessaryCookie; 402 analyticsCheckbox.checked = this.isAnalyticsCookie; 403 marketingCheckbox.checked = this.isMarketingCookie; 404 405 //Render tables and checkboxes data
406 const necessaryCookiesTable = this.renderCookiesTable(this.necessaryCookies); 407 document.getElementById('necessary-table-wrap').innerHTML = necessaryCookiesTable; 408 409 //Analytics cookies 410 if (this.analyticsCookies) { 411 const analyticsCookiesTable = this.renderCookiesTable(this.analyticsCookies); 412 document.getElementById('analytics-table-wrap').innerHTML = analyticsCookiesTable; 413 analyticsCheckbox.dataset.cookies = this.analyticsCookies[6]; 414 analyticsCheckbox.dataset.cookiesDomain = this.analyticsCookies[1]; 415 } 416 417 //Marketing cookies 418 if (this.marketingCookies) { 419 const marketingCookiesTable = this.renderCookiesTable(this.marketingCookies); 420 document.getElementById('marketing-table-wrap').innerHTML = marketingCookiesTable; 421 marketingCheckbox.dataset.cookies = this.marketingCookies[6]; 422 marketingCheckbox.dataset.cookiesDomain = this.marketingCookies[1]; 423 } 424 425 //Add click() and other events to the elementsS 426 this.addEvents(); 427 428 //Set buttons colors 429 this.setButtonsColors(this.buttonsColors.bg, this.buttonsColors.color, 430 this.buttonsColors.activeBg, this.buttonsColors.activeColor, this.buttonsColors.activeBgImg); 431 } 432 433 //Render tables for cookies list 434 renderCookiesTable(cookies) { 435 let header = ''; 436 for (let i = 0; i < 4; i++) { 437 header += `<th class="cookie-table-th">${this.textStrings.cookies__02_tablehead[i]}</th>`; 438 } 439 440 if (cookies[0].txt.length !== 0) header += `<th class="cookie-table-th">${this.textStrings.cookies__02_tablehead[4]}</th>`; 441 442 let tableRows = ''; 443 for (let i = 0; i < cookies.length; i++) { 444 tableRows += this.renderTableRow(cookies[i]); 445 } 446 447 const tableHtml =` 448 <table class="cookie-table"> 449 <thead>${header}</thead> 450 <tbody>${tableRows}</tbody> 451 </table> 452 `; 453 return tableHtml; 454 } 455 456 renderTableRow(row) { 457 let tableRow = ''; 458 let defRow = `<td>${row.name}</td><td>${row.location}</td><td>${row.location2}</td><td>${row.expTime}</td>`; 459 let descRow = ''; 460 461 if (row.txt.length !== 0) { 462 tableRow = ` 463 <tr class="cookie-table-tr"> 464 ${defRow} 465 <td><span class="cookie-table-td-span">${row.txt}</span></td> 466 </tr> 467 `; 468 } else { 469 tableRow = ` 470 <tr class="cookie-table-tr"> 471 ${defRow} 472 </tr> 473 `; 474 } 475 476 if (row.desc.length !== 0) descRow = 477 `<tr class="cookie-table-tr"> 478 <td colspan="5"><p class="cookie-p cookie-table-td-p">${row.desc}</p></td> 479 </tr>`; 480 481 const rows = [` 482 ${tableRow} 483 ${descRow} 484 `]; 485 return rows; 486 } 487 488 //SAVE COOKIES AND CLOSE POPUP 489 onClickSaveBtn() { 490 const popup = document.querySelector('#scr-adv-cookies'); 491 popup.style.visibility = "hidden"; 492 popup.style.zIndex = -1; 493 document.querySelector('#cookies-simple').classList.remove('hidden'); 494 document.querySelector('#cookies-detail').classList.add('hidden'); 495 496 //Compose all cookie string 497 const necessaryCookieVal = this.isNecessaryCookie ? 1 : 0; 498 const analyticsCookieVal = this.isAnalyticsCookie ? 1 : 0; 499 const marketingCookieVal = this.isMarketingCookie ? 1 : 0; 500 const cookieString = `${necessaryCookieVal}-${analyticsCookieVal}-${marketingCookieVal}`; 501 this.cookieString = cookieString; 502 503 //Set defferent cookies 504 this.setCookies(); 505 } 506 507 onClickAllBtn() { 508 //DOM elements 509 document.getElementById('scr-adv-cookies__nesseary').checked = true; 510 document.getElementById('scr-adv-cookies__analytics').checked = true; 511 document.getElementById('scr-adv-cookies__marketing').checked = true; 512 513 //Data 514 this.isNecessaryCookie = true; 515 this.isAnalyticsCookie = true; 516 this.isMarketingCookie = true; 517 518 this.onClickSaveBtn(); 519 } 520 521 onClickNoneBtn() { 522 //DOM elements 523 document.getElementById('scr-adv-cookies__nesseary').checked = true; 524 document.getElementById('scr-adv-cookies__analytics').checked = false; 525 document.getElementById('scr-adv-cookies__marketing').checked = false; 526 527 //Data 528 this.isNecessaryCookie = true; 529 this.isAnalyticsCookie = false;
530 this.isMarketingCookie = false; 531 532 this.onClickSaveBtn(); 533 } 534 535 onClickTab_0() { 536 const cookie_tab_0 = document.getElementById('cookie_tab_0'); 537 const cookies_tab_cd = document.getElementsByClassName('scr-adv-cookies__tabscdi'); 538 539 for (let i = 0; i < cookies_tab_cd.length; i++) { 540 const cd = cookies_tab_cd[i]; 541 cd.classList.add('hidden'); 542 if(cd.dataset && (cd.dataset.index === cookie_tab_0.dataset.tab)) { 543 cd.classList.remove('hidden'); 544 } 545 } 546 cookie_tab_0.classList.add('active'); 547 document.getElementById('cookie_tab_1').classList.remove('active'); 548 } 549 550 onClickTab_1() { 551 const cookie_tab_1 = document.getElementById('cookie_tab_1'); 552 const cookies_tab_cd = document.getElementsByClassName('scr-adv-cookies__tabscdi'); 553 554 for (let i = 0; i < cookies_tab_cd.length; i++) { 555 const cd = cookies_tab_cd[i]; 556 cd.classList.add('hidden'); 557 if(cd.dataset && (cd.dataset.index === cookie_tab_1.dataset.tab)) { 558 cd.classList.remove('hidden'); 559 } 560 } 561 cookie_tab_1.classList.add('active'); 562 document.getElementById('cookie_tab_0').classList.remove('active'); 563 } 564 565 onClickSettings() { 566 document.querySelector('#scr-adv-cookies').style.display = ('block'); 567 document.querySelector('#cookies-simple').classList.add('hidden'); 568 document.querySelector('#cookies-detail').classList.remove('hidden'); 569 return false; 570 } 571 572 toggleAnalyticsChechbox() { 573 this.isAnalyticsCookie = !this.isAnalyticsCookie; 574 } 575 576 toggleMarketingChechbox() { 577 this.isMarketingCookie = !this.isMarketingCookie; 578 } 579 580 //Reopen cookie bar to change settings 581 reopenCookieBar() { 582 const popup = document.querySelector('#scr-adv-cookies'); 583 if (popup) { 584 popup.style.visibility = "visible"; 585 popup.style.zIndex = 11000; 586 } 587 else { 588 this.renderCookieBar(); 589 } 590 } 591}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.