From e0d9afb0ebaf0f29b694bc424b6180bf02127b9f Mon Sep 17 00:00:00 2001 From: pk Date: Mon, 3 Feb 2025 14:29:38 +0100 Subject: [PATCH] Initial version --- README.md | 2 +- package.json | 6 +- tp-color-picker.js | 174 +++++++++++++++++++++++++++++++++++++++++++++ tp-element.js | 35 --------- 4 files changed, 178 insertions(+), 39 deletions(-) create mode 100644 tp-color-picker.js delete mode 100644 tp-element.js diff --git a/README.md b/README.md index 1ab27b7..556b458 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# tp-element +# tp-color-picker diff --git a/package.json b/package.json index 24f0225..c73b284 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { - "name": "@tp/tp-element", + "name": "@tp/tp-color-picker", "version": "0.0.1", "description": "", - "main": "tp-element.js", + "main": "tp-color-picker.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "https://gitea.codeblob.work/tp-elements/tp-element.git" + "url": "https://gitea.codeblob.work/tp-color-picker/tp-color-picker.git" }, "author": "trading_peter", "license": "Apache-2.0", diff --git a/tp-color-picker.js b/tp-color-picker.js new file mode 100644 index 0000000..7542e92 --- /dev/null +++ b/tp-color-picker.js @@ -0,0 +1,174 @@ +/** +@license +Copyright (c) 2025 trading_peter +This program is available under Apache License Version 2.0 +*/ + +import '@tp/tp-popup/tp-popup.js'; +import { LitElement, html, css } from 'lit'; +import { FormElement } from '@tp/helpers/form-element.js'; +import { rgbToHex } from '@tp/helpers/color.js'; +import { DomQuery } from '@tp/helpers/dom-query.js'; + +class TpColorPicker extends FormElement(DomQuery(LitElement)) { + static get styles() { + return [ + css` + :host { + display: inline-block; + } + + :host([readonly]) { + pointer-events: none; + } + + [slot="toggle"] { + height: 18px; + width: 18px; + border: solid 1px #BDBDBD; + border-radius: 2px; + } + + .wrap { + display: flex; + flex-wrap: wrap; + height: 200px; + width: 360px; + margin: 5px; + } + + .wrap > div { + width: 18px; + height: 18px; + cursor: pointer; + } + + .wrap > div:hover { + border-color: #FFFFFF !important; + } + + .last-colors { + margin: 10px 5px 5px 5px; + height: 24px; + border: solid 1px #BDBDBD; + padding: 2px; + border-radius: 2px; + display: flex; + } + + .last-colors div[color] { + width: 22px; + height: 22px; + border-radius: 2px; + cursor: pointer; + border: solid 1px transparent; + } + + .last-colors div[color]:hover { + border-color: #FFFFFF !important; + } + + .delimiter { + width: 10px; + } + + .transparent { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N88ODBfwY0oKCgwIguxjgUFKI7GsTH5m4M3w1ChQBvFiYmEMYNOQAAAABJRU5ErkJggg==) !important; + } + ` + ]; + } + + render() { + return html` + this.isOpen = e.detail}> +
+
+
+ ${this.colorList.map(color => html` +
+ `)} +
+
+
+
+
+
+ ${this.lastColors.map(color => html` +
+ `)} +
+
+ + `; + } + + static get properties() { + return { + value: { type: String }, + colorList: { type: Array }, + lastColors: { type: Array }, + maxLastColors: { type: Number }, + isOpen: { type: Boolean, reflect: true } + }; + } + + constructor() { + super(); + this.value = ''; + this.lastColors = []; + this.maxLastColors = 11; + this.colorList = [ + "#ffebee", "#ffcdd2", "#ef9a9a", "#e57373", "#ef5350", "#f44336", "#e53935", "#d32f2f", "#c62828", "#b71c1c", "#fce4ec", "#f8bbd0", "#f48fb1", "#f06292", "#ec407a", "#e91e63", "#d81b60", "#c2185b", "#ad1457", "#880e4f", "#f3e5f5", "#e1bee7", "#ce93d8", "#ba68c8", "#ab47bc", "#9c27b0", "#8e24aa", "#7b1fa2", "#6a1b9a", "#4a148c", "#ede7f6", "#d1c4e9", "#b39ddb", "#9575cd", "#7e57c2", "#673ab7", "#5e35b1", "#512da8", "#4527a0", "#311b92", "#e8eaf6", "#c5cae9", "#9fa8da", "#7986cb", "#5c6bc0", "#3f51b5", "#3949ab", "#303f9f", "#283593", "#1a237e", "#e3f2fd", "#bbdefb", "#90caf9", "#64b5f6", "#42a5f5", "#2196f3", "#1e88e5", "#1976d2", "#1565c0", "#0d47a1", "#e1f5fe", "#b3e5fc", "#81d4fa", "#4fc3f7", "#29b6f6", "#03a9f4", "#039be5", "#0288d1", "#0277bd", "#01579b", "#e0f7fa", "#b2ebf2", "#80deea", "#4dd0e1", "#26c6da", "#00bcd4", "#00acc1", "#0097a7", "#00838f", "#006064", "#e0f2f1", "#b2dfdb", "#80cbc4", "#4db6ac", "#26a69a", "#009688", "#00897b", "#00796b", "#00695c", "#004d40", "#e8f5e9", "#c8e6c9", "#a5d6a7", "#81c784", "#66bb6a", "#4caf50", "#43a047", "#388e3c", "#2e7d32", "#1b5e20", "#f1f8e9", "#dcedc8", "#c5e1a5", "#aed581", "#9ccc65", "#8bc34a", "#7cb342", "#689f38", "#558b2f", "#33691e", "#f9fbe7", "#f0f4c3", "#e6ee9c", "#dce775", "#d4e157", "#cddc39", "#c0ca33", "#afb42b", "#9e9d24", "#827717", "#fffde7", "#fff9c4", "#fff59d", "#fff176", "#ffee58", "#ffeb3b", "#fdd835", "#fbc02d", "#f9a825", "#f57f17", "#fff8e1", "#ffecb3", "#ffe082", "#ffd54f", "#ffca28", "#ffc107", "#ffb300", "#ffa000", "#ff8f00", "#ff6f00", "#fff3e0", "#ffe0b2", "#ffcc80", "#ffb74d", "#ffa726", "#ff9800", "#fb8c00", "#f57c00", "#ef6c00", "#e65100", "#fbe9e7", "#ffccbc", "#ffab91", "#ff8a65", "#ff7043", "#ff5722", "#f4511e", "#e64a19", "#d84315", "#bf360c", "#efebe9", "#d7ccc8", "#bcaaa4", "#a1887f", "#8d6e63", "#795548", "#6d4c41", "#5d4037", "#4e342e", "#3e2723", "#fafafa", "#f5f5f5", "#eeeeee", "#e0e0e0", "#bdbdbd", "#9e9e9e", "#757575", "#616161", "#424242", "#212121" + ]; + } + + _selectColor(e) { + const target = e.composedPath()[0]; + if (target.hasAttribute('color')) { + if (target.style.background !== 'transparent') { + this.value = rgbToHex(target.style.background); + } else { + this.value = ''; + } + this.dispatchEvent(new CustomEvent('change', { detail: this.value })); + this.$.popup.close(); + } + } + + _bgColor(color) { + return `background: ${color}; border: solid 1px ${color};`; + } + + _showPickedColor(color) { + if (color === '') { + return 'background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N88ODBfwY0oKCgwIguxjgUFKI7GsTH5m4M3w1ChQBvFiYmEMYNOQAAAABJRU5ErkJggg==);'; + } + return `background: ${color};`; + } + + updated(changedProps) { + if (changedProps.has('value')) { + this._colorChanged(this.value); + } + } + + _colorChanged(color) { + if (!color || (color.length !== 4 && color.length !== 7) || + color.toLowerCase() === '#ffffff' || color === '#000000' || + this.lastColors.indexOf(color) > -1) { + return; + } + + const newLastColors = [...this.lastColors]; + if (newLastColors.length < this.maxLastColors) { + newLastColors.unshift(color); + } else { + newLastColors.pop(); + newLastColors.unshift(color); + } + this.lastColors = newLastColors; + } +} + +window.customElements.define('tp-color-picker', TpColorPicker); \ No newline at end of file diff --git a/tp-element.js b/tp-element.js deleted file mode 100644 index 6195006..0000000 --- a/tp-element.js +++ /dev/null @@ -1,35 +0,0 @@ -/** -@license -Copyright (c) 2024 trading_peter -This program is available under Apache License Version 2.0 -*/ - -import { LitElement, html, css } from 'lit'; - -class TpElement extends LitElement { - static get styles() { - return [ - css` - :host { - display: block; - } - ` - ]; - } - - render() { - const { } = this; - - return html` - - `; - } - - static get properties() { - return { }; - } - - -} - -window.customElements.define('tp-element', TpElement);