Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nicholasruggeri/cookies-enabler

Easy-to-use pure Javascript solution for preventively blocking third-party cookies installed by js and comply with the EU cookie law.
https://github.com/nicholasruggeri/cookies-enabler

Last synced: 14 days ago
JSON representation

Easy-to-use pure Javascript solution for preventively blocking third-party cookies installed by js and comply with the EU cookie law.

Awesome Lists containing this project

README 

        

cookies-enabler.js

----------------------



Cookies-enabler.js is a easy-to-use pure Javascript solution for preventively blocking third-party cookies installed by js and comply with the EU cookie law.



### Download

Click [here] or ```bower install cookies-enabler```



####  How to install



 1 - Load the script



```



```



2 - Initiate the plugin



```

COOKIES_ENABLER.init( options );

```



####  Default Options



```

scriptClass: 'ce-script',

iframeClass: 'ce-iframe',



acceptClass: 'ce-accept',

dismissClass: 'ce-dismiss',

disableClass: 'ce-disable',



bannerClass: 'ce-banner',

bannerHTML:

    '
This website uses cookies. '

        +''

            +'Enable Cookies'

        +''

    +'
',



eventScroll: false,

scrollOffset: 200,



clickOutside: false,



cookieName: 'ce-cookie',

cookieDuration: '365',

wildcardDomain: false,



iframesPlaceholder: true,

iframesPlaceholderHTML:

    '
To view this content you need to'

        +'Enable Cookies'

    +'
',

iframesPlaceholderClass: 'ce-iframe-placeholder',



// Callbacks

onEnable: '',

onDismiss: '',

onDisable: ''

```

#### Notice Banner



You can customize the placeholder HTML by creating a script tag with the ID ```ce-banner-html```.



```

    

      <p>

        This websites uses cookies to give you the <i>best</i> possible experience.

      </p>

      <p>

        <a href="#" class="ce-accept">Enable Cookies</a> <a href="#" class="ce-disable">Disable Cookies</a> or <a href="#">Read More</a>

        <a href="#" class="ce-dismiss">X</a>

      </p>

    

```



 You can also set the option  as a  ```string``` containing the HTML:



```

bannerHTML: '
This website uses cookies. Enable Cookies
'

```



#### Blocking Cookies from Script Tags



Add the class ```"ce-script"``` and ```type="text/plain"``` to every script tag that installs cookies



```



    // GA Demo

    var _gaq = _gaq || [];

    _gaq.push(['_setAccount', 'UA-XXXXX-X']);

    _gaq.push(['_trackPageview']);



    // FB Share Demo

    (function(d, s, id) {

    var js, fjs = d.getElementsByTagName(s)[0];

    if (d.getElementById(id)) return;



```



#### Blocking Cookies from iFrames



For ```iframes```, change the ```src``` attribute to ```data-ce-src``` and add the class ```"ce-iframe"```

```



```



##### iFrames Placeholder



You can enable placeholders for blocked iframes using the ```iframesPlaceholder``` option:



```

iframesPlaceholder: true

```



Doing so, a custom placeholder for blocked iframes will be inserted after the hidden ```iframe``` element.



You can customize the placeholder HTML by creating a script tag with the ID ```ce-iframePlaceholder-html```.



```



      <p>This content is not available without cookies.

          <a href="#" class="ce-accept">Enable Cookies</a>

          <a href="#">Read More</a>

      </p>



```



 You can also set the option  as a  ```string``` containing the HTML:



```

iFramePlaceholderHTML: '
This content is not available without cookies. Enable Cookies"
',

```



#### Triggers



You can choose how to let the user accept or dismiss the cookies.



##### Scroll



This option will enable cookies when the user scrolls a certain amount in any direction.



```

// the cookies will be enabled after the user scrolls 200px

eventScroll: true   // default false

scrollOffset: 200

```



##### Click on any element of the page



This option will enable cookies when the user clicks on any element on the page that doesn't belong to the notice banner or other script-created elements.



```

clickOutside: true  // default false

```



#### DOM Hooks



Adding the ```ce-accept``` class to any element will make it act as an accept button, enabling the cookies on click.



Adding the ```ce-dismiss``` class to any element will make it act as a dismiss button, removing the notice banner on click.



Adding the ```ce-disable``` class to any element will make it act as a disable button, removing the notice banner and disabling cookies on click.



#### Callbacks



You can use the callback options to execute a function when cookies are accepted or the notice banner is dismissed.



```

onEnable: function(){



    console.log('cookies have been enabled');



},

onDismiss: function(){



    console.log('the banner has been dismissed');



},

onDisable: function(){



    console.log('cookies have been disabled');



}

```



#### Subdomains



You can enable this cookie to be saved across all your subdomains by enabling the ```wildcardDomain``` option.



#### Problematic Scripts



Some scripts use ```document.write```, that can't be executed asynchronously. 

We added a workaround using [Postscribe]. Change the ```src``` to ```data-ce-src``` and add the class ```ce-script```. Don't forget to download and include [Postscribe].



```



  

  COOKIES_ENABLER.init();



```



#### Donations



If you found this script useful, [buy us a beer]!



----------



[here]:https://github.com/nicholasruggeri/cookies-enabler/archive/master.zip

[buy us a beer]:https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=A5FJ9N7B87WLE

[Postscribe]:https://github.com/krux/postscribe