@stratusjs/angular 0.5.5 → 0.5.7

package/src/editor/editor.component.ts

@@ -217,10 +217,10 @@ const has = (object: object, path: string) => _.has(object, path) && !_.isEmpty(
 export class EditorComponent extends RootComponent implements OnInit, TriggerInterface { // implements OnInit, OnChanges
 
     // Basic Component Settings
-    title = moduleName + '_component'
+    title = `${moduleName}_component`
     uid: string
     dev = !!cookie('env')
-    debug: true
+    debug = !!cookie(`debug_${moduleName}`)
     editor: 'froala'|'angular-editor'|'quill' = 'froala'
 
     // Registry Attributes
@@ -274,14 +274,15 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         dataString: new FormControl(),
     })
     dataChangeLog: string[] = []
-    dataString = ''
+    incomingData = ''
+    outgoingData = ''
 
     // Debounce Saving Controls
     debounceSave = true
     debounceTime = 5000
 
     // Model Saving Controls
-    forceSave = true
+    forceSave = false
 
     // Child Components
     froalaEditorDirective: FroalaEditorDirective
@@ -393,15 +394,6 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
     }
     /* */
 
-    // Froala 2 Buttons (For Reference)
-    // 'insertOrderedList', 'insertUnorderedList', 'createLink', 'table'
-    froalaButtons: string[] = [
-        'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'formatBlock',
-        'blockStyle', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL',
-        'formatUL', 'outdent', 'indent', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertFile',
-        'insertTable', '|', 'undo', 'redo', 'removeFormat', 'wordPaste', 'help', 'html', 'fullscreen'
-    ]
-
     froalaStandardButtons = {
         moreText: [
             'bold',
@@ -481,6 +473,10 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
                 // console.log('initialized:', editor.html.get(), editor, froalaEditorDirective)
                 this.froalaEditorDirective = froalaEditorDirective
             },
+            // blur: this.onBlur,
+            blur: (event: FocusEvent) => this.onBlur(event),
+            // FIXME: Froala doesn't support focus events, so this never fires...
+            focus: (event: FocusEvent) => this.onFocus(event),
             // bound to Froala Editor
             // contentChanged () {
             //     const editor = this
@@ -506,13 +502,13 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             wrap_line_length: 0
         },
         // fromTextArea
-        codeMirror: !cookie('codemirror') ? null : {
+        codeMirror: {
             fromTextArea: (el: HTMLTextAreaElement, opts: LooseObject) => {
                 // Note: We're instantiating a Bridge Class to act as an intermediate for Froala's legacy implementation.
                 return new CodeMirrorBridge({
                     extensions: [
-                        // basicSetup,
-                        minimalSetup,
+                        basicSetup,
+                        // minimalSetup,
                         html({
                             // extraTags: [
                             //     'sa-editor'
@@ -522,6 +518,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
                             // ],
                         }),
                         // TODO: Make this an optional extension, based on options
+                        // This is included in basicSetup
                         // EditorView.lineWrapping
                     ]
                 }).fromTextArea(el, opts)
@@ -1089,7 +1086,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         this.hydrate(elementRef, sanitizer, keys<EditorComponent>())
 
         // Data Connections
-        // TODO: Spelunk through this code to determine why I keep getting an empty component...
+        // TODO: Spelunk through this code to determine why I am getting an empty component on occasion...
         this.fetchData()
             .then(data => {
                 if (!data || !(data instanceof EventManager)) {
@@ -1181,11 +1178,16 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
                 this.model.changedExternal = true
                 this.model.trigger('change')
             })
+            // Pipe for outgoingData
+            dataControl.valueChanges.forEach(
+                (value: string) => this.outgoingData = value
+            )
         } else {
             dataControl.valueChanges.forEach(
                 (value: string) => this.modelSave(value)
             )
         }
+        // Detect and list duplicates
         if (this.dev) {
             this.listDuplicates(this.froalaConfig)
         }
@@ -1227,7 +1229,13 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             this.property,
             this.normalizeOut(innerHTML || value)
         )
-        this.model.changedExternal = false
+
+        // Remove the changedExternal flag if using debounceSave
+        if (this.debounceSave) {
+            this.model.changedExternal = false
+        }
+
+        // If enabled, Force Save on Persisted Models
         if (this.forceSave && !_.isEmpty(this.model.getIdentifier())) {
             this.model.save()
         }
@@ -1395,7 +1403,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             }, 250)
             return
         }
-        const prevString = _.clone(this.dataString)
+        const prevString = _.clone(this.incomingData)
         const dataString = this.dataRef()
         // ensure changes have occurred
         if (prevString === dataString) {
@@ -1429,7 +1437,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         if (!this.model) {
             return ''
         }
-        return this.dataString = this.normalizeIn(
+        return this.incomingData = this.normalizeIn(
             this.model.get(this.property)
         )
     }
@@ -1465,24 +1473,33 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
     }
 
     // changedEditor(event: EditorChangeContent | EditorChangeSelection) {
-    changedEditor(event: any) {
+    changedEditor(event: Event) {
         console.log('editor-change:', event)
     }
 
-    onChangeEvent($event: any) {
-        console.log('change:', $event)
+    onChangeEvent(event: Event) {
+        console.log('change:', event)
     }
 
-    onFocus($event: any) {
-        // console.log('focus:', $event)
+    onFocus(event: FocusEvent) {
+        if (this.dev && this.debug) {
+            console.warn(`[onFocus] triggered on ${this.uid}`)
+        }
         this.focused = true
         this.blurred = false
     }
 
-    onBlur($event: any) {
-        // console.log('blur:', $event)
+    onBlur(event: FocusEvent) {
+        if (this.dev && this.debug) {
+            console.warn(`[onBlur] triggered on ${this.uid}`)
+        }
         this.focused = false
         this.blurred = true
+        // Handle debounce triggers
+        if (!this.debounceSave) {
+            return
+        }
+        this.modelSave(this.outgoingData)
     }
 
     bypassHTML(html: string) {