Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Colorpicker adjustments #1227

Merged
merged 8 commits into from
Oct 26, 2017
Merged

Colorpicker adjustments #1227

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1a957ea
Added default color value
Blackbaud-SteveBrush Oct 20, 2017
951bb47
Fixed undefined event code
Blackbaud-SteveBrush Oct 20, 2017
04b9043
Adjusted unit test
Blackbaud-SteveBrush Oct 20, 2017
c172f31
Updating click event
Blackbaud-SteveBrush Oct 20, 2017
4ceb118
Updated default case
Blackbaud-SteveBrush Oct 24, 2017
f831dbe
Merge branch 'master' into fix-colorpicker
Blackbaud-SteveBrush Oct 25, 2017
c9f76f9
Merge branch 'master' into fix-colorpicker
Blackbaud-SteveBrush Oct 25, 2017
483605f
Merge branch 'master' into fix-colorpicker
Blackbaud-SteveBrush Oct 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/modules/colorpicker/colorpicker-component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,13 @@ describe('Colorpicker Component', () => {
verifyColorpicker(nativeElement, 'rgba(189,64,64,1)', '189, 64, 64');
});

it('should handle undefined initial color', () => {
component.selectedOutputFormat = 'hex';
component.selectedColor = undefined;
openColorpicker(nativeElement, fixture);
verifyColorpicker(nativeElement, '#fff', '255, 255, 255');
});

it('should output HEX', () => {
component.selectedOutputFormat = 'hex';
openColorpicker(nativeElement, fixture);
Expand Down
72 changes: 38 additions & 34 deletions src/modules/colorpicker/colorpicker-input.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export class SkyColorpickerInputDirective
public skyColorpickerInput: SkyColorpickerComponent;

@Input()
public initialColor: string = '#FFFFFF';
public initialColor: string;

@Input()
public returnFormat: string = 'rgba';
Expand All @@ -68,6 +68,7 @@ export class SkyColorpickerInputDirective
@Input()
public alphaChannel: string = 'hex6';

private readonly defaultColor: string = '#FFFFFF';
private created: boolean;
private modelValue: SkyColorpickerOutput;

Expand Down Expand Up @@ -100,6 +101,10 @@ export class SkyColorpickerInputDirective
}

public ngOnInit() {
if (this.initialColor === undefined) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like you're trying to prevent initialColor from being undefined, but doing so here only prevents it before ngOnInit and not during subsequent rounds of change detection. What I would suggest is using a property setter that checks for undefined and then sets the property to the default color in that case. Then it won't matter when it's set.

// Outside the class declaration
const DEFAULT_COLOR = '#FFFFFF';

@Input()
public set initialColor(value: string) {
  this._initialColor = value || DEFAULT_COLOR;
}

public get initialColor(): string {
  return this._initialColor;
}

private _initialColor = DEFAULT_COLOR;

this.initialColor = this.defaultColor;
}

this.renderer.setElementClass(this.element.nativeElement, 'sky-form-control', true);
this.skyColorpickerInput.initialColor = this.initialColor;
this.skyColorpickerInput.returnFormat = this.returnFormat;
Expand Down Expand Up @@ -138,8 +143,10 @@ export class SkyColorpickerInputDirective
public registerOnValidatorChange(fn: () => void): void { this._validatorChange = fn; }

public writeValue(value: any) {
this.modelValue = this.formatter(value);
this.writeModelValue(this.modelValue);
if (value) {
this.modelValue = this.formatter(value);
this.writeModelValue(this.modelValue);
}
}
public validate(control: AbstractControl): { [key: string]: any } {
let value = control.value;
Expand All @@ -150,41 +157,38 @@ export class SkyColorpickerInputDirective
}

private writeModelValue(model: SkyColorpickerOutput) {
if (model) {
let setElementValue: string;
setElementValue = model.rgbaText;
let output: string;
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);
let setElementValue: string;
setElementValue = model.rgbaText;
let output: string;
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);
}

private formatter(color: SkyColorpickerOutput) {
private formatter(color: any) {
if (color && typeof color !== 'string') { return color; }
if (typeof color === 'string') {
let formatColor: SkyColorpickerOutput;
let hsva: SkyColorpickerHsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
formatColor = this.service.skyColorpickerOut(hsva);
return formatColor;
}

let formatColor: SkyColorpickerOutput;
let hsva: SkyColorpickerHsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
formatColor = this.service.skyColorpickerOut(hsva);
return formatColor;
}
/*istanbul ignore next */
private _onChange = (_: any) => { };
Expand Down
2 changes: 1 addition & 1 deletion src/modules/colorpicker/colorpicker.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<sky-dropdown>
<sky-dropdown-menu>

<div class="sky-colorpicker-container">
<div class="sky-colorpicker-container" (click)="onContainerClick($event)">

<div class="sky-colorpicker" #colorPicker>
<div [skyColorpickerSlider] [style.background-color]="hueSliderColor" [xAxis]="1" [yAxis]="1" (newColorContrast)="saturationAndLightness=$event"
Expand Down
18 changes: 8 additions & 10 deletions src/modules/colorpicker/colorpicker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,16 +76,14 @@ export class SkyColorpickerComponent implements OnInit {
this.skyColorpickerAlphaId = 'sky-colorpicker-alpha-' + this.idIndex;
}

@HostListener('click', ['$event'])
public onClick(event: any) {
let element: HTMLButtonElement = <HTMLButtonElement>event.target;
// keep the drop down open.
public onContainerClick(event: MouseEvent) {
const element: HTMLButtonElement = <HTMLButtonElement>event.target;
// Allow the click event to propagate to the dropdown handler for certain buttons.
// (This will allow the dropdown menu to close.)
if (
element.classList.contains('sky-btn-colorpicker-close') ||
element.classList.contains('sky-btn-colorpicker-apply')
!element.classList.contains('sky-btn-colorpicker-close') &&
!element.classList.contains('sky-btn-colorpicker-apply')
) {
element.click();
} else {
event.stopPropagation();
}
}
Expand All @@ -94,9 +92,9 @@ export class SkyColorpickerComponent implements OnInit {
public keyboardInput(event: any) {
/* Ignores in place for valid code that is only used in IE and Edge */
/* istanbul ignore next */
let code: string = (event.code || event.key).toLowerCase();
const code: string = event.code || event.key;
/* istanbul ignore else */
if (code.indexOf('esc') === 0) {
if (code && code.toLowerCase().indexOf('esc') === 0) {
this.closeColorPicker.nativeElement.click();
}
}
Expand Down