Merge pull request #18 from RobertThwaite/AwsomeButton

Added ability to use font awsome Icons for close button
andreasonny83 · Feb 20, 2018 · 715adcd · 715adcd
2 parents b9a9920 + c68a4f0
commit 715adcd
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -171,6 +171,29 @@ If set to a valid absolute or relative URL, it will render an extra 'learn more'
 
 ![output with link](http://i.imgur.com/0nvb6sP.png)
 
+### awsomeCloseIcon
+
+Font Awsome is required in your header for this feature to work.
+
+```html
+<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
+```
+
+
+
+
+| Type | Default value |
+| --- | --- |
+| string | null |
+
+If set to a Font awsome Icon e.g. "fa-window-close" it will replace the standard SVG with the Font awsome Icon.
+
+###### Example
+
+```html
+<cookie-law awsomeCloseIcon="fa-window-close"></cookie-law>
+```
+
 ### target
 
 | Type | Default value |

diff --git a/demo/app.component.ts b/demo/app.component.ts
@@ -32,7 +32,7 @@ import {
       </a>
     </cookie-law>
 
-    <cookie-law #cookieLaw (isSeen)="cookieLawSeen = $event" learnMore="/false" target="_blank"></cookie-law>
+    <cookie-law #cookieLaw (isSeen)="cookieLawSeen = $event" learnMore="/false" target="_blank" awsomeCloseIcon="fa-accessible-icon" ></cookie-law>
   `,
   styles: [`
     a.link {

diff --git a/demo/index.html b/demo/index.html
@@ -8,6 +8,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>angular2-cookie-law demo app</title>
+    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
+
+
   </head>
   <body>
     <cookie-demo-app class="app">

diff --git a/src/cookie-law-element.component.ts b/src/cookie-law-element.component.ts
@@ -43,11 +43,17 @@ export class CookieLawElementComponent implements OnInit {
   public transition: CookieLawAnimation;
 
   @Input()
-  get learnMore() { return this._learnMore; }
+  get learnMore() { return this._learnMore; } 
   set learnMore(value: string) {
     this._learnMore = (value !== null && `${value}` !== 'false') ? value : null;
   }
 
+  @Input()
+  get awsomeCloseIcon() { return this._awsomeCloseIcon; } 
+  set awsomeCloseIcon(value: string) {
+    this._awsomeCloseIcon = (value !== null && `${value}` !== 'false') ? value : null;
+  }
+
   @Input()
   get target() { return this._target; }
   set target(value: CookieLawTarget) {
@@ -70,6 +76,7 @@ export class CookieLawElementComponent implements OnInit {
   public noopener: boolean;
 
   private _learnMore: string;
+  private _awsomeCloseIcon: string;
   private _target: CookieLawTarget;
   private _position: CookieLawPosition;
 
@@ -82,10 +89,17 @@ export class CookieLawElementComponent implements OnInit {
   }
 
   public ngOnInit(): void {
-    this.noopener = this._target === '_blank';
+    this.noopener = this._target === '_blank'; 
     this.transition = this.position === 'bottom' ? 'bottomIn' : 'topIn';
 
-    this.closeSvg = this.domSanitizer.bypassSecurityTrustHtml(closeIcon);
+    if(this._awsomeCloseIcon){
+      this.closeSvg = this.domSanitizer.bypassSecurityTrustHtml("<i class='fab " +  this._awsomeCloseIcon + "'></i>");
+    }else{
+      this.closeSvg = this.domSanitizer.bypassSecurityTrustHtml(closeIcon);
+    }
+
+
+
 
     this.currentStyles = {
       'top': this.position === 'top' ? '0' : null,

diff --git a/src/cookie-law.component.ts b/src/cookie-law.component.ts
@@ -28,6 +28,7 @@ import {
   selector: 'cookie-law',
   template: `
     <cookie-law-el *ngIf="!seen"
+                   [awsomeCloseIcon]="awsomeCloseIcon"
                    [learnMore]="learnMore"
                    [target]="target"
                    [position]="position"
@@ -56,14 +57,17 @@ export class CookieLawComponent implements OnInit {
   @Input()
   public expiration: number;
 
+  @Input()
+  public awsomeCloseIcon: string;
+
   @Output()
   public isSeen = new EventEmitter<boolean>();
 
   public get cookieLawSeen(): boolean {
     return this._service.seen(this.name);
   }
 
-  constructor (private _service: CookieLawService) {
+  constructor(private _service: CookieLawService) {
     this.name = 'cookieLawSeen'; // set a default cookie name if not provided
   }