cookieyesno - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

dist/cookieyesno.cjs.js

@@ -7,5 +7,9 @@ 'use strict';
 
+// TODO:
+// Load blocked scripts
+// reload on reject (by default true) none
+
 class CookieYesNo {
     constructor(config) {
-        this.version = '1.0.4';
+        this.version = '1.1.0';
         this.cookie = {     //  cookie handler
@@ -33,7 +37,22 @@ set: function(data) {
 
-        // listeners
-        this._changeListeners = [];
-        this._acceptListeners = [];  
-        this._rejectListeners = [];      
+        const setDefaultValue = (key, defaultValue) => {
+            if (this._config[key] === undefined)
+                this._config[key] = defaultValue;
+        };
 
+        setDefaultValue('title', 'Cookie Settings');
+        setDefaultValue('acceptAllButtonText', 'Accept all cookies');
+        setDefaultValue('acceptSelectionButtonText', 'Accept selected cookies');
+
+        // Create arrays for listeners if they do not already exist
+        const listenerTypes = ['onAccept', 'onReject', 'onChange'];
+        this._loopOverCategories((category) => {
+            listenerTypes.forEach(listenerType => {
+                if(category[listenerType] === undefined)
+                {
+                    category[listenerType] = [];
+                }
+            });
+        });
+
         this.banner = this._createBanner();
@@ -54,3 +73,3 @@ this._applyStyle();
         else
-            this._runAcceptRejectListeners();
+            this._runListeners();
     }
@@ -81,24 +100,17 @@
 
-    onChange(cb) {
-        this._changeListeners.push(cb);
+    onChange(category, callback) {
+        this._config.categories[category].onChange.push(callback);
     }
 
-    onAccept(name, cb) {
-        if((this.getSettings())[name] === true)
-            cb();
-
-        this._acceptListeners.push({
-            name: name,
-            cb: cb
-        });
+    onAccept(category, callback) {
+        if((this.getSettings())[category] === true)
+            callback();
+        this._config.categories[category].onAccept.push(callback);
     }
 
-    onReject(name, cb) {
-        if((this.getSettings())[name] === false)
-            cb();
+    onReject(category, callback) {
+        if((this.getSettings())[category] === false)
+            callback();
 
-        this._rejectListeners.push({
-            name: name,
-            cb: cb
-        });
+        this._config.categories[category].onReject.push(callback);
     }
@@ -112,29 +124,35 @@
     _createBanner() {
+        const textAbove = (this._config.text != undefined && this._config.text.above != undefined)?
+            this._config.text.above : 'This website uses cookies.\
+                You can choose below which cookies may be stored on your device. You can allow all cookies using\
+                the "Accept all cookies" button or accept a selection of cookies by using the\
+                "Accept selected cookies" button and the checkboxes to select cookie categories.\
+                You can review and revoke consent at any time using the "Review cookie settings" link in the footer.';
+
+        const textBelow = (this._config.text != undefined && this._config.text.below != undefined)?
+            this._config.text.below : '';
         const el = document.createElement('div');
         el.className = 'cyn-banner';
-        let text = '<h3 style="font-size:28px;font-weight:bold;margin-top:16px;margin-bottom:20px">Cookie Settings</h3>';
-        text += '<p>' + this._config.text + '</p>';
+        let text = '<h3 style="font-size:28px;font-weight:bold;margin-top:16px;margin-bottom:20px">' +
+            this._config.title + '</h3>';
+        text += '<p>' + this._insertLinks(textAbove) + '</p>';
 
 
         // buttons
-        text += '<button class="cyn-btn-accept-all">Accept all cookies</button>';
-        text += '<button class="cyn-btn-save">Accept selection</button>';
+        text += '<button class="cyn-btn-accept-all">' + this._config.acceptAllButtonText + '</button>';
+        text += '<button class="cyn-btn-save">' + this._config.acceptSelectionButtonText + '</button>';
 
         text += '<table class="cyn-categories"><tbody>';
 
-        for(const key in this._config.categories) {
-            const cat = this._config.categories[key];
-
-            text += '<tr><td style="font-weight:bold">' + key + '</td><td>' + cat.description + '</td><td>';
+        this._loopOverCategories((category, key) => {
+            text += '<tr><td style="font-weight:bold">' + category.name + '</td><td>' + category.description + '</td><td>';
             text += '<input type="checkbox" value="' + key + '"'
-                 + ((cat.allowed)? ' checked' : '')
-                 + ((cat.changeable === true || cat.changeable === undefined)? '' : ' disabled') + '/>';
+                 + ((category.accepted)? ' checked' : '')
+                 + ((category.changeable === true || category.changeable === undefined)? '' : ' disabled') + '/>';
             text += '</td></tr>';
-        }
+        });
 
         text += '</tbody></table>';
 
-        // Cookie Policy link
-        text += '<p>For detailed information take a look at the <a href="' + this._config.cookiePolicy.url +
-            '">' + this._config.cookiePolicy.text + '</a>.</p>';
+        text += '<p>' + this._insertLinks(textBelow) + '</p>';
 
@@ -145,5 +163,7 @@ // section for other links
         if(this._config.imprint != undefined)
-            text += '<a href="' + this._config.imprint.url + '">' + this._config.imprint.text + '</a> ';
+            text += this._createLink(this._config.imprint) + ' ';
         if(this._config.privacyPolicy != undefined)
-            text += '<a href="' + this._config.privacyPolicy.url + '">' + this._config.privacyPolicy.text + '</a> ';
+            text += this._createLink(this._config.privacyPolicy) + ' ';
+        if(this._config.cookiePolicy != undefined)
+            text += this._createLink(this._config.cookiePolicy);
 
@@ -164,4 +184,4 @@ text += '</div>';
             {
-                inputs[i].checked = (settings[inputs[i].value.toLowerCase()] != undefined &&
-                    settings[inputs[i].value.toLowerCase()] == true)? true : false;
+                inputs[i].checked = (settings[inputs[i].value] != undefined &&
+                    settings[inputs[i].value] == true)? true : false;
             }
@@ -188,3 +208,6 @@ }
         if(window.innerWidth <= 768)    // mobile
+        {
             style.top = style.right = style.left = style.bottom = '16px';
+            style.maxWidth = '80%';
+        }
         else        // desktop (large screen)
@@ -194,2 +217,3 @@ {
             style.maxHeight = '80vh';
+            style.maxWidth = '40%';
         }
@@ -244,3 +268,3 @@
             for(const category in this._config.categories)
-                newSettings[category.toLowerCase()] = true;     // turn Analytics to analytics
+                newSettings[category] = true;
         } else if(className.indexOf('cyn-btn-save') != -1) {
@@ -250,12 +274,8 @@ const inputs = this.banner.getElementsByTagName('input');
                 if(inputs[i].type == 'checkbox')
-                    newSettings[inputs[i].value.toLowerCase()] = inputs[i].checked;
+                    newSettings[inputs[i].value] = inputs[i].checked;
         } else return;
 
         this.hide();
-
-        // run CBs
-        for(let i = 0; i < this._changeListeners.length; i++)
-            this._changeListeners[i](newSettings);
         
-        this._runAcceptRejectListeners(newSettings);
+        this._runListeners(newSettings);
 
@@ -265,15 +285,82 @@ this._save(newSettings);
 
-    _runAcceptRejectListeners(settings) {
+    _runListeners(settings) {
+        const initialPageLoadExecution = (settings === undefined)? true : false;
         if(settings === undefined)      // default parameter
             settings = this.getSettings();
 
-        for(let i = 0; i < this._acceptListeners.length; i++)
-            if(settings[this._acceptListeners[i].name] === true)
-                this._acceptListeners[i].cb();
+        this._loopOverCategories((category, key) => {
+            category.onChange.forEach(listener => listener(settings[key]));
 
-        for(let i = 0; i < this._rejectListeners.length; i++)
-            if(settings[this._rejectListeners[i].name] === false)
-                this._rejectListeners[i].cb();
+            if(settings[key] === true)
+            {
+                this._activateScriptsOfCategory(key);
+                category.onAccept.forEach(listener => listener());
+            }
+            else
+            {
+                category.onReject.forEach(listener => {
+                    const reload = listener();
+                    /*
+                        When do we need to reload the page?
+                        -----------------------------------
+                        The page gets reloaded when the user rejects a cookie afterwards,
+                        and:
+                            * the callback routine thats executed before returns false
+                            * the reloadOnReject-option in the config is not set or
+                                is set to true
+                    */
+                    if(!initialPageLoadExecution && reload !== false &&
+                        (this._config.categories[key]['reloadOnReject'] === undefined
+                        || this._config.categories[key].reloadOnReject === true)
+                        )
+                    location.reload();           // refresh page to stop script from running
+                });
+            }
+        });
     }
 
+    _loopOverCategories(callback) {
+        for(const key in this._config.categories)
+        {
+            callback(this._config.categories[key], key);
+        }
+    }
+
+    _insertLinks(text) {
+        if(this._config.cookiePolicy != undefined)
+            text = text.replace('COOKIE_POLICY', this._createLink(this._config.cookiePolicy));
+        if(this._config.privacyPolicy != undefined)
+            text = text.replace('PRIVACY_POLICY', this._createLink(this._config.privacyPolicy));
+        if(this._config.imprint != undefined)
+            text =  text.replace('IMPRINT', this._createLink(this._config.imprint));
+
+        return text;
+    }
+
+    _createLink(link) {
+        return '<a href="' + link.url + '">' + link.text + '</a>'
+    }
+
+    _activateScriptsOfCategory(category) {
+        const scripts = document.querySelectorAll('script[data-cyn-require=' + category + ']');
+        scripts.forEach(script => {
+            if (script.dataset['cynDone'] !== undefined)  // this script has already been activated
+            {
+                return;
+            }
+            script.dataset['cynDone'] = true;       // mark as done
+
+            const newScript = document.createElement('script');
+            if(script.dataset['cynSrc'] == undefined)       // inline script
+            {
+                newScript.innerText = script.innerText;     // copy content
+            }
+            else    // normal script
+            {
+                newScript.src = script.dataset['cynSrc'];   // copy src
+            }
+            document.body.appendChild(newScript);
+        });
+    }
+
     show() { this.banner.style.display = 'block'; }
@@ -280,0 +367,0 @@ hide() { this.banner.style.display = 'none'; }

dist/cookieyesno.js

@@ -8,4 +8,10 @@ var CookieYesNo = (function () {
 
+    // TODO:
+    // Load blocked scripts
+    // reload on reject (by default true) none
+
     var CookieYesNo = function CookieYesNo(config) {
-        this.version = '1.0.4';
+        var this$1 = this;
+
+        this.version = '1.1.0';
         this.cookie = { //  cookie handler
@@ -33,7 +39,22 @@ set: function(data) {
 
-        // listeners
-        this._changeListeners = [];
-        this._acceptListeners = [];  
-        this._rejectListeners = [];      
+        var setDefaultValue = function (key, defaultValue) {
+            if (this$1._config[key] === undefined)
+                { this$1._config[key] = defaultValue; }
+        };
 
+        setDefaultValue('title', 'Cookie Settings');
+        setDefaultValue('acceptAllButtonText', 'Accept all cookies');
+        setDefaultValue('acceptSelectionButtonText', 'Accept selected cookies');
+
+        // Create arrays for listeners if they do not already exist
+        var listenerTypes = ['onAccept', 'onReject', 'onChange'];
+        this._loopOverCategories(function (category) {
+            listenerTypes.forEach(function (listenerType) {
+                if(category[listenerType] === undefined)
+                {
+                    category[listenerType] = [];
+                }
+            });
+        });
+
         this.banner = this._createBanner();
@@ -54,3 +75,3 @@ this._applyStyle();
         else
-            { this._runAcceptRejectListeners(); }
+            { this._runListeners(); }
     };
@@ -81,24 +102,17 @@
 
-    CookieYesNo.prototype.onChange = function onChange (cb) {
-        this._changeListeners.push(cb);
+    CookieYesNo.prototype.onChange = function onChange (category, callback) {
+        this._config.categories[category].onChange.push(callback);
     };
 
-    CookieYesNo.prototype.onAccept = function onAccept (name, cb) {
-        if((this.getSettings())[name] === true)
-            { cb(); }
-
-        this._acceptListeners.push({
-            name: name,
-            cb: cb
-        });
+    CookieYesNo.prototype.onAccept = function onAccept (category, callback) {
+        if((this.getSettings())[category] === true)
+            { callback(); }
+        this._config.categories[category].onAccept.push(callback);
     };
 
-    CookieYesNo.prototype.onReject = function onReject (name, cb) {
-        if((this.getSettings())[name] === false)
-            { cb(); }
+    CookieYesNo.prototype.onReject = function onReject (category, callback) {
+        if((this.getSettings())[category] === false)
+            { callback(); }
 
-        this._rejectListeners.push({
-            name: name,
-            cb: cb
-        });
+        this._config.categories[category].onReject.push(callback);
     };
@@ -112,29 +126,35 @@
     CookieYesNo.prototype._createBanner = function _createBanner () {
+        var textAbove = (this._config.text != undefined && this._config.text.above != undefined)?
+            this._config.text.above : 'This website uses cookies.\
+                You can choose below which cookies may be stored on your device. You can allow all cookies using\
+                the "Accept all cookies" button or accept a selection of cookies by using the\
+                "Accept selected cookies" button and the checkboxes to select cookie categories.\
+                You can review and revoke consent at any time using the "Review cookie settings" link in the footer.';
+
+        var textBelow = (this._config.text != undefined && this._config.text.below != undefined)?
+            this._config.text.below : '';
         var el = document.createElement('div');
         el.className = 'cyn-banner';
-        var text = '<h3 style="font-size:28px;font-weight:bold;margin-top:16px;margin-bottom:20px">Cookie Settings</h3>';
-        text += '<p>' + this._config.text + '</p>';
+        var text = '<h3 style="font-size:28px;font-weight:bold;margin-top:16px;margin-bottom:20px">' +
+            this._config.title + '</h3>';
+        text += '<p>' + this._insertLinks(textAbove) + '</p>';
 
 
         // buttons
-        text += '<button class="cyn-btn-accept-all">Accept all cookies</button>';
-        text += '<button class="cyn-btn-save">Accept selection</button>';
+        text += '<button class="cyn-btn-accept-all">' + this._config.acceptAllButtonText + '</button>';
+        text += '<button class="cyn-btn-save">' + this._config.acceptSelectionButtonText + '</button>';
 
         text += '<table class="cyn-categories"><tbody>';
 
-        for(var key in this._config.categories) {
-            var cat = this._config.categories[key];
-
-            text += '<tr><td style="font-weight:bold">' + key + '</td><td>' + cat.description + '</td><td>';
+        this._loopOverCategories(function (category, key) {
+            text += '<tr><td style="font-weight:bold">' + category.name + '</td><td>' + category.description + '</td><td>';
             text += '<input type="checkbox" value="' + key + '"'
-                 + ((cat.allowed)? ' checked' : '')
-                 + ((cat.changeable === true || cat.changeable === undefined)? '' : ' disabled') + '/>';
+                 + ((category.accepted)? ' checked' : '')
+                 + ((category.changeable === true || category.changeable === undefined)? '' : ' disabled') + '/>';
             text += '</td></tr>';
-        }
+        });
 
         text += '</tbody></table>';
 
-        // Cookie Policy link
-        text += '<p>For detailed information take a look at the <a href="' + this._config.cookiePolicy.url +
-            '">' + this._config.cookiePolicy.text + '</a>.</p>';
+        text += '<p>' + this._insertLinks(textBelow) + '</p>';
 
@@ -145,5 +165,7 @@ // section for other links
         if(this._config.imprint != undefined)
-            { text += '<a href="' + this._config.imprint.url + '">' + this._config.imprint.text + '</a> '; }
+            { text += this._createLink(this._config.imprint) + ' '; }
         if(this._config.privacyPolicy != undefined)
-            { text += '<a href="' + this._config.privacyPolicy.url + '">' + this._config.privacyPolicy.text + '</a> '; }
+            { text += this._createLink(this._config.privacyPolicy) + ' '; }
+        if(this._config.cookiePolicy != undefined)
+            { text += this._createLink(this._config.cookiePolicy); }
 
@@ -164,4 +186,4 @@ text += '</div>';
             {
-                inputs[i].checked = (settings[inputs[i].value.toLowerCase()] != undefined &&
-                    settings[inputs[i].value.toLowerCase()] == true)? true : false;
+                inputs[i].checked = (settings[inputs[i].value] != undefined &&
+                    settings[inputs[i].value] == true)? true : false;
             } }
@@ -188,3 +210,6 @@ };
         if(window.innerWidth <= 768)// mobile
-            { style.top = style.right = style.left = style.bottom = '16px'; }
+        {
+            style.top = style.right = style.left = style.bottom = '16px';
+            style.maxWidth = '80%';
+        }
         else    // desktop (large screen)
@@ -194,2 +219,3 @@ {
             style.maxHeight = '80vh';
+            style.maxWidth = '40%';
         }
@@ -244,3 +270,3 @@
             for(var category in this._config.categories)
-                { newSettings[category.toLowerCase()] = true; } // turn Analytics to analytics
+                { newSettings[category] = true; }
         } else if(className.indexOf('cyn-btn-save') != -1) {
@@ -250,12 +276,8 @@ var inputs = this.banner.getElementsByTagName('input');
                 { if(inputs[i].type == 'checkbox')
-                    { newSettings[inputs[i].value.toLowerCase()] = inputs[i].checked; } }
+                    { newSettings[inputs[i].value] = inputs[i].checked; } }
         } else { return; }
 
         this.hide();
-
-        // run CBs
-        for(var i$1 = 0; i$1 < this._changeListeners.length; i$1++)
-            { this._changeListeners[i$1](newSettings); }
             
-        this._runAcceptRejectListeners(newSettings);
+        this._runListeners(newSettings);
 
@@ -265,15 +287,84 @@ this._save(newSettings);
 
-    CookieYesNo.prototype._runAcceptRejectListeners = function _runAcceptRejectListeners (settings) {
+    CookieYesNo.prototype._runListeners = function _runListeners (settings) {
+            var this$1 = this;
+
+        var initialPageLoadExecution = (settings === undefined)? true : false;
         if(settings === undefined)  // default parameter
             { settings = this.getSettings(); }
 
-        for(var i = 0; i < this._acceptListeners.length; i++)
-            { if(settings[this._acceptListeners[i].name] === true)
-                { this._acceptListeners[i].cb(); } }
+        this._loopOverCategories(function (category, key) {
+            category.onChange.forEach(function (listener) { return listener(settings[key]); });
 
-        for(var i$1 = 0; i$1 < this._rejectListeners.length; i$1++)
-            { if(settings[this._rejectListeners[i$1].name] === false)
-                { this._rejectListeners[i$1].cb(); } }
+            if(settings[key] === true)
+            {
+                this$1._activateScriptsOfCategory(key);
+                category.onAccept.forEach(function (listener) { return listener(); });
+            }
+            else
+            {
+                category.onReject.forEach(function (listener) {
+                    var reload = listener();
+                    /*
+                        When do we need to reload the page?
+                        -----------------------------------
+                        The page gets reloaded when the user rejects a cookie afterwards,
+                        and:
+                            * the callback routine thats executed before returns false
+                            * the reloadOnReject-option in the config is not set or
+                                is set to true
+                    */
+                    if(!initialPageLoadExecution && reload !== false &&
+                        (this$1._config.categories[key]['reloadOnReject'] === undefined
+                        || this$1._config.categories[key].reloadOnReject === true)
+                        )
+                    { location.reload(); }       // refresh page to stop script from running
+                });
+            }
+        });
     };
 
+    CookieYesNo.prototype._loopOverCategories = function _loopOverCategories (callback) {
+        for(var key in this._config.categories)
+        {
+            callback(this._config.categories[key], key);
+        }
+    };
+
+    CookieYesNo.prototype._insertLinks = function _insertLinks (text) {
+        if(this._config.cookiePolicy != undefined)
+            { text = text.replace('COOKIE_POLICY', this._createLink(this._config.cookiePolicy)); }
+        if(this._config.privacyPolicy != undefined)
+            { text = text.replace('PRIVACY_POLICY', this._createLink(this._config.privacyPolicy)); }
+        if(this._config.imprint != undefined)
+            { text =  text.replace('IMPRINT', this._createLink(this._config.imprint)); }
+
+        return text;
+    };
+
+    CookieYesNo.prototype._createLink = function _createLink (link) {
+        return '<a href="' + link.url + '">' + link.text + '</a>'
+    };
+
+    CookieYesNo.prototype._activateScriptsOfCategory = function _activateScriptsOfCategory (category) {
+        var scripts = document.querySelectorAll('script[data-cyn-require=' + category + ']');
+        scripts.forEach(function (script) {
+            if (script.dataset['cynDone'] !== undefined)  // this script has already been activated
+            {
+                return;
+            }
+            script.dataset['cynDone'] = true;   // mark as done
+
+            var newScript = document.createElement('script');
+            if(script.dataset['cynSrc'] == undefined)   // inline script
+            {
+                newScript.innerText = script.innerText; // copy content
+            }
+            else// normal script
+            {
+                newScript.src = script.dataset['cynSrc'];   // copy src
+            }
+            document.body.appendChild(newScript);
+        });
+    };
+
     CookieYesNo.prototype.show = function show () { this.banner.style.display = 'block'; };
@@ -280,0 +371,0 @@ CookieYesNo.prototype.hide = function hide () { this.banner.style.display = 'none'; };

dist/cookieyesno.min.js

@@ -1,1 +0,1 @@
-var CookieYesNo=function(){"use strict";function t(t){this.version="1.0.4",this.cookie={set:function(t){var e=new Date;e.setTime(e.getTime()+7776e6),document.cookie="_cyn="+t+";expires="+e.toUTCString()+";path=/;SameSite=Lax"},get:function(){for(var t=document.cookie.split(";"),e=0;e<t.length;e++){var n=t[e].trim().split("=");if("_cyn"==n[0])return n[1]}return null},clear:function(){document.cookie="_cyn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;SameSite=Lax"}},this._config=t,this._changeListeners=[],this._acceptListeners=[],this._rejectListeners=[],this.banner=this._createBanner(),this._applyStyle(),this._addListeners();var e=this._load();null==e?this.show():e.version!=this.version||null!=this._config.version&&this._config.version!=e.configversion?(this.cookie.clear(),this.show()):this._runAcceptRejectListeners()}return t.prototype._load=function(){var t=this.cookie.get();return null==t?null:JSON.parse(t)},t.prototype._save=function(t){var e={version:this.version,settings:t};null!=this._config.version&&(e.configversion=this._config.version),this.cookie.set(JSON.stringify(e))},t.prototype.getSettings=function(){var t=this._load();return null==t?{}:t.settings},t.prototype.onChange=function(t){this._changeListeners.push(t)},t.prototype.onAccept=function(t,e){!0===this.getSettings()[t]&&e(),this._acceptListeners.push({name:t,cb:e})},t.prototype.onReject=function(t,e){!1===this.getSettings()[t]&&e(),this._rejectListeners.push({name:t,cb:e})},t.prototype.reviewSettings=function(){this._bannerApplySettings(this.getSettings()),this.show()},t.prototype._createBanner=function(){var t=document.createElement("div");t.className="cyn-banner";var e='<h3 style="font-size:28px;font-weight:bold;margin-top:16px;margin-bottom:20px">Cookie Settings</h3>';for(var n in e+="<p>"+this._config.text+"</p>",e+='<button class="cyn-btn-accept-all">Accept all cookies</button>',e+='<button class="cyn-btn-save">Accept selection</button>',e+='<table class="cyn-categories"><tbody>',this._config.categories){var i=this._config.categories[n];e+='<tr><td style="font-weight:bold">'+n+"</td><td>"+i.description+"</td><td>",e+='<input type="checkbox" value="'+n+'"'+(i.allowed?" checked":"")+(!0===i.changeable||void 0===i.changeable?"":" disabled")+"/>",e+="</td></tr>"}return e+="</tbody></table>",e+='<p>For detailed information take a look at the <a href="'+this._config.cookiePolicy.url+'">'+this._config.cookiePolicy.text+"</a>.</p>",e+='<div class="cyn-other-links" style="padding-top:6px;padding-bottom:8px;font-size:12px">',null!=this._config.imprint&&(e+='<a href="'+this._config.imprint.url+'">'+this._config.imprint.text+"</a> "),null!=this._config.privacyPolicy&&(e+='<a href="'+this._config.privacyPolicy.url+'">'+this._config.privacyPolicy.text+"</a> "),e+="</div>",t.innerHTML=e,t.style.display="none",document.body.appendChild(t),t},t.prototype._bannerApplySettings=function(t){for(var e=this.banner.getElementsByTagName("input"),n=0;n<e.length;n++)"checkbox"==e[n].type&&(e[n].checked=null!=t[e[n].value.toLowerCase()]&&1==t[e[n].value.toLowerCase()])},t.prototype._applyStyle=function(){var t=this.banner.style;t.zIndex=5e3,t.backgroundColor="#fff",t.position="fixed",t.padding="16px",t.boxShadow="0 0 24px #aaa",t.borderRadius="8px",t.fontSize="14px",t.fontFamily='"Trebuchet MS", Helvetica, sans-serif',t.color="#444",t.overflowY="auto",window.innerWidth<=768?t.top=t.right=t.left=t.bottom="16px":(t.right=t.bottom="32px",t.maxHeight="80vh"),(t=this.banner.getElementsByTagName("table")[0].style).margin="16px";for(var e=this.banner.getElementsByTagName("td"),n=0;n<e.length;n++)e[n].style.padding="8px";for(var i=this.banner.getElementsByTagName("button"),o=0;o<i.length;o++)(t=i[o].style).boxSizing="border-box",t.cursor="pointer",t.margin="12px",t.marginLeft="10%",t.borderRadius="4px",t.border="0px",t.backgroundColor="#48c774",t.color="white",t.fontSize="18px",t.padding="8px",t.paddingLeft=t.paddingRight="12px",t.display="block";for(var s=this.banner.getElementsByTagName("a"),r=0;r<s.length;r++)s[r].style.color="#333"},t.prototype._addListeners=function(){for(var t=this.banner.getElementsByTagName("button"),e=0;e<t.length;e++)t[e].addEventListener("click",this._onButtonClick.bind(this))},t.prototype._onButtonClick=function(t){var e={},n=t.target.className;if(-1!=n.indexOf("cyn-btn-accept-all"))for(var i in this._config.categories)e[i.toLowerCase()]=!0;else{if(-1==n.indexOf("cyn-btn-save"))return;for(var o=this.banner.getElementsByTagName("input"),s=0;s<o.length;s++)"checkbox"==o[s].type&&(e[o[s].value.toLowerCase()]=o[s].checked)}this.hide();for(var r=0;r<this._changeListeners.length;r++)this._changeListeners[r](e);this._runAcceptRejectListeners(e),this._save(e)},t.prototype._runAcceptRejectListeners=function(t){void 0===t&&(t=this.getSettings());for(var e=0;e<this._acceptListeners.length;e++)!0===t[this._acceptListeners[e].name]&&this._acceptListeners[e].cb();for(var n=0;n<this._rejectListeners.length;n++)!1===t[this._rejectListeners[n].name]&&this._rejectListeners[n].cb()},t.prototype.show=function(){this.banner.style.display="block"},t.prototype.hide=function(){this.banner.style.display="none"},t}();
+var CookieYesNo=function(){"use strict";function t(t){var n=this;function e(t,e){void 0===n._config[t]&&(n._config[t]=e)}this.version="1.1.0",this.cookie={set:function(t){var e=new Date;e.setTime(e.getTime()+7776e6),document.cookie="_cyn="+t+";expires="+e.toUTCString()+";path=/;SameSite=Lax"},get:function(){for(var t=document.cookie.split(";"),e=0;e<t.length;e++){var n=t[e].trim().split("=");if("_cyn"==n[0])return n[1]}return null},clear:function(){document.cookie="_cyn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;SameSite=Lax"}},this._config=t,e("title","Cookie Settings"),e("acceptAllButtonText","Accept all cookies"),e("acceptSelectionButtonText","Accept selected cookies");var i=["onAccept","onReject","onChange"];this._loopOverCategories(function(e){i.forEach(function(t){void 0===e[t]&&(e[t]=[])})}),this.banner=this._createBanner(),this._applyStyle(),this._addListeners();var o=this._load();null==o?this.show():o.version!=this.version||null!=this._config.version&&this._config.version!=o.configversion?(this.cookie.clear(),this.show()):this._runListeners()}return t.prototype._load=function(){var t=this.cookie.get();return null==t?null:JSON.parse(t)},t.prototype._save=function(t){var e={version:this.version,settings:t};null!=this._config.version&&(e.configversion=this._config.version),this.cookie.set(JSON.stringify(e))},t.prototype.getSettings=function(){var t=this._load();return null==t?{}:t.settings},t.prototype.onChange=function(t,e){this._config.categories[t].onChange.push(e)},t.prototype.onAccept=function(t,e){!0===this.getSettings()[t]&&e(),this._config.categories[t].onAccept.push(e)},t.prototype.onReject=function(t,e){!1===this.getSettings()[t]&&e(),this._config.categories[t].onReject.push(e)},t.prototype.reviewSettings=function(){this._bannerApplySettings(this.getSettings()),this.show()},t.prototype._createBanner=function(){var t=null!=this._config.text&&null!=this._config.text.above?this._config.text.above:'This website uses cookies.                You can choose below which cookies may be stored on your device. You can allow all cookies using                the "Accept all cookies" button or accept a selection of cookies by using the                "Accept selected cookies" button and the checkboxes to select cookie categories.                You can review and revoke consent at any time using the "Review cookie settings" link in the footer.',e=null!=this._config.text&&null!=this._config.text.below?this._config.text.below:"",n=document.createElement("div");n.className="cyn-banner";var i='<h3 style="font-size:28px;font-weight:bold;margin-top:16px;margin-bottom:20px">'+this._config.title+"</h3>";return i+="<p>"+this._insertLinks(t)+"</p>",i+='<button class="cyn-btn-accept-all">'+this._config.acceptAllButtonText+"</button>",i+='<button class="cyn-btn-save">'+this._config.acceptSelectionButtonText+"</button>",i+='<table class="cyn-categories"><tbody>',this._loopOverCategories(function(t,e){i+='<tr><td style="font-weight:bold">'+t.name+"</td><td>"+t.description+"</td><td>",i+='<input type="checkbox" value="'+e+'"'+(t.accepted?" checked":"")+(!0===t.changeable||void 0===t.changeable?"":" disabled")+"/>",i+="</td></tr>"}),i+="</tbody></table>",i+="<p>"+this._insertLinks(e)+"</p>",i+='<div class="cyn-other-links" style="padding-top:6px;padding-bottom:8px;font-size:12px">',null!=this._config.imprint&&(i+=this._createLink(this._config.imprint)+" "),null!=this._config.privacyPolicy&&(i+=this._createLink(this._config.privacyPolicy)+" "),null!=this._config.cookiePolicy&&(i+=this._createLink(this._config.cookiePolicy)),i+="</div>",n.innerHTML=i,n.style.display="none",document.body.appendChild(n),n},t.prototype._bannerApplySettings=function(t){for(var e=this.banner.getElementsByTagName("input"),n=0;n<e.length;n++)"checkbox"==e[n].type&&(e[n].checked=null!=t[e[n].value]&&1==t[e[n].value])},t.prototype._applyStyle=function(){var t=this.banner.style;t.zIndex=5e3,t.backgroundColor="#fff",t.position="fixed",t.padding="16px",t.boxShadow="0 0 24px #aaa",t.borderRadius="8px",t.fontSize="14px",t.fontFamily='"Trebuchet MS", Helvetica, sans-serif',t.color="#444",t.overflowY="auto",window.innerWidth<=768?(t.top=t.right=t.left=t.bottom="16px",t.maxWidth="80%"):(t.right=t.bottom="32px",t.maxHeight="80vh",t.maxWidth="40%"),(t=this.banner.getElementsByTagName("table")[0].style).margin="16px";for(var e=this.banner.getElementsByTagName("td"),n=0;n<e.length;n++)e[n].style.padding="8px";for(var i=this.banner.getElementsByTagName("button"),o=0;o<i.length;o++)(t=i[o].style).boxSizing="border-box",t.cursor="pointer",t.margin="12px",t.marginLeft="10%",t.borderRadius="4px",t.border="0px",t.backgroundColor="#48c774",t.color="white",t.fontSize="18px",t.padding="8px",t.paddingLeft=t.paddingRight="12px",t.display="block";for(var c=this.banner.getElementsByTagName("a"),s=0;s<c.length;s++)c[s].style.color="#333"},t.prototype._addListeners=function(){for(var t=this.banner.getElementsByTagName("button"),e=0;e<t.length;e++)t[e].addEventListener("click",this._onButtonClick.bind(this))},t.prototype._onButtonClick=function(t){var e={},n=t.target.className;if(-1!=n.indexOf("cyn-btn-accept-all"))for(var i in this._config.categories)e[i]=!0;else{if(-1==n.indexOf("cyn-btn-save"))return;for(var o=this.banner.getElementsByTagName("input"),c=0;c<o.length;c++)"checkbox"==o[c].type&&(e[o[c].value]=o[c].checked)}this.hide(),this._runListeners(e),this._save(e)},t.prototype._runListeners=function(e){var i=this,o=void 0===e;void 0===e&&(e=this.getSettings()),this._loopOverCategories(function(t,n){t.onChange.forEach(function(t){return t(e[n])}),!0===e[n]?(i._activateScriptsOfCategory(n),t.onAccept.forEach(function(t){return t()})):t.onReject.forEach(function(t){var e=t();o||!1===e||void 0!==i._config.categories[n].reloadOnReject&&!0!==i._config.categories[n].reloadOnReject||location.reload()})})},t.prototype._loopOverCategories=function(t){for(var e in this._config.categories)t(this._config.categories[e],e)},t.prototype._insertLinks=function(t){return null!=this._config.cookiePolicy&&(t=t.replace("COOKIE_POLICY",this._createLink(this._config.cookiePolicy))),null!=this._config.privacyPolicy&&(t=t.replace("PRIVACY_POLICY",this._createLink(this._config.privacyPolicy))),null!=this._config.imprint&&(t=t.replace("IMPRINT",this._createLink(this._config.imprint))),t},t.prototype._createLink=function(t){return'<a href="'+t.url+'">'+t.text+"</a>"},t.prototype._activateScriptsOfCategory=function(t){document.querySelectorAll("script[data-cyn-require="+t+"]").forEach(function(t){var e;void 0===t.dataset.cynDone&&(t.dataset.cynDone=!0,e=document.createElement("script"),null==t.dataset.cynSrc?e.innerText=t.innerText:e.src=t.dataset.cynSrc,document.body.appendChild(e))})},t.prototype.show=function(){this.banner.style.display="block"},t.prototype.hide=function(){this.banner.style.display="none"},t}();

package.json

 {
   "name": "cookieyesno",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "main": "dist/cookieyesno.cjs.js",
   "module": "src/cookieyesno.js",
   "browser": "dist/cookieyesno.min.js",
-  "license": "MIT",
+  "license": "BSD 4-Clause License (Modified)",
   "keywords": [
@@ -16,3 +16,4 @@ "cookie",
     "consent",
-    "legal"
+    "legal",
+    "gdpr"
   ],
@@ -19,0 +20,0 @@ "repository": {

README.md

@@ -1,68 +0,129 @@
-# cookieyesno
-Easy to use GDPR-complient cookie-banner
+# CookieYesNo
+## An easy to use GDPR-complient cookie-banner
+![Cookiebanner Screenshot](screenshot.png)
 
-Take a look at it in action on a real site: https://watchaccuracy.com/
+ 	
+✅ GDPR-complient
 
+✅ Easy to Use
+
+✅ Mobile friendly
+
+✅ Small memory footprint
+
+✅ Highly customizable
+
 ## Usage
+The banner on the screenshot above has been created using only the 14 lines you can see below.
 
 ```js
-// using packages
-import CookieYesNo from 'cookieyesno';
-
-// or simply include the dist/cookieyesno.min.js file in the html
-
-const cyn = new CookieYesNo({
-    text: 'This website uses cookies. You can select below which cookies will be \
-    stored on your device or use the "Accept all cookies" button to allow the usage of all.',
-    cookiePolicy: {
-        url: '<LINK TO YOUR COOKIE POLICY>',
-        text: 'Cookie Policy'
+var cyn = new CookieYesNo({
+  categories: {
+    required: {
+      name: 'Required cookies',
+      description: 'These cookies are necessary for the website to function properly',
+      accepted: true,
+      changeable: false
     },
-    categories: {                   // different categories of cookies
-        required: {
-            allowed: true,          // preselected
-            description: 'These cookies are necessary for the website to function properly.',
-            changeable: false       // user can not change this option
-        },
-        Analytics: {
-            allowed: false,         // not preselected
-            description: 'These cookies are used to analyze the user\'s behavior.'
-        }
+    analytics: {
+      name: 'Web analytics',
+      description: 'These cookies are used to analyze the user\'s behavior.'
     }
+  }
 });
+```
 
-cyn.onChange((settings) => {
-    // cookie settings have changed
-});
+## Documentation
+### Configuration
+The configuration is the only argument of `new CookieYesNo(config)` and is a map, The following things can / have to be configured:
 
-// Note: all categories are transformed to lowercase (Analytics -> analytics)
-cyn.onAccept('analytics', () => {
-    // analytics-cookies are accepted
-});
+* `categories` *(Map)* **Required » Take a look at the [category configuration](#category-configuration)**
+* `text` *(Map) [optional]* [Link placeholders](#link-placeholders) can be used
+  * `above` *(String) [optional]* Text above the section where the user can select specific cookie-categories
+  * `below` *(String) [optional]* Text below the section where the user can select specific cookies
+* `title` *(String) [optional - by default "Cookie Settings"]* Title of the banner 
+* `acceptAllButtonText` *(String) [optional - by default "Accept all cookies"]* Text of the button that's for accepting all cookies
+* `acceptSelectionButtonText` *(String) [optional - by default "Accept selected cookies"]* Text of the button that's for accepting only selected cookie categories
+* `privacyPolicy` *(Map) [optional]*
+  * `url` *(String)* URL of your privacy policy (in case the banner covers the link on the actual page)
+  * `text` *(String)* Text of the link
+* `cookiePolicy` *(Map) [optional]*
+  * `url` *(String)* URL of your cookie policy (String)
+  * `text` *(String)* Text of the link
+* `imprint` *(Map) [optional]*
+  * `url` *(String)* URL of your imprint (required in case that the banner covers the link on the actual page)
+  * `text` *(String)* Text of the link
+* `version` *(String) [optional]* Version of the configuration - if you change the version - the user has to consent again (for the case that you change something in the categories) - Use any text you like to, I recommed the date of the change. If not version has been set before, the user also give his consent again.
 
-cyn.onReject('analytics', () => {
-    // analytics-cookies are not allowed
-});
+### Category configuration
+Each cookie category is an item in the `categories`-Map.
+Here a short example:
+```js
+categories: {
+  required: {
+    name: 'Required cookies',
+    accepted: true,          // preselected
+    description: 'These cookies are necessary for the website to function properly.',
+    changeable: false       // user can not change this option
+  },
+  analytics: {
+    name: 'Web Analytics',
+    description: 'These cookies are used to analyze the user\'s behavior.'
+  }
+}
+```
 
-// get current cookie settings
-cyn.getSettings(); // example-response { required: true, analytics: false }
+#### Configuration possibilities of a category
+* `name` *(String)* **Required** Name/Title of the cookie category
+* `description` *(String)* **Required** Description of the cookie category
+* `accepted` *(Boolean) [optional - by default false]* If the category is preselected
+* `changeable` *(Boolean) [optional - by default true]* If the user can change the value
+* `reloadOnReject` *(Boolean) [optional - by default true]* If the page is reloaded if the cookie category gets rejected - We need to do this to stop scripts from running that would set cookies.
+* `onAccept` *(Array) [optional - by default []]* Shortcut for [Events](#events)
+* `onReject` *(Array) [optional - by default []]* Shortcut for [Events](#events)
+* `onChange` *(Array) [optional - by default []]* Shortcut for [Events](#events)
 
-cyn.reviewSettings();       // open the banner to let the user review the settings
+### Script blocking
+#### Blocking external scripts
+You have to replace `src` with `data-cyn-src` and have to set the `type` to `text/plain`. The `data-cyn-require` attribute specifies which cookie category has to be allowed to run the script. So `analytics` has to be the key of the Web Analytics category in the `categories` map.
+```html
+<script type="text/plain" data-cyn-src="analytics.js" data-cyn-require="analytics"></script>
 ```
+#### Blocking inline scripts
+**Caution: May not block the execution of the script in older Firefox versions!  External script blocking (above) is safe to use as well as Events (below). Use these medthods instead.**
+The `type` attribute has to be set to `text/plain`. The script will be executed when the category with the key `analytics` is allowed.
+```html
+<script type="text/plain" data-cyn-require="analytics">
+  // YOUR CODE HERE
+</script>
+```
 
-## Configuration
-* `text`: Text of the banner (String)
-* `cookiePolicy`: (Object)
-    * `url`: URL of your cookie policy (String)
-    * `text`: Text of the link
-* `categories`: Array of Objects - take a look at the example
-* `imprint`: (Object)
-    * `url`: URL of your imprint (required in case that the banner covers the link on the actual page)
-    * `text`: Text of the link
-* `privacyPolicy`: (Object)
-    * `url`: URL of your privacy policy (in case the banner covers the link on the actual page)
-    * `text`: Text of the link
-* `version`: Version of the configuration - if you change the version - the user has to consent again (for the case that you change something in the categories) - Use any text you like to, I recommed the date of the change
+### Events
+Note: the `category` argument in the methods below is the key of the specific category in the `categories` map in the configuration map.
+#### `onAccept(category, callback)`
+Callback function gets executed when the specified category gets acceped.
+#### `onReject(category, callback)`
+Callback function gets executed when the specified category gets rejected. Explicitly return `false` if you don't want to reload the site. This can also be done by the config. If you like to reload the page either return nothing or return `true`.
+#### `onChange(category, callback)`
+Callback function gets executed when the specified category gets changed. The first argument of the `callback` function is a *Boolean* that states if the category has been accepted *(true)* or rejected *(false)*.
 
-## Modify the banner
+
+First the `onChange` callbacks are executed, then the scripts are activated if necessary and then `onAccept` and `onReject` callbacks are executed. 
+
+### Other methods
+#### `getSettings()`
+Get the current cookie settings as a *map*.
+#### `reviewSettings()`
+Let the user review his consent.
+#### `show()`
+Show the cookie banner.
+#### `hide()`
+Hide the cookie banner.
+
+### Link placeholders
+Link placeholders can be used in the `text.above` and `text.below`.
+Simply put `PRIVACY_POLICY`, `COOKIE_POLICY`, or `IMPRINT` in the String.
+These will be replaced with the matching links. Note: In order to use this feature you have to specify the links in the configuration.
+
+### Modify the banner
 It's pretty simple: just use CSS-rules.
@@ -76,3 +137,3 @@ The following classes are available:
 
-
-Based on https://github.com/rollup/rollup-starter-app and https://github.com/rollup/rollup-starter-lib
+---
+Based on https://github.com/rollup/rollup-starter-app and https://github.com/rollup/rollup-starter-lib (both MIT License) Take a look at LICENSE_ROLLUP_STARTER_APP and LICENSE_ROLLUP_STARTER_LIB.

src/cookieyesno.js

@@ -7,5 +7,9 @@ 'use strict';
 
+// TODO:
+// Load blocked scripts
+// reload on reject (by default true) none
+
 export default class CookieYesNo {
     constructor(config) {
-        this.version = '1.0.4';
+        this.version = '1.1.0';
         this.cookie = {     //  cookie handler
@@ -33,7 +37,22 @@ set: function(data) {
 
-        // listeners
-        this._changeListeners = [];
-        this._acceptListeners = [];  
-        this._rejectListeners = [];      
+        const setDefaultValue = (key, defaultValue) => {
+            if (this._config[key] === undefined)
+                this._config[key] = defaultValue;
+        };
 
+        setDefaultValue('title', 'Cookie Settings');
+        setDefaultValue('acceptAllButtonText', 'Accept all cookies');
+        setDefaultValue('acceptSelectionButtonText', 'Accept selected cookies');
+
+        // Create arrays for listeners if they do not already exist
+        const listenerTypes = ['onAccept', 'onReject', 'onChange'];
+        this._loopOverCategories((category) => {
+            listenerTypes.forEach(listenerType => {
+                if(category[listenerType] === undefined)
+                {
+                    category[listenerType] = []
+                }
+            });
+        });
+
         this.banner = this._createBanner();
@@ -54,3 +73,3 @@ this._applyStyle();
         else
-            this._runAcceptRejectListeners();
+            this._runListeners();
     }
@@ -81,24 +100,17 @@
 
-    onChange(cb) {
-        this._changeListeners.push(cb);
+    onChange(category, callback) {
+        this._config.categories[category].onChange.push(callback);
     }
 
-    onAccept(name, cb) {
-        if((this.getSettings())[name] === true)
-            cb();
-
-        this._acceptListeners.push({
-            name: name,
-            cb: cb
-        });
+    onAccept(category, callback) {
+        if((this.getSettings())[category] === true)
+            callback();
+        this._config.categories[category].onAccept.push(callback);
     }
 
-    onReject(name, cb) {
-        if((this.getSettings())[name] === false)
-            cb();
+    onReject(category, callback) {
+        if((this.getSettings())[category] === false)
+            callback();
 
-        this._rejectListeners.push({
-            name: name,
-            cb: cb
-        });
+        this._config.categories[category].onReject.push(callback);
     }
@@ -112,29 +124,35 @@
     _createBanner() {
+        const textAbove = (this._config.text != undefined && this._config.text.above != undefined)?
+            this._config.text.above : 'This website uses cookies.\
+                You can choose below which cookies may be stored on your device. You can allow all cookies using\
+                the "Accept all cookies" button or accept a selection of cookies by using the\
+                "Accept selected cookies" button and the checkboxes to select cookie categories.\
+                You can review and revoke consent at any time using the "Review cookie settings" link in the footer.';
+
+        const textBelow = (this._config.text != undefined && this._config.text.below != undefined)?
+            this._config.text.below : '';
         const el = document.createElement('div');
         el.className = 'cyn-banner';
-        let text = '<h3 style="font-size:28px;font-weight:bold;margin-top:16px;margin-bottom:20px">Cookie Settings</h3>';
-        text += '<p>' + this._config.text + '</p>';
+        let text = '<h3 style="font-size:28px;font-weight:bold;margin-top:16px;margin-bottom:20px">' +
+            this._config.title + '</h3>';
+        text += '<p>' + this._insertLinks(textAbove) + '</p>';
 
 
         // buttons
-        text += '<button class="cyn-btn-accept-all">Accept all cookies</button>';
-        text += '<button class="cyn-btn-save">Accept selection</button>';
+        text += '<button class="cyn-btn-accept-all">' + this._config.acceptAllButtonText + '</button>';
+        text += '<button class="cyn-btn-save">' + this._config.acceptSelectionButtonText + '</button>';
 
         text += '<table class="cyn-categories"><tbody>';
 
-        for(const key in this._config.categories) {
-            const cat = this._config.categories[key];
-
-            text += '<tr><td style="font-weight:bold">' + key + '</td><td>' + cat.description + '</td><td>';
+        this._loopOverCategories((category, key) => {
+            text += '<tr><td style="font-weight:bold">' + category.name + '</td><td>' + category.description + '</td><td>';
             text += '<input type="checkbox" value="' + key + '"'
-                 + ((cat.allowed)? ' checked' : '')
-                 + ((cat.changeable === true || cat.changeable === undefined)? '' : ' disabled') + '/>';
+                 + ((category.accepted)? ' checked' : '')
+                 + ((category.changeable === true || category.changeable === undefined)? '' : ' disabled') + '/>';
             text += '</td></tr>';
-        }
+        });
 
         text += '</tbody></table>';
 
-        // Cookie Policy link
-        text += '<p>For detailed information take a look at the <a href="' + this._config.cookiePolicy.url +
-            '">' + this._config.cookiePolicy.text + '</a>.</p>';
+        text += '<p>' + this._insertLinks(textBelow) + '</p>';
 
@@ -145,5 +163,7 @@ // section for other links
         if(this._config.imprint != undefined)
-            text += '<a href="' + this._config.imprint.url + '">' + this._config.imprint.text + '</a> ';
+            text += this._createLink(this._config.imprint) + ' ';
         if(this._config.privacyPolicy != undefined)
-            text += '<a href="' + this._config.privacyPolicy.url + '">' + this._config.privacyPolicy.text + '</a> ';
+            text += this._createLink(this._config.privacyPolicy) + ' ';
+        if(this._config.cookiePolicy != undefined)
+            text += this._createLink(this._config.cookiePolicy);
 
@@ -164,4 +184,4 @@ text += '</div>';
             {
-                inputs[i].checked = (settings[inputs[i].value.toLowerCase()] != undefined &&
-                    settings[inputs[i].value.toLowerCase()] == true)? true : false;
+                inputs[i].checked = (settings[inputs[i].value] != undefined &&
+                    settings[inputs[i].value] == true)? true : false;
             }
@@ -188,3 +208,6 @@ }
         if(window.innerWidth <= 768)    // mobile
+        {
             style.top = style.right = style.left = style.bottom = '16px';
+            style.maxWidth = '80%';
+        }
         else        // desktop (large screen)
@@ -194,2 +217,3 @@ {
             style.maxHeight = '80vh';
+            style.maxWidth = '40%';
         }
@@ -244,3 +268,3 @@
             for(const category in this._config.categories)
-                newSettings[category.toLowerCase()] = true;     // turn Analytics to analytics
+                newSettings[category] = true;
         } else if(className.indexOf('cyn-btn-save') != -1) {
@@ -250,12 +274,8 @@ const inputs = this.banner.getElementsByTagName('input');
                 if(inputs[i].type == 'checkbox')
-                    newSettings[inputs[i].value.toLowerCase()] = inputs[i].checked;
+                    newSettings[inputs[i].value] = inputs[i].checked;
         } else return;
 
         this.hide();
-
-        // run CBs
-        for(let i = 0; i < this._changeListeners.length; i++)
-            this._changeListeners[i](newSettings);
         
-        this._runAcceptRejectListeners(newSettings);
+        this._runListeners(newSettings);
 
@@ -265,17 +285,84 @@ this._save(newSettings);
 
-    _runAcceptRejectListeners(settings) {
+    _runListeners(settings) {
+        const initialPageLoadExecution = (settings === undefined)? true : false;
         if(settings === undefined)      // default parameter
             settings = this.getSettings();
 
-        for(let i = 0; i < this._acceptListeners.length; i++)
-            if(settings[this._acceptListeners[i].name] === true)
-                this._acceptListeners[i].cb();
+        this._loopOverCategories((category, key) => {
+            category.onChange.forEach(listener => listener(settings[key]));
 
-        for(let i = 0; i < this._rejectListeners.length; i++)
-            if(settings[this._rejectListeners[i].name] === false)
-                this._rejectListeners[i].cb();
+            if(settings[key] === true)
+            {
+                this._activateScriptsOfCategory(key);
+                category.onAccept.forEach(listener => listener());
+            }
+            else
+            {
+                category.onReject.forEach(listener => {
+                    const reload = listener();
+                    /*
+                        When do we need to reload the page?
+                        -----------------------------------
+                        The page gets reloaded when the user rejects a cookie afterwards,
+                        and:
+                            * the callback routine thats executed before returns false
+                            * the reloadOnReject-option in the config is not set or
+                                is set to true
+                    */
+                    if(!initialPageLoadExecution && reload !== false &&
+                        (this._config.categories[key]['reloadOnReject'] === undefined
+                        || this._config.categories[key].reloadOnReject === true)
+                        )
+                    location.reload();           // refresh page to stop script from running
+                });
+            }
+        });
     }
 
+    _loopOverCategories(callback) {
+        for(const key in this._config.categories)
+        {
+            callback(this._config.categories[key], key);
+        }
+    }
+
+    _insertLinks(text) {
+        if(this._config.cookiePolicy != undefined)
+            text = text.replace('COOKIE_POLICY', this._createLink(this._config.cookiePolicy));
+        if(this._config.privacyPolicy != undefined)
+            text = text.replace('PRIVACY_POLICY', this._createLink(this._config.privacyPolicy));
+        if(this._config.imprint != undefined)
+            text =  text.replace('IMPRINT', this._createLink(this._config.imprint));
+
+        return text;
+    }
+
+    _createLink(link) {
+        return '<a href="' + link.url + '">' + link.text + '</a>'
+    }
+
+    _activateScriptsOfCategory(category) {
+        const scripts = document.querySelectorAll('script[data-cyn-require=' + category + ']');
+        scripts.forEach(script => {
+            if (script.dataset['cynDone'] !== undefined)  // this script has already been activated
+            {
+                return;
+            }
+            script.dataset['cynDone'] = true;       // mark as done
+
+            const newScript = document.createElement('script');
+            if(script.dataset['cynSrc'] == undefined)       // inline script
+            {
+                newScript.innerText = script.innerText;     // copy content
+            }
+            else    // normal script
+            {
+                newScript.src = script.dataset['cynSrc'];   // copy src
+            }
+            document.body.appendChild(newScript);
+        });
+    }
+
     show() { this.banner.style.display = 'block' }
     hide() { this.banner.style.display = 'none' }
 };

src/index.js

@@ -6,8 +6,9 @@ 'use strict';
 
+// make log globally visible
+window.log = log;
 
 const cyn = new CookieYesNo({
-    text: 'This website uses cookies. You can select below which cookies will be stored on your device.<br>\
-    You can accept all of them using the "Accept all cookies" button or accept a selection of them by using the <br>\
-    "Accept selection" button and the checkboxes to select which cookie groups will be allowed.<br>\
-    You can review and revoke the consent at any time using the "Review Cookie Settings" link in the footer.',
+    text: {
+        below: 'Take a look at the COOKIE_POLICY for more information.'
+    },
     cookiePolicy: {
@@ -19,13 +20,31 @@ url: '#',
         required: {
-            allowed: true,          // preselected
+            name: 'Required cookies',
+            accepted: true,          // preselected
             description: 'These cookies are necessary for the website to function properly.',
             changeable: false       // user can not change this option
         },
-        Analytics: {
-            allowed: false,         // not preselected
-            description: 'These cookies are used to analyze the user\'s behavior.'
+        analytics: {
+            name: 'Web Analytics',
+            description: 'These cookies are used to analyze the user\'s behavior.',
+            onAccept: [
+                function() {
+                    log('Analytics accepted');
+                }
+            ],
+            onReject: [
+                function() {
+                    log('Analytics rejected');
+                }
+            ],
+            onChange: [
+                function(accepted) {
+                    log('Cookie settings for analytics have changed to: ' + accepted);
+                }
+            ]
         },
-        'Share buttons': {
+        sharebuttons: {
+            name: 'Share buttons',
             allowed: false,
-            description: 'These cookies enable the share functionality.'
+            description: 'These cookies enable the share functionality.',
+            reloadOnReject: false
         }
@@ -49,18 +68,13 @@ },
 
-cyn.onAccept('analytics', function() {
-    log('Analytics accepted');
-});
-
-cyn.onReject('analytics', function() {
-    log('Analytics rejected');
-});
-
-cyn.onAccept('share buttons', function() {
+cyn.onAccept('sharebuttons', function() {
     log('Share buttons accepted');
 });
 
-cyn.onReject('share buttons', function() {
+cyn.onReject('sharebuttons', function() {
     log('Share buttons rejected');
 });
 
+cyn.onChange('sharebuttons', function(accepted) {
+    log('Cookie settings for share buttons have changed to: ' + accepted);
+});
 // buttons
@@ -67,0 +81,0 @@ document.getElementById('reviewbutton').onclick = () => cyn.reviewSettings();

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

spdx disjunction for an artifact's license information

License

spdx disjunction for an artifact's license information

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

spdx disjunction for an artifact's license information

License

spdx disjunction for an artifact's license information

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

125494

increased by201.51%

Number of package files

16

increased by45.45%

Lines of code

1059

increased by33.38%

Number of lines in readme file

139

increased by78.21%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low license alerts

2

increased by100%

License quality

80

decreased by-20%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes