holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix color-picker to not throw errors or lose its value

Browse Source 
it clearly need more love ;)
This commit is contained in:
ralf 2022-02-23 10:38:31 +02:00
parent 354d15ba57
commit c9f6c98a5d
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
api/js/etemplate/Et2Colorpicker/Et2Colorpicker.ts
View File

@ -17,7 +17,7 @@ import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput))) export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput)))
{ {
private cleared : boolean = true; private readonly cleared_value = '#FEFEFE'; // as input type=color interprets everything not a "#rrggbb" string as black, we use this for no value selected for now
static get styles() static get styles()
{ {
@ -28,6 +28,7 @@ export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput
display: flex; display: flex;
} }
.input-group__suffix{ .input-group__suffix{
width: 12px;
height: 12px; height: 12px;
} }
.input-group__container { .input-group__container {
@ -90,7 +91,7 @@ export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput
_inputTemplate() _inputTemplate()
{ {
return html` return html`
<input type="color" onchange="${this._handleChange}"/> <input type="color" .value="${this.value || this.cleared_value}" onchange="${this._handleChange}"/>
`; `;
} }
@ -131,21 +132,20 @@ export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput
getValue() getValue()
{ {
let value = this._inputNode.value; if (this.value.toUpperCase() === this.cleared_value)
if (this.cleared || value === '#FFFFFF' || value === '#ffffff') { {
return ''; return '';
} }
return value; return this.value;
} }
set_value(color) set_value(color)
{ {
if(!color) if (!color)
{ {
color = ''; color = this.cleared_value;
} }
this.cleared = !color; this.value = color;
this._inputNode.value = color;
} }
} }
customElements.define('et2-colorpicker', Et2Colorpicker); customElements.define('et2-colorpicker', Et2Colorpicker);