cookieyesno - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/cookieyesno.min.js

@@ -1,14 +0,1 @@
-/*
- CookieYesNo | philippG777 | https://github.com/philippG777/cookieyesno | BSD 3-Clause License
-*/
-var CookieYesNo=function(a){this.cookie={set:function(a,c){var b=new Date;b.setTime(b.getTime()+7776E6);document.cookie=a+"="+c+";expires="+b.toUTCString()+";path=/"},get:function(a){for(var b=document.cookie.split(";"),d=0;d<b.length;d++){var e=b[d].trim().split("=");if(e[0]==a)return e[1]}return null}};this._config=a;this._changeListeners=[];this._acceptListeners=[];this._rejectListeners=[];this.banner=this._createBanner();this._applyStyle();this._addListeners();null==this._load()?this.show():this._runAcceptRejectListeners()};
-CookieYesNo.prototype._load=function(){var a=this.cookie.get("_cyn");return null==a?null:JSON.parse(a)};CookieYesNo.prototype._save=function(a){this.cookie.set("_cyn",JSON.stringify(a))};CookieYesNo.prototype.onChange=function(a){this._changeListeners.push(a)};CookieYesNo.prototype.onAccept=function(a,b){!0===this.getSettings()[a]?b():this._acceptListeners.push({name:a,cb:b})};CookieYesNo.prototype.onReject=function(a,b){!1===this.getSettings()[a]?b():this._rejectListeners.push({name:a,cb:b})};
-CookieYesNo.prototype.getSettings=function(){var a=this._load();return null==a?{}:a};CookieYesNo.prototype.reviewSettings=function(){this._bannerApplySettings(this.getSettings());this.show()};
-CookieYesNo.prototype._createBanner=function(){var a=document.createElement("div");a.className="cyn-banner";var b='<h3 style="font-size: 28px; font-weight: bold;">This site uses cookies</h3><p>'+(this._config.text+"</p>");b+='<table class="cyn-categories"><tbody>';for(var c in this._config.categories){var d=this._config.categories[c];b+='<tr><td style="font-weight:bold;">'+c+"</td><td>"+d.description+"</td><td>";b+='<input type="checkbox" value="'+c+'"'+(d.allowed?" checked":"")+(!0===d.changeable||
-void 0===d.changeable?"":" disabled")+"/>";b+="</td></tr>"}b=b+'</tbody></table><p>For detailed information take a look at the <a href="'+(this._config.cookiePolicy+'">Cookie Policy</a>.</p>');a.innerHTML=b+'<button class="cyn-btn-save">Save Settings</button><button class="cyn-btn-accept-all">Accept all</button>';a.style.display="none";document.body.appendChild(a);return a};
-CookieYesNo.prototype._bannerApplySettings=function(a){for(var b=this.banner.getElementsByTagName("input"),c=0;c<b.length;c++)"checkbox"==b[c].type&&(b[c].checked=void 0!=a[b[c].value.toLowerCase()]&&1==a[b[c].value.toLowerCase()]?!0:!1)};
-CookieYesNo.prototype._applyStyle=function(){var a=this.banner.style;a.zIndex=5E3;a.backgroundColor="#fff";a.position="fixed";a.padding="16px";a.boxShadow="0 0 24px #aaa";a.borderRadius="8px";a.right=768>=window.innerWidth?a.left=a.bottom="16px":a.bottom="32px";a=this.banner.getElementsByTagName("table")[0].style;a.margin="16px";a=this.banner.getElementsByTagName("td");for(var b=0;b<a.length;b++)a[b].style.padding="8px";b=this.banner.getElementsByTagName("button");for(var c=0;c<b.length;c++)a=b[c].style,
-a.boxSizing="border-box",a.cursor="pointer",a.margin="8px",a.marginTop="24px",a.borderRadius="4px","cyn-btn-accept-all"==b[c].className?(a.border="0px",a.backgroundColor="#48c774",a.color="white",a.fontWeight="bold",a.fontSize="24px",a.padding="12px",a.paddingLeft=a.paddingRight="16px"):(a.backgroundColor="white",a.color="#999",a.border="2px solid #bbb",a.fontSize="20px",a.padding="8px")};
-CookieYesNo.prototype._addListeners=function(){for(var a=this.banner.getElementsByTagName("button"),b=0;b<a.length;b++)a[b].addEventListener("click",this._onButtonClick.bind(this))};
-CookieYesNo.prototype._onButtonClick=function(a){var b={};a=a.target.className;if(-1!=a.indexOf("cyn-btn-accept-all"))for(var c in this._config.categories)b[c.toLowerCase()]=!0;else if(-1!=a.indexOf("cyn-btn-save"))for(c=this.banner.getElementsByTagName("input"),a=0;a<c.length;a++)"checkbox"==c[a].type&&(b[c[a].value.toLowerCase()]=c[a].checked);else return;this.hide();for(c=0;c<this._changeListeners.length;c++)this._changeListeners[c](b);this._runAcceptRejectListeners(b);this._save(b)};
-CookieYesNo.prototype._runAcceptRejectListeners=function(a){void 0===a&&(a=this.getSettings());for(var b=0;b<this._acceptListeners.length;b++)!0===a[this._acceptListeners[b].name]&&this._acceptListeners[b].cb();for(b=0;b<this._rejectListeners.length;b++)!1===a[this._rejectListeners[b].name]&&this._rejectListeners[b].cb()};CookieYesNo.prototype.show=function(){this.banner.style.display="block"};CookieYesNo.prototype.hide=function(){this.banner.style.display="none"};
+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}();

package.json

 {
-    "name": "cookieyesno",
-    "version": "1.0.3",
-    "main": "src/cookieyesno.js",
-    "scripts": {
-        "build": "python3 compile.py"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/philippG777/cookieyesno.git"
-    },
-    "license": "BSD 3-Clause",
-    "keywords": ["cookie", "cookies", "browser", "banner", "privacy", "policy", "consent", "legal"]
+  "name": "cookieyesno",
+  "version": "1.0.4",
+  "main": "dist/cookieyesno.cjs.js",
+  "module": "src/cookieyesno.js",
+  "browser": "dist/cookieyesno.min.js",
+  "license": "MIT",
+  "keywords": [
+    "cookie",
+    "cookies",
+    "browser",
+    "banner",
+    "privacy",
+    "policy",
+    "consent",
+    "legal"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/philippG777/cookieyesno.git"
+  },
+  "devDependencies": {
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^11.0.1",
+    "@rollup/plugin-node-resolve": "^7.0.0",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.16.2",
+    "rollup-plugin-uglify": "^6.0.4",
+    "serve": "^11.0.2"
+  },
+  "dependencies": {},
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c -w",
+    "dev": "npm-run-all --parallel start watch",
+    "start": "serve dev"
+  }
 }

README.md

@@ -8,3 +8,2 @@ # cookieyesno
 
-
 ```js
@@ -17,4 +16,8 @@ // using packages
 const cyn = new CookieYesNo({
-	text: 'This website uses cookies. You can select below which cookies will be stored on your device.',
-    cookiePolicy: '<LINK TO YOUR COOKIE POLICY>',
+    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'
+    },
     categories: {                   // different categories of cookies
@@ -52,2 +55,16 @@ required: {
 
+## 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
+
 ## Modify the banner
@@ -61,1 +78,4 @@ It's pretty simple: just use CSS-rules.
 * `.cyn-btn-accept-all`: accept all button
+
+
+Based on https://github.com/rollup/rollup-starter-app and https://github.com/rollup/rollup-starter-lib

src/cookieyesno.js

 'use strict';
 
 /*!
-CookieYesNo | philippG777 | https://github.com/philippG777/cookieyesno | BSD 3-Clause License
+CookieYesNo | philippG777 | https://github.com/philippG777/cookieyesno | MIT License
 */
 
-class CookieYesNo {
+export default class CookieYesNo {
     constructor(config) {
+        this.version = '1.0.4';
         this.cookie = {     //  cookie handler
-            set: function(cname, data) {
+            set: function(data) {
                 let d = new Date();
                 d.setTime(d.getTime() + 90 * 86400000);      // 90 days
-                document.cookie = cname + '=' + data + ';expires=' + d.toUTCString() + ';path=/';
+                document.cookie = '_cyn=' + data + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
             },
-            get: function(cname) {
+            get: function() {
                 const parts = document.cookie.split(';');
@@ -20,5 +21,8 @@
                     const pair = parts[i].trim().split('=');
-                    if(pair[0] == cname) return pair[1];
+                    if(pair[0] == '_cyn') return pair[1];
                 }
                 return null;
+            },
+            clear: function() {
+                document.cookie = '_cyn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;SameSite=Lax';
             }
@@ -38,4 +42,12 @@ };
 
-        if(this._load() == null)
+        const storedData = this._load()
+
+        if(storedData == null)
             this.show();
+        else if(storedData['version'] != this.version || // lib has been updated - get consent again to ensure its valid
+            this._config.version != undefined && this._config.version != storedData['configversion'])
+            {
+            this.cookie.clear()
+            this.show();
+        }
         else
@@ -46,3 +58,3 @@ this._runAcceptRejectListeners();
     _load() {
-        const data = this.cookie.get('_cyn');
+        const data = this.cookie.get();
         return (data == null)? null : JSON.parse(data);
@@ -52,5 +64,19 @@ }
     _save(settings) {
-        this.cookie.set('_cyn', JSON.stringify(settings));
+        const data = {
+            version: this.version,
+            settings: settings
+        };
+
+        if(this._config.version != undefined)
+            data.configversion = this._config.version;
+
+        this.cookie.set(JSON.stringify(data));
     }
 
+    getSettings() {
+        const data = this._load();
+        if(data == null) return {};
+        else return data['settings'];
+    }
+
     onChange(cb) {
@@ -63,7 +89,7 @@ this._changeListeners.push(cb);
             cb();
-        else
-            this._acceptListeners.push({
-                name: name,
-                cb: cb
-            });
+
+        this._acceptListeners.push({
+            name: name,
+            cb: cb
+        });
     }
@@ -74,13 +100,7 @@
             cb();
-        else
-            this._rejectListeners.push({
-                name: name,
-                cb: cb
-            });
-    }
 
-    getSettings() {
-        const settings = this._load();
-        if(settings == null) return {};
-        else return settings;
+        this._rejectListeners.push({
+            name: name,
+            cb: cb
+        });
     }
@@ -96,4 +116,10 @@
         el.className = 'cyn-banner';
-        let text = '<h3 style="font-size: 28px; font-weight: bold;">This site uses cookies</h3>';
+        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>';
+
+
+        // buttons
+        text += '<button class="cyn-btn-accept-all">Accept all cookies</button>';
+        text += '<button class="cyn-btn-save">Accept selection</button>';
+
         text += '<table class="cyn-categories"><tbody>';
@@ -104,3 +130,3 @@
 
-            text += '<tr><td style="font-weight:bold;">' + key + '</td><td>' + cat.description + '</td><td>';
+            text += '<tr><td style="font-weight:bold">' + key + '</td><td>' + cat.description + '</td><td>';
             text += '<input type="checkbox" value="' + key + '"'
@@ -115,8 +141,15 @@ + ((cat.allowed)? ' checked' : '')
         // Cookie Policy link
-        text += '<p>For detailed information take a look at the <a href="' + this._config.cookiePolicy +
-            '">Cookie Policy</a>.</p>';
+        text += '<p>For detailed information take a look at the <a href="' + this._config.cookiePolicy.url +
+            '">' + this._config.cookiePolicy.text + '</a>.</p>';
 
-        text += '<button class="cyn-btn-save">Save Settings</button>';
-        text += '<button class="cyn-btn-accept-all">Accept all</button>';
+        // section for other links
+        text += '<div class="cyn-other-links" style="padding-top:6px;padding-bottom:8px;font-size:12px">';
 
+        if(this._config.imprint != undefined)
+            text += '<a href="' + this._config.imprint.url + '">' + this._config.imprint.text + '</a> ';
+        if(this._config.privacyPolicy != undefined)
+            text += '<a href="' + this._config.privacyPolicy.url + '">' + this._config.privacyPolicy.text + '</a> ';
+
+        text += '</div>';
+
         el.innerHTML = text;
@@ -149,7 +182,17 @@ el.style.display = 'none';
         style.borderRadius = '8px';
+
+        style.fontSize = '14px';
+        style.fontFamily = '"Trebuchet MS", Helvetica, sans-serif';
+        style.color = '#444';
+
+        style.overflowY = 'auto';
         
         if(window.innerWidth <= 768)    // mobile
-            style.right = style.left = style.bottom = '16px';
+            style.top = style.right = style.left = style.bottom = '16px';
         else        // desktop (large screen)
+        {
             style.right = style.bottom = '32px';
+            style.maxHeight = '80vh';
+        }
+            
 
@@ -172,22 +215,18 @@ // table
             style.cursor = 'pointer';
-            style.margin = '8px';
-            style.marginTop = '24px';
+            style.margin = '12px';
+            style.marginLeft = '10%';
             style.borderRadius = '4px';
+            style.border = '0px';
+            style.backgroundColor = '#48c774';
+            style.color = 'white';
+            style.fontSize = '18px';
+            style.padding = '8px';
+            style.paddingLeft = style.paddingRight = '12px';
+            style.display = 'block';
+        }
 
-            if(buttons[i].className == 'cyn-btn-accept-all') {
-                style.border = '0px';
-                style.backgroundColor = '#48c774';
-                style.color = 'white';
-                style.fontWeight = 'bold';
-                style.fontSize = '24px';
-                style.padding = '12px';
-                style.paddingLeft = style.paddingRight = '16px';
-            } else {
-                style.backgroundColor = 'white';
-                style.color = '#999';
-                style.border = '2px solid #bbb';
-                style.fontSize = '20px';
-                style.padding = '8px';
-            }
-        }
+        // links
+        const aElems = this.banner.getElementsByTagName('a');
+        for(let i = 0; i < aElems.length; i++)
+            aElems[i].style.color = '#333';
     }
@@ -242,3 +281,1 @@
 };
-
-module.exports = CookieYesNo;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41622

increased by126.56%

Number of package files

11

increased by37.5%

Lines of code

794

increased by222.76%

Number of lines in readme file

78

increased by34.48%

Worsened metrics

Dev dependency count

7

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes