diff options
author | Sonsino, Ofir (os0695) <os0695@intl.att.com> | 2018-07-10 15:57:37 +0300 |
---|---|---|
committer | Sonsino, Ofir (os0695) <os0695@intl.att.com> | 2018-07-10 15:57:37 +0300 |
commit | ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 (patch) | |
tree | aae42404a93fdffdd16ff050eaa28129959f7577 /vid-webpack-master/src/app/shared/directives | |
parent | c72d565bb58226b20625b2bce5f0019046bee649 (diff) |
New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/shared/directives')
4 files changed, 124 insertions, 0 deletions
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: `<input + patternInput + pattern="^[a-zA-Z0-9_]*$">` +}) +class TestHoverFocusComponent { +} + + +describe('InputPrevention Pattern Directive', () => { + + let component: TestHoverFocusComponent; + let fixture: ComponentFixture<TestHoverFocusComponent>; + 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 = <any>{ 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 = <any>{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 --- /dev/null +++ b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html 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) + } + + } + } +} |