9.0.2 • Published 4 years ago
ff-cookies v9.0.2
ff-cookies
Installing
npm install ff-cookies --save
Using
Basic
Simple usage
<ff-cookies></ff-cookies>
Also you can set up options:
<ff-cookies
<!-- You can change the default method that determines whether to display the component or not. -->
[checkCookies]="myCheckCookies.bind(this)"
<!-- Cookies options -->
path="/"
expireDays="30"
cookieName="myCookieName"
cookieValue="cookies accepted"
<!-- set href for link -->
link="/cookies-politic"
<!-- set text for link -->
linkText="cookies policy"
<!-- set text for "agree" button -->
agreeText="Agree"
<!-- set main text -->
description="We use cookies to ensure you the best experience. By clicking around the site you accept our "
<!-- output triggered after user click on "accept" button -->
(accept)="myHandler($event)"
></ff-cookies>
Types and default values
checkCookies: () => boolean;
accept: (event: Event) => void;
description: string = 'We use cookies to ensure you the best experience. By clicking around the site you accept our ';
linkText: string = 'cookies policy';
link: string = '';
agreeText: string = 'Agree';
path: string = '/';
expireDays: string | number = 365;
cookieName: string = 'myCookieName';
cookieValue: string = 'cookies accepted';
Styling
You can change default styles. That can be used to target the override
.ff-cookies-wrapper{
// styles for wrapper
}
.ff-cookies-description{
// styles for description
}
.ff-cookies-more{
// styles for link
}
.ff-cookies-agree{
// styles for accept button
}
Version 9.X.X
Since version 9.0.0 we added two more components: ff-cookies-modal
and ff-cookies-advanced
.
Notice! ff-cookies-modal
component is not ready yet. You can use it as experimental.
ff-cookies-advanced
Component looks like simple ff-cookies, but it can be expanded and show details about cookies you use, your cookies politic (without adding additional page) and user will be able to choose what cookies your web site may use.
Usage
<ff-cookies-advanced [description]="description"
[linkText]="linkText" [link]="link"
[agreeText]="agreeText"
(accepted)="log($event)"
[cookiesSet]="cookiesSet"
[mainTabsTitle]="['Declaration', 'About cookies']">
<div aside>Some text for declaration aside bar should be marked by 'aside' attr</div>
<div body>Main text of cookies declaration (cookies politic) should be marked by 'body' attr</div>
</ff-cookies-advanced>
Pay attention to two new properties cookiesSet
and mainTabsTitle
, also to content inside component!
import {Component} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ICookiesSet} from 'ff-cookies';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'ff-cookies';
description = 'We use cookies to ensure you the best experience. By clicking around the site you accept our ';
linkText = 'cookies policy';
link = 'cookies';
agreeText = 'Ok';
// Important!!!
cookiesSet: ICookiesSet;
constructor(private http: HttpClient) {
this.http.get('/assets/cookies.json').subscribe((json: ICookiesSet) => {
this.cookiesSet = json;
});
}
log(cookies) {
console.log(cookies);
}
}
Interfaces
export interface ICookie {
name: string;
provider: string;
purpose: string;
expiry: string;
dataProcessor: string;
dataProcessorPrivacyPolicy: string;
type: string;
}
//the same as ICookie but for opportunity use some translations for titles
export interface ICookieTitles {
name: string;
provider: string;
purpose: string;
expiry: string;
dataProcessor: string;
dataProcessorPrivacyPolicy: string;
type: string;
}
export interface ICookiesGroup {
id: number;
name: string;
cookies: ICookie[];
description: string;
titles: ICookieTitles;
required?: boolean;
}
export interface ICookiesSet {
groups: ICookiesGroup[];
}