Merge pull request #27 from xpquiz/feature/19

#19 adding clipboard score copy

Author: isahann

src/app/app.module.ts

@@ -13,6 +13,7 @@ import {ScoreWindowComponent} from './score-window/score-window.component';
 import { CorrectAnswerWindowComponent } from './correct-answer-window/correct-answer-window.component';
 import { WrongAnswerWindowComponent } from './wrong-answer-window/wrong-answer-window.component';
 import { AboutWindowComponent } from './about-window/about-window.component';
+import {CopyClipboardDirective} from "./directives/CopyClipboardDirective";
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { AboutWindowComponent } from './about-window/about-window.component';
     CorrectAnswerWindowComponent,
     WrongAnswerWindowComponent,
     AboutWindowComponent,
+    CopyClipboardDirective
   ],
     imports: [
         BrowserModule,

src/app/directives/CopyClipboardDirective.ts

@@ -0,0 +1,32 @@
+import {Directive, Input, Output, EventEmitter, HostListener} from "@angular/core";
+
+@Directive({selector: '[copy-clipboard]'})
+export class CopyClipboardDirective {
+
+  @Input("copy-clipboard")
+  public payload: string = '';
+
+  @Output("copied")
+  public copied: EventEmitter<string> = new EventEmitter<string>();
+
+  @HostListener("click", ["$event"])
+  public onClick(event: MouseEvent): void {
+
+    event.preventDefault();
+    if (!this.payload)
+      return;
+
+    let listener = (e: ClipboardEvent) => {
+      // @ts-ignore
+      let clipboard = e.clipboardData || window["clipboardData"];
+      clipboard.setData("text", this.payload.toString());
+      e.preventDefault();
+
+      this.copied.emit(this.payload);
+    };
+
+    document.addEventListener("copy", listener, false)
+    document.execCommand("copy");
+    document.removeEventListener("copy", listener, false);
+  }
+}

src/app/score-window/score-window.component.html

@@ -16,7 +16,11 @@
         </div>
       </div>
     </div>
-    <app-icon-button iconPath="home.png" title="Return to home"
-                     (onButtonClick)="this.returnHome()"></app-icon-button>
+
+    <div class="window-body_buttons">
+      <app-icon-button iconPath="copy.png" title="Copy score to clipboard" [copy-clipboard]="this.clipboardMessage"></app-icon-button>
+      <app-icon-button iconPath="home.png" title="Return to home"
+                       (onButtonClick)="this.returnHome()"></app-icon-button>
+    </div>
   </div>
 </div>

src/app/score-window/score-window.component.sass

@@ -31,3 +31,12 @@
         display: flex
         flex-direction: column
         margin: 3px
+
+  &_buttons
+    display: flex
+    flex-direction: row
+    align-items: center
+    justify-content: space-between
+
+    app-icon-button
+      margin: 3px

src/app/score-window/score-window.component.ts

@@ -15,6 +15,7 @@ export class ScoreWindowComponent implements OnInit {
   public currentWeek: number = 0;
   public rightAnswers: number = 0;
   public wrongAnswers: number = 0;
+  public clipboardMessage: string = '';
 
   constructor(
     private readonly router: Router,
@@ -29,17 +30,26 @@ export class ScoreWindowComponent implements OnInit {
 
     this.currentWeek = currentWeek;
 
-    if(currentWeekScoreMap === undefined) return;
+    if (currentWeekScoreMap === undefined) return;
 
     const currentWeekScore: WeekScore = currentWeekScoreMap.get(currentWeek)!;
 
     this.currentScore = currentWeekScore.score;
     this.rightAnswers = currentWeekScore.rightAnswers;
     this.wrongAnswers = currentWeekScore.wrongAnswers;
+    this.assembleClipboardMessage();
   }
 
   public async returnHome(): Promise<void> {
     await this.router.navigateByUrl(PathsEnum.HOME);
   }
 
+  private assembleClipboardMessage() {
+    this.clipboardMessage = `Here's my score for the week on xpquiz.github.io!
+
+Right answers: ${this.rightAnswers}
+Wrong answers: ${this.wrongAnswers}
+Total score: ${this.currentScore}`;
+
+  }
 }