perf: handle default values properly

sibiraj-s · Oct 3, 2017 · 7a40862 · 7a40862
1 parent e6c8a9f
commit 7a40862
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 73 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.b1bf12244992a3cb3ea1.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.cf628fad2abd6cb02dba.bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.00f247e05e8abd882f87.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.f8bd0776cef516050cd2.bundle.js"></script></body></html>
diff --git a/docs/inline.00f247e05e8abd882f87.bundle.js b/docs/inline.00f247e05e8abd882f87.bundle.js
diff --git a/docs/inline.b1bf12244992a3cb3ea1.bundle.js b/docs/inline.b1bf12244992a3cb3ea1.bundle.js
diff --git a/docs/main.cf628fad2abd6cb02dba.bundle.js b/docs/main.cf628fad2abd6cb02dba.bundle.js
diff --git a/docs/main.f8bd0776cef516050cd2.bundle.js b/docs/main.f8bd0776cef516050cd2.bundle.js
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,10 +15,10 @@ export class AppComponent implements OnInit {
   editorConfig = {
     editable: true,
     spellcheck: false,
-    height: "5rem",
-    minHeight: "2rem",
-    placeholder: "Enter text here...",
-    translate: "no"
+    height: '5rem',
+    minHeight: '2rem',
+    placeholder: 'Enter text here...',
+    translate: 'no'
   };
 
   htmlContent = '<span>WYSIWYG Editor for Angular Applications.</span>';

diff --git a/src/app/ngx-editor/ngx-editor.component.html b/src/app/ngx-editor/ngx-editor.component.html
@@ -33,7 +33,6 @@
       <button *ngIf="canEnableToolbarOptions('unorderedList')" (click)="executeCommand('insertOrderedList')" title="Ordered List"><i class="fa fa-list-ol" aria-hidden="true"></i></button>
     </div>
   </div>
-  <div class="textarea" [attr.contenteditable]="getBooleanProperty('editable')" [attr.placeholder]="placeholder || config['placeholder']"
-    (input)="html = $event.target.innerHTML; htmlContentChange($event.target.innerHTML)" [attr.translate]="translate || config['translate']"
-    [attr.spellcheck]="getBooleanProperty('spellcheck')" [style.height]="height || config['height']" [style.minHeight]="minHeight || config['minHeight']"></div>
+  <div class="textarea" [attr.contenteditable]="config['editable']" [attr.placeholder]="config['placeholder']" (input)="html = $event.target.innerHTML; htmlContentChange($event.target.innerHTML)"
+    [attr.translate]="config['translate']" [attr.spellcheck]="config['spellcheck']" [style.height]="config['height']" [style.minHeight]="minHeight || config['minHeight']"></div>
 </div>
diff --git a/src/app/ngx-editor/ngx-editor.component.scss b/src/app/ngx-editor/ngx-editor.component.scss
@@ -1,13 +1,3 @@
-/*
- * media screen break points
- */
-
-$break-xtraLarge: "screen and (max-width : 1200px)";
-$break-large: "screen and (max-width : 992px)";
-$break-medium: "screen and (max-width : 768px)";
-$break-small: "screen and (max-width : 480px)";
-$break-xtra-small: "screen and (max-width : 320px)";
-
 /*
  * editor styles
  */

diff --git a/src/app/ngx-editor/ngx-editor.component.ts b/src/app/ngx-editor/ngx-editor.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, HostListener, Input, Output, ElementRef, EventEmitter } from '@angular/core';
 import { ngxEditorConfig } from './ngx-editor.defaults';
-import * as Utils from "./ngx-editor.utils";
+import * as Utils from './ngx-editor.utils';
 
 @Component({
   selector: 'app-ngx-editor',
@@ -15,6 +15,14 @@ export class NgxEditorComponent implements OnInit {
   _config: any;
   _html: any;
 
+  @Input() editable: boolean;
+  @Input() spellcheck: boolean;
+  @Input() placeholder: string;
+  @Input() translate: string;
+  @Input() height: string;
+  @Input() minHeight: string;
+  @Input() toolbar: any;
+
   /*
    * set default values
    */
@@ -24,8 +32,13 @@ export class NgxEditorComponent implements OnInit {
   set config(value: JSON) {
 
     for (const i in ngxEditorConfig) {
-      if (!value.hasOwnProperty(i)) {
-        value[i] = ngxEditorConfig[i];
+      if (i) {
+        if (this[i]) {
+          value[i] = this[i];
+        }
+        if (!value.hasOwnProperty(i)) {
+          value[i] = ngxEditorConfig[i];
+        }
       }
     }
     this._config = value;
@@ -43,12 +56,7 @@ export class NgxEditorComponent implements OnInit {
     return this._html;
   }
 
-  @Input() editable: boolean;
-  @Input() spellcheck: boolean;
-  @Input() placeholder: string;
-  @Input() translate: string;
-  @Input() height: string;
-  @Input() minHeight: string;
+
   /*
    * update html on changes in content editable
    */
@@ -77,13 +85,6 @@ export class NgxEditorComponent implements OnInit {
     document.execCommand('formatBlock', false, 'div');
   }
 
-  /*
-   * return values for attributes that accepts boolean
-   */
-  getBooleanProperty(value) {
-    return Utils.getBooleanProperty(value, this.config);
-  }
-
   /*
    * enable or diable toolbar based on configuration
    */

diff --git a/src/app/ngx-editor/ngx-editor.defaults.ts b/src/app/ngx-editor/ngx-editor.defaults.ts
@@ -1,14 +1,14 @@
 export const ngxEditorConfig = {
   editable: true,
   spellcheck: true,
-  height: "auto",
-  minHeight: "0rem",
-  translate: "yes",
-  placeholder: "Enter text here...",
+  height: 'auto',
+  minHeight: '0rem',
+  translate: 'yes',
+  placeholder: 'Enter text here...',
   toolbar: [
-    ["bold", "italic", "underline", "strikeThrough", "superscript", "subscript"],
-    ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "indent", "outdent"],
-    ["cut", "copy", "delete", "removeFormat", "undo", "redo"],
-    ["paragraph", "blockquote", "removeBlockquote", "horizontalLine", "orderedList", "unorderedList"]
+    ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
+    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
+    ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
+    ['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList']
   ]
 };
diff --git a/src/app/ngx-editor/ngx-editor.utils.ts b/src/app/ngx-editor/ngx-editor.utils.ts
@@ -9,37 +9,10 @@ export function canEnableToolbarOptions(value, toolbar) {
         } else {
             return toolbar.find(array => {
                 return array.includes(value);
-            })
+            });
         }
-    }
-    else {
-        return false;
-    }
-}
-
-export function isToolbarDefault(toolbar) {
-
-    if (toolbar) {
-        return toolbar.find(array => {
-            return array.includes('default');
-        })
-    }
-    else {
+    } else {
         return false;
     }
 }
 
-/*
- * return values for attributes that accepts boolean
- */
-export function getBooleanProperty(value, config) {
-    if (this[value] === false) {
-        return false;
-    }
-    else if (this[value] === undefined) {
-        return config[value];
-    }
-    else {
-        return true;
-    }
-}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.b1bf12244992a3cb3ea1.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.cf628fad2abd6cb02dba.bundle.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.00f247e05e8abd882f87.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.f8bd0776cef516050cd2.bundle.js"></script></body></html>