bholtbholt / passages Goto Github PK

<script lang="ts">
  import type { Passage } from '../src/types';
  import { nanoid } from 'nanoid/non-secure';

  export let latestChapter = 1;
  let chapter = latestChapter;
  let html = 'some content';

  // let showToolbar = false;
  let showToolbar = true;

  function submitPassage() {
    const passage: Passage = { html, chapter, id: nanoid() };
    console.log(passage);
    latestChapter = chapter;
    this.reset();
  }

  function resetPlaceholder() {
    if (this.innerText.trim() === '') this.innerHTML = '';
  }

  import UIButton from './UIButton.svelte';
  import UIButtonSecondary from './UIButtonSecondary.svelte';
  import Chapter from './Chapter.svelte';
</script>

<form class="mt-6" on:submit|preventDefault={submitPassage}>
  {#if chapter !== latestChapter}
    <Chapter>{chapter}</Chapter>
  {/if}

  {#if showToolbar && html}
    <div class="flex space-x-2 xjustify-center px-6">
      <UIButtonSecondary class="py-2 px-2"
        ><svg
          aria-hidden="true"
          focusable="false"
          class="w-3 h-3"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 384 512"
          ><path
            fill="currentColor"
            d="M321.1 242.4C340.1 220.1 352 191.6 352 160c0-70.59-57.42-128-128-128L32 32.01c-17.67 0-32 14.31-32 32s14.33 32 32 32h16v320H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h224c70.58 0 128-57.41 128-128C384 305.3 358.6 264.8 321.1 242.4zM112 96.01H224c35.3 0 64 28.72 64 64s-28.7 64-64 64H112V96.01zM256 416H112v-128H256c35.3 0 64 28.71 64 63.1S291.3 416 256 416z"
          /></svg
        ></UIButtonSecondary
      >
      <UIButtonSecondary class="py-2 px-2"
        ><svg
          aria-hidden="true"
          focusable="false"
          class="w-3 h-3"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 384 512"
          ><path
            fill="currentColor"
            d="M384 64.01c0 17.69-14.31 32-32 32h-58.67l-133.3 320H224c17.69 0 32 14.31 32 32s-14.31 32-32 32H32c-17.69 0-32-14.31-32-32s14.31-32 32-32h58.67l133.3-320H160c-17.69 0-32-14.31-32-32s14.31-32 32-32h192C369.7 32.01 384 46.33 384 64.01z"
          /></svg
        ></UIButtonSecondary
      >
      {#if chapter === latestChapter}
        <UIButtonSecondary class="ml-autox" on:click={() => (chapter = latestChapter + 1)}>
          Start new chapter
        </UIButtonSecondary>
      {/if}
    </div>
  {/if}
  <div
    class="w-full mb-16
      font-serif dark:text-gray-50 indent-6
      focus:outline-none
      text-xl leading-relaxed"
    on:click={() => (showToolbar = true)}
    on:blur={resetPlaceholder}
    bind:innerHTML={html}
    contenteditable="true"
    placeholder="Add your passage to the story…"
  />

  {#if showToolbar && html}
    <div class="flex">
      <UIButton>Add passage</UIButton>
    </div>
  {/if}
</form>

<style>
  [contenteditable]:empty:not(:focus):before {
    content: attr(placeholder);
    color: theme('colors.gray.400');
  }
</style>