aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts
diff options
context:
space:
mode:
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.ts41
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); }
+}
+}