@palmabit/angular-cookie-law

v0.5.0

Published

2 years ago

Angular module that provides a banner to inform users about cookie law

Downloads

234

0High
0Medium
0Low

angular cookie cookie law banner

Angular Cookie Law

Angular cookie law provides:

a directive for a popup banner that informs users about cookies
a directive that blocks some code or another directive until cookies are accepted
a service to block external services (eg. YouTube, Facebook) until cookies are accepted

Install

You can install this package with npm.

npm

npm i @palmabit/angular-cookie-law --save

Add a <script> and <style> to your index.html:

<link rel="stylesheet" href="/node_modules/angular-cookie-law/dist/angular-cookie-law.min.css">

<script src="/node_modules/angular-cookie-law/dist/angular-cookie-law.min.js"></script>

Usage

First, you need to inject angular-cookie-law into your angular module.

angular.module('myApp', ['angular-cookie-law']);

CookieLawBanner directive

You could insert this directive at the beginning of <body> tag.

<cookie-law-banner position="top" message="Your custom message" policy-url="http://link-to-your-policy"></cookie-law-banner>

This directive creates a banner that informs users about cookies that contains a button to accept them.

Options

From version 0.2.0, all banner texts are refreshed if one of these attributes change: message, acceptText, declineText, policyText, policyURL.

position

position: 'top'

Position of the banner (variants: "top", "bottom". default: "top").

message

message: 'Your custom message'

The message to be shown with banner (default: "We use cookies to track usage and preferences").

acceptButton

acceptButton: true

Show or hide accept button (default: true).

acceptText

acceptText: 'Your custom text'

The text for accept button (default: "I Understand").

declineButton

declineButton: false

Show or hide decline button (default: false).

declineText

declineText: 'Your custom text'

The text for decline button (default: "Disable Cookies").

policyButton

policyButton: false

Show or hide policy link button (default: false).

policyText

policyText: 'Your custom text'

The text for policy link button (default: "Privacy Policy").

policyURL

policyURL: '/privacy-policy/'

The URL to show privacy policy (default: "/privacy-policy/").

policyBlank

policyBlank: false

Set true to open privacy policy page in other tab (default: false).

expireDays

expireDays: 365

Days number for the accept cookie expiration (default: 365).

element

element: 'body'

Element to append/prepend cookieBar to. Remember . for class or # for id. (default: "body").

CookieLawWait directive

<cookie-law-wait>
    <div>...</div>
</cookie-law-wait>

The divs inside <cookie-law-wait> directive is loaded only after cookies are accepted.

CookieLawService

This service provides a function to know if cookies are accepted.

First, you need to inject CookieLawService into your angular controller or directive.

angular.module('myApp').controller('MyCtrl', ['CookieLawService']);

isEnabled

This function tells you if cookies are accepted.

CookieLawService.isEnabled(); //true or false

Events

Accept event

The event cookieLaw.accept is triggered when cookies are accepted.

$scope.$on('cookieLaw.accept', function() {
    //callback function
});

Dismiss event

The event cookieLaw.dismiss is triggered when cookies banner is closed.

$scope.$on('cookieLaw.dismiss', function() {
    //callback function
});

Decline event

The event cookieLaw.decline is triggered when cookies are declined.

$scope.$on('cookieLaw.decline', function() {
    //callback function
});

Change the name of the cookie

To change the name of the cookie, simply add the following line to your code.

angular.module('angular-cookie-law').value('cookieLawName', 'cookieMessage');

Author

palmabit.com

License

The MIT License (MIT). Please see License File for more information.