diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/directives')
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) - } - - } - } -} |