silberengel
/
gc-alexandria
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Save changes to sync with upstream

master
buttercat1791 1 year ago
parent
fc4e575927
commit
a6e513f58d
4 changed files with 149 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      src/lib/components/Preview.svelte
  2. 6
      src/lib/parser.ts
  3. 2
      src/lib/stores.ts
  4. 2
      src/routes/new/compose/+page.svelte

130
src/lib/components/Preview.svelte
Unescape View File

@ -1,20 +1,20 @@ @@ -1,20 +1,20 @@
<script lang="ts">
import { parser } from "$lib/parser";
import { Button, Heading, P, Tooltip } from "flowbite-svelte";
import { hoverTargetId } from "$lib/stores";
import { Button, Heading, P, Textarea, Tooltip } from "flowbite-svelte";
import { CaretDownSolid, CaretUpSolid, EditOutline } from "flowbite-svelte-icons";
export let sectionClass: string = '';
export let rootIndexId: string;
export let isSectionStart: boolean = false;
export let rootId: string;
export let depth: number = 0;
export let allowEditing: boolean = false;
// TODO: Add editing functionality.
const isEditing: boolean = false;
const title = $parser.getIndexTitle(rootIndexId);
const orderedChildren = $parser.getOrderedChildIds(rootIndexId);
const childIndices = $parser.getChildIndexIds(rootIndexId);
const childZettels = $parser.getChildZettelIds(rootIndexId);
let isEditing: boolean = false;
let currentContent: string;
const title = $parser.getIndexTitle(rootId);
const orderedChildren = $parser.getOrderedChildIds(rootId);
const getHeadingTag = (depth: number) => {
switch (depth) {
@ -30,28 +30,114 @@ @@ -30,28 +30,114 @@
return "h6";
}
};
const handleFocus = (e: Event) => {
const target = e.target as HTMLElement;
if (target.id === rootId) {
$hoverTargetId = rootId;
e.stopPropagation();
}
};
const handleBlur = (e: Event) => {
const target = e.target as HTMLElement;
if (target.id === rootId) {
$hoverTargetId = '';
e.stopPropagation();
}
};
// TODO: Trigger rerender when editing state changes.
const toggleEditing = (id: string, shouldSave: boolean = true) => {
const editing = isEditing;
currentContent = $parser.getContent(id);
if (editing && shouldSave) {
// TODO: Save updated content.
}
isEditing = !editing;
};
</script>
<section class={`note-leather flex flex-col space-y-2 ${sectionClass}`}>
<!-- This component is recursively structured. The base case is single block of content. -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<section
id={rootId}
class={`note-leather w-full flex space-x-2 ${sectionClass}`}
on:mouseover={handleFocus}
on:focus={handleFocus}
>
<!-- Zettel base case -->
{#if orderedChildren.length === 0 || depth >= 4}
<P firstupper={isSectionStart}>
{@html $parser.getContent(rootId)}
</P>
{:else}
<div class='flex flex-col space-y-2'>
<Heading tag={getHeadingTag(depth)} class='h-leather'>
{title}
</Heading>
<!-- Recurse on child indices and zettels -->
{#each orderedChildren as id, index}
<svelte:self rootId={id} depth={depth + 1} {allowEditing} isSectionStart={index === 0} />
{/each}
</div>
{/if}
{#if allowEditing}
<div class={`flex flex-col space-y-2 justify-start ${$hoverTargetId === rootId ? 'visible' : 'invisible'}`}>
<Button class='btn-leather' size='sm' outline>
<CaretUpSolid />
</Button>
<Button class='btn-leather' size='sm' outline>
<CaretDownSolid />
</Button>
<Button class='btn-leather' size='sm' outline>
<EditOutline />
</Button>
<Tooltip class='tooltip-leather' type='auto' placement='top'>
Edit
</Tooltip>
</div>
{/if}
</section>
<!-- <section class={`note-leather grid grid-cols-[1fr_auto] gap-2 ${sectionClass}`}>
<div class={`flex flex-col space-y-2 ${depth > 0 ? 'border-l-gray-500 border-l pl-2' : ''}`}>
{#if depth < 4}
<Heading tag={getHeadingTag(depth)} class='h-leather'>{title}</Heading>
{#each orderedChildren as id, index}
{#if childIndices.includes(id)}
<svelte:self rootIndexId={id} depth={depth + 1} {allowEditing} />
{:else if (childZettels.includes(id))}
<div class='grid grid-cols-[1fr_auto] gap-2'>
<P class='note-leather' firstupper={index === 0}>
<div class='note-leather grid grid-cols-[1fr_auto] gap-2'>
{#if isEditing.get(id)}
<form>
<Textarea class='textarea-leather' rows={5} bind:value={editorContent[id]}>
<div slot='footer' class='flex justify-end'>
<Button class='btn-leather' size='sm' outline on:click={() => toggleEditing(id, false)}>
Cancel
</Button>
<Button class='btn-leather' size='sm' on:click={() => toggleEditing(id)}>
Save
</Button>
</div>
</Textarea>
</form>
{:else}
<P class='border-l-gray-500 border-l pl-2' firstupper={index === 0}>
{@html $parser.getContent(id)}
</P>
{/if}
{#if allowEditing}
<div class='flex flex-col space-y-2 justify-start'>
<div class='col-start-2 flex flex-col space-y-2 justify-start'>
<Button class='btn-leather' size='sm' outline>
<CaretUpSolid />
</Button>
<Button class='btn-leather' size='sm' outline>
<CaretDownSolid />
</Button>
<Button class='btn-leather' size='sm' outline>
<Button class='btn-leather' size='sm' outline on:click={() => toggleEditing(id)}>
<EditOutline />
</Button>
<Tooltip class='tooltip-leather' type='auto' placement='top'>
@ -67,4 +153,18 @@ @@ -67,4 +153,18 @@
{@html $parser.getContent(rootIndexId)}
</P>
{/if}
</section>
</div>
{#if allowEditing}
<div class='col-start-2 flex flex-col space-y-2 justify-start'>
<Button class='btn-leather' size='sm' outline>
<CaretUpSolid />
</Button>
<Button class='btn-leather' size='sm' outline>
<CaretDownSolid />
</Button>
<Button class='btn-leather' size='sm' outline>
<EditOutline />
</Button>
</div>
{/if}
</section> -->

6
src/lib/parser.ts
Unescape View File

@ -183,7 +183,7 @@ export default class Pharos { @@ -183,7 +183,7 @@ export default class Pharos {
* @returns The IDs of any child indices of the index with the given ID.
*/
getChildIndexIds(id: string): string[] {
return Array.from(this.indexToChildEventsMap.get(id)!)
return Array.from(this.indexToChildEventsMap.get(id) ?? [])
.filter(id => this.eventToKindMap.get(id) === 30040);
}
@ -191,7 +191,7 @@ export default class Pharos { @@ -191,7 +191,7 @@ export default class Pharos {
* @returns The IDs of any child zettels of the index with the given ID.
*/
getChildZettelIds(id: string): string[] {
return Array.from(this.indexToChildEventsMap.get(id)!)
return Array.from(this.indexToChildEventsMap.get(id) ?? [])
.filter(id => this.eventToKindMap.get(id) !== 30040);
}
@ -199,7 +199,7 @@ export default class Pharos { @@ -199,7 +199,7 @@ export default class Pharos {
* @returns The IDs of any child nodes in the order in which they should be rendered.
*/
getOrderedChildIds(id: string): string[] {
return Array.from(this.indexToChildEventsMap.get(id)!);
return Array.from(this.indexToChildEventsMap.get(id) ?? []);
}
/**

2
src/lib/stores.ts
Unescape View File

@ -8,3 +8,5 @@ export let alexandriaKinds = readable<number[]>([30040, 30041]); @@ -8,3 +8,5 @@ export let alexandriaKinds = readable<number[]>([30040, 30041]);
export let feedType = writable<FeedType>(FeedType.Relays);
export let editorText = writable<string>('');
export let hoverTargetId = writable<string | null>(null);

2
src/routes/new/compose/+page.svelte
Unescape View File

@ -9,6 +9,6 @@ @@ -9,6 +9,6 @@
<div class='w-full flex justify-center'>
<main class='main-leather flex flex-col space-y-4 max-w-2xl w-full mt-4 mb-4'>
<Heading tag='h1' class='h-leather mb-2'>Compose</Heading>
<Preview rootIndexId={$parser.getRootIndexId()} allowEditing={true} />
<Preview rootId={$parser.getRootIndexId()} allowEditing={true} />
</main>
</div>

Write Preview
Loading…
Cancel
Save