diff --git a/README.md b/README.md index 82db300..b1e4518 100644 --- a/README.md +++ b/README.md @@ -15,25 +15,18 @@ This plugin is free but if you use it in a commercial project please consider to - `composer require michnhokn/kirby3-cookie-banner` ## Features -- Add custom options to cookie banner +- Add custom features to cookie modal - You can fully translate the cookie banner ([Custom language variables](https://getkirby.com/docs/guide/languages/custom-language-variables)) -- Check the state of the cookie banner via JavaScript events -- Check in code for allowed features +- Intercept cookie status via JavaScript event +- PHP functions to check for allowed features +- Trigger JavaScript event to update Cookie Modal ## Setup -To setup the cookie banner just put the `cookie-banner` snippet right befor your closing body tag. Thats it. 🎉 +To setup the cookie banner just put the `cookie-modal` snippet right befor your closing body tag. Thats it. 🎉 ``` php - + ``` -If a selection is made in the cookie modal, a corresponding event is fired on ``. - -| Event | Reason | -|---|---| -| `cookies:all` | all cookies are accepted | -| `cookies:deny` | only essential cookies are accepted | -| `cookies:custom` | some cookies are accepted | - -Every event contains a comma separated string of selected options. +If a selection is made an event called `cookies:saved` is triggerd on ``. The included data contains an array of allowed features. You can set these up in your `config.php` file under `site/config/`. ````php return [ @@ -46,6 +39,8 @@ return [ ]; ```` +The modal can be recalled and edited by triggering the event `cookies:update` on the `` tag. + ## Methods - `isFeatureAllowed(string $featureName)` Checks if a user allowed given feature ```php @@ -57,9 +52,8 @@ return [ - `clearAllowedFeatures()` Clear all allowed features ## Roadmap - -- Better custom theme -- Set up Wiki +- Add wiki +- Refactor code + add comments --- diff --git a/assets/cookie-banner.css b/assets/cookie-banner.css deleted file mode 100644 index 62f3a9c..0000000 --- a/assets/cookie-banner.css +++ /dev/null @@ -1 +0,0 @@ -.cookie-banner{position:fixed;z-index:1000;width:100%;height:100%;background-color:rgba(0,0,0,.3);left:0;top:0;pointer-events:none}.cookie-banner__content{max-width:600px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);background-color:#fff;margin:15vh auto 0;pointer-events:auto}@media (min-width:400px){.cookie-banner__content{margin:22vh auto 0;padding:40px}}.cookie-banner__title{font-size:1.4rem;font-weight:700;margin-bottom:10px}.cookie-banner__text{margin-bottom:20px;line-height:1.4}.cookie-banner__text a{text-decoration:underline}.cookie-banner__options{margin-bottom:20px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.cookie-banner__options>*{width:calc(50% - 30px)}@media (min-width:400px){.cookie-banner__options>*{width:calc(33.3333% - 30px)}}.cookie-banner__option{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;cursor:pointer;margin-right:30px;margin-bottom:10px}.cookie-banner__option.disabled{opacity:.7}.cookie-banner__checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:block;width:20px;height:20px;border-radius:0;border:2px solid #000;margin-right:6px;flex-shrink:0}.cookie-banner__checkbox:checked{background-color:#000}.cookie-banner__checkbox:checked:focus{outline:none;background-color:#81a2be}.cookie-banner__checkbox:focus{outline:none;border-color:#81a2be}.cookie-banner__check{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:20px;height:20px;flex-shrink:0}.cookie-banner__check svg{stroke:#fff}.cookie-banner__label{line-height:22px}.cookie-banner__buttons{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start}.cookie-banner__button{display:block;margin-right:8px;padding:6px 20px;white-space:nowrap;border:2px solid #000;text-decoration:none;color:#000}@media (min-width:400px){.cookie-banner__button{margin-right:10px;padding:10px 24px}}.cookie-banner__button:focus,.cookie-banner__button:hover{outline:none;border-color:#81a2be}.cookie-banner__button--accept,.cookie-banner__button--save{background-color:#000;color:#fff}.cookie-banner__button--accept:focus,.cookie-banner__button--accept:hover,.cookie-banner__button--save:focus,.cookie-banner__button--save:hover{background-color:#81a2be}.cookie-banner__button--hide{display:none} \ No newline at end of file diff --git a/assets/cookie-banner.js b/assets/cookie-banner.js deleted file mode 100644 index 549fe7f..0000000 --- a/assets/cookie-banner.js +++ /dev/null @@ -1,8 +0,0 @@ -parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c0?",":"",t+=n.dataset.cookieId;break;case"custom":n.querySelector("input").checked&&(t+=o>0?",":"",t+=n.dataset.cookieId);break;default:t="essential"}}),t}},{key:"setCookie",value:function(t){e.default.set("cookie_status",t,{expires:365,secure:!0})}},{key:"triggerEvent",value:function(e,t){var n=new CustomEvent(e,{options:t});document.querySelector("body").dispatchEvent(n)}},{key:"hideCookieBanner",value:function(){document.querySelector(this.SELECTOS.cookieBanner).remove()}},{key:"addClass",value:function(e,t){document.querySelector(e).classList.add(t)}},{key:"removeClass",value:function(e,t){document.querySelector(e).classList.remove(t)}}]),t}();document.addEventListener("DOMContentLoaded",function(){new s}); -},{"../scss/cookie-banner.scss":"HtQF","js-cookie":"bggZ"}]},{},["PDOz"], null) \ No newline at end of file diff --git a/assets/cookie-modal.css b/assets/cookie-modal.css new file mode 100644 index 0000000..aea1b87 --- /dev/null +++ b/assets/cookie-modal.css @@ -0,0 +1 @@ +.cookie-modal{position:fixed;z-index:1000;width:100%;height:100%;background-color:rgba(0,0,0,.3);left:0;top:0;pointer-events:none}.cookie-modal--hidden{display:none}.cookie-modal__content{max-width:600px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);background-color:#fff;margin:15vh auto 0;pointer-events:auto}@media (min-width:400px){.cookie-modal__content{margin:22vh auto 0;padding:40px}}.cookie-modal__title{font-size:1.4rem;font-weight:700;margin-bottom:10px}.cookie-modal__text{margin-bottom:20px;line-height:1.4}.cookie-modal__text a{text-decoration:underline}.cookie-modal__options{margin-bottom:20px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.cookie-modal__options>*{width:calc(50% - 30px)}@media (min-width:400px){.cookie-modal__options>*{width:calc(33.3333% - 30px)}}.cookie-modal__option{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;cursor:pointer;margin-right:30px;margin-bottom:10px}.cookie-modal__option.disabled{opacity:.7}.cookie-modal__checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:block;width:20px;height:20px;border-radius:0;border:2px solid #000;margin-right:6px;flex-shrink:0}.cookie-modal__checkbox:checked{background-color:#000}.cookie-modal__checkbox:checked:focus{outline:none;background-color:#81a2be}.cookie-modal__checkbox:focus{outline:none;border-color:#81a2be}.cookie-modal__check{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:20px;height:20px;flex-shrink:0}.cookie-modal__check svg{stroke:#fff}.cookie-modal__label{line-height:22px}.cookie-modal__buttons{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start}.cookie-modal__button{display:block;margin-right:8px;padding:6px 20px;white-space:nowrap;border:2px solid #000;text-decoration:none;color:#000}@media (min-width:400px){.cookie-modal__button{margin-right:10px;padding:10px 24px}}.cookie-modal__button.primary{background-color:#000;color:#fff}.cookie-modal__button.primary:focus,.cookie-modal__button.primary:hover{background-color:#81a2be}.cookie-modal__button:focus,.cookie-modal__button:hover{outline:none;border-color:#81a2be}.cookie-modal__button.hide{display:none} \ No newline at end of file diff --git a/assets/cookie-modal.js b/assets/cookie-modal.js new file mode 100644 index 0000000..7c2da20 --- /dev/null +++ b/assets/cookie-modal.js @@ -0,0 +1,10 @@ +parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c ]/.test(e)?t(document.createElement("table")).html(e).children().children().nodes:/^\s* ]/.test(e)?t(document.createElement("table")).html(e).children().children().children().nodes:/^\s*-1}).attr({checked:!0}),o.updateButtons())}},{key:"updateCustomFeatures",value:function(){var e=this;e.CUSTOM_FEATURES=[],e.$FEATURES.filter(function(e){return(0,t.default)(e).is(":checked")}).each(function(o){e.CUSTOM_FEATURES.push((0,t.default)(o).data("cookie-id"))}),e.updateButtons()}},{key:"save",value:function(e){event.preventDefault(),(0,t.default)("body").trigger("cookies:saved",e),this.setCookie(e),this.CUSTOM_FEATURES=e,this.closeCookieModal()}},{key:"updateButtons",value:function(){this.CUSTOM_FEATURES.length>1?(this.$ACCEPT_BUTTON.addClass("hide"),this.$DENY_BUTTON.addClass("hide"),this.$SAVE_BUTTON.removeClass("hide")):(this.$ACCEPT_BUTTON.removeClass("hide"),this.$DENY_BUTTON.removeClass("hide"),this.$SAVE_BUTTON.addClass("hide"))}},{key:"setCookie",value:function(t){e.default.set("cookie_status",t.join(","),{expires:365,secure:!0})}},{key:"closeCookieModal",value:function(){this.$COOKIE_MODAL.addClass("cookie-modal--hidden"),this.MODAL_OPEN=!1}},{key:"openCookieModal",value:function(){this.$COOKIE_MODAL.removeClass("cookie-modal--hidden"),this.MODAL_OPEN=!0}}]),o}();(0,t.default)(document).on("DOMContentLoaded",function(e){return new s}); +},{"../scss/cookie-modal.scss":"Uqih","js-cookie":"bggZ","umbrellajs/umbrella.esm":"JBT6"}]},{},["NLXc"], null) \ No newline at end of file diff --git a/composer.json b/composer.json index 997ab2f..77d135e 100644 --- a/composer.json +++ b/composer.json @@ -2,7 +2,7 @@ "name": "michnhokn/kirby3-cookie-banner", "description": "Add a cookie modal to your Kirby3 website", "type": "kirby-plugin", - "version": "1.0.2", + "version": "1.0.3", "license": "MIT", "authors": [ { diff --git a/index.php b/index.php index 53196a3..53b7550 100644 --- a/index.php +++ b/index.php @@ -5,8 +5,8 @@ Kirby::plugin('michnhokn/cookie-banner', [ 'snippets' => [ - 'cookie-banner' => __DIR__ . '/snippets/cookie-banner.php', - 'cookie-banner-option' => __DIR__ . '/snippets/cookie-banner-option.php', + 'cookie-modal' => __DIR__ . '/snippets/cookie-modal.php', + 'cookie-modal-option' => __DIR__ . '/snippets/cookie-modal-option.php', ], 'translations' => [ 'de' => [ diff --git a/package-lock.json b/package-lock.json index 6d05e11..22170dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "kirby3-cookie-banner", - "version": "0.9.0", + "version": "1.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2856,6 +2856,11 @@ "is-number": "^7.0.0" } }, + "umbrellajs": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/umbrellajs/-/umbrellajs-3.2.3.tgz", + "integrity": "sha512-iqk8tR1hxyJiFPQG3Eslv129ZKwNuh96sjCnS1NXo2KzBBFxYc7/EdZVJZE/MPEjyR/vFEFIwBxzvr40yOgfAw==" + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", diff --git a/package.json b/package.json index e7c3fd3..cfaa8ac 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "name": "kirby3-cookie-banner", - "version": "1.0.2", + "version": "1.0.3", "description": "", "author": "Michael Scheurich ", "scripts": { - "dev": "parcel watch ./src/js/cookie-banner.js -d ./assets --public-url ./ --no-hmr", - "build": "parcel build ./src/js/cookie-banner.js -d ./assets --public-url ./ --no-source-maps --no-content-hash" + "dev": "parcel watch ./src/js/cookie-modal.js -d ./assets --public-url ./ --no-hmr", + "build": "parcel build ./src/js/cookie-modal.js -d ./assets --public-url ./ --no-source-maps --no-content-hash" }, "devDependencies": { "@babel/core": "^7.5.5", @@ -14,6 +14,7 @@ "sass": "^1.22.9" }, "dependencies": { - "js-cookie": "^2.2.1" + "js-cookie": "^2.2.1", + "umbrellajs": "^3.2.3" } } diff --git a/snippets/cookie-banner-option.php b/snippets/cookie-banner-option.php deleted file mode 100644 index e1156c2..0000000 --- a/snippets/cookie-banner-option.php +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/snippets/cookie-banner.php b/snippets/cookie-banner.php deleted file mode 100644 index e5f35c5..0000000 --- a/snippets/cookie-banner.php +++ /dev/null @@ -1,33 +0,0 @@ - - -
-
-

-

-
- true, - 'checked' => true, - 'key' => 'essential', - 'title' => t('michnhokn.cookie-banner.essentialText') - ]) ?> - $title): ?> - false, - 'key' => $key, - 'title' => h($title) - ]) ?> - -
-
- - - -
-
-
- - diff --git a/snippets/cookie-modal-option.php b/snippets/cookie-modal-option.php new file mode 100644 index 0000000..72d077f --- /dev/null +++ b/snippets/cookie-modal-option.php @@ -0,0 +1,12 @@ + + + diff --git a/snippets/cookie-modal.php b/snippets/cookie-modal.php new file mode 100644 index 0000000..250caf0 --- /dev/null +++ b/snippets/cookie-modal.php @@ -0,0 +1,37 @@ + +
+
+

+

+
+ true, + 'checked' => true, + 'key' => 'essential', + 'title' => t('michnhokn.cookie-banner.essentialText') + ]) ?> + $title): ?> + false, + 'key' => $key, + 'title' => h($title) + ]) ?> + +
+
+ + + + + + + + + +
+
+
+ diff --git a/src/js/cookie-banner.js b/src/js/cookie-banner.js deleted file mode 100644 index ae632b4..0000000 --- a/src/js/cookie-banner.js +++ /dev/null @@ -1,133 +0,0 @@ -import '../scss/cookie-banner.scss'; -import Cookies from 'js-cookie'; - -class CookieBanner { - constructor() { - this.CLASSES = { - buttonHide: 'cookie-banner__button--hide', - }; - this.SELECTOS = { - cookieBanner: '.cookie-banner', - options: '.cookie-banner__option', - acceptButton: '#cookie-banner__accept', - denyButton: '#cookie-banner__deny', - saveButton: '#cookie-banner__save', - }; - - this.SAVE_BUTTON_ACTIVE = false; - - this.registerHooks(); - } - - registerHooks() { - let _this = this, - $options = document.querySelectorAll(_this.SELECTOS.options), - $acceptButton = document.querySelector(_this.SELECTOS.acceptButton), - $denyButton = document.querySelector(_this.SELECTOS.denyButton), - $saveButton = document.querySelector(_this.SELECTOS.saveButton); - $options.forEach(option => { - option.addEventListener('change', _ => { - _this.checkOptions(); - }); - }); - $acceptButton.addEventListener('click', _ => _this.onAcceptAll()); - $denyButton.addEventListener('click', _ => _this.onDenyAll()); - $saveButton.addEventListener('click', _ => _this.onCustom()); - } - - onAcceptAll() { - let _this = this, options = _this.getOptions('all'); - _this.setCookie(options); - _this.triggerEvent('cookies:all', options); - _this.hideCookieBanner(); - } - - onDenyAll() { - let _this = this, options = _this.getOptions(); - _this.setCookie(options); - _this.triggerEvent('cookies:deny', options); - _this.hideCookieBanner(); - } - - onCustom() { - let _this = this, options = _this.getOptions('custom'); - _this.setCookie(options); - _this.triggerEvent('cookies:custom', options); - _this.hideCookieBanner(); - } - - updateButtons() { - let _this = this; - if (_this.SAVE_BUTTON_ACTIVE) { - _this.addClass(_this.SELECTOS.acceptButton, _this.CLASSES.buttonHide); - _this.addClass(_this.SELECTOS.denyButton, _this.CLASSES.buttonHide); - _this.removeClass(_this.SELECTOS.saveButton, _this.CLASSES.buttonHide); - } - else { - _this.removeClass(_this.SELECTOS.acceptButton, _this.CLASSES.buttonHide); - _this.removeClass(_this.SELECTOS.denyButton, _this.CLASSES.buttonHide); - _this.addClass(_this.SELECTOS.saveButton, _this.CLASSES.buttonHide); - } - } - - checkOptions() { - let _this = this, oneIsActive = false, - activeOptions = _this.SELECTOS.options + ':not(.disabled)'; - document.querySelectorAll(activeOptions).forEach(option => { - if (option.querySelector('input').checked) { - oneIsActive = true; - } - }); - _this.SAVE_BUTTON_ACTIVE = oneIsActive; - _this.updateButtons(); - } - - getOptions(status) { - let _this = this, optionsString = ''; - document.querySelectorAll(_this.SELECTOS.options).forEach((option, i) => { - switch (status) { - case 'all': - optionsString += i > 0 ? ',' : ''; - optionsString += option.dataset.cookieId; - break; - case 'custom': - if (option.querySelector('input').checked) { - optionsString += i > 0 ? ',' : ''; - optionsString += option.dataset.cookieId; - } - break; - default: - optionsString = 'essential'; - break; - } - - }); - return optionsString; - } - - setCookie(options) { - Cookies.set('cookie_status', options, {expires: 365, secure: true}); - } - - triggerEvent(name, data) { - let _this = this, event = new CustomEvent(name, {options: data}); - document.querySelector('body').dispatchEvent(event); - } - - hideCookieBanner() { - let _this = this; - document.querySelector(_this.SELECTOS.cookieBanner).remove(); - } - - addClass(selector, classname) { - document.querySelector(selector).classList.add(classname); - } - - removeClass(selector, classname) { - document.querySelector(selector).classList.remove(classname); - } -} - -document.addEventListener('DOMContentLoaded', function() { - new CookieBanner(); -}); diff --git a/src/js/cookie-modal.js b/src/js/cookie-modal.js new file mode 100644 index 0000000..7179133 --- /dev/null +++ b/src/js/cookie-modal.js @@ -0,0 +1,118 @@ +import '../scss/cookie-modal.scss'; +import Cookies from 'js-cookie'; +import u from 'umbrellajs/umbrella.esm'; + +class CookieModal { + constructor() { + this.$COOKIE_MODAL = u('#cookie-modal'); + this.$FEATURES = u('.cookie-modal__checkbox'); + this.$ACCEPT_BUTTON = u('#cookie-accept'); + this.$DENY_BUTTON = u('#cookie-deny'); + this.$SAVE_BUTTON = u('#cookie-save'); + + this.MODAL_OPEN = false; + this.MINUMUM_FEATURES = ['essential']; + this.MAXIMUM_FEATURES = []; + this.CUSTOM_FEATURES = []; + + this.initCookieModal().then(_ => { + this.registerHooks(); + }); + } + + initCookieModal() { + const _this = this; + return new Promise(resolve => { + _this.loadMaximumFeatures(); + _this.loadCustomFeatures(); + if (_this.CUSTOM_FEATURES.length === 0) { + _this.openCookieModal(); + } + resolve(); + }); + } + + registerHooks() { + const _this = this; + _this.$FEATURES.on('change', _ => _this.updateCustomFeatures()); + _this.$ACCEPT_BUTTON.on('click', _ => _this.save(_this.MAXIMUM_FEATURES)); + _this.$DENY_BUTTON.on('click', _ => _this.save(_this.MINUMUM_FEATURES)); + _this.$SAVE_BUTTON.on('click', _ => _this.save(_this.CUSTOM_FEATURES)); + u('body').on('cookies:update', _ => { + _this.loadCustomFeatures(); + _this.openCookieModal(); + }); + } + + loadMaximumFeatures() { + const _this = this; + _this.$FEATURES.each(feature => { + _this.MAXIMUM_FEATURES.push(u(feature).data('cookie-id').toLowerCase()); + }); + } + + loadCustomFeatures() { + const _this = this; + if (Cookies.get('cookie_status')) { + _this.CUSTOM_FEATURES = Cookies.get('cookie_status').split(','); + _this.$FEATURES.filter(feature => { + return _this.CUSTOM_FEATURES.indexOf(u(feature).data('cookie-id')) > -1; + }).attr({checked: true}); + _this.updateButtons(); + } + } + + updateCustomFeatures() { + const _this = this; + _this.CUSTOM_FEATURES = []; + _this.$FEATURES.filter(feature => u(feature).is(':checked')).each(f => { + _this.CUSTOM_FEATURES.push(u(f).data('cookie-id')); + }); + _this.updateButtons(); + } + + save(features) { + const _this = this; + event.preventDefault(); + u('body').trigger('cookies:saved', features); + _this.setCookie(features); + _this.CUSTOM_FEATURES = features; + _this.closeCookieModal(); + } + + updateButtons() { + let _this = this; + if (_this.CUSTOM_FEATURES.length > 1) { + _this.$ACCEPT_BUTTON.addClass('hide'); + _this.$DENY_BUTTON.addClass('hide'); + _this.$SAVE_BUTTON.removeClass('hide'); + } + else { + _this.$ACCEPT_BUTTON.removeClass('hide'); + _this.$DENY_BUTTON.removeClass('hide'); + _this.$SAVE_BUTTON.addClass('hide'); + } + } + + setCookie(features) { + Cookies.set( + 'cookie_status', + features.join(','), + {expires: 365, secure: true}, + ); + } + + closeCookieModal() { + const _this = this; + _this.$COOKIE_MODAL.addClass('cookie-modal--hidden'); + _this.MODAL_OPEN = false; + } + + openCookieModal() { + const _this = this; + _this.$COOKIE_MODAL.removeClass('cookie-modal--hidden'); + _this.MODAL_OPEN = true; + } +} + +u(document).on('DOMContentLoaded', _ => new CookieModal()); diff --git a/src/scss/cookie-banner.scss b/src/scss/cookie-modal.scss similarity index 96% rename from src/scss/cookie-banner.scss rename to src/scss/cookie-modal.scss index 62b9fe1..b46df33 100644 --- a/src/scss/cookie-banner.scss +++ b/src/scss/cookie-modal.scss @@ -1,4 +1,4 @@ -.cookie-banner { +.cookie-modal { position: fixed; z-index: 1000; width: 100%; @@ -8,6 +8,10 @@ top: 0; pointer-events: none; + &--hidden { + display: none; + } + &__content { max-width: 600px; padding: 20px; @@ -137,12 +141,7 @@ padding: 10px 24px; } - &:focus, &:hover { - outline: none; - border-color: #81a2be; - } - - &--accept, &--save { + &.primary { background-color: #000000; color: #FFFFFF; @@ -151,7 +150,12 @@ } } - &--hide { + &:focus, &:hover { + outline: none; + border-color: #81a2be; + } + + &.hide { display: none; } }