ready to go

Author: Eddie

src/app/modules/spell-check/spell-check.component.html

@@ -10,19 +10,24 @@
   <div class="b-back-drop">
       <div class="b-text-correction" 
       >
-        <span *ngFor="let keyword of corrections">
-          <mark *ngIf="needToCorrect(keyword)" [innerHTML]="keyword" (click)="showReplacements(keyword)"></mark>
-          <span *ngIf="!needToCorrect(keyword)" [innerHTML]="keyword"></span>
+        <span class="s-word-container" *ngFor="let keyword of corrections">
+          <mark *ngIf="needToCorrect(keyword) >= 0" 
+            [innerHTML]="keyword" 
+            (blur)="hideReplacements()"
+            (click)="showReplacements($event, keyword)">
+          </mark>
+          <span class="correct-word" *ngIf="needToCorrect(keyword) < 0" [innerHTML]="keyword"></span>
+          <div *ngIf="showPopover && selectedWrongWord == keyword" class="b-correct-word-list">
+              <ul>
+                <li
+                *ngFor="let correctWord of correctWordList" 
+                [innerHTML]="correctWord.value"
+                (click)="replaceWord(correctWord.value)">
+                </li>
+              </ul>
+            </div>
         </span>
-        <div *ngIf="showPopover" class="b-correct-word-list">
-            <ul>
-              <li
-              *ngFor="let correctWord of correctWordList" 
-              [innerHTML]="correctWord.value"
-              (click)="replaceWord(correctWord.value)">
-              </li>
-            </ul>
-          </div>
+        
       </div>
     </div>
 </div>

src/app/modules/spell-check/spell-check.component.scss

@@ -14,18 +14,44 @@
         top: 0;
         z-index: 1;
         border: 1px solid transparent;
-        overflow: auto;
+        overflow: visible;
         transition: -webkit-transform 1s;
         transition: transform 1s;
         transition: transform 1s, -webkit-transform 1s;
     }
     .b-text-correction{
         padding: 2px;
-        mark{
-            cursor: pointer;
+        .s-word-container{
+            position: relative;
+            mark{
+                cursor: pointer;
+            }
+            span.correct-word{
+                color: transparent;
+            }
+            .b-correct-word-list{
+                position: absolute;
+                top: 20px;
+                left: 0;
+                cursor: pointer;
+                background: #FFFFFF;
+                border: solid 1px #cccccc;
+                font-size: 0.8rem;
+                min-width: 100px;
+                ul{
+                    margin: 0;
+                    padding: 0;
+                    list-style: none;
+                    li{
+                        padding: 5px 2px;
+                        &:hover{
+                            background: #EEEEEE;
+                        }
+                    }
+                }
+            }
         }
+        
     }
-    .b-correct-word-list{
-        top: 10px;
-    }
+    
 }

src/app/modules/spell-check/spell-check.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Observable }  from 'rxjs/Observable';
 import { SpellCheckService } from './spell-check.service';
@@ -11,7 +11,13 @@ import 'rxjs/add/observable/fromEvent';
   templateUrl: './spell-check.component.html',
   styleUrls: ['./spell-check.component.scss']
 })
+
 export class SpellCheckComponent implements OnInit {
+  @HostListener('document:click', ['$event']) clickedOutside($event){
+    // here you can hide your menu
+    this.showPopover = false;
+  }
+
   public  textData = ""
           showPopover = false
           selectedWrongWord
@@ -75,20 +81,29 @@ export class SpellCheckComponent implements OnInit {
     this.subscribers.push(spellCheckSub);
   }
 
-  showReplacements(word){
+  showReplacements($event, word){
     this.showPopover = true;
     this.selectedWrongWord = word;
     this.correctWordList = this.wordsToBeCorrected[word];
+    $event.preventDefault();
+    $event.stopPropagation(); 
+  }
+  hideReplacements(){
+    console.log('hide');
+    this.showPopover = false;
   }
-
   needToCorrect(word){
+    // console.log(word);
+    // Object.keys(this.wordsToBeCorrected).indexOf(word)
     return Object.keys(this.wordsToBeCorrected).indexOf(word);
   }
 
   replaceWord(word){
+    console.log(this.textData);
     this.textData = this.textData.replace(this.selectedWrongWord, word);    
     const indexOfWord = this.corrections.indexOf(this.selectedWrongWord);
-    this.corrections.splice(indexOfWord, 1);
+    this.corrections = [];
+    // this.corrections.splice(indexOfWord, 1);
     this.checkText(this.textData);
   }