mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 21:49:03 +00:00
profile json exports/imports
This commit is contained in:
parent
95621cd029
commit
abbfce9af1
@ -35,7 +35,7 @@ window.addEventListener('beforeunload', (event) => {
|
||||
|
||||
const $main = web.html`<main class="main"></main>`,
|
||||
$sidebar = web.html`<article class="sidebar"></article>`,
|
||||
$profile = web.html`<button class="profile-button">
|
||||
$profile = web.html`<button class="profile-trigger">
|
||||
Profile: ${web.escape(registry.profileName)}
|
||||
</button>`,
|
||||
$options = web.html`<div class="options-container">
|
||||
@ -71,13 +71,50 @@ $profile.addEventListener('click', async (event) => {
|
||||
value="${web.escape(registry.profileName)}"
|
||||
pattern="/^[A-Za-z0-9_-]+$/"
|
||||
>`,
|
||||
$export = web.html`<button class="profile-export">
|
||||
${web.icon('download', { class: 'profile-icon-action' })}
|
||||
</button>`,
|
||||
$import = web.html`<label class="profile-import">
|
||||
<input type="file" class="hidden" accept="application/json">
|
||||
${web.icon('upload', { class: 'profile-icon-action' })}
|
||||
</label>`,
|
||||
$save = web.html`<button class="profile-save">
|
||||
${web.icon('save', { class: 'button-icon' })} Save
|
||||
${web.icon('save', { class: 'profile-icon-text' })} Save
|
||||
</button>`,
|
||||
$delete = web.html`<button class="profile-delete">
|
||||
${web.icon('trash-2', { class: 'button-icon' })} Delete
|
||||
${web.icon('trash-2', { class: 'profile-icon-text' })} Delete
|
||||
</button>`,
|
||||
$error = web.html`<p class="profile-error"></p>`;
|
||||
$export.addEventListener('click', async (event) => {
|
||||
const now = new Date(),
|
||||
$a = web.html`<a
|
||||
class="hidden"
|
||||
download="notion-enhancer_${web.escape($select.value)}_${now.getFullYear()}-${
|
||||
now.getMonth() + 1
|
||||
}-${now.getDate()}.json"
|
||||
href="data:text/plain;charset=utf-8,${encodeURIComponent(
|
||||
JSON.stringify(await storage.get(['profiles', $select.value], {}), null, 2)
|
||||
)}"
|
||||
></a>`;
|
||||
web.render(document.body, $a);
|
||||
$a.click();
|
||||
$a.remove();
|
||||
});
|
||||
$import.addEventListener('change', (event) => {
|
||||
const file = event.target.files[0],
|
||||
reader = new FileReader();
|
||||
reader.onload = async (progress) => {
|
||||
try {
|
||||
const profileUpload = JSON.parse(progress.currentTarget.result);
|
||||
if (!profileUpload) throw Error;
|
||||
await storage.set(['profiles', $select.value], profileUpload);
|
||||
location.reload();
|
||||
} catch {
|
||||
web.render(web.empty($error), 'Invalid JSON uploaded.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
});
|
||||
$select.addEventListener('change', async (event) => {
|
||||
if ($select.value === '--') {
|
||||
$edit.value = '';
|
||||
@ -91,6 +128,10 @@ $profile.addEventListener('click', async (event) => {
|
||||
);
|
||||
return false;
|
||||
}
|
||||
if (!$edit.value) {
|
||||
web.render(web.empty($error), 'Profile names cannot be empty.');
|
||||
return false;
|
||||
}
|
||||
if (!$edit.value.match(/^[A-Za-z0-9_-]+$/)) {
|
||||
web.render(
|
||||
web.empty($error),
|
||||
@ -139,7 +180,7 @@ $profile.addEventListener('click', async (event) => {
|
||||
$edit,
|
||||
web.html`${web.icon('type', { class: 'input-icon' })}`
|
||||
),
|
||||
web.render(web.html`<p></p>`, $save, $delete),
|
||||
web.render(web.html`<p class="profile-actions"></p>`, $export, $import, $save, $delete),
|
||||
$error
|
||||
);
|
||||
}
|
||||
|
@ -59,14 +59,18 @@ const customClasses = {
|
||||
'mod-author': apply`flex items-center mb-2`,
|
||||
'mod-author-avatar': apply`inline object-cover w-5 h-5 rounded-full mr-2`,
|
||||
'sidebar': apply`h-full w-96 px-4 pt-3 pb-32 flex flex-col bg-notion-secondary border-l border-divider`,
|
||||
'profile-button': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
|
||||
'profile-trigger': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
|
||||
bg-accent-red-hover border border-accent-red text-accent-red focus:(outline-none ring ring-inset ring-accent-red)`,
|
||||
'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md
|
||||
hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none)`,
|
||||
'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-3 bg-red-tag text-red-tag-text rounded-md
|
||||
border border-red-text hover:bg-red-text focus:(outline-none bg-red-text)`,
|
||||
'profile-actions': apply`flex`,
|
||||
'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md flex-grow
|
||||
hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none) text-center`,
|
||||
'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-2 bg-red-tag text-red-tag-text rounded-md flex-grow
|
||||
border border-red-text hover:bg-red-text focus:(outline-none bg-red-text) text-center`,
|
||||
'profile-export': apply`profile-save mr-2`,
|
||||
'profile-import': apply`profile-save mr-2`,
|
||||
'profile-error': apply`text-xs mt-2 text-red-text`,
|
||||
'button-icon': apply`w-4 h-4 -mt-1 inline-block mr-1`,
|
||||
'profile-icon-action': apply`w-4 h-4 -mt-1 inline-block`,
|
||||
'profile-icon-text': apply`w-4 h-4 -mt-1 inline-block mr-1`,
|
||||
'options-container': apply`px-4 py-3 shadow-inner rounded-lg bg-notion border border-divider space-y-3`,
|
||||
'options-placeholder': apply`text-sm text-foreground-secondary`,
|
||||
'toggle-box': apply`w-9 h-5 p-0.5 flex items-center bg-toggle-off rounded-full duration-300 ease-in-out cursor-pointer`,
|
||||
|
Loading…
Reference in New Issue
Block a user