From ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 Mon Sep 17 00:00:00 2001 From: "Sonsino, Ofir (os0695)" Date: Tue, 10 Jul 2018 15:57:37 +0300 Subject: New Angular UI from 1806 Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) --- .../inputPreventionPattern.directive.spec.ts | 66 ++++++++++++++++++++++ .../inputPreventionPattern.directive.ts | 24 ++++++++ .../app/shared/directives/svg/svg.directive.html | 0 .../src/app/shared/directives/svg/svg.directive.ts | 34 +++++++++++ 4 files changed, 124 insertions(+) create mode 100644 vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts create mode 100644 vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts create mode 100644 vid-webpack-master/src/app/shared/directives/svg/svg.directive.html create mode 100644 vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts (limited to 'vid-webpack-master/src/app/shared/directives') 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 new file mode 100644 index 000000000..846ff70f2 --- /dev/null +++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts @@ -0,0 +1,66 @@ +import {TestBed, ComponentFixture} from '@angular/core/testing'; +import {Component, DebugElement} from "@angular/core"; +import {By} from "@angular/platform-browser"; +import { InputPreventionPatternDirective } from './inputPreventionPattern.directive'; + +@Component({ + template: `` +}) +class TestHoverFocusComponent { +} + + +describe('InputPrevention Pattern Directive', () => { + + let component: TestHoverFocusComponent; + let fixture: ComponentFixture; + let directiveInstance : InputPreventionPatternDirective; + let inputEl: DebugElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestHoverFocusComponent, InputPreventionPatternDirective] + }); + fixture = TestBed.createComponent(TestHoverFocusComponent); + component = fixture.componentInstance; + inputEl = fixture.debugElement.query(By.css('input')); + directiveInstance = inputEl.injector.get(InputPreventionPatternDirective); + }); + + it('directive should be defined', () => { + expect(directiveInstance).toBeDefined(); + }); + + it('pattern exists', () => { + expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9_]*$'); + }); + + it('kepress legal input', () => { + fixture.detectChanges(); + inputEl.nativeElement.value = "legalInput"; + expect(new RegExp(inputEl.nativeElement.pattern).test(inputEl.nativeElement.value)).toBeTruthy(); + }); + + it('kepress illegal input', () => { + inputEl.triggerEventHandler('kepress', " "); + fixture.detectChanges(); + expect(inputEl.nativeElement.value).toBe(''); + }); + + it('kepress event legal input should return event', () => { + const event = { key: 'A' }; + inputEl.nativeElement.value = "legalInput"; + let result = directiveInstance.onKeypress(event); + expect(result).toBe(event); + }); + + it('kepress event illegal input should prevent default', () => { + const event = {key: '-', preventDefault : function () {} }; + 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 new file mode 100644 index 000000000..dada09bef --- /dev/null +++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts @@ -0,0 +1,24 @@ +import {Directive, ElementRef} from '@angular/core'; + +@Directive({ + selector: '[patternInput]', + host: { + '(keypress)': 'onKeypress($event)' + } +}) +export class InputPreventionPatternDirective{ + inputElement : ElementRef; + constructor(el: ElementRef) { + this.inputElement = el; + } + + onKeypress(event: KeyboardEvent) { + const pattern = new RegExp(this.inputElement.nativeElement.pattern); + if(pattern){ + if(!pattern.test(event['key'])){ + event.preventDefault(); + } + } + return event; + } +} 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 new file mode 100644 index 000000000..e69de29bb 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 new file mode 100644 index 000000000..e4dc55a56 --- /dev/null +++ b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts @@ -0,0 +1,34 @@ +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) + } + + } + } +} -- cgit 1.2.3-korg