Skip to content

Commit

Permalink
feat(demo): add support for translated cookie consent messages + upda…
Browse files Browse the repository at this point in the history
…te docs

Closes #14
  • Loading branch information
tinesoft committed Jun 15, 2018
1 parent 0b608df commit e1bf9bf
Show file tree
Hide file tree
Showing 10 changed files with 165 additions and 12 deletions.
67 changes: 67 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,73 @@ export class AppComponent implements OnInit, OnDestroy {

See [Cookie Consent Documentation](https://cookieconsent.insites.com/documentation/about-cookie-consent/) to see more about how to customize the UI or interact with user interactions.

## I18n Support

Messages displayed in the Cookie Consent Bar can easily be translated, using libraries like [ngx-translate](https://github.com/ngx-translate/core).
Basically this involved the following steps (using ngx-translate + Anglar CLI):

* [Install](https://github.com/ngx-translate/core#installation) and [configure](https://github.com/ngx-translate/core#usage) `ngx-translate`

* Provide the translation JSON files in `src/assets/`, for e.g: `en.json`, `fr.json`, ...

```JSON
{
"cookie": {
"header": "Cookies used on the website!",
"message": "This website uses cookies to ensure you get the best experience on our website.",
"dismiss": "Got it!",
"allow": "Allow cookies",
"deny": "Decline",
"link": "Learn more"
}
}
```

> **Note:** see [content-options.ts](https://github.com/tinesoft/ngx-cookieconsent/blob/master/src/model/content-options.ts) for complete list of messages that can be translated.
* Configure your main component `AppComponent`

```ts
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {

constructor(private ccService: NgcCookieConsentService, private translateService:TranslateService) {
}

ngOnInit() {
// Support for translated cookies messages
this.translateService.addLangs(['en', 'fr']);
this.translateService.setDefaultLang('en');

const browserLang = this.translateService.getBrowserLang();
this.translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');

this.translateService//
.get(['cookie.header', 'cookie.message', 'cookie.dismiss', 'cookie.allow', 'cookie.deny', 'cookie.link'])
.subscribe(data => {

this.ccService.getConfig().content = this.ccService.getConfig().content || {} ;
// Override default messages with the translated ones
this.ccService.getConfig().content.header = data['cookie.header'];
this.ccService.getConfig().content.message = data['cookie.message'];
this.ccService.getConfig().content.dismiss = data['cookie.dismiss'];
this.ccService.getConfig().content.allow = data['cookie.allow'];
this.ccService.getConfig().content.deny = data['cookie.deny'];
this.ccService.getConfig().content.link = data['cookie.link'];

this.ccService.destroy();//remove previous cookie bar (with default messages)
this.ccService.init(this.ccService.getConfig()); // update config with translated messages
});
}
```
## Credits
`ngx-cookieconsent` is built upon [Cookie Consent](https://cookieconsent.insites.com/), created by [Insites](https://insites.com)
Expand Down
14 changes: 8 additions & 6 deletions demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "2.0.1",
"bootstrap": "^4.0.0-beta",
"cookieconsent": "^3.0.4",
"core-js": "^2.4.1",
Expand All @@ -40,10 +42,13 @@
"@angular/language-service": "^5.0.0",
"@angular/platform-server": "^5.0.0",
"@angularclass/hmr": "~2.1.3",
"@nguniversal/express-engine": "^5.0.0-beta.5",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~4.0.0",
"express": "^4.16.2",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
Expand All @@ -53,14 +58,11 @@
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"reflect-metadata": "~0.1.10",
"ts-loader": "~2.3.7",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"ts-loader": "~2.3.7",
"reflect-metadata": "~0.1.10",
"webpack-node-externals": "~1.6.0",
"express": "^4.16.2",
"@nguniversal/express-engine": "^5.0.0-beta.5",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5"
"webpack-node-externals": "~1.6.0"
}
}
8 changes: 7 additions & 1 deletion demo/src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { NgcCookieConsentService, NgcInitializeEvent, NgcStatusChangeEvent } fro

import 'rxjs/add/operator/filter';
import { Subscription } from 'rxjs/Subscription';
import { TranslateService } from '@ngx-translate/core';

@Component({
selector: 'app-root',
Expand All @@ -19,7 +20,7 @@ export class AppComponent {
private statusChangeSubscription: Subscription;
private revokeChoiceSubscription: Subscription;

constructor(private ccService: NgcCookieConsentService, private router: Router) {
constructor(private ccService: NgcCookieConsentService, private translateService:TranslateService, private router: Router) {
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
window.scroll(0, 0);
});
Expand Down Expand Up @@ -56,6 +57,11 @@ export class AppComponent {
// you can use this.ccService.getConfig() to do stuff...
console.log(`revokeChoice: ${JSON.stringify(event)}`);
});


// (Optional) support for translated cookies messages
this.translateService.addLangs(['en', 'fr']);
this.translateService.setDefaultLang('en');
}

ngOnDestroy() {
Expand Down
20 changes: 18 additions & 2 deletions demo/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import { NgcCookieConsentModule, NgcCookieConsentConfig } from 'ngx-cookieconsent';

import { AppRoutingModule } from './app-routing';
Expand All @@ -11,6 +11,10 @@ import { AppComponent } from './app.component';
import { environment } from './../environments/environment';
import { HomeModule } from './home/home.module';

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';


const cookieConfig:NgcCookieConsentConfig = {
cookie: {
domain: environment.cookieDomain // it is recommended to set your domain, for cookies to work properly
Expand All @@ -27,14 +31,26 @@ const cookieConfig:NgcCookieConsentConfig = {
type: 'opt-out'
};

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient);
}

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
NgcCookieConsentModule.forRoot(cookieConfig),
AppRoutingModule,
AppSharedModule,
Expand Down
5 changes: 4 additions & 1 deletion demo/src/app/home/home.module.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbAccordionModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { ColorPickerModule } from 'ngx-color-picker';
import { ClipboardModule } from 'ngx-clipboard';
import { TranslateModule } from '@ngx-translate/core';

import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';
Expand All @@ -16,6 +17,8 @@ import { PlaygroundComponent } from './playground/playground.component';
FormsModule,
HomeRoutingModule,
NgbAccordionModule.forRoot(),
NgbDropdownModule.forRoot(),
TranslateModule,
ColorPickerModule,
ClipboardModule],
declarations: [HomeComponent, PlaygroundComponent],
Expand Down
11 changes: 10 additions & 1 deletion demo/src/app/home/playground/playground.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,16 @@
<div class="col text-left">
<h2>Playground</h2>
</div>
<div class="col text-right"> <button type="button" class="btn btn-primary" (click)="resetConfig()">Reset <i class="fa fa-undo" aria-hidden="true"></i></button></div>
<div class="col text-right">
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownLang" ngbDropdownToggle>Language <i class="fa fa-globe" aria-hidden="true"></i></button>
<div ngbDropdownMenu aria-labelledby="dropdownLang">
<a #langLink *ngFor="let lang of translate.getLangs()"
[ngClass]="{'dropdown-item': true, 'active': (lang === translate.currentLang) }"
(click)="changeLang(langLink.innerText)">{{ lang }}</a>
</div>
</div>
<button type="button" class="btn btn-primary" (click)="resetConfig()">Reset <i class="fa fa-undo" aria-hidden="true"></i></button></div>
</div>
<div class="row">
<div class="col-md-6">
Expand Down
24 changes: 23 additions & 1 deletion demo/src/app/home/playground/playground.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

import { NgcCookieConsentService, NgcCookieConsentConfig, NgcCookiePosition, NgcCookieTheme, NgcCookieCompliance } from 'ngx-cookieconsent';
import { environment } from './../../../environments/environment';

Expand Down Expand Up @@ -54,7 +56,9 @@ export class PlaygroundComponent implements OnInit {
// { popup: { background: '#efefef', text: '#404040' }, 'button': { background: '#8ec760', text: '#ffffff' } }
// ];

constructor(private ccService: NgcCookieConsentService) { }
constructor(private ccService: NgcCookieConsentService, public translate: TranslateService) {
this.translate.use('en');// default language
}

ngOnInit(): void {
this.minOptions = {
Expand Down Expand Up @@ -104,6 +108,24 @@ export class PlaygroundComponent implements OnInit {
this.options.type = compliance;
}

changeLang(lang: string){
this.translate.use(lang);
this.translate//
// See assets/i18n/**.json for the keys
.get(['cookie.header', 'cookie.message', 'cookie.dismiss', 'cookie.allow', 'cookie.deny', 'cookie.link'])
.subscribe(data => {

this.options.content.header = data['cookie.header'];
this.options.content.message = data['cookie.message'];
this.options.content.dismiss = data['cookie.dismiss'];
this.options.content.allow = data['cookie.allow'];
this.options.content.deny = data['cookie.deny'];
this.options.content.link = data['cookie.link'];

this.updateConfig();
});
}

updateConfig(): void {
this.ccService.destroy();
this.ccService.init(this.options);
Expand Down
10 changes: 10 additions & 0 deletions demo/src/assets/i18n/en.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"cookie": {
"header": "Cookies used on the website!",
"message": "This website uses cookies to ensure you get the best experience on our website.",
"dismiss": "Got it!",
"allow": "Allow cookies",
"deny": "Decline",
"link": "Learn more"
}
}
10 changes: 10 additions & 0 deletions demo/src/assets/i18n/fr.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"cookie": {
"header": "Cookies sur le site!",
"message": "Ce site web utilise des cookies pour vous assurer la meilleure expérience de navigation sur notre site.",
"dismiss": "OK, j'ai compris!",
"allow": "Autoriser les cookies",
"deny": "Refuser",
"link": "Plus d'information"
}
}
8 changes: 8 additions & 0 deletions demo/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,14 @@
version "5.0.0-beta.5"
resolved "https://registry.yarnpkg.com/@nguniversal/module-map-ngfactory-loader/-/module-map-ngfactory-loader-5.0.0-beta.5.tgz#d86497e704f702e1a18bbcab5dd6586057941fa5"

"@ngx-translate/core@^9.1.1":
version "9.1.1"
resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-9.1.1.tgz#ae103928836b8a9e069fd2e2e76fa2198cc7e628"

"@ngx-translate/http-loader@2.0.1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@ngx-translate/http-loader/-/http-loader-2.0.1.tgz#aa67788e64bfa8652691a77b022b3b4031209113"

"@schematics/angular@~0.1.0":
version "0.1.5"
resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-0.1.5.tgz#501ef8bd7319e1b57486ee2a48720d2f3da7ee13"
Expand Down

0 comments on commit e1bf9bf

Please sign in to comment.