extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-02 19:39:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add getValue, setValue, clear button handler and styling for colorpicker

Browse Source
This commit is contained in:
Hadi Nategh 2021-09-16 11:38:09 +02:00
parent 4063f9fcdb
commit 029f75b9bc
1 changed files with 56 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,13 +10,36 @@
import {html} from "@lion/core"; import {css, html} from "@lion/core";
import {LionInput} from "@lion/input"; import {LionInput} from "@lion/input";
import {Et2Widget} from "../Et2Widget/Et2Widget"; import {Et2Widget} from "../Et2Widget/Et2Widget";
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
export class Et2Colorpicker extends Et2InputWidget(Et2Widget(LionInput)) export class Et2Colorpicker extends Et2InputWidget(Et2Widget(LionInput))
{ {
private cleared: boolean = true;
static get styles()
{
return [
...super.styles,
css`
:host {
display: flex;
}
div:hover > span.clear-icon {
width: 12px;
height: 12px;
display: inline-flex;
background-image: url(pixelegg/images/close.svg);
background-size: 10px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
`,
];
}
constructor() constructor()
{ {
@ -31,10 +54,39 @@ export class Et2Colorpicker extends Et2InputWidget(Et2Widget(LionInput))
render() render()
{ {
return html` return html`
<div class="et2_colorpicker" id="${this.id}"> <div class="et2_colorpicker" id="${this.id}">
<input class="et2_colorpicker" type="color" /> <input class="et2_colorpicker" type="color" @change="${this._handleChange}"/>
</div> <span class="clear-icon" @click="${this._handleClickClear}"></span>
</div>
`; `;
} }
_handleChange(e)
{
this.set_value(e.target.value);
}
_handleClickClear()
{
this.set_value('');
}
getValue()
{
let value = this._inputNode.value;
if (this.cleared || value === '#FFFFFF' || value === '#ffffff') {
return '';
}
return value;
}
set_value(color)
{
if(!color)
{
color = '';
}
this.cleared = !color;
this._inputNode.value = color;
}
} }
customElements.define('et2-colorpicker', Et2Colorpicker); customElements.define('et2-colorpicker', Et2Colorpicker);