@alegendstale/holly-components
Version:
Reusable UI components created using lit
252 lines (245 loc) • 7.11 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { EventEmitter } from '../../../utils/EventEmitter.js';
import { defaultSettings } from '../color-palette-utils.js';
import { ArrowLeftRight, Brush, Check, Copy, createElement, Droplets, Palette, Scissors } from 'lucide';
import { copyToClipboard } from '../../../utils/basicUtils.js';
import colorsea from '../../../utils/colorsea-wrapper.js';
import { AbsoluteContainer } from '../../absolute-container/absolute-container.js';
import { ref } from 'lit/directives/ref.js';
import { ColorPaletteReorder } from './color-palette-reorder.js';
import { condCustomElement } from '../../../decorators/condCustomElement.js';
let ColorPaletteMenu = class ColorPaletteMenu extends LitElement {
constructor() {
super(...arguments);
this.colors = [];
this.editMode = false;
this.copyFormat = defaultSettings.copyFormat;
this.reorder = false;
this.emitter = new EventEmitter();
}
disconnectedCallback() {
super.disconnectedCallback();
this.emitter.clear();
}
render() {
const absoluteRef = (absolute) => {
if (!(absolute instanceof AbsoluteContainer))
return;
absolute.emitter.on('visibility', (open) => {
this.reorder = false;
});
};
return html `
${this.reorder
? this.reorderItems()
: this.menuItems()}
`;
}
menuItems() {
const palette = {
colors: this.colors,
settings: this.settings
};
return html `
<menu>
<li>
<button
@click=${(e) => {
e.stopPropagation();
this.reorder = !this.reorder;
}}
>
${createElement(ArrowLeftRight)}
<span>Reorder</span>
</button>
</li>
<li>
<button
@click=${() => {
this.emitter.emit('openEditor');
}}
>
${createElement(Palette)}
<span>Edit Mode</span>
</button>
</li>
${
// Only show toggle edit mode option when palette is not a gradient
!this.settings?.gradient
? html `
<li>
<button
@click=${() => {
// Toggle palette edit mode
this.emitter.emit('editMode', !this.editMode);
}}
>
${createElement(Brush)}
<span>Quick Edit</span>
${this.editMode ? createElement(Check) : nothing}
</button>
</li>
`
: nothing}
<hr>
<li>
<button
@click=${() => {
const colors = this.colors.map((color) => {
const rgbColor = colorsea(color).rgb();
return `rgb(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]})`;
});
this.emitter.emit('change', colors);
}}
>
${createElement(Droplets)}
<span>Convert to RGB</span>
</button>
</li>
<li>
<button
@click=${() => {
const colors = this.colors.map((color) => {
const hslColor = colorsea(color).hsl();
return `hsl(${hslColor[0]} ${hslColor[1]}% ${hslColor[2]}%)`;
});
this.emitter.emit('change', colors);
}}
>
${createElement(Droplets)}
<span>Convert to HSL</span>
</button>
</li>
<li>
<button
@click=${() => {
const colors = this.colors.map((color) => {
return colorsea(color).hex(2);
});
this.emitter.emit('change', colors);
}}
>
${createElement(Droplets)}
<span>Convert to HEX</span>
</button>
</li>
<hr>
<li>
<button
@click=${async () => {
// Copy palette to clipboard
await copyToClipboard(JSON.stringify(palette), this.copyFormat);
// Remove palette
this.emitter.emit('change', []);
}}
>
${createElement(Scissors)}
<span>Cut</span>
</button>
</li>
<li>
<button
@click=${async () => {
// Copy palette to clipboard
await copyToClipboard(JSON.stringify(palette), this.copyFormat);
}}
>
${createElement(Copy)}
<span>Copy</span>
</button>
</li>
</menu>
`;
}
reorderItems() {
const reorderRef = (reorder) => {
if (!(reorder instanceof ColorPaletteReorder))
return;
reorder.emitter.clear();
reorder.emitter.on('submit', (colors) => {
this.emitter.emit('change', colors);
this.reorder = false;
});
};
return html `
<color-palette-reorder
.colors=${this.colors}
${ref(reorderRef)}
>
</color-palette-reorder>
`;
}
};
ColorPaletteMenu.styles = [
css `
:host {
display: block;
}
menu {
display: grid;
grid-template-columns: 1fr;
padding: .5rem;
margin: 0;
border-radius: 5px;
color: rgb(245, 245, 245);
background-color: #222222;
}
li {
display: grid;
grid-template-columns: subgrid;
list-style: none;
}
button {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
justify-items: flex-start;
column-gap: .5rem;
background-color: inherit;
color: inherit;
border: none;
cursor: pointer;
padding: 4px 8px;
text-wrap: nowrap;
&:hover {
background-color: #323232;
}
span {
font-size: 14px;
}
}
hr {
width: 95%;
border-color: rgb(45, 45, 45);
}
`
];
__decorate([
query('absolute-container')
], ColorPaletteMenu.prototype, "absolute", void 0);
__decorate([
property({ type: Array })
], ColorPaletteMenu.prototype, "colors", void 0);
__decorate([
property({ type: Object })
], ColorPaletteMenu.prototype, "settings", void 0);
__decorate([
property({ type: Boolean })
], ColorPaletteMenu.prototype, "editMode", void 0);
__decorate([
property({ type: String })
], ColorPaletteMenu.prototype, "copyFormat", void 0);
__decorate([
state()
], ColorPaletteMenu.prototype, "reorder", void 0);
ColorPaletteMenu = __decorate([
condCustomElement('color-palette-menu')
], ColorPaletteMenu);
export { ColorPaletteMenu };