Adding more config options. Making things look better.

This commit is contained in:
Scott Idem
2025-05-15 15:07:37 -04:00
parent 72fb34e3f1
commit 53856a913b
7 changed files with 407 additions and 187 deletions

View File

@@ -27,10 +27,11 @@ import { journals_loc, journals_sess, journals_slct, journals_trig } from '$lib/
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
interface Props {
lq__journal_obj: any;
lq__journal_entry_obj_li: any;
}
let { lq__journal_entry_obj_li }: Props = $props();
let { lq__journal_obj, lq__journal_entry_obj_li }: Props = $props();
let ae_promises: key_val = $state({});
// let ae_tmp: key_val = {};
@@ -170,8 +171,8 @@ $effect(() => {
</h3>
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
{#if !journals_journal_entry_obj.private}
<span class="flex flex-row flex-wrap gap-1">
<!-- Button to copy the Markdown version -->
<button
type="button"
@@ -185,7 +186,7 @@ $effect(() => {
alert('Failed to copy content.');
});
}}
class:hidden={journals_journal_entry_obj.template}
class:hidden={$lq__journal_obj?.cfg_json?.hide_copy_plain_md}
class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline text-xs lg:text-sm"
title="Copy the markdown content"
>
@@ -212,7 +213,7 @@ $effect(() => {
alert('Failed to copy HTML content.');
});
}}
class:hidden={journals_journal_entry_obj.template}
class:hidden={journals_journal_entry_obj.template || $lq__journal_obj?.cfg_json?.hide_copy_html}
class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
title="Copy the rendered HTML content"
>
@@ -220,10 +221,48 @@ $effect(() => {
<Copy size="1em" />
<CodeXml size="1.25em" />
<span class="hidden">
Copy Rendered HTML
Copy HTML Markup
</span>
</button>
<!-- Button to copy the rich text (rendered HTML) version -->
<button
type="button"
onclick={async () => {
const element = document.getElementById(`rendered_journal_entry_content_${journals_journal_entry_obj.journal_entry_id}`);
if (!element) {
console.error('Element not found: rendered_journal_entry_content');
alert('Failed to copy rich content.');
return;
}
try {
// Get the rendered HTML content
const htmlContent = element.innerHTML;
// Use the Clipboard API to write the HTML content as rich text
await navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([htmlContent], { type: 'text/html' }),
}),
]);
alert('Rendered rich content copied to clipboard!');
} catch (error) {
console.error('Failed to copy rich content:', error);
alert('Failed to copy rich content.');
}
}}
class:hidden={journals_journal_entry_obj.template || $lq__journal_obj?.cfg_json?.hide_copy_rich}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the rich text (rendered HTML) content"
>
<Copy size="1em" />
<TypeOutline size="1.25em" />
<span class="hidden">Copy Rich Text</span>
</button>
<!-- Clone entry -->
<button
type="button"
@@ -263,47 +302,11 @@ $effect(() => {
<span class="hidden md:inline">Clone</span>
</button>
<!-- Button to copy the rich text (rendered HTML) version -->
<button
type="button"
onclick={async () => {
const element = document.getElementById(`rendered_journal_entry_content_${journals_journal_entry_obj.journal_entry_id}`);
if (!element) {
console.error('Element not found: rendered_journal_entry_content');
alert('Failed to copy rich content.');
return;
}
try {
// Get the rendered HTML content
const htmlContent = element.innerHTML;
// Use the Clipboard API to write the HTML content as rich text
await navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([htmlContent], { type: 'text/html' }),
}),
]);
alert('Rendered rich content copied to clipboard!');
} catch (error) {
console.error('Failed to copy rich content:', error);
alert('Failed to copy rich content.');
}
}}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the rich text (rendered HTML) content"
>
<Copy size="1em" />
<TypeOutline size="1.25em" />
<span class="hidden">Copy Rich Text</span>
</button>
</span>
<!-- </span> -->
{:else}
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
<!-- <span class="flex flex-row flex-wrap gap-1 items-center justify-center"> -->
<Lock size="1.25em" class="mx-1 inline-block text-red-400 dark:text-red-600" />
<!-- <EyeOff size="1.25em" class="mx-1 inline-block text-red-400 dark:text-red-600" /> -->
<span class="text-xs text-gray-500 hidden">Private</span>
@@ -321,7 +324,7 @@ $effect(() => {
alert('Failed to copy content.');
});
}}
class:hidden={journals_journal_entry_obj.template}
class:hidden={$lq__journal_obj?.cfg_json?.hide_copy_encrypted}
class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline text-xs lg:text-sm"
title="Copy the encrypted content"
>
@@ -333,9 +336,10 @@ $effect(() => {
</span>
</button>
</span>
<!-- </span> -->
{/if}
</span>
</span>