From d03862f5ab7a0f2f54ac8f896b6fe1d22005f4fc Mon Sep 17 00:00:00 2001 From: michnhokn Date: Fri, 18 Dec 2020 13:54:23 +0100 Subject: [PATCH 1/2] rewrite js. remove umbrella js --- .gitattributes | 2 + assets/cookie-modal.js | 6 +-- package-lock.json | 5 -- package.json | 3 +- src/cookie-modal.js | 102 ++++++++++++++++++++++++++++------------- 5 files changed, 76 insertions(+), 42 deletions(-) create mode 100644 .gitattributes diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/assets/cookie-modal.js b/assets/cookie-modal.js index 156b1d3..538b589 100644 --- a/assets/cookie-modal.js +++ b/assets/cookie-modal.js @@ -3,8 +3,6 @@ parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcel },{}],"PhdE":[function(require,module,exports) { var define; var e;!function(n){var t;if("function"==typeof e&&e.amd&&(e(n),t=!0),"object"==typeof exports&&(module.exports=n(),t=!0),!t){var o=window.Cookies,r=window.Cookies=n();r.noConflict=function(){return window.Cookies=o,r}}}(function(){function e(){for(var e=0,n={};e ]/.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})}},{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}); -},{"./cookie-modal.scss":"Xtxe","js-cookie":"PhdE","umbrellajs/umbrella.esm":"xp7R"}]},{},["NLXc"], null) \ No newline at end of file +"use strict";require("./cookie-modal.scss");var e=t(require("js-cookie"));function t(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var o=0;o1&&void 0!==arguments[1]?arguments[1]:{},o=null;window.CustomEvent&&"function"==typeof window.CustomEvent?o=new CustomEvent(e,{detail:t}):(o=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,t),document.querySelector("body").dispatchEvent(o)}var u=function(){function t(){var e=this;o(this,t),this.$COOKIE_MODAL=a("#cookie-modal"),this.$FEATURES=s(".cookie-modal__checkbox"),this.$ACCEPT_BUTTON=a("#cookie-accept"),this.$DENY_BUTTON=a("#cookie-deny"),this.$SAVE_BUTTON=a("#cookie-save"),this.MODAL_OPEN=!1,this.MINUMUM_FEATURES=["essential"],this.MAXIMUM_FEATURES=[],this.CUSTOM_FEATURES=[],this.initCookieModal().then(function(t){return e.registerHooks()}),console.log(this)}return n(t,[{key:"initCookieModal",value:function(){var e=this;return new Promise(function(t){e.loadMaximumFeatures(),e.loadCustomFeatures(),0===e.CUSTOM_FEATURES.length&&e.openCookieModal(),t()})}},{key:"registerHooks",value:function(){var e=this;Array.prototype.forEach.call(e.$FEATURES,function(t){t.addEventListener("change",function(t){return e.updateCustomFeatures()})}),e.$ACCEPT_BUTTON.addEventListener("click",function(t){return e.save(e.MAXIMUM_FEATURES)}),e.$DENY_BUTTON.addEventListener("click",function(t){return e.save(e.MINUMUM_FEATURES)}),e.$SAVE_BUTTON.addEventListener("click",function(t){return e.save(e.CUSTOM_FEATURES)}),a("body").addEventListener("cookies:update",function(t){e.loadCustomFeatures(),e.openCookieModal()})}},{key:"loadMaximumFeatures",value:function(){var e=this;Array.prototype.forEach.call(e.$FEATURES,function(t){var o=t.dataset.cookieId.toLowerCase();e.MAXIMUM_FEATURES.push(o)})}},{key:"loadCustomFeatures",value:function(){var t=this;if(e.default.get("cookie_status")){t.CUSTOM_FEATURES=e.default.get("cookie_status").split(",");var o=Array.prototype.filter.call(t.$FEATURES,function(e){var o=e.dataset.cookieId.toLowerCase();return t.CUSTOM_FEATURES.indexOf(o)>-1});Array.prototype.forEach.call(o,function(e){e.setAttribute("checked",!0)}),t.updateButtons()}}},{key:"updateCustomFeatures",value:function(){var e=this;e.CUSTOM_FEATURES=[];var t=Array.prototype.filter.call(e.$FEATURES,function(e){return e.checked});Array.prototype.forEach.call(t,function(t){var o=t.dataset.cookieId.toLowerCase();e.CUSTOM_FEATURES.push(o)}),e.updateButtons()}},{key:"save",value:function(e){event.preventDefault(),r("cookies:saved",e),this.setCookie(e),this.CUSTOM_FEATURES=e,this.closeCookieModal()}},{key:"updateButtons",value:function(){this.CUSTOM_FEATURES.length>1?(this.$ACCEPT_BUTTON.classList.add("hide"),this.$DENY_BUTTON.classList.add("hide"),this.$SAVE_BUTTON.classList.remove("hide")):(this.$ACCEPT_BUTTON.classList.remove("hide"),this.$DENY_BUTTON.classList.remove("hide"),this.$SAVE_BUTTON.classList.add("hide"))}},{key:"setCookie",value:function(t){e.default.set("cookie_status",t.join(","),{expires:365})}},{key:"closeCookieModal",value:function(){this.$COOKIE_MODAL.classList.add("cookie-modal--hidden"),this.MODAL_OPEN=!1}},{key:"openCookieModal",value:function(){this.$COOKIE_MODAL.classList.remove("cookie-modal--hidden"),this.MODAL_OPEN=!0}}]),t}();document.addEventListener("DOMContentLoaded",function(e){return new u}); +},{"./cookie-modal.scss":"Xtxe","js-cookie":"PhdE"}]},{},["NLXc"], null) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index cb2aeba..ddd3736 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2856,11 +2856,6 @@ "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 a8bfeeb..3cb17d9 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "sass": "^1.22.9" }, "dependencies": { - "js-cookie": "^2.2.1", - "umbrellajs": "^3.2.3" + "js-cookie": "^2.2.1" } } diff --git a/src/cookie-modal.js b/src/cookie-modal.js index 9c90ba4..fd2cadb 100644 --- a/src/cookie-modal.js +++ b/src/cookie-modal.js @@ -1,23 +1,41 @@ import './cookie-modal.scss'; import Cookies from 'js-cookie'; -import u from 'umbrellajs/umbrella.esm'; + +function element(selector) { + return document.querySelector(selector); +} + +function allElements(selector) { + return document.querySelectorAll(selector); +} + +function triggerEvent(eventName, data = {}) { + let customEvent = null; + if (window.CustomEvent && typeof window.CustomEvent === 'function') { + customEvent = new CustomEvent(eventName, {detail: data}); + } else { + customEvent = document.createEvent('CustomEvent'); + customEvent.initCustomEvent(eventName, true, true, data); + } + document.querySelector('body').dispatchEvent(customEvent); +} 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.$COOKIE_MODAL = element('#cookie-modal'); + this.$FEATURES = allElements('.cookie-modal__checkbox'); + this.$ACCEPT_BUTTON = element('#cookie-accept'); + this.$DENY_BUTTON = element('#cookie-deny'); + this.$SAVE_BUTTON = element('#cookie-save'); this.MODAL_OPEN = false; this.MINUMUM_FEATURES = ['essential']; this.MAXIMUM_FEATURES = []; this.CUSTOM_FEATURES = []; - this.initCookieModal().then(_ => { - this.registerHooks(); - }); + this.initCookieModal().then(_ => this.registerHooks()); + + console.log(this); } initCookieModal() { @@ -34,11 +52,22 @@ class CookieModal { 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', _ => { + Array.prototype.forEach.call(_this.$FEATURES, feature => { + feature.addEventListener('change', _ => _this.updateCustomFeatures()); + }); + _this.$ACCEPT_BUTTON.addEventListener( + 'click', + _ => _this.save(_this.MAXIMUM_FEATURES), + ); + _this.$DENY_BUTTON.addEventListener( + 'click', + _ => _this.save(_this.MINUMUM_FEATURES), + ); + _this.$SAVE_BUTTON.addEventListener( + 'click', + _ => _this.save(_this.CUSTOM_FEATURES), + ); + element('body').addEventListener('cookies:update', _ => { _this.loadCustomFeatures(); _this.openCookieModal(); }); @@ -46,8 +75,9 @@ class CookieModal { loadMaximumFeatures() { const _this = this; - _this.$FEATURES.each(feature => { - _this.MAXIMUM_FEATURES.push(u(feature).data('cookie-id').toLowerCase()); + Array.prototype.forEach.call(_this.$FEATURES, feature => { + const featureKey = feature.dataset.cookieId.toLowerCase(); + _this.MAXIMUM_FEATURES.push(featureKey); }); } @@ -55,9 +85,14 @@ class CookieModal { 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}); + const activeFeatures = Array.prototype.filter.call(_this.$FEATURES, + feature => { + const featureKey = feature.dataset.cookieId.toLowerCase(); + return _this.CUSTOM_FEATURES.indexOf(featureKey) > -1; + }); + Array.prototype.forEach.call(activeFeatures, feature => { + feature.setAttribute('checked', true); + }); _this.updateButtons(); } } @@ -65,8 +100,13 @@ class CookieModal { 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')); + const checkedFeatures = Array.prototype.filter.call( + _this.$FEATURES, + feature => feature.checked, + ); + Array.prototype.forEach.call(checkedFeatures, feature => { + const featureKey = feature.dataset.cookieId.toLowerCase(); + _this.CUSTOM_FEATURES.push(featureKey); }); _this.updateButtons(); } @@ -74,7 +114,7 @@ class CookieModal { save(features) { const _this = this; event.preventDefault(); - u('body').trigger('cookies:saved', features); + triggerEvent('cookies:saved', features); _this.setCookie(features); _this.CUSTOM_FEATURES = features; _this.closeCookieModal(); @@ -83,13 +123,13 @@ class CookieModal { 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'); + _this.$ACCEPT_BUTTON.classList.add('hide'); + _this.$DENY_BUTTON.classList.add('hide'); + _this.$SAVE_BUTTON.classList.remove('hide'); } else { - _this.$ACCEPT_BUTTON.removeClass('hide'); - _this.$DENY_BUTTON.removeClass('hide'); - _this.$SAVE_BUTTON.addClass('hide'); + _this.$ACCEPT_BUTTON.classList.remove('hide'); + _this.$DENY_BUTTON.classList.remove('hide'); + _this.$SAVE_BUTTON.classList.add('hide'); } } @@ -99,15 +139,15 @@ class CookieModal { closeCookieModal() { const _this = this; - _this.$COOKIE_MODAL.addClass('cookie-modal--hidden'); + _this.$COOKIE_MODAL.classList.add('cookie-modal--hidden'); _this.MODAL_OPEN = false; } openCookieModal() { const _this = this; - _this.$COOKIE_MODAL.removeClass('cookie-modal--hidden'); + _this.$COOKIE_MODAL.classList.remove('cookie-modal--hidden'); _this.MODAL_OPEN = true; } } -u(document).on('DOMContentLoaded', _ => new CookieModal()); +document.addEventListener('DOMContentLoaded', _ => new CookieModal()); From a7f3743ffa274c3e12ad3261ec5f56bdd504c5a8 Mon Sep 17 00:00:00 2001 From: michnhokn Date: Fri, 18 Dec 2020 14:03:12 +0100 Subject: [PATCH 2/2] raise version --- composer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/composer.json b/composer.json index ebd9ddf..02a1dd3 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.5", + "version": "1.0.7", "license": "MIT", "authors": [ {