mirror of https://github.com/Squidex/squidex.git
Sebastian
8 years ago
29 changed files with 245 additions and 261 deletions
@ -1,65 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, forwardRef, HostListener, Renderer } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
import { Types } from '@app/framework/internal'; |
|||
|
|||
export const SQX_LOWERCASE_INPUT_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => LowerCaseInputDirective), multi: true |
|||
}; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxLowerCaseInput]', |
|||
providers: [SQX_LOWERCASE_INPUT_VALUE_ACCESSOR] |
|||
}) |
|||
export class LowerCaseInputDirective implements ControlValueAccessor { |
|||
private callChange = (v: any) => { /* NOOP */ }; |
|||
private callTouched = () => { /* NOOP */ }; |
|||
|
|||
constructor( |
|||
private readonly element: ElementRef, |
|||
private readonly renderer: Renderer |
|||
) { |
|||
} |
|||
|
|||
@HostListener('input', ['$event.target.value']) |
|||
public onChange(value: any) { |
|||
const normalizedValue = this.transform(value); |
|||
|
|||
this.renderer.setElementProperty(this.element.nativeElement, 'value', normalizedValue); |
|||
this.callChange(normalizedValue); |
|||
} |
|||
|
|||
@HostListener('blur') |
|||
public onTouched() { |
|||
this.callTouched(); |
|||
} |
|||
|
|||
public writeValue(value: string) { |
|||
const normalizedValue = this.transform(value); |
|||
|
|||
this.renderer.setElementProperty(this.element.nativeElement, 'value', normalizedValue); |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.renderer.setElementProperty(this.element.nativeElement, 'disabled', isDisabled); |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.callChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.callTouched = fn; |
|||
} |
|||
|
|||
private transform(value: any): string { |
|||
return Types.isString(value) ? value.toLowerCase() : ''; |
|||
} |
|||
} |
|||
@ -1,67 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, forwardRef, HostListener, Renderer } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
import slugify from 'slugify'; |
|||
|
|||
import { Types } from '@app/framework/internal'; |
|||
|
|||
export const SQX_SLUGIFY_INPUT_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlugifyInputDirective), multi: true |
|||
}; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxSlugifyInput]', |
|||
providers: [SQX_SLUGIFY_INPUT_VALUE_ACCESSOR] |
|||
}) |
|||
export class SlugifyInputDirective implements ControlValueAccessor { |
|||
private callChange = (v: any) => { /* NOOP */ }; |
|||
private callTouched = () => { /* NOOP */ }; |
|||
|
|||
constructor( |
|||
private readonly element: ElementRef, |
|||
private readonly renderer: Renderer |
|||
) { |
|||
} |
|||
|
|||
@HostListener('input', ['$event.target.value']) |
|||
public onChange(value: any) { |
|||
const normalizedValue = this.transform(value); |
|||
|
|||
this.renderer.setElementProperty(this.element.nativeElement, 'value', normalizedValue); |
|||
this.callChange(normalizedValue); |
|||
} |
|||
|
|||
@HostListener('blur') |
|||
public onTouched() { |
|||
this.callTouched(); |
|||
} |
|||
|
|||
public writeValue(value: string) { |
|||
const normalizedValue = this.transform(value); |
|||
|
|||
this.renderer.setElementProperty(this.element.nativeElement, 'value', normalizedValue); |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.renderer.setElementProperty(this.element.nativeElement, 'disabled', isDisabled); |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.callChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.callTouched = fn; |
|||
} |
|||
|
|||
private transform(value: any): string { |
|||
return Types.isString(value) ? slugify(value, { lower: true }) : ''; |
|||
} |
|||
} |
|||
@ -0,0 +1,94 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, forwardRef, HostListener, Input, Renderer2 } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
import slugify from 'slugify'; |
|||
|
|||
type Transform = (value: string) => string; |
|||
|
|||
export const TransformNoop: Transform = value => value; |
|||
export const TransformLowerCase: Transform = value => value.toLowerCase(); |
|||
export const TransformSlugify: Transform = value => slugify(value, { lower: true }); |
|||
export const TransformSlugifyCased: Transform = value => slugify(value, { lower: false }); |
|||
export const TransformUpperCase: Transform = value => value.toUpperCase(); |
|||
|
|||
import { Types } from '@app/framework/internal'; |
|||
|
|||
export const SQX_TRANSFORM_INPUT_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TransformInputDirective), multi: true |
|||
}; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxTransformInput]', |
|||
providers: [SQX_TRANSFORM_INPUT_VALUE_ACCESSOR] |
|||
}) |
|||
export class TransformInputDirective implements ControlValueAccessor { |
|||
private callChange = (v: any) => { /* NOOP */ }; |
|||
private callTouched = () => { /* NOOP */ }; |
|||
private transformer: Transform; |
|||
|
|||
@Input('sqxTransformInput') |
|||
public set transform(value: Transform | string) { |
|||
if (Types.isString(value)) { |
|||
if (value === 'LowerCase') { |
|||
this.transformer = TransformLowerCase; |
|||
} else if (value === 'Slugify') { |
|||
this.transform = TransformSlugify; |
|||
} else if (value === 'SlugifyCased') { |
|||
this.transform = TransformSlugifyCased; |
|||
} else if (value === 'UpperCase') { |
|||
this.transform = TransformUpperCase; |
|||
} |
|||
} else { |
|||
this.transformer = value || TransformNoop; |
|||
} |
|||
} |
|||
|
|||
constructor( |
|||
private readonly element: ElementRef, |
|||
private readonly renderer: Renderer2 |
|||
) { |
|||
} |
|||
|
|||
@HostListener('input', ['$event.target.value']) |
|||
public onChange(value: any) { |
|||
const normalizedValue = this.transformValue(value); |
|||
|
|||
this.renderer.setProperty(this.element.nativeElement, 'value', normalizedValue); |
|||
|
|||
this.callChange(normalizedValue); |
|||
} |
|||
|
|||
@HostListener('blur') |
|||
public onTouched() { |
|||
this.callTouched(); |
|||
} |
|||
|
|||
public writeValue(value: string) { |
|||
const normalizedValue = this.transformValue(value); |
|||
|
|||
this.renderer.setProperty(this.element.nativeElement, 'value', normalizedValue); |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.renderer.setProperty(this.element.nativeElement, 'disabled', isDisabled); |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.callChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.callTouched = fn; |
|||
} |
|||
|
|||
private transformValue(value: any): string { |
|||
return Types.isString(value) ? this.transformer(value) : ''; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue