euc.js

Why make this lib?

Because I live in the UK and it's mandatory to warn users within the EU of cookie use.

I also don't like jQuery, and neither do I like hilariously verbose module loading or laborious build processes when concatenating scripts has been done efficiently without the likes of grunt, gulp, webpack, etc. for decades using bash, and npm scripts are even easier.

I also don't like releasing libs that are written in ES6 when no browsers fully support ES6 yet (c. 06/2016).

Finally, I absolutely detest JS getting in the way of styling my shit. Layout and appearance should be delegated to CSS, and mark-up should be my choice as well.

Thus, euc.js is here.

How does it work?

Following a fairly standard pattern (with a dirty shortcut for init/config object extension) for a JS 'plugin', the aim of this lib is to offer as much configuration as possible without getting in the way.

The contents of your cookie alert banner, for instance, may vary tremendously per each project, as might the ways in which you want to display the banner.

To that end, strictly only the hooks needed for the plugin to function are assigned their own object properties, while the innerHTML and all the styling is left up to you.

How does one use it?

Include euc.min.js in your page and call euc.init(), optionally passing in the config object:

    euc.init({
      cookieName           : "eu_consent",
      cookieFlag           : "given",
      cookieMaxAge         : 14,
      alertId              : "cookieLaw",
      alertContent         : '<span>This website uses cookies. <a href="/privacy" rel="nofollow">(?)</a></span><button>Okay.</button>',
      alertHook            : "show-cookie-warning",
      alertParentSelector  : "body",
      alertCloseSelector   : ".close-button",
      alertPlacementTop    : false
    });
    

Then just make sure you have elements corresponding to your selectors. Use any CSS selector you like. There is an optimization in place should you pass in an id.

FAQs