-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
execute only if cookie banner exists (#103)
Co-authored-by: Nathan Rogan <nathanroagn@centro.org.uk>
- Loading branch information
Showing
1 changed file
with
115 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,133 +1,137 @@ | ||
| const cookies = () => { | ||
| const cookiesBanner = document.querySelector('header .wmcads-cookies-banner'); | ||
|
|
||
| const hideCookieBanner = () => { | ||
| cookiesBanner.style.display = 'none'; | ||
| }; | ||
| const showCookieBanner = () => { | ||
| const codeExample = document.querySelector( | ||
| '.wmcads-website-code-example .wmcads-cookies-banner' | ||
| ); | ||
| if (cookiesBanner) { | ||
| const hideCookieBanner = () => { | ||
| cookiesBanner.style.display = 'none'; | ||
| }; | ||
| const showCookieBanner = () => { | ||
| const codeExample = document.querySelector( | ||
| '.wmcads-website-code-example .wmcads-cookies-banner' | ||
| ); | ||
|
|
||
| cookiesBanner.style.display = 'block'; | ||
| if (codeExample) codeExample.style.display = 'block'; // Ensure the cookie banner in the component example stays visible even if the user has already accepted cookies | ||
| }; | ||
|
|
||
| cookiesBanner.style.display = 'block'; | ||
| if (codeExample) codeExample.style.display = 'block'; // Ensure the cookie banner in the component example stays visible even if the user has already accepted cookies | ||
| }; | ||
|
|
||
| // Set cookie based on name, value and expiry date supplied | ||
| const setCookie = (cname, cvalue, exdays) => { | ||
| const d = new Date(); | ||
| d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000); | ||
| const expires = `expires=${d.toUTCString()}`; | ||
| const domain = `domain=${window.location.hostname}`; | ||
| document.cookie = `${cname}=${cvalue};${expires};${domain};path=/`; | ||
| }; | ||
|
|
||
| // Get cookie based on name supplied | ||
| const getCookie = cname => { | ||
| const name = `${cname}=`; | ||
| const ca = document.cookie.split(';'); | ||
| for (let i = 0; i < ca.length; i += 1) { | ||
| let c = ca[i]; | ||
| while (c.charAt(0) === ' ') { | ||
| c = c.substring(1); | ||
| // Set cookie based on name, value and expiry date supplied | ||
| const setCookie = (cname, cvalue, exdays) => { | ||
| const d = new Date(); | ||
| d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000); | ||
| const expires = `expires=${d.toUTCString()}`; | ||
| const domain = `domain=${window.location.hostname}`; | ||
| document.cookie = `${cname}=${cvalue};${expires};${domain};path=/`; | ||
| }; | ||
|
|
||
| // Get cookie based on name supplied | ||
| const getCookie = cname => { | ||
| const name = `${cname}=`; | ||
| const ca = document.cookie.split(';'); | ||
| for (let i = 0; i < ca.length; i += 1) { | ||
| let c = ca[i]; | ||
| while (c.charAt(0) === ' ') { | ||
| c = c.substring(1); | ||
| } | ||
| if (c.indexOf(name) === 0) { | ||
| return c.substring(name.length, c.length); | ||
| } | ||
| } | ||
| if (c.indexOf(name) === 0) { | ||
| return c.substring(name.length, c.length); | ||
| return ''; | ||
| }; | ||
|
|
||
| // Check if cookie(s) created or not | ||
| const checkCookie = cname => { | ||
| const isCookieCreated = getCookie(cname); | ||
| if (isCookieCreated === '') { | ||
| return false; | ||
| } | ||
| } | ||
| return ''; | ||
| }; | ||
|
|
||
| // Check if cookie(s) created or not | ||
| const checkCookie = cname => { | ||
| const isCookieCreated = getCookie(cname); | ||
| if (isCookieCreated === '') { | ||
| return false; | ||
| } | ||
| return true; | ||
| }; | ||
| return true; | ||
| }; | ||
|
|
||
| const getCookiePolicy = () => JSON.parse(getCookie('cookies-policy')); | ||
| const getCookiePolicy = () => JSON.parse(getCookie('cookies-policy')); | ||
|
|
||
| const updateCookiePreferences = () => { | ||
| if (document.querySelector('.wmcads-cookies-manager__preferences')) { | ||
| hideCookieBanner(); | ||
| const cookiesOptions = document | ||
| .querySelector('.wmcads-cookies-manager__preferences') | ||
| .querySelectorAll('.wmcads-fe-checkboxes__input'); | ||
| const currentOptions = [ | ||
| getCookiePolicy().essential, | ||
| getCookiePolicy().functional, | ||
| getCookiePolicy().performance | ||
| ]; | ||
| for (let i = 0; i < cookiesOptions.length; i += 1) { | ||
| cookiesOptions[i].checked = currentOptions[i]; | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const setCookiePolicy = (essentialValue, functionalValue, performanceValue) => { | ||
| const cookieValue = { | ||
| essential: essentialValue, | ||
| functional: functionalValue, | ||
| performance: performanceValue | ||
| }; | ||
| setCookie('cookies-policy', JSON.stringify(cookieValue), 181); | ||
| updateCookiePreferences(); | ||
| }; | ||
|
|
||
| const updateCookiePreferences = () => { | ||
| if (document.querySelector('.wmcads-cookies-manager__preferences')) { | ||
| const acceptAllCookies = () => { | ||
| setCookiePolicy(true, true, true); | ||
| setCookie('cookies-preference', true, 181); | ||
| hideCookieBanner(); | ||
| const cookiesOptions = document | ||
| .querySelector('.wmcads-cookies-manager__preferences') | ||
| .querySelectorAll('.wmcads-fe-checkboxes__input'); | ||
| const currentOptions = [ | ||
| getCookiePolicy().essential, | ||
| getCookiePolicy().functional, | ||
| getCookiePolicy().performance | ||
| ]; | ||
| for (let i = 0; i < cookiesOptions.length; i += 1) { | ||
| cookiesOptions[i].checked = currentOptions[i]; | ||
| } | ||
| } | ||
| }; | ||
| }; | ||
|
|
||
| const setCookiePolicy = (essentialValue, functionalValue, performanceValue) => { | ||
| const cookieValue = { | ||
| essential: essentialValue, | ||
| functional: functionalValue, | ||
| performance: performanceValue | ||
| const savePreferences = () => { | ||
| if (document.querySelector('.wmcads-cookies-manager__form')) { | ||
| const elements = document | ||
| .querySelector('.wmcads-cookies-manager__form') | ||
| .querySelectorAll('.wmcads-fe-checkboxes__input'); | ||
| const selectedOptions = []; | ||
| for (let i = 0; i < elements.length; i += 1) { | ||
| selectedOptions[i] = elements.item(i).checked; | ||
| } | ||
| setCookiePolicy(...selectedOptions); | ||
| setCookie('cookies-preference', true, 181); | ||
| } | ||
| }; | ||
| setCookie('cookies-policy', JSON.stringify(cookieValue), 181); | ||
| updateCookiePreferences(); | ||
| }; | ||
|
|
||
| const acceptAllCookies = () => { | ||
| setCookiePolicy(true, true, true); | ||
| setCookie('cookies-preference', true, 181); | ||
| hideCookieBanner(); | ||
| }; | ||
|
|
||
| const savePreferences = () => { | ||
| if (document.querySelector('.wmcads-cookies-manager__form')) { | ||
| const elements = document | ||
| .querySelector('.wmcads-cookies-manager__form') | ||
| .querySelectorAll('.wmcads-fe-checkboxes__input'); | ||
| const selectedOptions = []; | ||
| for (let i = 0; i < elements.length; i += 1) { | ||
| selectedOptions[i] = elements.item(i).checked; | ||
|
|
||
| const cookiesScan = () => { | ||
| // if cookies-preference doesn't exist, show cookie banner | ||
| if (!checkCookie('cookies-preference')) { | ||
| showCookieBanner(); | ||
| setCookiePolicy(true, false, false); | ||
| } | ||
| setCookiePolicy(...selectedOptions); | ||
| setCookie('cookies-preference', true, 181); | ||
| } | ||
| }; | ||
|
|
||
| const cookiesScan = () => { | ||
| // if cookies-preference doesn't exist, show cookie banner | ||
| if (!checkCookie('cookies-preference')) { | ||
| showCookieBanner(); | ||
| setCookiePolicy(true, false, false); | ||
| } | ||
| // verify if we are at Cookies Manager page and update the selected options to match the already created cookie | ||
| updateCookiePreferences(); | ||
| }; | ||
|
|
||
| // verify if we are at Cookies Manager page and update the selected options to match the already created cookie | ||
| updateCookiePreferences(); | ||
| }; | ||
| const isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe | ||
|
|
||
| const isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe | ||
| // Creation of default Cookies permissions when the DOM is fully loaded | ||
| if (!isInIframe) document.addEventListener('DOMContentLoaded', cookiesScan); | ||
|
|
||
| // Creation of default Cookies permissions when the DOM is fully loaded | ||
| if (!isInIframe) document.addEventListener('DOMContentLoaded', cookiesScan); | ||
| // When Accept all cookies button is triggered | ||
| const acceptAllCookiesBtn = document.querySelector( | ||
| '.wmcads-cookies-banner__accept-all-cookies' | ||
| ); | ||
|
|
||
| // When Accept all cookies button is triggered | ||
| const acceptAllCookiesBtn = document.querySelector('.wmcads-cookies-banner__accept-all-cookies'); | ||
| if (!isInIframe) { | ||
| acceptAllCookiesBtn.addEventListener('click', acceptAllCookies); | ||
| acceptAllCookiesBtn.addEventListener('keydown', event => { | ||
| if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') { | ||
| event.preventDefault(); | ||
| acceptAllCookies(); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| if (!isInIframe) { | ||
| acceptAllCookiesBtn.addEventListener('click', acceptAllCookies); | ||
| acceptAllCookiesBtn.addEventListener('keydown', event => { | ||
| if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') { | ||
| event.preventDefault(); | ||
| acceptAllCookies(); | ||
| } | ||
| }); | ||
| // When Safe Preferences button is triggered | ||
| const cookieForm = document.querySelector('.wmcads-cookies-manager__form'); | ||
| if (cookieForm) cookieForm.addEventListener('submit', savePreferences); | ||
| } | ||
|
|
||
| // When Safe Preferences button is triggered | ||
| const cookieForm = document.querySelector('.wmcads-cookies-manager__form'); | ||
| if (cookieForm) cookieForm.addEventListener('submit', savePreferences); | ||
| }; | ||
|
|
||
| export default cookies; |