feat: change font color and background color

closes #65
sibiraj-s · Feb 23, 2018 · 87b6875 · 87b6875
1 parent 967437b
commit 87b6875
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 50 deletions.
diff --git a/src/app/ngx-editor/common/ngx-editor.defaults.ts b/src/app/ngx-editor/common/ngx-editor.defaults.ts
@@ -15,6 +15,7 @@ export const ngxEditorConfig = {
     imageEndPoint: '',
     toolbar: [
         ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
+        ['color'],
         ['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/common/services/command-executor.service.ts b/src/app/ngx-editor/common/services/command-executor.service.ts
@@ -128,4 +128,26 @@ export class CommandExecutorService {
     return;
   }
 
+  /**
+   * insert color either font or background
+   */
+  insertColor(color: string, where: string): void {
+
+    if (this.savedSelection) {
+      const restored = Utils.restoreSelection(this.savedSelection);
+      if (restored) {
+        if (where === 'textColor') {
+          document.execCommand('foreColor', false, color);
+        } else {
+          document.execCommand('hiliteColor', false, color);
+        }
+      }
+
+    } else {
+      throw new Error('Range out of the editor');
+    }
+
+    return;
+  }
+
 }
diff --git a/src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.html b/src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.html
@@ -25,6 +25,12 @@
       <i class="fa fa-subscript" aria-hidden="true"></i>
     </button>
   </div>
+  <div class="ngx-toolbar-set">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('color')" title="Color Picker" [popover]="insertColorTemplate"
+      #colorPopover="bs-popover" [disabled]="!config['enableToolbar']">
+      <i class="fa fa-tint" aria-hidden="true"></i>
+    </button>
+  </div>
   <div class="ngx-toolbar-set">
     <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyLeft')" (click)="triggerCommand('justifyLeft')"
       title="Justify Left" [disabled]="!config['enableToolbar']">
@@ -127,7 +133,7 @@
 
 <!-- URL Popover template -->
 <ng-template #insertLinkTemplate>
-  <div class="ngxe-popover-form extra-gt">
+  <div class="ngxe-popover extra-gt">
     <form [formGroup]="urlForm" (ngSubmit)="urlForm.valid && insertLink()" autocomplete="off">
       <div class="form-group">
         <label for="urlInput" class="small">URL</label>
@@ -148,16 +154,16 @@
 
 <!-- Image Uploader Popover template -->
 <ng-template #insertImageTemplate>
-  <div class="ngxe-popover-form image-ctnr">
-    <div class="imgc-topbar">
+  <div class="ngxe-popover imgc-ctnr">
+    <div class="imgc-topbar btn-ctnr">
       <button type="button" class="btn" (click)="isImageUploader = true">
         <i class="fa fa-upload"></i>
       </button>
       <button type="button" class="btn" (click)="isImageUploader = false">
         <i class="fa fa-link"></i>
       </button>
     </div>
-    <div class="imgc-ctnt">
+    <div class="imgc-ctnt is-image">
       <div *ngIf="isImageUploader; else insertImageLink"> </div>
       <div *ngIf="!isImageUploader; else imageUploder"> </div>
       <ng-template #imageUploder>
@@ -189,3 +195,22 @@
     </div>
   </div>
 </ng-template>
+
+<!-- Insert color template -->
+<ng-template #insertColorTemplate>
+  <div class="ngxe-popover imgc-ctnr">
+    <div class="imgc-topbar two-tabs">
+      <span (click)="selectedColorTab ='textColor'">Text</span>
+      <span (click)="selectedColorTab ='backgroundColor'">Background</span>
+    </div>
+    <div class="imgc-ctnt is-color extra-gt1">
+      <form autocomplete="off">
+        <div class="form-group">
+          <label for="hexInput" class="small">Hex Color</label>
+          <input type="text" class="form-control-sm" id="hexInput" name="hexInput" placeholder="HEX Color" [(ngModel)]="hexColor" required>
+        </div>
+        <button type="submit" class="btn-primary btn-sm btn" max-length="7" (click)="insertColor(hexColor, selectedColorTab)">Submit</button>
+      </form>
+    </div>
+  </div>
+</ng-template>
diff --git a/src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.scss b/src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.scss
@@ -61,11 +61,20 @@
     border-top-left-radius: 0;
 }
 
-::ng-deep .ngxe-popover-form {
+::ng-deep .ngxe-popover {
     min-width: 15rem;
+    white-space: nowrap;
 
     &.extra-gt, .extra-gt {
-        padding-top: 0.5rem;
+        padding-top: 0.5rem !important;
+    }
+
+    &.extra-gt1, .extra-gt1 {
+        padding-top: 0.75rem !important;
+    }
+
+    &.extra-gt2, .extra-gt2 {
+        padding-top: 1rem !important;
     }
 
     .form-group {
@@ -110,68 +119,85 @@
         }
     }
 
-    &.image-ctnr {
+    &.imgc-ctnr {
         margin: -0.5rem -0.75rem;
 
         .imgc-topbar {
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
-            border-bottom: 0px;
+            border-bottom: 0;
 
-            button {
-                background-color: transparent;
-                border-radius: 0;
+            &.btn-ctnr {
+                button {
+                    background-color: transparent;
+                    border-radius: 0;
 
-                &:hover {
-                    cursor: pointer;
-                    background-color: #f1f1f1;
-                    transition: 0.2s ease;
+                    &:hover {
+                        cursor: pointer;
+                        background-color: #f1f1f1;
+                        transition: 0.2s ease;
+                    }
                 }
             }
-        }
 
-        .imgc-ctnt {
-            padding: 0.5rem;
-
-            .progress {
-                height: 0.5rem;
-                margin: 0.5rem -0.5rem -0.6rem -0.5rem;
-            }
+            &.two-tabs {
+                span {
+                    width: 50%;
+                    text-align: center;
+                    display: inline-block;
+                    padding: 0.4rem 0;
 
-            p {
-                margin: 0;
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
             }
+        }
 
-            .ngx-insert-img-ph {
-                border: dashed 2px #bdbdbd;
-                padding: 1.8rem 0;
-                position: relative;
-                letter-spacing: 1px;
-                text-align: center;
+        .imgc-ctnt {
+            padding: 0.5rem;
 
-                &:hover {
-                    background: #ebebeb;
+            &.is-image {
+                .progress {
+                    height: 0.5rem;
+                    margin: 0.5rem -0.5rem -0.6rem -0.5rem;
                 }
 
-                .ngxe-img-upl-frm {
-                    opacity: 0;
-                    position: absolute;
-                    top: 0;
-                    bottom: 0;
-                    left: 0;
-                    right: 0;
-                    z-index: 2147483640;
-                    overflow: hidden;
+                p {
                     margin: 0;
-                    padding: 0;
-                    width: 100%;
+                }
 
-                    input {
-                        cursor: pointer;
+                .ngx-insert-img-ph {
+                    border: dashed 2px #bdbdbd;
+                    padding: 1.8rem 0;
+                    position: relative;
+                    letter-spacing: 1px;
+                    text-align: center;
+
+                    &:hover {
+                        background: #ebebeb;
+                    }
+
+                    .ngxe-img-upl-frm {
+                        opacity: 0;
                         position: absolute;
-                        right: 0px;
-                        top: 0px;
-                        bottom: 0px;
-                        margin: 0px;
+                        top: 0;
+                        bottom: 0;
+                        left: 0;
+                        right: 0;
+                        z-index: 2147483640;
+                        overflow: hidden;
+                        margin: 0;
+                        padding: 0;
+                        width: 100%;
+
+                        input {
+                            cursor: pointer;
+                            position: absolute;
+                            right: 0px;
+                            top: 0px;
+                            bottom: 0px;
+                            margin: 0px;
+                        }
                     }
                 }
             }

diff --git a/src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.ts b/src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.ts
@@ -25,6 +25,8 @@ export class NgxEditorToolbarComponent implements OnInit {
   updloadPercentage = 0;
   /** set to true when the image is being uploaded */
   isUploading = false;
+  /** which tab to active for color insetion */
+  selectedColorTab = 'textColor';
 
   /**
    * Editor configuration
@@ -164,6 +166,18 @@ export class NgxEditorToolbarComponent implements OnInit {
     this.imagePopover.hide();
   }
 
+  /** inser text/background color */
+  insertColor(color: string, where: string): void {
+
+    try {
+      this._commandExecutorService.insertColor(color, where);
+    } catch (error) {
+      this._messageService.sendMessage(error.message);
+    }
+
+    return;
+  }
+
   ngOnInit() {
     this.buildUrlForm();
     this.buildInsertImageForm();