novicell-cookie-info

Novicell Cookie Info

Cookie information dialog used to show a short text about, the use of cookies for the website, due to european laws.

Usage

Written in pure Vanilla JS, it has no dependencies. It ships with a sample LESS file, for easy implementation with the novicell-frontend setup. Use the styles for inspiration and then make your own styles.

Install with npm

npm install novicell-cookie-info --save

Setup

First make some HTML using the these id's, for the JS to work:

Markup

<button class="cookie-info-open" id="js-cookie-info-open">
    Cookies?
</button>
<section class="cookie-info" id="js-cookie-info">
    <div class="cookie-info__text">
        <p>We're using cookies on this website, is that OK with you?</p>
        <button class="cookie-info__close button" id="js-cookie-info-close">Fine with me :)</button>
    </div>
</section>

Then include the js file in your js bundle or in your HTML:

JS bundle

scripts: [
    vendorPath + "novicell-cookie-info/js/novicell.cookieinfo.js"
    ...
]

HTML

    <script src="/node_modules/novicell-cookie-info/js/novicell.cookieinfo.js"></script>

Then call the init-method from your master.js-file:

document.addEventListener("DOMContentLoaded", function() {
    novicell.cookieInfo.init();
    ...
});

Extension

When extending the script, make sure to make a singleton for the novicell and the novicell.cookieInfo objects before adding your own methods.

'use strict';

var novicell = novicell || {};
novicell.cookieInfo = novicell.cookieInfo || {};
novicell.cookieInfo.extentions = novicell.cookieInfo.extentions || new function () {
    this.test = function() {
        console.log('test');
    };
}();

Next you need to include your js-files in your js bundle or in your HTML, and then call the init-method from your master.js. Make sure to load you:

JS bundle

scripts: [
    vendorPath + "novicell-cookie-info/js/novicell.cookieinfo.js"
    projectPath + "/components/novicell.cookieinfo.extentions.js"
    ...
]

HTML

    <script src="/node_modules/novicell-cookie-info/js/novicell.cookieinfo.js"></script>
    <script src="/scripts/components/novicell.cookieinfo.extentions.js"></script>

Then call the test-method from your master.js:

document.addEventListener("DOMContentLoaded", function() {
    novicell.cookieInfo.init();
    novicell.cookieInfo.extentions.test();
    ...
});