merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

2 files changed, 93 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.spec.ts b/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.spec.ts
new file mode 100644
index 000000000..8edfb8733
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.spec.ts
@@ -0,0 +1,52 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, DebugElement} from "@angular/core";
+import {By} from "@angular/platform-browser";
+import {ClickOutsideDirective} from "./clickOutside.directive";
+
+@Component({
+  template:
+      `<div id="innerDiv" [clickOutside] [classElements]="['outsideDivShouldNotTrigger']"></div>
+       <div class="outsideDivShouldTrigger"></div>
+       <div class="outsideDivShouldNotTrigger"></div>`
+})
+class TestHoverFocusComponent {
+}
+
+
+describe('Click outside Directive', () => {
+  let component: TestHoverFocusComponent;
+  let fixture: ComponentFixture<TestHoverFocusComponent>;
+  let directiveInstance : ClickOutsideDirective;
+  let outsideDivShouldNotTrigger: DebugElement;
+  let outsideDivShouldTrigger: DebugElement;
+  let innerDiv: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestHoverFocusComponent, ClickOutsideDirective]
+    });
+    fixture = TestBed.createComponent(TestHoverFocusComponent);
+    component = fixture.componentInstance;
+    outsideDivShouldNotTrigger = fixture.debugElement.query(By.css('.outsideDivShouldNotTrigger'));
+    outsideDivShouldTrigger = fixture.debugElement.query(By.css('.outsideDivShouldTrigger'));
+    innerDiv = fixture.debugElement.query(By.css('#innerDiv'));
+    directiveInstance = innerDiv.injector.get(ClickOutsideDirective);
+  });
+
+  test('directive should be defined', () => {
+    expect(directiveInstance).toBeDefined();
+  });
+
+  test(`should have list of class's`, () => {
+    fixture.detectChanges();
+    expect(directiveInstance.classElements).toEqual(['outsideDivShouldNotTrigger']);
+  });
+
+  test('should not trigger output on click outside', () => {
+    fixture.detectChanges();
+    spyOn(directiveInstance.clickOutsideTrigger, 'next');
+    outsideDivShouldNotTrigger.nativeElement.click();
+    expect(directiveInstance.clickOutsideTrigger.next).toHaveBeenCalledTimes(0);
+  });
+
+});
diff --git a/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts b/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts
new file mode 100644
index 000000000..1a43a3e68
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts
@@ -0,0 +1,41 @@
+import {Directive, EventEmitter, HostListener, Input, Output} from "@angular/core";
+import * as _ from 'lodash';
+/**********************************************************************
+  Click outside directive
+  can get one list of class's or id's (Not together)
+  if all elements are not the target then clickOutside is trigger
+ *******************************************************************/
+@Directive({
+  selector : '[clickOutside]'
+})
+export class ClickOutsideDirective {
+  @Input() clickOutside : string;
+  @Input() classElements : string[] = [];
+  @Input() idElements : string[] = [];
+  @Output() public clickOutsideTrigger: EventEmitter<any> = new EventEmitter();
+
+  @HostListener('document:click', ['$event.target']) public onClick(targetElement) {
+    if(!_.isNil(this.classElements)){this.hostListener(targetElement, this.classElements, 'getElementsByClassName');}
+    if(!_.isNil(this.idElements)){this.hostListener(targetElement, this.idElements, 'getElementById');}
+  }
+
+
+/********************************************************************************
+ hostListener - iterate over all elements and check if the element is the target.
+ @param targetElement - the target element
+ @param elements - elements to check
+ @param documentMethod - method to find the element in dom
+ ********************************************************************************/
+hostListener(targetElement, elements, documentMethod): void{
+  let result = true;
+for(let i = 0 ; i < elements.length; i++){
+  const classElements = document[documentMethod](elements[i]);
+  for (let j = 0 ; j < classElements.length; j++){
+    const clickedInside = document[documentMethod](elements[i])[j].contains(targetElement);
+    if(clickedInside) return;
+    result = result && clickedInside;
+  }
+}
+if (!result) {this.clickOutsideTrigger.emit(null); }
+}
+}