1/** 2 * This file is used to generate the cookie settings and handle its events. 3 */ 4window.lwcnCookieSettings = (function(utility) { 5 6 'use strict'; 7 8 //This object is used to save all the settings ----------------------------------------------------------------------- 9 let settings = {}; 10 11 /** 12 * Returns the HTML of the section toogle or category toggle. 13 * 14 * @returns {string} 15 */ 16 function toggleHtml() { 17 18 'use strict'; 19 20 let toggle = ''; 21 toggle += '<label class="lwcn-switch">'; 22 toggle += '<div class="lwcn-checkbox"></div>'; 23 toggle += '<span class="lwcn-slider lwcn-round"></span>'; 24 toggle += '</label>'; 25 return toggle; 26 27 } 28 29 /** 30 * Add the cookie settings HTML at the end of the body. 31 */ 32 function addToDOM() { 33 34 'use strict'; 35 36 let sections = settings.sections; 37 38 /** 39 * If the cookie that keeps the status of the various categories is set use this cookie instead of the 40 * defaultStatus to set the data-status of the toggle (.lwcn-cookie-settings-category-toggle) 41 */ 42 let categoryStatus = utility.getCookie('lwcn-category-status'); 43 try { 44 categoryStatus = JSON.parse(categoryStatus); 45 } catch (error) { 46 categoryStatus = false; 47 } 48 49 let html = ''; 50 51 html += '<div id="lwcn-cookie-settings-blurred-header"></div>'; 52 html += '<div id="lwcn-cookie-settings-header">'; 53 54 if (settings.cookieSettingsLogoUrl.length > 0) { 55 html += '<img id="lwcn-cookie-settings-logo" src="' + 56 settings.cookieSettingsLogoUrl + '">'; 57 } 58 html += '<div id="lwcn-cookie-settings-title">' + 59 settings.cookieSettingsTitle + '</div>'; 60 html += '</div>'; // #lwcn-cookie-settings-header 61 62 html += '<div id="lwcn-cookie-settings-body">'; 63 html += '<div id="lwcn-cookie-settings-intro">' + 64 settings.cookieSettingsDescriptionHeader + '</div>'; 65 66 //Add the HTML of each section 67 sections.forEach(function(section) { 68 69 let dataToggle = utility.sectionHasToggle(section.categories) === true 70 ? '1' 71 : '0'; 72 73 html += '<div class="lwcn-cookie-settings-section-container">'; 74 html += '<div class="lwcn-cookie-settings-section-header">'; 75 html += '<div class="lwcn-cookie-settings-section-name">' + 76 section.name + '</div>'; 77 html += '<div class="lwcn-cookie-settings-section-toggle" data-toggle="' + 78 dataToggle + '" data-status="0" data-id="' + 79 parseInt(section.sectionId, 10) + '">' + toggleHtml() + '</div>'; 80 html += '<div class="lwcn-cookie-settings-section-chevron" data-section-id="' + 81 parseInt(section.sectionId, 10) + '"></div>'; 82 html += '</div>'; 83 84 html += '<div class="lwcn-cookie-settings-section-body" data-section-id="' + 85 parseInt(section.sectionId, 10) + '">'; 86 html += '<div class="lwcn-cookie-settings-section-description" data-section-id="' + 87 parseInt(section.sectionId, 10) + '">' + section.description + 88 '</div>'; 89 90 //Add the HTML of the categories included in this section 91 section.categories.forEach(function(category) { 92 93 html += '<div class="lwcn-cookie-settings-category-container" data-section-id="' + 94 parseInt(section.sectionId, 10) + '">'; 95 html += '<div class="lwcn-cookie-settings-category-header">'; 96 html += '<div class="lwcn-cookie-settings-category-expand" data-category-id="' + 97 parseInt(category.categoryId, 10) + '" data-status="0"></div>'; 98 html += '<div class="lwcn-cookie-settings-category-title">' + 99 category.name + '</div>'; 100 101 /** 102 * Get the status of this category. If the category status is not available use the default category 103 * status. 104 */ 105 let dataStatus = category.defaultStatus; 106 if (categoryStatus !== false) { 107 categoryStatus.forEach(function(value) { 108 if (value.categoryId == category.categoryId) { 109 dataStatus = value.status; 110 } 111 }); 112 } 113 114 let dataStatusValue = (parseInt(dataStatus, 10) == 0) ? '0' : '2'; 115 let categoryToggle = category.toggle ? '1' : '0';
116 html += '<div class="lwcn-cookie-settings-category-toggle" data-toggle="' + 117 categoryToggle + '" data-status="' + 118 dataStatusValue + '" data-id="' + 119 parseInt(category.categoryId, 10) + '" data-section-id="' + 120 parseInt(section.sectionId, 10) + '">' + toggleHtml() + '</div>'; 121 html += '</div>'; //.lwcn-cookie-settings-category-header 122 html += '<div class="lwcn-cookie-settings-category-description" data-category-id="' + 123 parseInt(category.categoryId, 10) + '">' + category.description + 124 '</div>'; 125 126 if (category.cookies.length > 0) { 127 html += '<div class="lwcn-cookie-settings-category-cookie-list" data-category-id="' + 128 parseInt(category.categoryId, 10) + '">' + 129 utility.generateCookieTable(category.cookies, 130 settings.cookieTableColumns, 131 settings.cookieTableColumnsNames) + '</div>'; //.lwcn-cookie-settings-category-container 132 } 133 134 html += '</div>'; //.lwcn-cookie-settings-category-container 135 136 }); 137 138 html += '</div>'; //.lwcn-cookie-settings-section-body 139 html += '</div>'; 140 141 }); 142 143 html += '<div id="lwcn-cookie-settings-description-footer">' + 144 settings.cookieSettingsDescriptionFooter + '</div>'; 145 html += '</div>'; // #lwcn-cookie-settings-body 146 147 html += '<div id="lwcn-cookie-settings-blurred-footer"></div>'; 148 html += '<div id="lwcn-cookie-settings-footer">'; 149 html += '<div id="lwcn-cookie-settings-buttons-container">'; 150 if (parseInt(settings.cookieSettingsButton1Action, 10) !== 0) { 151 html += '<div id="lwcn-cookie-settings-button-1" class="lwcn-cookie-settings-button">' + 152 settings.cookieSettingsButton1Text + '</div>'; 153 } 154 if (parseInt(settings.cookieSettingsButton2Action, 10) !== 0) { 155 html += '<div id="lwcn-cookie-settings-button-2" class="lwcn-cookie-settings-button">' + 156 settings.cookieSettingsButton2Text + '</div>'; 157 } 158 html += '</div>'; // #lwcn-cookie-settings-buttons-container 159 html += '</div>'; // #lwcn-cookie-settings-footer 160 html += '</div>'; 161 162 //Add the cookie settings modal window HTML to the DOM 163 let cookieSettings = document.createElement('div'); 164 cookieSettings.id = 'lwcn-cookie-settings-container'; 165 cookieSettings.innerHTML = html; 166 document.body.appendChild(cookieSettings); 167 168 //Add the cookie settings mask if enabled 169 if (settings.cookieSettingsMask) { 170 let cookieSettingsMask = document.createElement('div'); 171 cookieSettingsMask.id = 'lwcn-cookie-settings-mask'; 172 document.body.appendChild(cookieSettingsMask); 173 } 174 175 //Update the toggles of all the categories 176 sections.forEach(function(section) { 177 updateSectionToggle(section.sectionId); 178 }); 179 180 } 181 182 /** 183 * Apply the CSS style to the cookie settings HTML. 184 */ 185 function applyStyle() { 186 187 'use strict'; 188 189 let css = ''; 190 let declarationSuffix = ''; 191 if (settings.forceCssSpecificity) { 192 declarationSuffix = ' !important'; 193 } 194 195 // #lwcn-cookie-settings-mask 196 css += '#lwcn-cookie-settings-mask{'; 197 css += 'background: ' + settings.cookieSettingsMaskColor + 198 declarationSuffix + ';'; 199 css += 'opacity: ' + parseFloat(settings.cookieSettingsMaskOpacity) + 200 declarationSuffix + ';'; 201 css += 'width: 100%' + declarationSuffix + ';'; 202 css += 'position: fixed' + declarationSuffix + ';'; 203 css += 'height: 100%' + declarationSuffix + ';'; 204 css += 'left: 0' + declarationSuffix + ';'; 205 css += 'top: 0' + declarationSuffix + ';'; 206 css += 'z-index: 999999998' + declarationSuffix + ';'; 207 css += '}'; 208 209 // #lwcn-container, #lwcn-container * 210 css += '#lwcn-cookie-settings-container, #lwcn-cookie-settings-container *{'; 211 css += 'box-sizing: content-box' + declarationSuffix + ';'; 212 css += '-webkit-touch-callout: none' + declarationSuffix + ';'; 213 css += '-webkit-user-select: none' + declarationSuffix + ';'; 214 css += '-khtml-user-select: none' + declarationSuffix + ';'; 215 css += '-moz-user-select: none' + declarationSuffix + ';'; 216 css += '-ms-user-select: none' + declarationSuffix + ';'; 217 css += 'user-select: none' + declarationSuffix + ';'; 218 css += '}'; 219 220 // #lwcn-container
221 css += '#lwcn-cookie-settings-container{'; 222 css += 'position: fixed' + declarationSuffix + ';'; 223 let partialTop = 300 + 224 parseInt(settings.cookieSettingsContainerBorderWidth, 10); 225 css += 'top: calc(50% - ' + partialTop + 'px)' + declarationSuffix + ';'; 226 let partialLeft = 300 + 227 parseInt(settings.cookieSettingsContainerBorderWidth, 10); 228 css += 'left: calc(50% - ' + partialLeft + 'px)' + declarationSuffix + ';'; 229 css += 'z-index: 999999999' + declarationSuffix + ';'; 230 css += 'height: 568px' + declarationSuffix + ';'; 231 css += 'width: 600px' + declarationSuffix + ';'; 232 css += 'background: ' + settings.cookieSettingsContainerBackgroundColor + 233 declarationSuffix + ';'; 234 css += 'opacity: ' + parseFloat(settings.cookieSettingsContainerOpacity) + 235 declarationSuffix + ';'; 236 css += 'border-width: ' + settings.cookieSettingsContainerBorderWidth + 237 'px' + declarationSuffix + ';'; 238 css += 'border-color: rgba(' + 239 utility.hexToRgb(settings.cookieSettingsContainerBorderColor).r + ',' + 240 utility.hexToRgb(settings.cookieSettingsContainerBorderColor).g + ',' + 241 utility.hexToRgb(settings.cookieSettingsContainerBorderColor).b + ', ' + 242 parseFloat(settings.cookieSettingsContainerBorderOpacity) + ')' + 243 declarationSuffix + ';'; 244 css += 'border-style: solid' + declarationSuffix + ';'; 245 css += 'color: #000' + declarationSuffix + ';'; 246 css += 'z-index: 999999999' + declarationSuffix + ';'; 247 css += 'font-size: 13px' + declarationSuffix + ';'; 248 css += 'padding: 16px 0' + declarationSuffix + ';'; 249 css += 'border-radius: ' + parseInt(settings.containersBorderRadius, 10) + 250 'px' + declarationSuffix + ';'; 251 let drop_shadow_value = 'none'; 252 if (settings.cookieSettingsContainerDropShadow) { 253 drop_shadow_value = 'rgba(' + 254 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).r + 255 ', ' + 256 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).g + 257 ', ' + 258 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).b + 259 ', 0.08) 0px 0px 0px 1px, rgba(' + 260 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).r + 261 ', ' + 262 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).g + 263 ', ' + 264 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).b + 265 ', 0.08) 0px 2px 1px, rgba(' + 266 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).r + 267 ', ' + 268 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).g + 269 ', ' + 270 utility.hexToRgb(settings.cookieSettingsContainerDropShadowColor).b + 271 ', 0.31) 0px 0px 20px -6px' + declarationSuffix + ';'; 272 } 273 css += 'box-shadow: ' + drop_shadow_value + declarationSuffix + ';'; 274 css += '}'; 275 276 // #lwcn-cookie-settings-blurred-header 277 css += '#lwcn-cookie-settings-blurred-header{'; 278 css += 'width: 568px' + declarationSuffix + ';'; 279 css += 'height: 0px' + declarationSuffix + ';'; 280 css += 'position: absolute' + declarationSuffix + ';'; 281 css += 'left: 16px' + declarationSuffix + ';'; 282 css += 'top: 80px' + declarationSuffix + ';'; 283 css += 'box-shadow: 0px 0px 6px 6px ' + 284 settings.cookieSettingsContainerBackgroundColor + '' + 285 declarationSuffix + ';'; 286 css += 'z-index: 0' + declarationSuffix + ';'; 287 css += '}'; 288 289 // #lwcn-cookie-settings-header 290 css += '#lwcn-cookie-settings-header{'; 291 css += 'height: 80px' + declarationSuffix + ';'; 292 css += 'display: flex' + declarationSuffix + ';'; 293 css += 'position: absolute' + declarationSuffix + ';'; 294 css += 'top: 0' + declarationSuffix + ';'; 295 css += 'width: 552px' + declarationSuffix + ';'; 296 css += 'padding: 0 24px' + declarationSuffix + ';'; 297 css += 'background: ' + settings.cookieSettingsContainerBackgroundColor + 298 '' + declarationSuffix + ';'; 299 css += 'z-index: 999999999' + declarationSuffix + ';'; 300 css += 'border-bottom: 1px solid #ebecf0' + declarationSuffix + ';'; 301 css += 'border-radius: ' + parseInt(settings.containersBorderRadius, 10) + 302 'px ' + parseInt(settings.containersBorderRadius, 10) + 'px 0 0' + 303 declarationSuffix + ';'; 304 css += '}'; 305 306 if (settings.cookieSettingsLogoUrl.length > 0) {
307 css += '#lwcn-cookie-settings-logo{'; 308 css += 'height: 32px' + declarationSuffix + ';'; 309 css += 'margin: 24px 0' + declarationSuffix + ';'; 310 css += '}'; 311 } 312 313 // #lwcn-cookie-settings-title 314 css += '#lwcn-cookie-settings-title{'; 315 css += 'font-size: 20px' + declarationSuffix + ';'; 316 css += 'color: ' + settings.cookieSettingsHeadingsFontColor + 317 declarationSuffix + ';'; 318 css += 'line-height: 80px' + declarationSuffix + ';'; 319 css += 'margin: 0' + declarationSuffix + ';'; 320 if (settings.cookieSettingsLogoUrl.length > 0) { 321 css += 'padding: 0 24px 0 8px' + declarationSuffix + ';'; 322 } else { 323 css += 'padding: 0 24px 0 0' + declarationSuffix + ';'; 324 } 325 css += 'font-family: ' + settings.headingsFontFamily + '' + 326 declarationSuffix + ';'; 327 css += 'font-weight: ' + settings.headingsFontWeight + '' + 328 declarationSuffix + ';'; 329 css += '}'; 330 331 // #lwcn-cookie-settings-intro 332 css += '#lwcn-cookie-settings-intro{'; 333 css += 'font-size: 13px' + declarationSuffix + ';'; 334 css += 'color: ' + settings.cookieSettingsParagraphsFontColor + 335 declarationSuffix + ';'; 336 css += 'margin-top: 21px' + declarationSuffix + ';'; 337 css += 'margin-bottom: 18px' + declarationSuffix + ';'; 338 css += 'line-height: 20px' + declarationSuffix + ';'; 339 css += 'padding: 0 24px' + declarationSuffix + ';'; 340 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 341 declarationSuffix + ';'; 342 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 343 declarationSuffix + ';'; 344 css += '}'; 345 346 // #lwcn-cookie-settings-intro strong 347 css += '#lwcn-cookie-settings-intro strong{'; 348 css += 'font-weight: ' + parseInt(settings.strongTagsFontWeight, 10) + 349 declarationSuffix + ';'; 350 css += '}'; 351 352 // #lwcn-cookie-settings-intro a 353 css += '#lwcn-cookie-settings-intro a{'; 354 css += 'color: ' + settings.cookieSettingsLinksFontColor + 355 declarationSuffix + ';'; 356 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 357 declarationSuffix + ';'; 358 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 359 declarationSuffix + ';'; 360 css += 'line-height: 20px' + declarationSuffix + ';'; 361 css += 'font-size: 13px' + declarationSuffix + ';'; 362 css += 'text-decoration: none' + declarationSuffix + ';'; 363 css += '}'; 364 365 // #lwcn-cookie-settings-intro a:hover 366 css += '#lwcn-cookie-settings-intro a:hover{'; 367 css += 'text-decoration: underline' + declarationSuffix + ';'; 368 css += '}'; 369 370 // #lwcn-cookie-settings-body 371 // Ref: https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll/38994837#38994837 372 css += '#lwcn-cookie-settings-body{'; 373 css += 'height: 440px' + declarationSuffix + ';'; 374 css += 'width: 600px' + declarationSuffix + ';'; 375 css += 'margin-top: 64px' + declarationSuffix + ';'; 376 css += 'overflow-y: scroll' + declarationSuffix + ';'; 377 css += 'scrollbar-width: none' + declarationSuffix + ';'; //Firefox 378 css += '-ms-overflow-style: none' + declarationSuffix + ';'; //Internet Explorer 10+ 379 css += '}'; 380 381 // #lwcn-cookie-settings-body 382 css += '#lwcn-cookie-settings-body::-webkit-scrollbar{'; 383 css += 'width: 0' + declarationSuffix + ';'; 384 css += 'height: 0' + declarationSuffix + ';'; 385 css += '}'; 386 387 // .lwcn-cookie-settings-section-container 388 css += '.lwcn-cookie-settings-section-container{'; 389 css += 'padding: 0 24px' + declarationSuffix + ';'; 390 css += '}'; 391 392 // .lwcn-cookie-settings-section-container:hover 393 css += '.lwcn-cookie-settings-section-container:hover{'; 394 css += 'background: ' + settings.cookieSettingsContainerHighlightColor + 395 declarationSuffix + ';'; 396 css += '}'; 397 398 // .lwcn-cookie-settings-section-header 399 css += '.lwcn-cookie-settings-section-header{'; 400 css += 'display: flex' + declarationSuffix + ';'; 401 css += 'margin-bottom: 0' + declarationSuffix + ';'; 402 css += '}'; 403 404 // .lwcn-cookie-settings-section-name
405 css += '.lwcn-cookie-settings-section-name{'; 406 css += 'font-size: 13px' + declarationSuffix + ';'; 407 css += 'color: ' + settings.cookieSettingsHeadingsFontColor + 408 declarationSuffix + ';'; 409 css += 'flex-basis: calc(100% - 96px)' + declarationSuffix + ';'; 410 css += 'line-height: 20px' + declarationSuffix + ';'; 411 css += 'padding: 14px 16px 14px 0' + declarationSuffix + ';'; 412 css += 'font-family: ' + settings.headingsFontFamily + '' + 413 declarationSuffix + ';'; 414 css += 'font-weight: ' + parseInt(settings.headingsFontWeight, 10) + '' + 415 declarationSuffix + ';'; 416 css += '}'; 417 418 // .lwcn-cookie-settings-section-toggle 419 css += '.lwcn-cookie-settings-section-toggle{'; 420 css += 'flex-basis: 52px' + declarationSuffix + ';'; 421 css += 'margin-top: 12px' + declarationSuffix + ';'; 422 css += 'height: 24px' + declarationSuffix + ';'; 423 css += 'border-right: 1px solid ' + settings.cookieSettingsSeparatorColor + 424 '' + declarationSuffix + ';'; 425 css += '}'; 426 427 // .lwcn-cookie-settings-section-toggle 428 css += '.lwcn-cookie-settings-section-toggle[data-toggle="0"]{'; 429 css += 'border-right: 0' + declarationSuffix + ';'; 430 css += '}'; 431 432 // .lwcn-cookie-settings-section-toggle[data-toggle="0"] .lwcn-slider 433 css += '.lwcn-cookie-settings-section-container .lwcn-cookie-settings-section-toggle[data-toggle="0"] .lwcn-checkbox + .lwcn-slider{'; 434 css += 'background-color: ' + settings.cookieSettingsToggleDisabledColor + 435 declarationSuffix + ';'; 436 css += 'cursor: default' + declarationSuffix + ';'; 437 css += '}'; 438 439 // .lwcn-cookie-settings-section-chevron 440 css += '.lwcn-cookie-settings-section-chevron{'; 441 css += 'min-width: 20px' + declarationSuffix + ';'; 442 css += 'width: 20px' + declarationSuffix + ';'; 443 css += 'height: 20px' + declarationSuffix + ';'; 444 css += 'background: url(\'' + 445 '/assets/images/cookie/chevron.php?color=' + 446 encodeURIComponent(settings.cookieSettingsChevronColor) + '\')' + 447 declarationSuffix + ';'; 448 css += 'flex-basis: 20px' + declarationSuffix + ';'; 449 css += 'transition: .2s' + declarationSuffix + ';'; 450 css += 'cursor: pointer' + declarationSuffix + ';'; 451 css += 'margin: 15px 1px 13px 6px' + declarationSuffix + ';'; 452 ; 453 css += '}'; 454 455 // .lwcn-cookie-settings-section-chevron.down 456 css += '.lwcn-cookie-settings-section-chevron.down{'; 457 css += 'top: 0' + declarationSuffix + ';'; 458 css += '-webkit-transform: rotate(-180deg)' + declarationSuffix + ';'; 459 css += '-ms-transform: rotate(-180deg)' + declarationSuffix + ';'; 460 css += 'transform: rotate(-180deg)' + declarationSuffix + ';'; 461 css += '}'; 462 463 // .lwcn-cookie-settings-section-body 464 css += '.lwcn-cookie-settings-section-body{'; 465 css += 'display: none;'; 466 css += 'padding-bottom: 16px' + declarationSuffix + ';'; 467 css += '}'; 468 469 // .lwcn-cookie-settings-section-description 470 css += '.lwcn-cookie-settings-section-description{'; 471 css += 'color: ' + settings.cookieSettingsParagraphsFontColor + 472 declarationSuffix + ';'; 473 css += 'margin-top: 6px' + declarationSuffix + ';'; 474 css += 'margin-bottom: 6px' + declarationSuffix + ';'; 475 css += 'line-height: 20px' + declarationSuffix + ';'; 476 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 477 declarationSuffix + ';'; 478 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 479 declarationSuffix + ';'; 480 css += '}'; 481 482 // .lwcn-cookie-settings-section-description strong 483 css += '.lwcn-cookie-settings-section-description strong{'; 484 css += 'font-weight: ' + parseInt(settings.strongTagsFontWeight, 10) + 485 declarationSuffix + ';'; 486 css += '}'; 487 488 // .lwcn-cookie-settings-category-header 489 css += '.lwcn-cookie-settings-category-header{'; 490 css += 'display: flex' + declarationSuffix + ';'; 491 css += 'line-height: 48px' + declarationSuffix + ';'; 492 css += '}'; 493 494 // .lwcn-cookie-settings-category-header:hover 495 css += '.lwcn-cookie-settings-category-header:hover{'; 496 css += 'background: ' + settings.cookieSettingsContainerBackgroun
496dColor + 497 declarationSuffix + ';'; 498 css += '}'; 499 500 // .lwcn-cookie-settings-category-expand 501 css += '.lwcn-cookie-settings-category-expand{'; 502 css += 'background: url(\'' + 503 '/assets/images/cookie/plus.php?color=' + 504 encodeURIComponent(settings.cookieSettingsExpandCloseColor) + '\')' + 505 declarationSuffix + ';'; 506 css += 'min-width: 20px' + declarationSuffix + ';'; 507 css += 'flex-basis: 20px' + declarationSuffix + ';'; 508 css += 'height: 20px' + declarationSuffix + ';'; 509 css += 'margin: 14px 10px' + declarationSuffix + ';'; 510 css += 'cursor: pointer' + declarationSuffix + ';'; 511 css += '}'; 512 513 // .lwcn-cookie-settings-category-expand[data-status="1"] 514 css += '.lwcn-cookie-settings-category-expand[data-status="1"]{'; 515 css += 'background: url(\'' + 516 '/assets/images/cookie/dash.php?color=' + 517 encodeURIComponent(settings.cookieSettingsExpandCloseColor) + '\')' + 518 declarationSuffix + ';'; 519 css += '}'; 520 521 // .lwcn-cookie-settings-category-title 522 css += '.lwcn-cookie-settings-category-title{'; 523 css += 'font-size: 13px' + declarationSuffix + ';'; 524 css += 'color: ' + settings.cookieSettingsHeadingsFontColor + 525 declarationSuffix + ';'; 526 css += 'flex-basis: calc(100% - 112px)' + declarationSuffix + ';'; 527 css += 'line-height: 20px' + declarationSuffix + ';'; 528 css += 'padding: 14px 16px 0 0' + declarationSuffix + ';'; 529 css += 'font-family: ' + settings.headingsFontFamily + '' + 530 declarationSuffix + ';'; 531 css += 'font-weight: ' + parseInt(settings.headingsFontWeight, 10) + '' + 532 declarationSuffix + ';'; 533 css += '}'; 534 535 // .lwcn-cookie-settings-category-toggle 536 css += '.lwcn-cookie-settings-category-toggle{'; 537 css += 'flex-basis: 56px' + declarationSuffix + ';'; 538 css += 'width: 56px' + declarationSuffix + ';'; 539 css += 'height: 48px' + declarationSuffix + ';'; 540 css += '}'; 541 542 // .lwcn-cookie-settings-category-description 543 css += '.lwcn-cookie-settings-category-description{'; 544 css += 'color: ' + settings.cookieSettingsParagraphsFontColor + 545 declarationSuffix + ';'; 546 css += 'margin-left: 40px' + declarationSuffix + ';'; 547 css += 'margin-bottom: 15px' + declarationSuffix + ';'; 548 css += 'margin-top: 10px' + declarationSuffix + ';'; 549 css += 'display: none;'; 550 css += 'line-height: 20px' + declarationSuffix + ';'; 551 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 552 declarationSuffix + ';'; 553 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 554 declarationSuffix + ';'; 555 css += '}'; 556 557 // .lwcn-cookie-settings-category-cookie-list 558 css += '.lwcn-cookie-settings-category-cookie-list{'; 559 css += 'margin: 0 0 0 40px' + declarationSuffix + ';'; 560 css += 'display: none;'; 561 css += '}'; 562 563 // .lwcn-cookie-settings-category-cookie-list table 564 css += '.lwcn-cookie-settings-category-cookie-list table{'; 565 css += 'margin: 20px 0' + declarationSuffix + ';'; 566 css += 'border-collapse: collapse' + declarationSuffix + ';'; 567 css += '}'; 568 569 css += '.lwcn-cookie-settings-category-cookie-list table,'; 570 css += '.lwcn-cookie-settings-category-cookie-list table *{'; 571 css += 'background: ' + settings.cookieSettingsContainerBackgroundColor + 572 declarationSuffix + ';'; 573 css += '}'; 574 575 // .lwcn-cookie-settings-section-container:hover 576 css += '.lwcn-cookie-settings-section-container:hover .lwcn-cookie-settings-category-cookie-list table,'; 577 css += '.lwcn-cookie-settings-section-container:hover .lwcn-cookie-settings-category-cookie-list table *{'; 578 css += 'background: ' + settings.cookieSettingsContainerHighlightColor + 579 declarationSuffix + ';'; 580 css += '}'; 581 582 // .lwcn-cookie-settings-category-cookie-list table th 583 // .lwcn-cookie-settings-category-cookie-list table td 584 css += '.lwcn-cookie-settings-category-cookie-list table th,'; 585 css += '.lwcn-cookie-settings-category-cookie-list table td{'; 586 css += 'font-size: 13px' + declarationSuffix + ';'; 587 css += 'padding: 10px 10px' + declarationSuffix + ';'; 588 css += 'border: 1px solid ' + settings.cookieSettingsSeparatorColor + '' + 589 declarationSuffix + ';'; 590 css += 'line-height: 20px' + declarationSuffix + ';'; 591 css += 'overflow-wrap: normal' + declarationSuffix + ';'; 592 css += '}'; 593
594 // .lwcn-cookie-settings-category-cookie-list table th 595 css += '.lwcn-cookie-settings-category-cookie-list table th{'; 596 css += 'font-weight: 600' + declarationSuffix + ';'; 597 css += 'color: ' + settings.cookieSettingsHeadingsFontColor + 598 declarationSuffix + ';'; 599 css += 'font-family: ' + settings.headingsFontFamily + '' + 600 declarationSuffix + ';'; 601 css += 'font-weight: ' + parseInt(settings.headingsFontWeight, 10) + '' + 602 declarationSuffix + ';'; 603 css += 'text-align: left' + 604 declarationSuffix + ';'; 605 css += '}'; 606 607 // .lwcn-cookie-settings-category-cookie-list table td 608 css += '.lwcn-cookie-settings-category-cookie-list table td{'; 609 css += 'font-weight: 400' + declarationSuffix + ';'; 610 css += 'color: ' + settings.cookieSettingsParagraphsFontColor + 611 declarationSuffix + ';'; 612 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 613 declarationSuffix + ';'; 614 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 615 declarationSuffix + ';'; 616 css += '}'; 617 618 // .lwcn-cookie-settings-category-description strong 619 css += '.lwcn-cookie-settings-category-description strong{'; 620 css += 'font-weight: ' + parseInt(settings.strongTagsFontWeight, 10) + 621 declarationSuffix + ';'; 622 css += '}'; 623 624 // .lwcn-cookie-settings-category-description a 625 css += '.lwcn-cookie-settings-category-description a{'; 626 css += 'color: ' + settings.cookieSettingsLinksFontColor + 627 declarationSuffix + ';'; 628 css += '}'; 629 630 // #lwcn-cookie-settings-blurred-footer 631 css += '#lwcn-cookie-settings-blurred-footer{'; 632 css += 'width: 568px' + declarationSuffix + ';'; 633 css += 'height: 0px' + declarationSuffix + ';'; 634 css += 'position: absolute' + declarationSuffix + ';'; 635 css += 'left: 16px' + declarationSuffix + ';'; 636 css += 'bottom: 80px' + declarationSuffix + ';'; 637 css += 'box-shadow: 0px 0px 6px 6px ' + 638 settings.cookieSettingsContainerBackgroundColor + '' + 639 declarationSuffix + ';'; 640 css += 'z-index: 0' + declarationSuffix + ';'; 641 css += '}'; 642 643 // #lwcn-cookie-settings-description-footer 644 css += '#lwcn-cookie-settings-description-footer{'; 645 css += 'color: ' + settings.cookieSettingsParagraphsFontColor + 646 declarationSuffix + ';'; 647 css += 'margin-top: 20px' + declarationSuffix + ';'; 648 css += 'padding: 0 24px' + declarationSuffix + ';'; 649 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 650 declarationSuffix + ';'; 651 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 652 declarationSuffix + ';'; 653 css += 'margin-bottom: 21px' + declarationSuffix + ';'; 654 css += 'line-height: 20px' + declarationSuffix + ';'; 655 css += '}'; 656 657 // #lwcn-cookie-settings-description-footer strong 658 css += '#lwcn-cookie-settings-description-footer strong{'; 659 css += 'font-weight: ' + parseInt(settings.strongTagsFontWeight, 10) + 660 declarationSuffix + ';'; 661 css += '}'; 662 663 // #lwcn-cookie-settings-description-footer a 664 css += '#lwcn-cookie-settings-description-footer a{'; 665 css += 'color: ' + settings.cookieSettingsLinksFontColor + 666 declarationSuffix + ';'; 667 css += '}'; 668 669 // #lwcn-cookie-settings-footer 670 css += '#lwcn-cookie-settings-footer{'; 671 css += 'position: absolute' + declarationSuffix + ';'; 672 css += 'left: 0' + declarationSuffix + ';'; 673 css += 'bottom: 0' + declarationSuffix + ';'; 674 css += 'display: flex' + declarationSuffix + ';'; 675 css += 'width: 552px' + declarationSuffix + ';'; 676 css += 'padding: 20px 24px' + declarationSuffix + ';'; 677 css += 'border-top: 1px solid #ebecf0' + declarationSuffix + ';'; 678 css += 'background: ' + settings.cookieSettingsContainerBackgroundColor + 679 '' + declarationSuffix + ';'; 680 css += 'border-radius: 0 0 ' + 681 parseInt(settings.containersBorderRadius, 10) + 'px ' + 682 parseInt(settings.containersBorderRadius, 10) + 'px' + 683 declarationSuffix + ';'; 684 css += '}'; 685 686 // #lwcn-cookie-settings-buttons-container
687 css += '#lwcn-cookie-settings-buttons-container{'; 688 css += 'margin-left: auto' + declarationSuffix + ';'; 689 css += 'line-height: 38px' + declarationSuffix + ';'; 690 css += 'height: 40px' + declarationSuffix + ';'; 691 css += '}'; 692 693 // .lwcn-cookie-settings-button 694 css += '.lwcn-cookie-settings-button{'; 695 css += 'padding: 0 46px' + declarationSuffix + ';'; 696 css += 'font-size: 13px' + declarationSuffix + ';'; 697 css += '}'; 698 699 // #lwcn-cookie-settings-button-2 700 css += '#lwcn-cookie-settings-button-2{'; 701 css += 'margin-left: 8px' + declarationSuffix + ';'; 702 css += '}'; 703 704 // Toggle ------------------------------------------------------------------------------------------------------ 705 706 /* The switch - the box around the slider */ 707 css += '.lwcn-switch {'; 708 css += 'position: relative' + declarationSuffix + ';'; 709 css += 'display: inline-block' + declarationSuffix + ';'; 710 css += 'width: 40px' + declarationSuffix + ';'; 711 css += 'margin: 2px 12px 0 0' + declarationSuffix + ';'; 712 css += 'height: 20px' + declarationSuffix + ';'; 713 css += '}'; 714 715 // .lwcn-cookie-settings-category-toggle .lwcn-switch 716 css += '.lwcn-cookie-settings-category-toggle .lwcn-switch {'; 717 css += 'margin-top: 14px' + declarationSuffix + ';'; 718 css += 'margin-right: 16px' + declarationSuffix + ';'; 719 css += '}'; 720 721 /* Hide default HTML checkbox */ 722 css += '.lwcn-switch .lwcn-checkbox {'; 723 css += 'opacity: 0' + declarationSuffix + ';'; 724 css += 'width: 40px' + declarationSuffix + ';'; 725 css += 'height: 20px' + declarationSuffix + ';'; 726 css += '}'; 727 728 /* The slider */ 729 css += '.lwcn-slider {'; 730 css += 'position: absolute' + declarationSuffix + ';'; 731 css += 'cursor: pointer' + declarationSuffix + ';'; 732 css += 'top: 0' + declarationSuffix + ';'; 733 css += 'left: 0' + declarationSuffix + ';'; 734 css += 'right: 0' + declarationSuffix + ';'; 735 css += 'bottom: 0' + declarationSuffix + ';'; 736 css += 'width: 40px' + declarationSuffix + ';'; 737 css += 'height: 20px' + declarationSuffix + ';'; 738 css += 'background-color: ' + settings.cookieSettingsToggleOffColor + 739 declarationSuffix + ';'; 740 css += '-webkit-transition: .4s' + declarationSuffix + ';'; 741 css += 'transition: .4s' + declarationSuffix + ';'; 742 css += '}'; 743 744 css += '.lwcn-slider:before {'; 745 css += 'position: absolute' + declarationSuffix + ';'; 746 css += 'content: ""' + declarationSuffix + ';'; 747 css += 'height: 16px' + declarationSuffix + ';'; 748 css += 'width: 16px' + declarationSuffix + ';'; 749 css += 'left: 2px' + declarationSuffix + ';'; 750 css += 'bottom: 2px' + declarationSuffix + ';'; 751 css += 'background-color: white' + declarationSuffix + ';'; 752 css += '-webkit-transition: .4s' + declarationSuffix + ';'; 753 css += 'transition: .4s' + declarationSuffix + ';'; 754 css += '}'; 755 756 css += '.lwcn-cookie-settings-section-toggle[data-status="1"] .lwcn-checkbox + .lwcn-slider,'; 757 css += '.lwcn-cookie-settings-category-toggle[data-status="1"] .lwcn-checkbox + .lwcn-slider'; 758 css += ' {'; 759 css += 'background-color: ' + settings.cookieSettingsToggleMiscColor + 760 declarationSuffix + ';'; 761 css += '}'; 762 763 css += '.lwcn-cookie-settings-section-toggle[data-status="1"] .lwcn-checkbox + .lwcn-slider:before,'; 764 css += '.lwcn-cookie-settings-category-toggle[data-status="1"] .lwcn-checkbox + .lwcn-slider:before'; 765 css += '{'; 766 css += '-webkit-transform: translateX(10px)' + declarationSuffix + ';'; 767 css += '-ms-transform: translateX(10px)' + declarationSuffix + ';'; 768 css += 'transform: translateX(10px)' + declarationSuffix + ';'; 769 css += '}'; 770 771 css += '.lwcn-cookie-settings-section-toggle[data-status="2"] .lwcn-checkbox + .lwcn-slider,'; 772 css += '.lwcn-cookie-settings-category-toggle[data-status="2"] .lwcn-checkbox + .lwcn-slider'; 773 css += '{'; 774 css += 'background-color: ' + settings.cookieSettingsToggleOnColor + 775 declarationSuffix + ';'; 776 css += '}'; 777 778 css += '.lwcn-cookie-settings-section-toggle[data-status="2"] .lwcn-checkbox + .lwcn-slider:before,';
779 css += '.lwcn-cookie-settings-category-toggle[data-status="2"] .lwcn-checkbox + .lwcn-slider:before'; 780 css += '{'; 781 css += '-webkit-transform: translateX(20px)' + declarationSuffix + ';'; 782 css += '-ms-transform: translateX(20px)' + declarationSuffix + ';'; 783 css += 'transform: translateX(20px)' + declarationSuffix + ';'; 784 css += '}'; 785 786 css += '.lwcn-cookie-settings-category-toggle[data-toggle="0"] .lwcn-checkbox + .lwcn-slider'; 787 css += '{'; 788 css += 'background-color: ' + settings.cookieSettingsToggleDisabledColor + 789 declarationSuffix + ';'; 790 css += 'cursor: default' + declarationSuffix + ';'; 791 css += '}'; 792 793 /* Rounded sliders */ 794 css += '.lwcn-slider.lwcn-round {'; 795 css += 'border-radius: 20px' + declarationSuffix + ';'; 796 css += '}'; 797 798 css += '.lwcn-slider.lwcn-round:before {'; 799 css += 'border-radius: 50%' + declarationSuffix + ';'; 800 css += '}'; 801 802 /* Buttons */ 803 804 // #lwcn-button-1 805 css += '#lwcn-cookie-settings-button-1{'; 806 css += 'width: auto' + declarationSuffix + ';'; 807 css += 'background: ' + settings.cookieSettingsButton1BackgroundColor + 808 declarationSuffix + ';'; 809 css += 'font-family: ' + settings.buttonsFontFamily + '' + 810 declarationSuffix + ';'; 811 css += 'font-weight: ' + parseInt(settings.buttonsFontWeight, 10) + '' + 812 declarationSuffix + ';'; 813 css += 'font-style: normal' + declarationSuffix + ';'; 814 css += 'color: ' + settings.cookieSettingsButton1FontColor + 815 declarationSuffix + ';'; 816 css += 'display: inline-block' + declarationSuffix + ';'; 817 css += 'cursor: pointer' + declarationSuffix + ';'; 818 css += 'border: 1px solid ' + settings.cookieSettingsButton1BorderColor + 819 declarationSuffix + ';'; 820 css += 'border-radius: ' + settings.buttonsBorderRadius + 'px' + 821 declarationSuffix + ';'; 822 css += 'text-align: center' + declarationSuffix + ';'; 823 css += 'padding: 0 10px' + declarationSuffix + ';'; 824 css += 'width: 158px' + declarationSuffix + ';'; 825 css += '}'; 826 827 css += '#lwcn-cookie-settings-button-1:hover{'; 828 css += 'background: ' + settings.cookieSettingsButton1BackgroundColorHover + 829 declarationSuffix + ';'; 830 css += 'border-color: ' + settings.cookieSettingsButton1BorderColorHover + 831 declarationSuffix + ';'; 832 css += 'color: ' + settings.cookieSettingsButton1FontColorHover + 833 declarationSuffix + ';'; 834 css += '}'; 835 836 css += '#lwcn-cookie-settings-button-2:hover{'; 837 css += 'background: ' + settings.cookieSettingsButton2Backgroun
837dColorHover + 838 declarationSuffix + ';'; 839 css += 'border-color: ' + settings.cookieSettingsButton2BorderColorHover + 840 declarationSuffix + ';'; 841 css += 'color: ' + settings.cookieSettingsButton2FontColorHover + 842 declarationSuffix + ';'; 843 css += '}'; 844 845 // #lwcn-button-2 846 css += '#lwcn-cookie-settings-button-2{'; 847 css += 'width: auto' + declarationSuffix + ';'; 848 css += 'background: ' + settings.cookieSettingsButton2BackgroundColor + 849 declarationSuffix + ';'; 850 css += 'font-family: ' + settings.buttonsFontFamily + '' + 851 declarationSuffix + ';'; 852 css += 'font-weight: ' + parseInt(settings.buttonsFontWeight, 10) + '' + 853 declarationSuffix + ';'; 854 css += 'font-style: normal' + declarationSuffix + ';'; 855 css += 'color: ' + settings.cookieSettingsButton2FontColor + 856 declarationSuffix + ';'; 857 css += 'display: inline-block' + declarationSuffix + ';'; 858 css += 'cursor: pointer' + declarationSuffix + ';'; 859 css += 'border: 1px solid ' + settings.cookieSettingsButton2BorderColor + 860 declarationSuffix + ';'; 861 css += 'border-radius: ' + parseInt(settings.buttonsBorderRadius, 10) + 862 'px' + declarationSuffix + ';'; 863 css += 'text-align: center' + declarationSuffix + ';'; 864 css += 'padding: 0 10px' + declarationSuffix + ';'; 865 css += 'width: 158px' + declarationSuffix + ';'; 866 css += '}'; 867 868 /** 869 * Apply a style for the HTML tags allowed with wp_kses(): 870 * 871 * - a 872 * - p 873 * - strong 874 * - br 875 * - ol 876 * - ul 877 * - li 878 */ 879 880 //a 881 css += '#lwcn-cookie-settings-intro a,'; 882 css += '.lwcn-cookie-settings-section-description a,'; 883 css += '.lwcn-cookie-settings-category-description a,'; 884 css += '#lwcn-cookie-settings-description-footer a{'; 885 css += 'color: ' + settings.cookieSettingsLinksFontColor + 886 declarationSuffix + ';'; 887 css += 'font-size: 13px' + declarationSuffix + ';'; 888 css += 'line-height: 20px' + declarationSuffix + ';'; 889 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 890 declarationSuffix + ';'; 891 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 892 declarationSuffix + ';'; 893 css += 'text-decoration: none' + declarationSuffix + ';'; 894 css += '}'; 895 896 //a:hover 897 css += '#lwcn-cookie-settings-intro a:hover,'; 898 css += '.lwcn-cookie-settings-section-description a:hover,'; 899 css += '.lwcn-cookie-settings-category-description a:hover,'; 900 css += '#lwcn-cookie-settings-description-footer a:hover{'; 901 css += 'text-decoration: underline' + declarationSuffix + ';'; 902 css += '}'; 903 904 //li 905 css += '#lwcn-cookie-settings-intro li,'; 906 css += '.lwcn-cookie-settings-section-description li,'; 907 css += '.lwcn-cookie-settings-category-description li,'; 908 css += '#lwcn-cookie-settings-description-footer li{'; 909 css += 'margin: 0' + declarationSuffix + ';'; 910 css += 'font-size: 13px' + declarationSuffix + ';'; 911 css += 'color: ' + settings.cookieSettingsParagraphsFontColor + 912 declarationSuffix + ';'; 913 css += 'line-height: 20px' + declarationSuffix + ';'; 914 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 915 declarationSuffix + ';'; 916 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 917 declarationSuffix + ';'; 918 css += '}'; 919 920 //p 921 css += '#lwcn-cookie-settings-intro p,'; 922 css += '.lwcn-cookie-settings-section-description p,'; 923 css += '.lwcn-cookie-settings-category-description p,'; 924 css += '#lwcn-cookie-settings-description-footer p{'; 925 css += 'margin: 0 0 20px 0' + declarationSuffix + ';'; 926 css += 'font-size: 13px' + declarationSuffix + ';'; 927 css += 'color: ' + settings.cookieSettingsParagraphsFontColor + 928 declarationSuffix + ';'; 929 css += 'line-height: 20px' + declarationSuffix + ';'; 930 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 931 declarationSuffix + ';'; 932 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 933 declarationSuffix + ';'; 934 css += '}'; 935
936 css += '#lwcn-cookie-settings-intro p:last-child,'; 937 css += '.lwcn-cookie-settings-section-description p:last-child,'; 938 css += '.lwcn-cookie-settings-category-description p:last-child,'; 939 css += '#lwcn-cookie-settings-description-footer p:last-child{'; 940 css += 'margin: 0' + declarationSuffix + ';'; 941 css += '}'; 942 943 //strong 944 css += '#lwcn-cookie-settings-intro strong,'; 945 css += '.lwcn-cookie-settings-section-description strong,'; 946 css += '.lwcn-cookie-settings-category-description strong,'; 947 css += '#lwcn-cookie-settings-description-footer strong{'; 948 css += 'font-weight: ' + parseInt(settings.strongTagsFontWeight, 10) + 949 declarationSuffix + ';'; 950 css += 'color: ' + settings.cookieSettingsHeadingsFontColor + 951 declarationSuffix + ';'; 952 css += '}'; 953 954 //ol 955 css += '#lwcn-cookie-settings-intro ol,'; 956 css += '.lwcn-cookie-settings-section-description ol,'; 957 css += '.lwcn-cookie-settings-category-description ol,'; 958 css += '#lwcn-cookie-settings-description-footer ol{'; 959 css += 'margin: 0 0 20px 20px' + declarationSuffix + ';'; 960 css += 'list-style: decimal outside none' + declarationSuffix + ';'; 961 css += 'padding: 0' + declarationSuffix + ';'; 962 css += '}'; 963
964 css += '#lwcn-cookie-settings-intro ol:last-child,'; 965 css += '.lwcn-cookie-settings-section-description ol:last-child,'; 966 css += '.lwcn-cookie-settings-category-description ol:last-child,'; 967 css += '#lwcn-cookie-settings-description-footer ol:last-child{'; 968 css += 'margin: 0 0 0 20px' + declarationSuffix + ';'; 969 css += '}'; 970 971 //ul 972 css += '#lwcn-cookie-settings-intro ul,'; 973 css += '.lwcn-cookie-settings-section-description ul,'; 974 css += '.lwcn-cookie-settings-category-description ul,'; 975 css += '#lwcn-cookie-settings-description-footer ul{'; 976 css += 'margin: 0 0 20px 20px' + declarationSuffix + ';'; 977 css += 'list-style: disc outside none' + declarationSuffix + ';'; 978 css += 'padding: 0' + declarationSuffix + ';'; 979 css += '}'; 980 981 css += '#lwcn-cookie-settings-intro ul:last-child,'; 982 css += '.lwcn-cookie-settings-section-description ul:last-child,'; 983 css += '.lwcn-cookie-settings-category-description ul:last-child,'; 984 css += '#lwcn-cookie-settings-description-footer ul:last-child{'; 985 css += 'margin: 0 0 0 20px' + declarationSuffix + ';'; 986 css += '}'; 987 988 //li 989 css += '#lwcn-cookie-settings-intro li,'; 990 css += '.lwcn-cookie-settings-section-description li,'; 991 css += '.lwcn-cookie-settings-category-description li,'; 992 css += '#lwcn-cookie-settings-description-footer li{'; 993 css += 'margin: 0' + declarationSuffix + ';'; 994 css += 'font-size: 13px' + declarationSuffix + ';'; 995 css += 'color: ' + settings.cookieSettingsParagraphsFontColor + 996 declarationSuffix + ';'; 997 css += 'line-height: 20px' + declarationSuffix + ';'; 998 css += 'font-family: ' + settings.paragraphsFontFamily + '' + 999 declarationSuffix + ';'; 1000 css += 'font-weight: ' + parseInt(settings.paragraphsFontWeight, 10) + '' + 1001 declarationSuffix + ';'; 1002 css += '}'; 1003 1004 //End 1005 1006 // #media query 1007 css += '@media only screen and (max-width: ' + 1008 settings.responsiveBreakpoint + 'px),'; 1009 css += 'screen and (max-height: 640px){'; 1010 1011 // #lwcn-cookie-settings-container 1012 css += '#lwcn-cookie-settings-container{'; 1013 css += 'top: 0' + declarationSuffix + ';'; 1014 css += 'left: 0' + declarationSuffix + ';'; 1015 css += 'width: 100%' + declarationSuffix + ';'; 1016 css += 'height: calc(100% - 32px)' + declarationSuffix + ';'; 1017 css += '}'; 1018 1019 // #lwcn-cookie-settings-body 1020 css += '#lwcn-cookie-settings-body{'; 1021 css += 'width: 100%' + declarationSuffix + ';'; 1022 css += 'height: calc(100% - 187px)' + declarationSuffix + ';'; 1023 css += '}'; 1024 1025 // #lwcn-cookie-settings-footer 1026 css += '#lwcn-cookie-settings-footer{'; 1027 css += 'width: calc(100% - 48px)' + declarationSuffix + ';'; 1028 css += 'height: 100px' + declarationSuffix + ';'; 1029 css += '}'; 1030 1031 // #lwcn-cookie-settings-buttons-container 1032 css += '#lwcn-cookie-settings-buttons-container{'; 1033 css += 'margin: 0' + declarationSuffix + ';'; 1034 css += 'width: 100%' + declarationSuffix + ';'; 1035 css += 'height: 100px' + declarationSuffix + ';'; 1036 css += '}'; 1037 1038 // #lwcn-cookie-settings-blurred-footer 1039 css += '#lwcn-cookie-settings-blurred-footer{'; 1040 css += 'bottom: 140px' + declarationSuffix + ';'; 1041 css += '}'; 1042 1043 // #lwcn-cookie-settings-button 1044 css += '#lwcn-cookie-settings-buttons-container .lwcn-cookie-settings-button{'; 1045 css += 'padding: 0' + declarationSuffix + ';'; 1046 css += 'width: calc(100% - 2px)' + declarationSuffix + ';'; 1047 css += 'display: block' + declarationSuffix + ';'; 1048 css += 'text-align: center' + declarationSuffix + ';'; 1049 css += '}'; 1050 1051 // #lwcn-cookie-settings-button-1 1052 css += '#lwcn-cookie-settings-button-1{'; 1053 css += 'margin-bottom: 20px' + declarationSuffix + ';'; 1054 css += '}'; 1055 1056 // #lwcn-cookie-settings-button-2 1057 css += '#lwcn-cookie-settings-button-2{'; 1058 css += 'margin: 0' + declarationSuffix + ';'; 1059 css += '}'; 1060 1061 css += '}'; 1062 1063 //Add the style element to the DOM 1064 let style = document.createElement('style'); 1065 style.innerHTML = css; 1066 style.id = 'lwcn-cookie-settings-style'; 1067 document.head.appendChild(style); 1068 1069 } 1070 1071 /** 1072 * Bind all the event listeners. 1073 */ 1074 function bindEventListeners() { 1075 1076 'use strict'; 1077 1078 //Add click event listener on the button 1
1079 let bt1 = document.getElementById('lwcn-cookie-settings-button-1'); 1080 if (bt1) { 1081 bt1.addEventListener('click', function() { 1082 switch (parseInt(settings.cookieSettingsButton1Action, 10)) { 1083 case 1: 1084 utility.acceptCookies(settings); 1085 utility.reload(settings); 1086 closeCookieSettings(); 1087 utility.closeNotice(); 1088 break; 1089 case 2: 1090 closeCookieSettings(); 1091 break; 1092 case 3: 1093 window.location.href = settings.cookieSettingsButton1Url; 1094 break; 1095 } 1096 }); 1097 } 1098 1099 //Add click event listener on the button 2 1100 let bt2 = document.getElementById('lwcn-cookie-settings-button-2'); 1101 if (bt2) { 1102 bt2.addEventListener('click', function() { 1103 switch (parseInt(settings.cookieSettingsButton2Action, 10)) { 1104 case 1: 1105 utility.acceptCookies(settings); 1106 utility.reload(settings); 1107 closeCookieSettings(); 1108 utility.closeNotice(); 1109 break; 1110 case 2: 1111 closeCookieSettings(); 1112 break; 1113 case 3: 1114 window.location.href = settings.cookieSettingsButton2Url; 1115 break; 1116 } 1117 }); 1118 } 1119 1120 //Add click event listener to all the section chevrons 1121 let list = document.getElementsByClassName( 1122 'lwcn-cookie-settings-section-chevron'); 1123 for (let i = 0; i < list.length; i++) { 1124 list[i].addEventListener('click', function() { 1125 toggleSection(this); 1126 }); 1127 } 1128 1129 //Add click event listener to all the category expand buttons 1130 let list4 = document.getElementsByClassName( 1131 'lwcn-cookie-settings-category-expand'); 1132 for (let i = 0; i < list4.length; i++) { 1133 list4[i].addEventListener('click', toggleCategoryDescription); 1134 } 1135 1136 //Add click event listener on the category toggles 1137 let categoryToggles = document.getElementsByClassName( 1138 'lwcn-cookie-settings-category-toggle'); 1139 for (let i = 0; i < categoryToggles.length; i++) { 1140 if (parseInt(categoryToggles[i].getAttribute('data-toggle'), 10) === 1) { 1141 categoryToggles[i].addEventListener('click', setCategoryCookie); 1142 } 1143 } 1144 1145 //Add click event listener on the section toggles 1146 let sectionToggles = document.getElementsByClassName( 1147 'lwcn-cookie-settings-section-toggle'); 1148 for (let i = 0; i < sectionToggles.length; i++) { 1149 if (parseInt(sectionToggles[i].getAttribute('data-toggle'), 10) === 1) { 1150 sectionToggles[i].addEventListener('click', handleSectionToggle); 1151 } 1152 } 1153 1154 } 1155 1156 /** 1157 * Changes the class of the chevron and toggles the visibility of the section. 1158 */ 1159 function toggleSection(thisCopy) { 1160 1161 'use strict'; 1162 1163 //Change the class of the chevron 1164 if (thisCopy.classList.contains('down')) { 1165 thisCopy.classList.remove('down'); 1166 } else { 1167 thisCopy.classList.add('down'); 1168 } 1169 1170 //Toggle the visibility of the section 1171 let sectionId = thisCopy.getAttribute('data-section-id'); 1172 let list = document.getElementsByClassName( 1173 'lwcn-cookie-settings-section-body'); 1174 for (let i = 0; i < list.length; i++) { 1175 if (list[i].getAttribute('data-section-id') == sectionId) { 1176 if (list[i].style.display != 'block') { 1177 list[i].style.display = 'block'; 1178 } else { 1179 list[i].style.display = 'none'; 1180 } 1181 } 1182 } 1183 } 1184 1185 /** 1186 * Display and hide the description of the category. 1187 * 1188 * This method is called when the plus/minus sign beside the category title is clicked 1189 * 1190 * @param event 1191 */ 1192 function toggleCategoryDescription(event) { 1193 1194 'use strict'; 1195 1196 let categoryId = this.getAttribute('data-category-id'); 1197 let status = this.getAttribute('data-status'); 1198 1199 //Iterate through all the categories and toggle only the category description associated with this category 1200 let collectionCD = document.getElementsByClassName( 1201 'lwcn-cookie-settings-category-description'); 1202 for (let i = 0; i < collectionCD.length; i++) { 1203 if (collectionCD[i].getAttribute('data-category-id') == categoryId) { 1204 if (status == 0) { 1205 //Display 1206 collectionCD[i].style.display = 'block'; 1207 this.setAttribute('data-status', '1'); 1208 } else { 1209 //Hide 1210 collectionCD[i].style.display = 'none'; 1211 this.setAttribute('data-status', '0'); 1212 } 1213 } 1214 } 1215 1216 //Iterate through all the categories and toggle only the category cookie list associated with this category
1217 let collectionCCL = document.getElementsByClassName( 1218 'lwcn-cookie-settings-category-cookie-list'); 1219 for (let i = 0; i < collectionCCL.length; i++) { 1220 if (collectionCCL[i].getAttribute('data-category-id') == categoryId) { 1221 if (status == 0) { 1222 //Display 1223 collectionCCL[i].style.display = 'block'; 1224 this.setAttribute('data-status', '1'); 1225 } else { 1226 //Hide 1227 collectionCCL[i].style.display = 'none'; 1228 this.setAttribute('data-status', '0'); 1229 } 1230 } 1231 } 1232 1233 } 1234 1235 /** 1236 * This method does what follows: 1237 * 1238 * 1 - Find the new section states and category state based on custom criteria. 1239 * 2 - Change the state of the category toggles to the next status. 1240 * 3 - Change the state of the section toggle. 1241 * 4 - Save the status of all the categories in the serialized "lwcn-category-status" cookie. 1242 * 1243 * @param event 1244 */ 1245 function handleSectionToggle(event) { 1246 1247 'use strict'; 1248 1249 let sectionId = this.getAttribute('data-id'); 1250 let sectionState = this.getAttribute('data-status'); 1251 let nextCategoryState = null; 1252 let nextSectionState = null; 1253 let list = document.getElementsByClassName( 1254 'lwcn-cookie-settings-category-toggle'); 1255 let categoriesOfSection = []; 1256 let counter = 0; 1257 let disabledCounter = 0; 1258 let disabledOffCounter = 0; 1259 let disabledOnCounter = 0; 1260 1261 //Generate the collection with the toggles associated with the categories of the section 1262 for (let i = 0; i < list.length; i++) { 1263 if (list[i].getAttribute('data-section-id') == sectionId) { 1264 categoriesOfSection.push(list[i]); 1265 } 1266 } 1267 1268 /** 1269 * Iterate the toggles associated with the categories of the section and find the following values: 1270 * 1271 * - counter: The total number of toogles 1272 * - disabledCounter: The number of disabled toogles 1273 * - disabledOffCounter: The number of disabled toogles in "off" state 1274 * - disabledOffCounter: The number of disabled toogles in "on" state 1275 * 1276 * Note that these data are required in the other steps. 1277 */ 1278 categoriesOfSection.forEach(function(categoryOfSection) { 1279 counter++; 1280 if (parseInt(categoryOfSection.getAttribute('data-toggle'), 10) === 0) { 1281 disabledCounter++; 1282 if (parseInt(categoryOfSection.getAttribute('data-status'), 10) === 0) { 1283 disabledOffCounter++; 1284 } else { 1285 disabledOnCounter++; 1286 } 1287 } 1288 }); 1289 1290 /** 1291 * 1. Find the new section states and category state based on custom criteria. 1292 * 1293 * Note that: 1294 * 1295 * - The disabledOffCounter is used to verify if the state 2 is reachable for the section. 1296 * - The disabledOnCounter is used to verify if the state 0 is reachable for the section. 1297 */ 1298 if (parseInt(sectionState, 10) === 1) { 1299 if (disabledOffCounter === 0) { 1300 nextSectionState = 2; 1301 nextCategoryState = 2; 1302 } else { 1303 nextSectionState = 0; 1304 nextCategoryState = 0; 1305 } 1306 } else if (parseInt(sectionState, 10) === 0) { 1307 if (disabledOffCounter === 0) { 1308 nextSectionState = 2; 1309 nextCategoryState = 2; 1310 } else { 1311 nextSectionState = 1; 1312 nextCategoryState = 2; 1313 } 1314 } else if (parseInt(sectionState, 10) === 2) { 1315 if (disabledOnCounter === 0) { 1316 nextSectionState = 0; 1317 nextCategoryState = 0; 1318 } else { 1319 nextSectionState = 1; 1320 nextCategoryState = 0; 1321 } 1322 } 1323 1324 /** 1325 * 2. Change the state of the category toggles to the next status (the nextCategoryState value is used). 1326 * 1327 * Note that the category toogle is not modified for the categories with the toggle disabled. 1328 */ 1329 categoriesOfSection.forEach(function(categoryOfSection) { 1330 if (categoryOfSection.getAttribute('data-section-id') == sectionId) { 1331 if (parseInt(categoryOfSection.getAttribute('data-toggle'), 10) === 1) { 1332 categoryOfSection.setAttribute('data-status', nextCategoryState); 1333 } 1334 } 1335 }); 1336 1337 //3. Change the state of the section toggle. (the nextSectionState value is used). 1338 this.setAttribute('data-status', nextSectionState); 1339 1340 //4. Save the status of all the categories in the serialized "lwcn-category-status" cookie.
1341 saveCategoryCookiesInCookie(); 1342 1343 } 1344 1345 /** 1346 * This methods does what follows: 1347 * 1348 * 1 - Toggle the status of the considered category toggle. 1349 * 2 - Save the status of all the category toggles in the "lwcn-category-status" cookie. 1350 * 3 - Update the status of the section toggles based on the values of the category toggles. 1351 */ 1352 function setCategoryCookie() { 1353 1354 'use strict'; 1355 1356 //1 - Toggle the status of the considered category toggle 1357 let nextStatus = null; 1358 let status = this.getAttribute('data-status'); 1359 switch (parseInt(status, 10)) { 1360 case 0: 1361 nextStatus = 2; 1362 break; 1363 case 2: 1364 nextStatus = 0; 1365 break; 1366 } 1367 this.setAttribute('data-status', nextStatus); 1368 1369 //2 - Save the status of all the category toggles in the "lwcn-category-status" cookie 1370 saveCategoryCookiesInCookie(); 1371 1372 //3 - Update the status of the section toggles based on the values of the category toggles 1373 let sectionId = this.getAttribute('data-section-id'); 1374 updateSectionToggle(sectionId); 1375 1376 } 1377 1378 /** 1379 * Save the status of all the categories in the serialized "lwcn-category-status" cookie. 1380 */ 1381 function saveCategoryCookiesInCookie() { 1382 1383 'use strict'; 1384 1385 let categoryCookies = []; 1386 let elements = document.getElementsByClassName( 1387 'lwcn-cookie-settings-category-toggle'); 1388 1389 //Get the category id and the value of all the cookies associated with the categories and save them in an array 1390 for (let i = 0; i < elements.length; i++) { 1391 let status = elements[i].getAttribute('data-status'); 1392 let categoryId = elements[i].getAttribute('data-id'); 1393 categoryCookies.push({ 1394 'categoryId': categoryId, 1395 'status': parseInt(status, 10) === 2 ? '1' : '0', 1396 }); 1397 } 1398 1399 //Convert the array with the data to JSON and save these data in the 'lwcn-category-status' cookie. 1400 categoryCookies = JSON.stringify(categoryCookies); 1401 utility.setCookie('lwcn-category-status', categoryCookies, 1402 settings.cookieExpiration); 1403 1404 } 1405 1406 /** 1407 * Moves the section toggle of the specified section to the correct status based on the status of the category 1408 * toggles of the specified section. 1409 * 1410 * @param sectionId 1411 */ 1412 function updateSectionToggle(sectionId) { 1413 1414 'use strict'; 1415 1416 let checkedCategoryToggleCounter = 0; 1417 let categoryToggleCounter = 0; 1418 let status = 0; 1419 1420 //Counts the total number of category toggles and the number of category toogle with enabled status.
1421 let categoryToggles = document.getElementsByClassName( 1422 'lwcn-cookie-settings-category-toggle'); 1423 for (let i = 0; i < categoryToggles.length; i++) { 1424 if (categoryToggles[i].getAttribute('data-section-id') == sectionId) { 1425 categoryToggleCounter++; 1426 let status = categoryToggles[i].getAttribute('data-status'); 1427 if (status == '2') { 1428 checkedCategoryToggleCounter++; 1429 } 1430 } 1431 } 1432 1433 /** 1434 * Verify how many category toggles of this section are selected: 1435 * 1436 * - If they are all set a green (right position) toggle 1437 * - If they are more than 0 set an orange (middle position) toggle 1438 * - If they are 0 set a grey (left position) toggle 1439 */ 1440 if (checkedCategoryToggleCounter > 0 && 1441 categoryToggleCounter == checkedCategoryToggleCounter) { 1442 //Right position 1443 status = 2; 1444 } else if (checkedCategoryToggleCounter > 0 && 1445 categoryToggleCounter > checkedCategoryToggleCounter) { 1446 //Middle position 1447 status = 1; 1448 } else if (checkedCategoryToggleCounter == 0) { 1449 //Left position 1450 status = 0; 1451 } 1452 1453 //Move the section toggle to the correct status 1454 let el1 = document.querySelector( 1455 '.lwcn-cookie-settings-section-toggle[data-id="' + sectionId + 1456 '"]'); 1457 el1.setAttribute('data-status', status); 1458 1459 } 1460 1461 /** 1462 * Removes the cookie settings modal window and the cookie settings mask from the DOM. 1463 */ 1464 function closeCookieSettings() { 1465 1466 'use strict'; 1467 1468 //Remove the cookie settings window from the DOM 1469 document.getElementById('lwcn-cookie-settings-container').remove(); 1470 1471 //Remove the cookie settings mask from the DOM 1472 let mm = document.getElementById('lwcn-cookie-settings-mask'); 1473 if (mm) { 1474 document.getElementById('lwcn-cookie-settings-mask').remove(); 1475 } 1476 1477 } 1478 1479 //Return an object exposed to the public ----------------------------------------------------------------------------- 1480 return { 1481 1482 initialize: function(configuration) { 1483 1484 //Merge the custom configuration provided by the user with the default configuration 1485 settings = configuration; 1486 1487 //Add the news ticker to the DOM 1488 addToDOM(); 1489 1490 //Apply the style available in the settings 1491 applyStyle(); 1492 1493 //Bind event listeners 1494 bindEventListeners(); 1495 1496 }, 1497 1498 }; 1499 1500}(lwcnUtility));
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.