From bb7eb13fefac152819bc5ac7545f9e2f1c7549d0 Mon Sep 17 00:00:00 2001
From: michael-small <small203@morris.umn.edu>
Date: Fri, 29 Nov 2019 22:07:17 -0600
Subject: [PATCH] Recognize users cursor's highlighted text

The first step to the bootleg Google Docs commenting system is
recognizing when an abstract's text is highlighted, and what text in
particular. Using the web api `Window.getSelection()`, in the way that
was suggested by Dasari Srinivas, one can highlight text and have it
show up elsewhere.

Right now, highlighted text is in a tentative spot in the comment div
as a single comment that is not stored in any way, nor even tied to the
`comment` field of `Submissions`.

Issue #147 (Create comment object)
Epic #131 (Submission Card View)
---
 .../app/submissionView/submissionView.component.html |  4 +++-
 .../app/submissionView/submissionView.component.scss |  5 +++++
 .../app/submissionView/submissionView.component.ts   | 12 ++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/client/src/app/submissionView/submissionView.component.html b/client/src/app/submissionView/submissionView.component.html
index c9693be7..b004d1ce 100644
--- a/client/src/app/submissionView/submissionView.component.html
+++ b/client/src/app/submissionView/submissionView.component.html
@@ -62,7 +62,7 @@ <h1>{{submission.presentationTitle}}</h1>
 
         <div class="abstract">
             <h1>Abstract</h1>
-            <p>{{submission.abstractContent}}</p>
+            <p (mouseup)="highlightAbstractToCommentOn()">{{submission.abstractContent}}</p>
         </div>
 
         <div>
@@ -78,6 +78,8 @@ <h2>Comments</h2>
             <mat-icon>edit</mat-icon> New Comment [W]
         </button>
 
+        <p *ngIf="selectedText" class="debug-comment">"{{selectedText}}"</p>
+
         <div class="comment" *ngIf="submission.comments">{{submission.comments}}</div>
     </div>
 
diff --git a/client/src/app/submissionView/submissionView.component.scss b/client/src/app/submissionView/submissionView.component.scss
index 92de2b86..da5ff40a 100644
--- a/client/src/app/submissionView/submissionView.component.scss
+++ b/client/src/app/submissionView/submissionView.component.scss
@@ -29,6 +29,11 @@
     background-color: cadetblue;
 }
 
+.debug-comment { //for debugging
+    border: 1px solid black;
+    padding: 0.2rem;
+}
+
 // buttons
 .button-container {
     border: 1px solid red;  //for debugging
diff --git a/client/src/app/submissionView/submissionView.component.ts b/client/src/app/submissionView/submissionView.component.ts
index cbc57c42..e2ea0c4f 100644
--- a/client/src/app/submissionView/submissionView.component.ts
+++ b/client/src/app/submissionView/submissionView.component.ts
@@ -28,6 +28,18 @@ export class SubmissionViewComponent implements OnInit {
         );
     }
 
+    // Dasari Srinivas, Tuesday, 11 October 2016, "Get the Highlighted/Selected text using Angular 2"
+    // http://blog.sodhanalibrary.com/2016/10/get-highlightedselected-text-using.html
+    selectedText: string = '';
+    highlightAbstractToCommentOn() {
+        let text = "";
+        if (window.getSelection) {
+            text = window.getSelection().toString();
+        }
+        this.selectedText = text;
+        console.log(text);
+    }
+
     ngOnInit() {
         this.getSubmission();
     }