Merge pull request #258 from harunurhan/highlight-field

highlights field instead of flashing

Author: jmartinm

src/json-editor.component.scss

@@ -163,8 +163,8 @@ label {
    color: $label-color;
 }
 
-.flash {
-  border: 2px solid yellow;
+.highlight {
+  border: 2px solid yellow !important;
 }
 
 // FIXME: only used in table-list and table-list it's own version?

src/primitive-field/primitive-field.component.html

@@ -3,19 +3,20 @@
     <tr [ngClass]="errorNgClass">
       <ng-template #errorsTooltipTemplate>
         <ul class="tooltip-left-align">
-          <li *ngFor="let error of errors" >
+          <li *ngFor="let error of errors">
             {{error.message}}
           </li>
         </ul>
       </ng-template>
-      <td class="value-container" [ngClass]="disabledClass" [tooltip]="errorsTooltipTemplate" [isDisabled]="!isErrorTooltipEnabled" placement="{{tooltipPosition}}" container="body">
+      <td class="value-container" [ngClass]="disabledClass" [tooltip]="errorsTooltipTemplate" [isDisabled]="!isErrorTooltipEnabled"
+        placement="{{tooltipPosition}}" container="body">
         <div *ngSwitchCase="'string'">
           <div [attr.contenteditable]="!disabled" attr.data-path="{{pathString}}" [tabindex]="tabIndex" [(contentModel)]="value" (blur)="commitValueChange()"
             (keypress)="onKeypress($event)" attr.placeholder="{{schema.title}}"></div>
         </div>
         <div *ngSwitchCase="'enum'">
           <searchable-dropdown [pathString]="pathString" [value]="value" [placeholder]="schema.title" [items]="schema.enum" [shortcutMap]="schema.enumShorcutMap"
-            (onSelect)="onSearchableDropdownSelect($event)" [tabIndex]="tabIndex"></searchable-dropdown>
+            (onSelect)="onSearchableDropdownSelect($event)" [tabIndex]="tabIndex" (onBlur)="domUtilService.clearHighlight()"></searchable-dropdown>
         </div>
         <div *ngSwitchCase="'autocomplete'">
           <autocomplete-input [pathString]="pathString" [value]="value" [path]="path" [autocompletionConfig]="schema.autocompletionConfig"

src/primitive-field/primitive-field.component.spec.ts

@@ -39,7 +39,9 @@ import {
   ComponentTypeService,
   SchemaValidationService,
   JsonStoreService,
-  PathUtilService
+  PathUtilService,
+  DomUtilService,
+  TabsUtilService
 } from '../shared/services';
 import { ContentModelDirective } from '../shared/directives';
 
@@ -91,6 +93,8 @@ describe('PrimitiveFieldComponent', () => {
         ComponentTypeService,
         SchemaValidationService,
         PathUtilService,
+        DomUtilService,
+        TabsUtilService,
         { provide: JsonStoreService, useClass: MockJsonStoreService }
       ]
     }).compileComponents();

src/primitive-field/primitive-field.component.ts

@@ -34,7 +34,8 @@ import {
   ComponentTypeService,
   JsonStoreService,
   SchemaValidationService,
-  PathUtilService
+  PathUtilService,
+  DomUtilService
 } from '../shared/services';
 import { JSONSchema } from '../shared/interfaces';
 
@@ -58,7 +59,9 @@ export class PrimitiveFieldComponent extends AbstractFieldComponent implements O
     public componentTypeService: ComponentTypeService,
     public appGlobalsService: AppGlobalsService,
     public jsonStoreService: JsonStoreService,
-    public pathUtilService: PathUtilService) {
+    public pathUtilService: PathUtilService,
+    public domUtilService: DomUtilService
+  ) {
     super(appGlobalsService, pathUtilService);
   }
 
@@ -71,7 +74,8 @@ export class PrimitiveFieldComponent extends AbstractFieldComponent implements O
   }
 
   commitValueChange() {
-    // Validation
+    this.domUtilService.clearHighlight();
+
     let errors = this.schemaValidationService.validateValue(this.value, this.schema);
     if (!errors.length) {
       this.jsonStoreService.setIn(this.path, this.value);

src/searchable-dropdown/searchable-dropdown.component.html

@@ -1,7 +1,7 @@
 <div class="btn-group" dropdown keyboardNav="true" [isOpen]="status.isOpen" (onShown)="status.isOpen = true" (onHidden)="status.isOpen = false">
   <div class="toggle-container" dropdownToggle>
     <input #inputToggle attr.data-path="{{pathString}}" [placeholder]="placeholder" [(ngModel)]="expressionOrValue" (keypress)="onKeypress($event.key)"
-      [tabindex]="tabIndex" (focus)="onFocus($event)">
+      [tabindex]="tabIndex" (focus)="onFocus($event)" (blur)="onBlur.emit()">
     <i class="fa fa-caret-down" (click)="inputToggle.focus()"></i>
   </div>
   <ul class="dropdown-menu" *dropdownMenu role="menu">

src/searchable-dropdown/searchable-dropdown.component.ts

@@ -42,6 +42,8 @@ export class SearchableDropdownComponent implements OnInit {
   status: { isOpen: boolean } = { isOpen: false };
 
   @Output() onSelect = new EventEmitter<string>();
+  @Output() onBlur = new EventEmitter<void>();
+
 
   ngOnInit() {
     this.placeholder = this.value || this.placeholder || '';

src/shared/services/dom-util.service.ts

@@ -27,27 +27,28 @@ import { TabsUtilService } from './tabs-util.service';
 export class DomUtilService {
 
   private editableSelector = '.value-container input, div[contenteditable=true]';
+  // highlight class is defined in json-editor.component.scss
+  private highlightClass = 'highlight';
+  private highlightedElement: HTMLElement;
 
   constructor(public tabsUtilService: TabsUtilService) { }
 
-  focusAndSelectFirstEditableChildById(id: string) {
+  focusAndSelectFirstEditableChildById(id: string, highlight = false) {
     this.tabsUtilService.selectTabIfNeeded(id);
     setTimeout(() => {
       let el = document.getElementById(id);
       if (el) {
-        let firstInput = el.querySelector(this.editableSelector) as HTMLElement;
-        if (firstInput) {
-          firstInput.focus();
-          this.selectAllContent(firstInput);
+        let firstEditable = el.querySelector(this.editableSelector) as HTMLElement;
+        if (firstEditable) {
+          firstEditable.focus();
+          this.selectAllContent(firstEditable);
+          if (highlight) {
+            firstEditable.classList.add(this.highlightClass);
+            this.highlightedElement = firstEditable;
+          }
         } else {
           // if element doesn't have any input, open add-field-dropdown if it exists.
-          firstInput = el.querySelector('div.btn-group') as HTMLInputElement;
-          if (firstInput) {
-            let dropDownButton = el.querySelector('div.btn-group button') as HTMLButtonElement;
-            if (dropDownButton) {
-              dropDownButton.click();
-            }
-          }
+          this.openDropdown(el);
         }
       }
     });
@@ -80,25 +81,18 @@ export class DomUtilService {
     }
   }
 
-  flashElementById(id: string) {
-    this.tabsUtilService.selectTabIfNeeded(id);
-    setTimeout(() => {
-      let el = document.getElementById(id);
-      if (el) {
-        // .flash is defined json-editor.component.scss, {border: 2px solid yellow;}
-        el.classList.add('flash');
-        setTimeout(() => {
-          el.classList.remove('flash');
-        }, 500);
-      }
-    });
-  }
-
   blurFirstEditableChildById(id: string) {
     let el = document.getElementById(id);
-    let firstInput = el.querySelector(this.editableSelector) as HTMLElement;
-    if (firstInput) {
-      firstInput.blur();
+    let firstEditable = el.querySelector(this.editableSelector) as HTMLElement;
+    if (firstEditable) {
+      firstEditable.blur();
+    }
+  }
+
+  clearHighlight() {
+    if (this.highlightedElement) {
+      this.highlightedElement.classList.remove(this.highlightClass);
+      this.highlightedElement = undefined;
     }
   }
 
@@ -115,4 +109,14 @@ export class DomUtilService {
     }
   }
 
+  private openDropdown(el: HTMLElement) {
+    let dropdown = el.querySelector('div.btn-group');
+    if (dropdown) {
+      let dropDownButton = dropdown.querySelector('button') as HTMLButtonElement;
+      if (dropDownButton) {
+        dropDownButton.click();
+      }
+    }
+  }
+
 }

src/shared/services/shortcut-action.service.ts

@@ -206,8 +206,7 @@ export class ShortcutActionService {
   }
 
   private focusElementInPath(path: string) {
-    this.domUtilService.flashElementById(path);
-    this.domUtilService.focusAndSelectFirstEditableChildById(path);
+    this.domUtilService.focusAndSelectFirstEditableChildById(path, true);
   }
 
   generateShortcutAction(action: string) {

src/tree-menu/tree-menu-item.component.ts

@@ -75,8 +75,7 @@ export class TreeMenuItemComponent extends AbstractTrackerComponent implements O
     event.preventDefault();
 
     this.isCollapsed = !this.isCollapsed;
-    this.domUtilService.focusAndSelectFirstEditableChildById(this.path);
-    this.domUtilService.flashElementById(this.path);
+    this.domUtilService.focusAndSelectFirstEditableChildById(this.path, true);
   }
 
   collapse() {