diff options
author | Ittay Stern <ittay.stern@att.com> | 2018-08-29 17:01:32 +0300 |
---|---|---|
committer | Ittay Stern <ittay.stern@att.com> | 2019-02-18 18:35:30 +0200 |
commit | 6f900cc45d7dd7f97430812b86b5c1d1693c8ae3 (patch) | |
tree | 936005c364dc5a7264d6304d4777c3d83494db22 /vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts | |
parent | 67d99f816cc583643c35193197594cf78d8ce60a (diff) |
merge from ecomp a88f0072 - Modern UI
Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>
Diffstat (limited to 'vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts')
-rw-r--r-- | vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts | 41 |
1 files changed, 41 insertions, 0 deletions
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); } +} +} |