@blackbaud/skyux
Version:
SKY UX built on Angular 2
152 lines • 6.68 kB
JavaScript
// spell-checker:ignore Colorpicker, Validators, RGBA, hsva, hsla, cmyk, Dropdown
import { ElementRef, ViewContainerRef, Directive, forwardRef, HostListener, Input, Renderer } from '@angular/core';
import { SkyColorpickerService } from './colorpicker.service';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
// tslint:disable no-forward-ref
var SKY_COLORPICKER_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return SkyColorpickerInputDirective; }),
multi: true
};
var SKY_COLORPICKER_VALIDATOR = {
provide: NG_VALIDATORS,
useExisting: forwardRef(function () { return SkyColorpickerInputDirective; }),
multi: true
};
// tslint:enable
var SkyColorpickerInputDirective = (function () {
function SkyColorpickerInputDirective(view, element, service, renderer) {
this.view = view;
this.element = element;
this.service = service;
this.renderer = renderer;
this.initialColor = '#FFFFFF';
this.returnFormat = 'rgba';
this.outputFormat = 'rgba';
this.presetColors = ['#333', '#888', '#EFEFEF', '#FFF'];
this.alphaChannel = 'hex6';
/*istanbul ignore next */
this._onChange = function (_) { };
/*istanbul ignore next */
this._onTouched = function () { };
this._validatorChange = function () { };
this.created = false;
}
SkyColorpickerInputDirective.prototype.changeInput = function (event) {
var value = event.target.value;
this.skyColorpickerInput.setColorFromString(value);
};
SkyColorpickerInputDirective.prototype.onChange = function (event) {
var newValue = event.target.value;
this.modelValue = this.formatter(newValue);
this._validatorChange();
this._onChange(this.modelValue);
this.writeModelValue(this.modelValue);
};
SkyColorpickerInputDirective.prototype.onBlur /* istanbul ignore next */ = function (event) {
this._onTouched();
};
SkyColorpickerInputDirective.prototype.ngOnInit = function () {
var _this = this;
this.renderer.setElementClass(this.element.nativeElement, 'sky-form-control', true);
this.skyColorpickerInput.initialColor = this.initialColor;
this.skyColorpickerInput.returnFormat = this.returnFormat;
this.pickerChangedSubscription =
this.skyColorpickerInput.selectedColorChanged.subscribe(function (newColor) {
_this.writeValue(newColor);
_this._onChange(newColor);
});
this.skyColorpickerInput.setColorFromString(this.initialColor);
};
SkyColorpickerInputDirective.prototype.ngOnDestroy = function () {
this.pickerChangedSubscription.unsubscribe();
};
SkyColorpickerInputDirective.prototype.setColorPickerDefaults = function () {
this.created = true;
this.skyColorpickerInput.setDialog(this, this.element, this.initialColor, this.outputFormat, this.presetColors, this.alphaChannel);
};
SkyColorpickerInputDirective.prototype.ngOnChanges = function (changes) {
this._validatorChange();
this.skyColorpickerInput.returnFormat = this.returnFormat;
this.setColorPickerDefaults();
};
SkyColorpickerInputDirective.prototype.registerOnChange = function (fn) { this._onChange = fn; };
SkyColorpickerInputDirective.prototype.registerOnTouched = function (fn) { this._onTouched = fn; };
SkyColorpickerInputDirective.prototype.registerOnValidatorChange = function (fn) { this._validatorChange = fn; };
SkyColorpickerInputDirective.prototype.writeValue = function (value) {
this.modelValue = this.formatter(value);
this.writeModelValue(this.modelValue);
};
SkyColorpickerInputDirective.prototype.validate = function (control) {
var value = control.value;
if (!value) {
return;
}
// Validation
};
SkyColorpickerInputDirective.prototype.writeModelValue = function (model) {
if (model) {
var setElementValue = void 0;
setElementValue = model.rgbaText;
var output = void 0;
if (this.outputFormat === 'rgba') {
output = model.rgbaText;
}
if (this.outputFormat === 'hsla') {
output = model.hslaText;
}
if (this.outputFormat === 'cmyk') {
output = model.cmykText;
}
if (this.outputFormat === 'hex') {
output = model.hex;
}
this.skyColorpickerInput.setColorFromString(output);
this.renderer.setElementStyle(this.element.nativeElement, 'background-color', setElementValue);
this.renderer.setElementStyle(this.element.nativeElement, 'color', setElementValue);
this.renderer.setElementProperty(this.element.nativeElement, 'value', output);
this.renderer.setElementClass(this.element.nativeElement, 'sky-colorpicker-input', true);
}
};
SkyColorpickerInputDirective.prototype.formatter = function (color) {
if (color && typeof color !== 'string') {
return color;
}
if (typeof color === 'string') {
var formatColor = void 0;
var hsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
formatColor = this.service.skyColorpickerOut(hsva);
return formatColor;
}
};
return SkyColorpickerInputDirective;
}());
export { SkyColorpickerInputDirective };
SkyColorpickerInputDirective.decorators = [
{ type: Directive, args: [{
selector: '[skyColorpickerInput]',
providers: [
SKY_COLORPICKER_VALUE_ACCESSOR,
SKY_COLORPICKER_VALIDATOR
]
},] },
];
/** @nocollapse */
SkyColorpickerInputDirective.ctorParameters = function () { return [
{ type: ViewContainerRef, },
{ type: ElementRef, },
{ type: SkyColorpickerService, },
{ type: Renderer, },
]; };
SkyColorpickerInputDirective.propDecorators = {
'skyColorpickerInput': [{ type: Input },],
'initialColor': [{ type: Input },],
'returnFormat': [{ type: Input },],
'outputFormat': [{ type: Input },],
'presetColors': [{ type: Input },],
'alphaChannel': [{ type: Input },],
'changeInput': [{ type: HostListener, args: ['input', ['$event'],] },],
'onChange': [{ type: HostListener, args: ['change', ['$event'],] },],
'onBlur': [{ type: HostListener, args: ['blur',] },],
};
//# sourceMappingURL=colorpicker-input.directive.js.map