feat(demo): add support for translated cookie consent messages + upda…

…te docs

Closes #14

README.md

@@ -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)

demo/package.json

@@ -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",
@@ -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",
@@ -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"
   }
 }

demo/src/app/app.component.ts

@@ -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',
@@ -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);
     });
@@ -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() {

demo/src/app/app.module.ts

@@ -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';
@@ -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
@@ -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,

demo/src/app/home/home.module.ts

@@ -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';
@@ -16,6 +17,8 @@ import { PlaygroundComponent } from './playground/playground.component';
         FormsModule,
         HomeRoutingModule,
         NgbAccordionModule.forRoot(), 
+        NgbDropdownModule.forRoot(),
+        TranslateModule,
         ColorPickerModule,
         ClipboardModule],
     declarations: [HomeComponent, PlaygroundComponent],

demo/src/app/home/playground/playground.component.html

@@ -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">

demo/src/app/home/playground/playground.component.ts

@@ -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';
 
@@ -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 = {
@@ -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);

demo/src/assets/i18n/en.json

@@ -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"
+    }
+}

demo/src/assets/i18n/fr.json

@@ -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"
+    }
+}

demo/yarn.lock

@@ -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"