word count

scriptmanager/src/app/script/script-slide/script-slide.component.html

@@ -25,9 +25,10 @@
               <p class="heading">Visual Cue</p>
               <div class="field">
                 <div class="control content">
-                  <quill-editor [modules]="modules" tagName="textarea" formControlName="cue" [(ngModel)]="slide.cue" (onBlur)="saveSlide(true)"
-                    [styles]="quillStyles" theme="snow">
+                  <quill-editor id="editor" [modules]="modules" tagName="textarea" formControlName="cue" [(ngModel)]="slide.cue" (onBlur)="saveSlide(true)" 
+                    [styles]="quillStyles" theme="snow"  (ngModelChange)="onChange($event)">
                   </quill-editor>
+                  <p>Word Count : {{ visual_cue }} </p>
                 </div>
               </div>
             </div>
@@ -39,8 +40,9 @@
               <div class="field">
                 <div class="control content">
                   <quill-editor [modules]="modules" tagName="textarea" formControlName="narration" [(ngModel)]="slide.narration"
-                    (onBlur)="saveSlide(true)" [styles]="quillStyles" theme="snow">
+                    (onBlur)="saveSlide(true)" [styles]="quillStyles" theme="snow" (ngModelChange)="onNarrationChange($event)">
                   </quill-editor>
+                  <p>Word Count : {{ narration }} </p>
                 </div>
               </div>
             </div>

scriptmanager/src/app/script/script-slide/script-slide.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 // import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+//import { EditorChangeContent, EditorChangeSelection } from 'ngx-quill'
 
 @Component({
   selector: 'app-script-slide',
@@ -22,6 +23,8 @@ export class ScriptSlideComponent implements OnInit {
   public comment = false;
   public ckEditorCue: boolean = false;
   public ckEditorNarration: boolean = false;
+  public visual_cue : number = 0;
+  narration = 0;
 
   public quillStyles = {
     'height': '200px',
@@ -32,6 +35,44 @@ export class ScriptSlideComponent implements OnInit {
 
   editorForm: FormGroup;
 
+
+
+  onChange(event: any): void {
+  if(event == ''){
+    this.visual_cue = 0;
+  }else
+  if(event == null){
+    this.visual_cue = 0;
+  }else{
+  var s = event;
+  var regex  = /(<([^>]+)>)/ig;
+  s = s.replace(regex, " ");
+  var regex_space = /\s{2,}/ig;
+  s = s.trim().replace(regex_space,' ')
+  var len = s.split(" ").length;
+  this.visual_cue = len;
+  }
+}
+
+  onNarrationChange(event: any): void {
+  if(event == ''){
+    this.narration = 0;
+  }else
+  if(event == null){
+    this.narration = 0;
+  }else{
+  var s = event;
+  var regex  = /(<([^>]+)>)/ig;
+  s = s.replace(regex, " ");
+  var regex_space = /\s{2,}/ig;
+  s = s.trim().replace(regex_space,' ')
+  var len = s.split(" ").length;
+  this.narration = len;
+  }
+  }
+
+
+
   // public Editor = ClassicEditor;
   // public ckeditorConfig = {
   //   toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'undo', 'redo']
@@ -77,6 +118,7 @@ export class ScriptSlideComponent implements OnInit {
 
   public insertSlide() {
     this.insertSlideEmitter.emit(this.index + 1);
+
   }
 
   public checkSlide() {
@@ -109,13 +151,16 @@ export class ScriptSlideComponent implements OnInit {
   public changeNarrationToEditor() {
     this.ckEditorNarration = true;
   }
-
+
+
   ngOnInit() {
     this.editorForm = new FormGroup({
       'cue': new FormControl(),
       'narration': new FormControl()
     })
     this.checkSlide()
+
   }
 
 }
+

scriptmanager/src/app/script/script-view/script-view.component.html

@@ -80,9 +80,11 @@ <h3 *ngIf="index2 != -1">&nbsp;<i class="fa fa-history"></i> Updated On:
                 <tr>
                   <td>
                     <div processingDiff [left]="leftContentCue" [right]="rightContentCue"></div>
+                    <p>{{ visual_cue }}</p>
                   </td>
                   <td>
                     <div processingDiff [left]="leftContentNarration" [right]="rightContentNarration"></div>
+                    <p>{{ narration }}</p>
                   </td>
                 </tr>
               </tbody>

scriptmanager/src/app/script/script-view/script-view.component.ts

@@ -65,7 +65,7 @@ export class ScriptViewComponent implements OnInit {
       console.error
     );
   }
-
+  
   public onPublishChange(status) {
     this.createscriptService.changeScriptStatus(this.domain, this.fid, this.tid, this.lid, this.vid, status)
       .subscribe(
@@ -202,6 +202,7 @@ export class ScriptViewComponent implements OnInit {
     this.el2.nativeElement.classList.remove('is-active')
   }
 
+
   public getRevison(i) {
     this.revisionsService.getRevisions(
       i