summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/directives
diff options
context:
space:
mode:
Diffstat (limited to 'vid-webpack-master/src/app/shared/directives')
-rw-r--r--vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.spec.ts52
-rw-r--r--vid-webpack-master/src/app/shared/directives/clickOutside/clickOutside.directive.ts41
-rw-r--r--vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts48
-rw-r--r--vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts19
-rw-r--r--vid-webpack-master/src/app/shared/directives/svg/svg.directive.html0
-rw-r--r--vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts34
6 files changed, 133 insertions, 61 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); }
+}
+}
diff --git a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
index 846ff70f2..ec5bfd8f3 100644
--- a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
@@ -1,19 +1,18 @@
-import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
import {Component, DebugElement} from "@angular/core";
import {By} from "@angular/platform-browser";
-import { InputPreventionPatternDirective } from './inputPreventionPattern.directive';
+import {InputPreventionPatternDirective} from './inputPreventionPattern.directive';
@Component({
- template: `<input
+ template: `<input
patternInput
- pattern="^[a-zA-Z0-9_]*$">`
+ pattern="^[a-zA-Z0-9._-]*$">`
})
class TestHoverFocusComponent {
}
describe('InputPrevention Pattern Directive', () => {
-
let component: TestHoverFocusComponent;
let fixture: ComponentFixture<TestHoverFocusComponent>;
let directiveInstance : InputPreventionPatternDirective;
@@ -29,37 +28,54 @@ describe('InputPrevention Pattern Directive', () => {
directiveInstance = inputEl.injector.get(InputPreventionPatternDirective);
});
- it('directive should be defined', () => {
+ test('directive should be defined', () => {
expect(directiveInstance).toBeDefined();
});
- it('pattern exists', () => {
- expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9_]*$');
+ test('pattern exists', () => {
+ expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9._-]*$');
});
- it('kepress legal input', () => {
+ test('kepress legal input', () => {
fixture.detectChanges();
inputEl.nativeElement.value = "legalInput";
expect(new RegExp(inputEl.nativeElement.pattern).test(inputEl.nativeElement.value)).toBeTruthy();
});
- it('kepress illegal input', () => {
+ test('kepress illegal input', () => {
inputEl.triggerEventHandler('kepress', " ");
fixture.detectChanges();
expect(inputEl.nativeElement.value).toBe('');
});
- it('kepress event legal input should return event', () => {
- const event = <any>{ key: 'A' };
+
+ test('kepress event legal input should return event', () => {
+ const event = <any>{ key: 'A'};
+ inputEl.nativeElement.value = "legalInput";
+ let result = directiveInstance.onKeypress(event);
+ expect(result).toBe(event);
+ });
+
+
+ test('kepress event legal(-) input should return event', () => {
+ const event = <any>{ key: '-'};
inputEl.nativeElement.value = "legalInput";
let result = directiveInstance.onKeypress(event);
expect(result).toBe(event);
});
- it('kepress event illegal input should prevent default', () => {
- const event = <any>{key: '-', preventDefault : function () {} };
- spyOn(event, 'preventDefault');
- inputEl.nativeElement.value = "-";
+ test('kepress event legal (.) input should return event', () => {
+ const event = <any>{ key: '.'};
+ inputEl.nativeElement.value = "legalInput";
+ let result = directiveInstance.onKeypress(event);
+ expect(result).toBe(event);
+ });
+
+
+ test('kepress event illegal input should prevent default', () => {
+ const event = <any>{key: '$', preventDefault : function () {} };
+ jest.spyOn(event, 'preventDefault');
+ inputEl.nativeElement.value = "$";
let result = directiveInstance.onKeypress(event);
expect(event.preventDefault).toHaveBeenCalled();
});
diff --git a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
index dada09bef..d00c52502 100644
--- a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
@@ -1,18 +1,10 @@
-import {Directive, ElementRef} from '@angular/core';
+import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';
@Directive({
- selector: '[patternInput]',
- host: {
- '(keypress)': 'onKeypress($event)'
- }
+ selector: '[patternInput]'
})
export class InputPreventionPatternDirective{
- inputElement : ElementRef;
- constructor(el: ElementRef) {
- this.inputElement = el;
- }
-
- onKeypress(event: KeyboardEvent) {
+ @HostListener('keypress', ['$event']) onKeypress(event: KeyboardEvent) {
const pattern = new RegExp(this.inputElement.nativeElement.pattern);
if(pattern){
if(!pattern.test(event['key'])){
@@ -21,4 +13,9 @@ export class InputPreventionPatternDirective{
}
return event;
}
+
+ inputElement : ElementRef;
+ constructor(el: ElementRef) {
+ this.inputElement = el;
+ }
}
diff --git a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html
deleted file mode 100644
index e69de29bb..000000000
--- a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html
+++ /dev/null
diff --git a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts
deleted file mode 100644
index e4dc55a56..000000000
--- a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { AfterContentChecked, AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
-import { isNullOrUndefined } from 'util';
-
-
-/*
- Temporary
- Changing svg color and size.
- color changing according to fill attribute
- size according to viewBox
-*/
-@Directive({
- selector: '[svg-directive]'
-})
-export class SvgDirective implements AfterContentChecked {
- @Input('fill') fill: string = "black";
- @Input('widthViewBox') widthViewBox: string = null;
- @Input('heightViewBox') heightViewBox: string = null;
-
- constructor(private elRef: ElementRef) {}
- ngAfterContentChecked(): void {
- if(this.elRef !== undefined && this.elRef.nativeElement.children !== undefined && this.elRef.nativeElement.children[0] !== undefined){
- this.elRef.nativeElement.children[0].children[1].children[0].style.fill = this.fill;
- if(this.elRef.nativeElement.children[0].children[1].children.length > 1){
- this.elRef.nativeElement.children[0].children[1].children[1].style.fill = this.fill;
- this.elRef.nativeElement.children[0].children[1].children[2].children[0].style.fill = this.fill;
- }
-
- if(this.widthViewBox && this.heightViewBox){
- this.elRef.nativeElement.firstChild.setAttribute('viewBox', "1 1 " + this.widthViewBox + " " + this.heightViewBox)
- }
-
- }
- }
-}