caranmegil/mosaic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update to add import/export configuration

Browse Source
This commit is contained in:
William Moore 2023-06-12 14:37:19 -05:00
parent c136aa352c
commit 9a2ef5cfd1
1 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/edit.ts
View File

@ -1,6 +1,8 @@
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
const LAVENDER_WIDGETS = 'lavender-widgets';
@customElement('lavender-configure')
export class LavenderConfigure extends LitElement {
static override styles = [
@ -24,6 +26,14 @@ export class LavenderConfigure extends LitElement {
}
}
.buttonbar {
display: flex;
width: 100%;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
}
.widgets {
display: flex;
flex-wrap: wrap;
@ -63,6 +73,32 @@ export class LavenderConfigure extends LitElement {
`
];
export() {
const downloader = this.shadowRoot?.getElementById('downloader');
const widgets = JSON.parse(localStorage.getItem(LAVENDER_WIDGETS) ?? '[]');
const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(widgets))}`;
downloader?.setAttribute('href', dataStr);
downloader?.setAttribute('download', 'lavender.json');
downloader?.click();
}
import() {
const importer = this.shadowRoot?.getElementById('importer') as HTMLInputElement;
importer?.click();
}
handleFiles(event: any) {
if (event?.target?.files?.length > 0) {
const file = event?.target?.files[0];
const reader = new FileReader();
reader.onload = () => {
localStorage.setItem(LAVENDER_WIDGETS, reader?.result as string ?? '[]');
window.location.replace('./index.html');
}
reader.readAsText(file);
}
}
save() {
const elems = this.shadowRoot?.children ?? null;
const widgets = elems ? elems?.item(2)?.children : null;
@ -86,17 +122,17 @@ export class LavenderConfigure extends LitElement {
}
}
localStorage.setItem('lavender-widgets', JSON.stringify(lavenderWidgets));
localStorage.setItem(LAVENDER_WIDGETS, JSON.stringify(lavenderWidgets));
window.location.replace('./index.html');
}
override render() {
const widgetJSON = localStorage.getItem('lavender-widgets') ?? '[]';
const widgetJSON = localStorage.getItem(LAVENDER_WIDGETS) ?? '[]';
const widgets = JSON.parse(widgetJSON);
return html`
<h1 class="centerit">Lavender Widget Editor</h1>
<button class="button" @click="${() => this.save()}">Save</button>
<div class="buttonbar"><button class="button" @click="${() => this.save()}">Save</button><button class="button" @click="${() => this.export()}">Export</button><button class="button" @click="${() => this.import()}">Import</button></div>
<div class="widgets">
${widgets.map((widget: any) => {
return html`
@ -113,7 +149,9 @@ export class LavenderConfigure extends LitElement {
<div><div>Height</div><input type="text" name="urlHeight"></div>
</div>
</div>
<button class="button" @click="${() => this.save()}">Save</button>
<div class="buttonbar"><button class="button" @click="${() => this.save()}">Save</button><button class="button" @click="${() => this.export()}">Export</button><button class="button" @click="${() => this.import()}">Import</button></div>
<a id="downloader" style="display: none"></a>
<input type="file" @change="${(e: any) => this.handleFiles(e)}" id="importer" style="display:none" />
`;
}
}