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: 12 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