bootstrap-cookie-consent - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/bootstrap-cookie-consent.dev.js

@@ -141,3 +141,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_cookie_consent_api_src_index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/cookie-consent-api/src/index.js */ \"./node_modules/cookie-consent-api/src/index.js\");\n/**\n * @version 0.0.1\n * @author Robin D https://www.robin-d.fr/\n * @license The MIT License (MIT)\n */\n\n\nclass BootstrapCookieConsent\n{\n\n    constructor(conf = {})\n    {\n        const defaultConf = {\n            'show_selector'   : '.cc',\n            'accept_id'       : 'accept-cookie',\n            'banner_text'     : 'Ce site utilise des services tiers susceptible de vous déposer un cookie. Pour une navigation optimale, acceptez-vous de les utiliser sur ce site ?',\n            'button_text'     : 'J\\'accepte',\n            'banner_id'       : 'cookies-banner',\n            'link_more_info'  : '#',\n            'more_info_label' : 'En savoir plus',\n            'details_title'   : 'Vie Privée',\n            'details_text'    : 'Vous pouvez accepter ou refuster l\\'utilisation sur ce site de certains services.',\n            'checkbox_class'  : 'switch-sm',\n            services: [],\n            services_descr: {}\n        };\n\n        //super(conf);\n\n        this._conf = Object.assign({}, defaultConf, conf);\n\n        this.cookieConsent = new _node_modules_cookie_consent_api_src_index_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this._conf);\n\n        if (this.cookieConsent.isAllConfigured() == false) {\n            this._showBanner();\n        }\n\n        this.cookieConsent.on('allConfigured', ()=>{\n            this._hideBanner();\n        });\n\n        $(this._conf.show_selector).on('click', ()=>{\n            if (!$('#cookie-modal').length) {\n                this._createDetails();\n            }\n            $('#cookie-modal').modal('show')\n        });\n\n    }\n\n    _hideBanner() {\n        if ($('#'+this._conf.banner_id).length) {\n            $('#'+this._conf.banner_id).remove();\n        }\n    }\n\n    _showBanner() {\n\n        let banner = '<div id=\"'+this._conf.banner_id+'\" class=\"alert alert-warning text-center\">'+this._conf.banner_text+' <button class=\"btn btn-success btn-gradient btn-sm\" id=\"'+this._conf.accept_id+'\">'+this._conf.button_text+'</button> <a href=\"'+this._conf.link_more_info+'\">'+this._conf.more_info_label+'</a></div>';\n        $(document.body).prepend(banner);\n\n        $('#'+this._conf.accept_id).on('click', ()=>{\n            this.cookieConsent.acceptAll();\n            this._hideBanner();\n        });\n    }\n\n    _createDetails() {\n        let modal ='<div class=\"modal fade\" id=\"cookie-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">';\n        modal += '<div class=\"modal-dialog\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\">';\n        modal += '<h5 class=\"modal-title\">'+this._conf.details_title+'</h5>';\n        modal += '<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Fermer\"><span aria-hidden=\"true\">&times;</span></button></div>';\n        modal += '<div class=\"modal-body\">';\n        modal += '<p>'+this._conf.details_text+' <a href=\"'+this._conf.link_more_info+'\">'+this._conf.more_info_label+'</a></p>';\n        modal += '<table class=\"table\"><thead class=\"thead-light\"><tr><th scope=\"col\" class=\"col-10\">Service</th><th scope=\"col\" class=\"col-2\">Accepter</th></tr></thead>';\n        modal += '<tbody>';\n\n        this._conf.services.forEach((elem)=>{\n            modal += '<tr><td>' + elem + (elem in this._conf.services_descr ? '<br><small>'+this._conf.services_descr[elem]+'</small>':'') +'</td><td class=\"text-center\">';\n            modal += '<span class=\"switch\"><input type=\"checkbox\" class=\"' + this._conf.checkbox_class +'\" id=\"switch-'+ elem +'\"'\n            modal +=(this.cookieConsent.isAccepted(elem) ? ' checked': '')\n            modal += '><label for=\"switch-'+ elem +'\"></label></span>';\n            modal += '</td></tr>';\n        });\n\n        modal += '</tbody></table></div></div></div></div>';\n\n        $(document.body).append(modal);\n\n        this._conf.services.forEach((elem)=>{\n            $('#switch-'+ elem).change(()=>{\n                if ($('#switch-'+ elem).is(\":checked\")) {\n                    this.cookieConsent.accept(elem);\n                } else {\n                    this.cookieConsent.refuse(elem);\n                }\n            });\n        });\n    }\n\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (BootstrapCookieConsent);\n\n\n//# sourceURL=webpack://BootstrapCookieConsent/./src/BootstrapCookieConsent.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_cookie_consent_api_src_index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/cookie-consent-api/src/index.js */ \"./node_modules/cookie-consent-api/src/index.js\");\n/**\n * @version 0.0.1\n * @author Robin D https://www.robin-d.fr/\n * @license The MIT License (MIT)\n */\n\n\nclass BootstrapCookieConsent\n{\n\n    constructor(conf = {})\n    {\n        const defaultConf = {\n            'show_selector'   : '.cc',\n            'accept_id'       : 'accept-cookie',\n            'banner_text'     : 'Ce site utilise des services tiers susceptible de vous déposer un cookie. Pour une navigation optimale, acceptez-vous de les utiliser sur ce site ?',\n            'button_text'     : 'J\\'accepte',\n            'banner_id'       : 'cookies-banner',\n            'link_more_info'  : '#',\n            'more_info_label' : 'En savoir plus',\n            'details_title'   : 'Vie Privée',\n            'details_text'    : 'Vous pouvez accepter ou refuster l\\'utilisation sur ce site de certains services.',\n            'checkbox_class'  : 'switch-sm',\n            'method'          : 1, // 0: native boostrap, 1:jquery bootstrap\n            services: [],\n            services_descr: {}\n        };\n\n\n        this._conf = Object.assign({}, defaultConf, conf);\n\n        this.cookieConsent = new _node_modules_cookie_consent_api_src_index_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this._conf);\n\n        if (this.cookieConsent.isAllConfigured() == false) {\n            this._showBanner();\n        }\n\n        this.cookieConsent.on('allConfigured', ()=>{\n            this._hideBanner();\n        });\n\n        document.querySelectorAll(this._conf.show_selector).forEach(\n        (item)=>{\n            item.addEventListener('click', ()=>{\n                if (document.getElementById('cookie-modal') === null) {\n                    this._createDetails();\n                }\n\n                if (this._conf.method === 1) {\n                    $('#cookie-modal').modal('toggle');\n                } else {\n                    let modal = document.getElementById('cookie-modal');\n\n                    let iModal = new Modal(modal);\n                    iModal.show();\n                }\n            });\n        });\n\n    }\n\n    _hideBanner() {\n        let bannerElement = document.getElementById(this._conf.banner_id);\n        if (bannerElement !== null) {\n            bannerElement.parentNode.removeChild(bannerElement);\n        }\n    }\n\n    _showBanner() {\n        let parser = new DOMParser();\n\n        let banner = document.createElement('div');\n        banner.setAttribute('id', this._conf.banner_id);\n        banner.setAttribute('class', 'alert alert-warning text-center');\n        banner.innerHTML = this._conf.banner_text+' <button class=\"btn btn-success btn-gradient btn-sm\" id=\"'+this._conf.accept_id+'\">'+this._conf.button_text+'</button> <a href=\"'+this._conf.link_more_info+'\">'+this._conf.more_info_label+'</a>';\n        document.body.insertBefore(banner, document.body.firstChild);\n\n        document.getElementById(this._conf.accept_id).addEventListener('click', ()=>{\n            console.log('event click');\n            this.cookieConsent.acceptAll();\n            this._hideBanner();\n        });\n    }\n\n    _createDetails() {\n        let modal = '';\n\t    modal += '<div class=\"modal-dialog\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\">';\n\t    modal += '<h5 class=\"modal-title\">' + this._conf.details_title + '</h5>';\n\t    modal += '<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Fermer\"><span aria-hidden=\"true\">&times;</span></button></div>';\n\t    modal += '<div class=\"modal-body\">';\n\t    modal += '<p>' + this._conf.details_text + ' <a href=\"' + this._conf.link_more_info + '\">' + this._conf.more_info_label + '</a></p>';\n\t    modal += '<table class=\"table\"><thead class=\"thead-light\"><tr><th scope=\"col\" class=\"col-10\">Service</th><th scope=\"col\" class=\"col-2\">Accepter</th></tr></thead>';\n\t    modal += '<tbody>';\n\n\t    this._conf.services.forEach(elem => {\n\t      modal += '<tr><td>' + elem + (elem in this._conf.services_descr ? '<br><small>' + this._conf.services_descr[elem] + '</small>' : '') + '</td><td class=\"text-center\">';\n\t      modal += '<span class=\"switch\"><input type=\"checkbox\" class=\"' + this._conf.checkbox_class + '\" id=\"switch-' + elem + '\"';\n\t      modal += this.cookieConsent.isAccepted(elem) ? ' checked' : '';\n\t      modal += '><label for=\"switch-' + elem + '\"></label></span>';\n\t      modal += '</td></tr>';\n\t    });\n\n\t    modal += '</tbody></table></div></div></div6';\n\n        let modalElement = document.createElement('div');\n        modalElement.setAttribute('id', 'cookie-modal');\n        modalElement.setAttribute('class', 'modal fade');\n        modalElement.innerHTML = modal;\n\n\t    document.body.appendChild(modalElement);\n\n        this._conf.services.forEach((elem)=>{\n            document.getElementById('switch-'+ elem).addEventListener('change', ()=>{\n                if (document.getElementById('switch-'+ elem).checked) {\n                    this.cookieConsent.accept(elem);\n                } else {\n                    this.cookieConsent.refuse(elem);\n                }\n            });\n        });\n    }\n\n\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (BootstrapCookieConsent);\n\n\n//# sourceURL=webpack://BootstrapCookieConsent/./src/BootstrapCookieConsent.js?");
 
@@ -144,0 +144,0 @@ /***/ })

dist/bootstrap-cookie-consent.js

@@ -790,6 +790,7 @@ (function (global, factory) {
 	      'checkbox_class': 'switch-sm',
+	      'method': 1,
+	      // 0: native boostrap, 1:jquery bootstrap
 	      services: [],
 	      services_descr: {}
-	    }; //super(conf);
-
+	    };
 	    this._conf = Object.assign({}, defaultConf, conf);
@@ -805,8 +806,16 @@ this.cookieConsent = new CookieConsentApi(this._conf);
 	    });
-	    $(this._conf.show_selector).on('click', () => {
-	      if (!$('#cookie-modal').length) {
-	        this._createDetails();
-	      }
+	    document.querySelectorAll(this._conf.show_selector).forEach(item => {
+	      item.addEventListener('click', () => {
+	        if (document.getElementById('cookie-modal') === null) {
+	          this._createDetails();
+	        }
 
-	      $('#cookie-modal').modal('show');
+	        if (this._conf.method === 1) {
+	          $('#cookie-modal').modal('toggle');
+	        } else {
+	          let modal = document.getElementById('cookie-modal');
+	          let iModal = new Modal(modal);
+	          iModal.show();
+	        }
+	      });
 	    });
@@ -816,4 +825,6 @@ }
 	  _hideBanner() {
-	    if ($('#' + this._conf.banner_id).length) {
-	      $('#' + this._conf.banner_id).remove();
+	    let bannerElement = document.getElementById(this._conf.banner_id);
+
+	    if (bannerElement !== null) {
+	      bannerElement.parentNode.removeChild(bannerElement);
 	    }
@@ -823,5 +834,10 @@ }
 	  _showBanner() {
-	    let banner = '<div id="' + this._conf.banner_id + '" class="alert alert-warning text-center">' + this._conf.banner_text + ' <button class="btn btn-success btn-gradient btn-sm" id="' + this._conf.accept_id + '">' + this._conf.button_text + '</button> <a href="' + this._conf.link_more_info + '">' + this._conf.more_info_label + '</a></div>';
-	    $(document.body).prepend(banner);
-	    $('#' + this._conf.accept_id).on('click', () => {
+	    let parser = new DOMParser();
+	    let banner = document.createElement('div');
+	    banner.setAttribute('id', this._conf.banner_id);
+	    banner.setAttribute('class', 'alert alert-warning text-center');
+	    banner.innerHTML = this._conf.banner_text + ' <button class="btn btn-success btn-gradient btn-sm" id="' + this._conf.accept_id + '">' + this._conf.button_text + '</button> <a href="' + this._conf.link_more_info + '">' + this._conf.more_info_label + '</a>';
+	    document.body.insertBefore(banner, document.body.firstChild);
+	    document.getElementById(this._conf.accept_id).addEventListener('click', () => {
+	      console.log('event click');
 	      this.cookieConsent.acceptAll();
@@ -834,3 +850,3 @@
 	  _createDetails() {
-	    let modal = '<div class="modal fade" id="cookie-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">';
+	    let modal = '';
 	    modal += '<div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header">';
@@ -852,8 +868,12 @@ modal += '<h5 class="modal-title">' + this._conf.details_title + '</h5>';
 
-	    modal += '</tbody></table></div></div></div></div>';
-	    $(document.body).append(modal);
+	    modal += '</tbody></table></div></div></div6';
+	    let modalElement = document.createElement('div');
+	    modalElement.setAttribute('id', 'cookie-modal');
+	    modalElement.setAttribute('class', 'modal fade');
+	    modalElement.innerHTML = modal;
+	    document.body.appendChild(modalElement);
 
 	    this._conf.services.forEach(elem => {
-	      $('#switch-' + elem).change(() => {
-	        if ($('#switch-' + elem).is(":checked")) {
+	      document.getElementById('switch-' + elem).addEventListener('change', () => {
+	        if (document.getElementById('switch-' + elem).checked) {
 	          this.cookieConsent.accept(elem);
@@ -860,0 +880,0 @@ } else {

package.json

 {
   "name": "bootstrap-cookie-consent",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Simple and light Boostrap banner and modal to manage cookies like the cnil advices it (RGPD)",
@@ -5,0 +5,0 @@ "author": "Robin D. <[e-mail]>",

README.md

@@ -74,2 +74,3 @@ # Be compliant to GDPR (rgpd) like CNIL ask it
     cookieDomain: null,
+    method: 1, // 0: native bootstrap, 1: jquery (classic) bootstrap
 });
@@ -76,0 +77,0 @@ ```

src/BootstrapCookieConsent.js

@@ -24,2 +24,3 @@ /**
             'checkbox_class'  : 'switch-sm',
+            'method'          : 1, // 0: native boostrap, 1:jquery bootstrap
             services: [],
@@ -29,3 +30,2 @@ services_descr: {}
 
-        //super(conf);
 
@@ -44,7 +44,18 @@ this._conf = Object.assign({}, defaultConf, conf);
 
-        $(this._conf.show_selector).on('click', ()=>{
-            if (!$('#cookie-modal').length) {
-                this._createDetails();
-            }
-            $('#cookie-modal').modal('show')
+        document.querySelectorAll(this._conf.show_selector).forEach(
+        (item)=>{
+            item.addEventListener('click', ()=>{
+                if (document.getElementById('cookie-modal') === null) {
+                    this._createDetails();
+                }
+
+                if (this._conf.method === 1) {
+                    $('#cookie-modal').modal('toggle');
+                } else {
+                    let modal = document.getElementById('cookie-modal');
+
+                    let iModal = new Modal(modal);
+                    iModal.show();
+                }
+            });
         });
@@ -55,4 +66,5 @@
     _hideBanner() {
-        if ($('#'+this._conf.banner_id).length) {
-            $('#'+this._conf.banner_id).remove();
+        let bannerElement = document.getElementById(this._conf.banner_id);
+        if (bannerElement !== null) {
+            bannerElement.parentNode.removeChild(bannerElement);
         }
@@ -62,7 +74,12 @@ }
     _showBanner() {
+        let parser = new DOMParser();
 
-        let banner = '<div id="'+this._conf.banner_id+'" class="alert alert-warning text-center">'+this._conf.banner_text+' <button class="btn btn-success btn-gradient btn-sm" id="'+this._conf.accept_id+'">'+this._conf.button_text+'</button> <a href="'+this._conf.link_more_info+'">'+this._conf.more_info_label+'</a></div>';
-        $(document.body).prepend(banner);
+        let banner = document.createElement('div');
+        banner.setAttribute('id', this._conf.banner_id);
+        banner.setAttribute('class', 'alert alert-warning text-center');
+        banner.innerHTML = this._conf.banner_text+' <button class="btn btn-success btn-gradient btn-sm" id="'+this._conf.accept_id+'">'+this._conf.button_text+'</button> <a href="'+this._conf.link_more_info+'">'+this._conf.more_info_label+'</a>';
+        document.body.insertBefore(banner, document.body.firstChild);
 
-        $('#'+this._conf.accept_id).on('click', ()=>{
+        document.getElementById(this._conf.accept_id).addEventListener('click', ()=>{
+            console.log('event click');
             this.cookieConsent.acceptAll();
@@ -74,26 +91,31 @@ this._hideBanner();
     _createDetails() {
-        let modal ='<div class="modal fade" id="cookie-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">';
-        modal += '<div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header">';
-        modal += '<h5 class="modal-title">'+this._conf.details_title+'</h5>';
-        modal += '<button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button></div>';
-        modal += '<div class="modal-body">';
-        modal += '<p>'+this._conf.details_text+' <a href="'+this._conf.link_more_info+'">'+this._conf.more_info_label+'</a></p>';
-        modal += '<table class="table"><thead class="thead-light"><tr><th scope="col" class="col-10">Service</th><th scope="col" class="col-2">Accepter</th></tr></thead>';
-        modal += '<tbody>';
+        let modal = '';
+	    modal += '<div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header">';
+	    modal += '<h5 class="modal-title">' + this._conf.details_title + '</h5>';
+	    modal += '<button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button></div>';
+	    modal += '<div class="modal-body">';
+	    modal += '<p>' + this._conf.details_text + ' <a href="' + this._conf.link_more_info + '">' + this._conf.more_info_label + '</a></p>';
+	    modal += '<table class="table"><thead class="thead-light"><tr><th scope="col" class="col-10">Service</th><th scope="col" class="col-2">Accepter</th></tr></thead>';
+	    modal += '<tbody>';
 
-        this._conf.services.forEach((elem)=>{
-            modal += '<tr><td>' + elem + (elem in this._conf.services_descr ? '<br><small>'+this._conf.services_descr[elem]+'</small>':'') +'</td><td class="text-center">';
-            modal += '<span class="switch"><input type="checkbox" class="' + this._conf.checkbox_class +'" id="switch-'+ elem +'"'
-            modal +=(this.cookieConsent.isAccepted(elem) ? ' checked': '')
-            modal += '><label for="switch-'+ elem +'"></label></span>';
-            modal += '</td></tr>';
-        });
+	    this._conf.services.forEach(elem => {
+	      modal += '<tr><td>' + elem + (elem in this._conf.services_descr ? '<br><small>' + this._conf.services_descr[elem] + '</small>' : '') + '</td><td class="text-center">';
+	      modal += '<span class="switch"><input type="checkbox" class="' + this._conf.checkbox_class + '" id="switch-' + elem + '"';
+	      modal += this.cookieConsent.isAccepted(elem) ? ' checked' : '';
+	      modal += '><label for="switch-' + elem + '"></label></span>';
+	      modal += '</td></tr>';
+	    });
 
-        modal += '</tbody></table></div></div></div></div>';
+	    modal += '</tbody></table></div></div></div6';
 
-        $(document.body).append(modal);
+        let modalElement = document.createElement('div');
+        modalElement.setAttribute('id', 'cookie-modal');
+        modalElement.setAttribute('class', 'modal fade');
+        modalElement.innerHTML = modal;
 
+	    document.body.appendChild(modalElement);
+
         this._conf.services.forEach((elem)=>{
-            $('#switch-'+ elem).change(()=>{
-                if ($('#switch-'+ elem).is(":checked")) {
+            document.getElementById('switch-'+ elem).addEventListener('change', ()=>{
+                if (document.getElementById('switch-'+ elem).checked) {
                     this.cookieConsent.accept(elem);
@@ -107,4 +129,5 @@ } else {
 
+
 }
 
 export default BootstrapCookieConsent;

No alert changes

Improved metrics

Total package byte prevSize

350739

increased by405.04%

Number of package files

11

increased by10%

Lines of code

1127

increased by3.68%

Number of lines in readme file

96

increased by1.05%

No dependency changes