@alegendstale/holly-components
Version:
Reusable UI components created using lit
194 lines (190 loc) • 6.5 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 } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { ref, createRef } from 'lit/directives/ref.js';
import { ColorPalette } from '../color-palette.js';
import { ColorPaletteMenu } from '../menu/color-palette-menu.js';
import { defaultSettings } from '../color-palette-utils.js';
import { ColorPaletteEditor } from '../editor/color-palette-editor.js';
import { condCustomElement } from '../../../decorators/condCustomElement.js';
let ColorPaletteComponent = class ColorPaletteComponent extends LitElement {
constructor() {
super(...arguments);
this.colors = [];
this.settings = {
height: defaultSettings.height,
width: defaultSettings.width,
direction: defaultSettings.direction,
gradient: defaultSettings.gradient,
preventHover: defaultSettings.preventHover,
hideText: defaultSettings.hideText,
override: defaultSettings.override,
aliases: []
};
this.editMode = false;
this.isMobile = false;
this.edit = false;
}
firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
this.isMobile = entry.contentRect.width < 1400;
}
});
observer.observe(this);
}
render() {
let sheetRef = createRef();
let menuEl;
let editorEl;
const menuRef = (menu) => {
if (!(menu instanceof ColorPaletteMenu))
return;
menuEl = menu;
// Reset emitters each time menu updates
menu.emitter.clear();
menu.emitter.on('change', (colors) => {
if (colors)
this.colors = colors;
});
menu.emitter.on('editMode', (val) => this.editMode = val);
menu.emitter.on('openEditor', () => {
this.absolute.toggle();
// Reset editor before opening
editorEl.colors = this.colors;
editorEl.settings = this.settings;
});
};
const paletteRef = (palette) => {
if (!(palette instanceof ColorPalette))
return;
palette.emitter.clear();
palette.emitter.on('changed', (colors, settings) => {
this.colors = colors;
this.settings = settings;
});
};
const editorRef = (editor) => {
if (!(editor instanceof ColorPaletteEditor))
return;
editorEl = editor;
editor.emitter.clear();
editor.emitter.on('submit', (colors, settings) => {
this.colors = colors;
this.settings = settings;
this.absolute.setOpen(false);
});
};
return html `
<color-palette
.colors=${this.colors}
height=${this.settings.height}
width=${this.settings.width}
direction=${this.settings.direction}
?gradient=${this.settings.gradient}
?preventHover=${this.settings.preventHover}
?hideText=${this.settings.hideText}
?override=${this.settings.override}
.aliases=${this.settings.aliases}
?editMode=${this.editMode}
@contextmenu=${(e) => {
e.preventDefault();
let sheet = sheetRef.value;
if (this.isMobile)
sheet && sheet.toggleSheet();
else {
menuEl.absolute.toggle();
menuEl.absolute.setPosition(e.clientX + 16, e.clientY);
}
}}
${ref(paletteRef)}
>
</color-palette>
${this.isMobile
? html `
<bottom-sheet
.snapPoints=${[0, 50]}
${ref(sheetRef)}
>
<color-palette-menu
.palette=${this}
.colors=${this.colors}
.settings=${this.settings}
?editMode=${this.editMode}
@click=${() => {
let sheet = sheetRef.value;
if (sheet)
sheet.toggleSheet();
}}
${ref(menuRef)}
>
</color-palette-menu>
</bottom-sheet>
`
: html `
<color-palette-menu
.palette=${this}
.colors=${this.colors}
.settings=${this.settings}
?editMode=${this.editMode}
@click=${(e) => {
if (!(e.target instanceof ColorPaletteMenu))
return;
e.target.absolute.toggle();
}}
${ref(menuRef)}
>
</color-palette-menu>
`}
<absolute-container>
<color-palette-editor
.colors=${this.colors}
.settings=${this.settings}
${ref(editorRef)}
>
</color-palette-editor>
</absolute-container>
`;
}
};
ColorPaletteComponent.styles = [
css `
:host {
display: block;
}
absolute-container::part(dialog)::backdrop {
background-color: rgba(0, 0, 0, .8);
}
`
];
__decorate([
query('color-palette')
], ColorPaletteComponent.prototype, "palette", void 0);
__decorate([
query('absolute-container')
], ColorPaletteComponent.prototype, "absolute", void 0);
__decorate([
property({ type: Array })
], ColorPaletteComponent.prototype, "colors", void 0);
__decorate([
property({ type: Object })
], ColorPaletteComponent.prototype, "settings", void 0);
__decorate([
property({ type: Boolean })
], ColorPaletteComponent.prototype, "editMode", void 0);
__decorate([
state()
], ColorPaletteComponent.prototype, "isMobile", void 0);
__decorate([
state()
], ColorPaletteComponent.prototype, "edit", void 0);
ColorPaletteComponent = __decorate([
condCustomElement('color-palette-component')
], ColorPaletteComponent);
export { ColorPaletteComponent };