highlight.ts

import { Component, OnInit, OnDestroy, ElementRef, ViewChildren, AfterViewInit, ViewChild, AfterContentInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

import { Post } from '../posts/post.model';
import { ComplexWord } from '../annotation/complex-word.model';
import { DocWord } from './document-word.model';
import { PostsService } from '../posts/posts.service';
import { AuthService } from '../auth/auth.service';
import { AnnotationService } from './annotation.service';
import { DocService } from './document.service';

@Component({
  selector: 'app-annotation',
  templateUrl: './annotationTest.component.html',
  styleUrls: ['./annotation.component.css']
})
export class AnnotationComponent implements OnInit, OnDestroy, AfterViewInit, AfterContentInit {
  @ViewChildren('thePostTest') thePostTest: ElementRef;
  // @ViewChild('thePostTest') thePostTest: ElementRef;
  form: FormGroup;
  posts: Post[] = [];
  words: ComplexWord[] = [];
  docWord: DocWord[] = [];
  public isLoading = true;
  public wordsLoaded: boolean;
  public postLoaded: boolean;
  public thewords: string[];
  public role: string;
  public id: string;
  public setWord: string;
  public postIWant: string;
  public annotation: string;
  public editAnnotation: string;
  public word;
  public showingAnnotation: string;
  public docWords = [];
  public theHardWords = [];
  public wordWithAnnotation = [];
  private postsSub: Subscription;
  private annotationSub: Subscription;
  private authStatus: Subscription;
  private docSub: Subscription;
  public userIsAuthenticated = false;
  public editing: boolean;
  public reference = '';

  constructor( public postsService: PostsService, private authService: AuthService, public route: ActivatedRoute,
    private annotationService: AnnotationService, private docService: DocService, private elRef: ElementRef
  ) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('postId');
    this.editing = false;
    this.annotation = '';
    this.editAnnotation = '';
    this.form = new FormGroup({
      annotation: new FormControl(null, {
        validators: [
          Validators.required,
          Validators.minLength(8),
          Validators.maxLength(250)
        ]
      }),
    });
    this.annotationService.getWords();
    this.postsService.getPosts();

    this.annotationSub = this.annotationService
      .getWordUpdateListenerTwo()
      .subscribe((theHardWords: ComplexWord[]) => {
        this.thewords = [];
        this.theHardWords = theHardWords;
        this.theHardWords.map(word => {
          this.thewords.push(word.word);
          this.wordWithAnnotation.push(word);
        });
      });

    this.postsSub = this.postsService
      .getPostUpdateListenerTwo()
      .subscribe((posts: Post[]) => {
        this.posts = posts;
        this.posts.map(post => {
          if (post.id === this.id) {
            this.postIWant = post.body;
            this.reference = post.references;
          }
        });
      });

      this.role = this.authService.getUserRole();
      this.userIsAuthenticated = this.authService.getIsAuth();
      this.authStatus = this.authService
      .getAuthStatus()
      .subscribe(isAuthenticated => {
        this.userIsAuthenticated = isAuthenticated;
        this.role = this.authService.getUserRole();
      });
      this.isLoading = false;

      setTimeout(() => {
        this.highlight(this.thewords);
      }, 800);
  }

  highlight(words) {
      const high = document.getElementById('scrollable');
      const paragraph = high.innerHTML.split(' ');
      const res = [];

        paragraph.map(word => {
          let t = word;
          if (words.indexOf(word) > -1) {
            t =
              '<a class="clickable" style="background-color: yellow; text-decoration: underline;">' +
              word +
              '</a>';
          }
          res.push(t);
        });
        high.innerHTML = res.join(' ');
        const elementsToMakeClickable = document.getElementsByClassName(
          'clickable'
        );
        const elementsToMakeClickableArray = Array.from(elementsToMakeClickable);
        elementsToMakeClickableArray.map(element => {
          element.addEventListener('click', this.viewAnnotation.bind(this));
        });
        document.getElementById('btnHighLight').style.visibility = 'visible';
  }

  viewAnnotation(e) {
    const word = e.target.textContent;
    this.findAnnotation(word);
  }

  highlightSelection() {
    this.showingAnnotation = '';
    const userSelection = window.getSelection();
    if (userSelection.toString() === null) {
      return;
    } else {
      for (let i = 0; i < userSelection.rangeCount; i++) {
        this.highlightRange(userSelection.getRangeAt(i));
        this.word = userSelection.toString();
        const node = this.highlightRange(
          userSelection.getRangeAt(i) /*.toString()*/
        );
        // Make the range into a variable so we can replace it
        const range = userSelection.getRangeAt(i);
        // Delete the current selection
        range.deleteContents();
        // Insert the copy
        range.insertNode(node);
      }
    }
  }

  guidGenerator() {
    const S4 = () => {
      // tslint:disable-next-line:no-bitwise
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    };
    return (
      S4() +
      S4() +
      '-' +
      S4() +
      '-' +
      S4() +
      '-' +
      S4() +
      '-' +
      S4() +
      S4() +
      S4()
    );
  }

  highlightRange(range) {
    const newNode = document.createElement('a');
    newNode.id = this.guidGenerator();
    newNode.className = 'clickable';
    newNode.setAttribute(
      'style',
      'background-color: yellow; display: inline; text-decoration: underline;'
    );
    newNode.onclick = () => {
      if (confirm('Are you sure you want to delete ' + range + '?')) {
        this.deletenode(newNode);
      } else {
        alert(range + ' has not been deleted.');
      }
    };
    // Add Text for replacement (for multiple nodes only)
    newNode.appendChild(range.cloneContents());
    // Apply Node around selection (used for individual nodes only)
    return newNode;
  }

  deletenode(node) {
    const contents = document.createTextNode(node.innerText);
    node.parentNode.replaceChild(contents, node);
    this.resetAlertBox();
  }

  findAnnotation(e) {
    this.setWord = e;
    this.word = e;
    this.docService.getWords();
    this.annotationService.getWords();

    this.theHardWords.map(word => {
      if (word.word === this.setWord) {
        this.showingAnnotation = word.annotation;
      }
    });

    this.docWords.map(word => {
      if (word.word === this.setWord) {
      this.showingAnnotation = word.annotation;
      }
    });
  }

  onAnnotate() {
      if (!this.form.valid) {
      return;
    }
    this.annotation = this.form.value.annotation;
    this.annotationService.addWord(this.word, this.annotation);
    this.form.reset();
    this.word = '';
    this.ngOnInit();
    this.docService.getWords();
    this.annotationService.getWords();
    this.theHardWords.map(word => {
      this.thewords = word.word;
    });
    this.docWords.map(word => {
      this.docWords = word.word;
    });
    setTimeout(() => {
    this.highlight(this.thewords);
    this.documentSpecificWords(this.docWords);
  }, 200);
  }

  onEditWord() {
    this.editing = true;
    document.getElementById('editBtn').style.visibility = 'hidden';
    document.getElementById('deleteBtn').style.visibility = 'hidden';
  }

  onEditSub() {
    this.editing = false;
    document.getElementById('editBtn').style.visibility = 'visible';
    document.getElementById('deleteBtn').style.visibility = 'visible';
    let theWord: string;
    let theAnnotation: string;
    theWord = this.word;
    theAnnotation = this.form.value.annotation;
    this.annotationService.editWord(theWord, theAnnotation);
    this.resetAlertBox();
  }

  resetAlertBox() {
    this.word = '';
    this.annotation = '';
    this.form.reset();
    this.editing = false;
  }

  onDelete() {
    let deleteWord: string;
    deleteWord = this.word;
    this.annotationService.deleteWord(deleteWord);
    this.docService.getWords();
    this.annotationService.getWords();
    const index = this.thewords.indexOf(deleteWord);
    this.thewords.splice(index);
    this.word = '';
    this.ngOnInit();
    setTimeout(() => {
      this.highlight(this.thewords);
      this.documentSpecificWords(this.docWords);
    }, 200);
  }

  urlify(reference) {
    const text = reference;
    const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    // const urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, (url) => {
      return '<a href="' + url + '">' + url + '</a>';
  });
}

  ngAfterViewInit() {
  // console.log(this.thePostTest.nativeElement.value);
  const div = this.elRef.nativeElement.querySelector('#thePostTest');
  console.log('first ', div);
}

// for transcluded content
ngAfterContentInit() {
  const div = this.elRef.nativeElement.querySelector('#thePostTest');
  console.log('last ', div);
}

  ngOnDestroy() {
    this.postsSub.unsubscribe();
    this.authStatus.unsubscribe();
    this.annotationSub.unsubscribe();
    this.docSub.unsubscribe();
  }
}