Remade the edit notes popup into a fullscreen editor; added CheckIcon…

… and DeleteIcon for saving and deleting notes; added a route in /notes/+page.svelte to the edit route

src/lib/components/NoteDialog.svelte

@@ -5,9 +5,11 @@
     import { EditIcon } from '$lib/icons';
     import { t, selectedVerses, bodyFontSize, currentFont } from '$lib/data/stores';
     import { editNote, addNote } from '$lib/data/notes';
+    import { goto } from '$app/navigation';
 
     export let note = undefined;
     export let editing = false;
+    export let show;
 
     let id = 'note';
     let modal;
@@ -73,7 +75,15 @@
                     </button>
                 {/if}
             </div>
-            <div style:word-wrap="break-word">
+            <!-- TEST ----------------------------------------------------------------------- -->
+            {#if editing}
+                { goto(`/notes/edit/${note.date}`) }
+
+            {/if}
+
+            <!-- TEST ----------------------------------------------------------------------- -->
+
+            <!-- <div style:word-wrap="break-word">
                 {#if editing}
                     <textarea bind:value={text} class="dy-textarea w-full" />
                 {:else if text !== undefined}
@@ -95,7 +105,7 @@
                         >{$t['Button_OK']}</button
                     >
                 </div>
-            {/if}
+            {/if} -->
         </div>
     </svelte:fragment>
 </Modal>

src/lib/icons/CheckIcon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    // Check from https://fonts.google.com/icons
+    // 'FILL' 0,
+    // 'wght' 400,
+    // 'GRAD' 0,
+    // 'opsz' 24
+    export let color = 'black';
+    export let size = '24';
+</script>
+
+<svg fill={color} xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 -960 960 960">
+    <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+</svg>

src/lib/icons/DeleteIcon.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    // Delete SVG vector icon from https://www.svgrepo.com/svg/453328/delete
+    export let color = 'black';
+    export let size = '24';
+</script>
+
+<svg fill={color} xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 0 24 24"
+    ><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" /></svg>

src/lib/icons/index.js

@@ -6,8 +6,10 @@ import ArrowForwardIcon from './ArrowForwardIcon.svelte';
 import BibleIcon from './BibleIcon.svelte';
 import BookmarkIcon from './BookmarkIcon.svelte';
 import BookmarkOutlineIcon from './BookmarkOutlineIcon.svelte';
+import CheckIcon from './CheckIcon.svelte';
 import ChevronIcon from './ChevronIcon.svelte';
 import CopyContentIcon from './CopyContentIcon.svelte';
+import DeleteIcon from './DeleteIcon.svelte';
 import DeleteSweepIcon from './DeleteSweepIcon.svelte';
 import DropdownIcon from './DropdownIcon.svelte';
 import EditIcon from './EditIcon.svelte';
@@ -39,8 +41,10 @@ export {
     BibleIcon,
     BookmarkIcon,
     BookmarkOutlineIcon,
+    CheckIcon,
     ChevronIcon,
     CopyContentIcon,
+    DeleteIcon,
     DeleteSweepIcon,
     DropdownIcon,
     EditIcon,

src/routes/notes/+page.svelte

@@ -20,7 +20,8 @@
                 goto(`${base}/`);
                 break;
             case $t['Annotation_Menu_Edit']:
-                modal.open(MODAL_NOTE, note);
+                // modal.open(MODAL_NOTE, note);
+                goto(`/notes/edit/${note.date}`);
                 break;
             case $t['Annotation_Menu_Share']:
                 await shareAnnotation(note);

src/routes/notes/edit/[noteid]/+page.js

@@ -0,0 +1,18 @@
+import { getNotes } from '$lib/data/notes';
+
+export async function load({ params }) {
+    const { noteid } = params;
+    const date = parseInt(noteid, 10);
+    const allNotes = await getNotes();
+    const note = allNotes.find((item) => item.date === date);
+
+    console.log('note %o allNotes %o noteid %o date %o' , note, allNotes, noteid, date);
+
+    if (!note) {
+        throw new Error('Note not found');
+    }
+
+    return { note };
+}
+
+

src/routes/notes/edit/[noteid]/+page.svelte

@@ -0,0 +1,75 @@
+<script>
+    import Navbar from '$lib/components/Navbar.svelte';
+    import { t } from '$lib/data/stores';
+    import { ArrowBackIcon, DeleteIcon, CheckIcon } from '$lib/icons';
+    import { removeNote } from '$lib/data/notes';
+    import { selectedVerses } from '$lib/data/stores';
+    import { editNote,addNote } from '$lib/data/notes';
+
+    export let data;
+    let note = data.note;
+    let text = note.text;
+
+    function closeEditor() {
+        history.back();
+    }
+    async function deleteNote() {
+        await removeNote(note.date);
+        closeEditor();
+    }
+    async function modifyNote() {
+        if (note !== undefined) {
+            await editNote({
+                note: note,
+                newText:text
+            });
+        } else {
+            await addNote({
+                docSet: $selectedVerses[0].docSet,
+                collection: $selectedVerses[0].collection,
+                book: $selectedVerses[0].book,
+                chapter: $selectedVerses[0].chapter,
+                verse: $selectedVerses[0].verse,
+                text,
+                reference: $selectedVerses[0].reference
+            });
+        }
+        closeEditor();
+    }
+</script>
+
+
+<!--create a close button for this editor that closes on a button when clicked -->
+<div class="fullscreen-editor">
+    <Navbar>
+        <label for="sidebar" slot="center" >
+            <div class="btn btn-ghost normal-case text-xl" >{$t['Annotation_Note_Edit']}</div>
+        </label>
+
+        <div slot="right-buttons" style="">
+            <button on:click={deleteNote} class="dy-btn dy-btn-ghost dy-btn-circle"><DeleteIcon color="white" /></button>
+            <button on:click={modifyNote} class="dy-btn dy-btn-ghost p-1"><CheckIcon color="white" /></button>
+        </div>
+
+    </Navbar>
+    <!-- <button on:click={closeEditor} class="close-button"><ArrowBackIcon color="black" /></button> -->
+
+    <!-- <p>{note.text}</p> -->
+
+    <div class="flex justify-center mt-7 h-full max-w-screen-md mx-auto">
+        <textarea bind:value={text} class="dy-textarea dy-textarea-bordered w-full h-5/6 shadow-md" />
+    </div>
+
+    <!-- flex justify-center box-border mt-7 h-full -->
+    <!-- dy-textarea dy-textarea-bordered w-11/12 h-5/6 shadow-md -->
+    <!-- to save the data, save it to the store -->
+</div>
+
+
+<style>
+    .fullscreen-editor{
+        width: 100%;
+        height: 100%;
+        position: fixed;
+    }
+</style>

static/book-details/C01/book-details-JHN.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><book-details><f>73-JHNeng-web.usfm</f><features type="book"><e name="wj-marked" value="true"/></features></book-details>

static/book-details/C01/book-details-LUK.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><book-details><f>72-LUKeng-web.usfm</f><features type="book"><e name="wj-marked" value="true"/></features></book-details>

static/book-details/C01/book-details-MAT.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><book-details><f>70-MATeng-web.usfm</f><page num="1"><audio><f src="d1" len="224496" size="1825367">B01___01_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-01-timing.txt</y></audio></page><page num="2"><audio><f src="d1" len="225907" size="1836442">B01___02_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-02-timing.txt</y></audio></page><page num="3"><audio><f src="d1" len="157100" size="1285781">B01___03_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-03-timing.txt</y></audio></page><page num="4"><audio><f src="d1" len="228833" size="1860057">B01___04_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-04-timing.txt</y></audio></page><page num="5"><audio><f src="d1" len="398158" size="3214663">B01___05_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-05-timing.txt</y></audio></page><page num="6"><audio><f src="d1" len="298841" size="2420122">B01___06_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-06-timing.txt</y></audio></page><page num="7"><audio><f src="d1" len="230348" size="1871969">B01___07_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-07-timing.txt</y></audio></page><page num="8"><audio><f src="d1" len="304379" size="2464426">B01___08_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-08-timing.txt</y></audio></page><page num="9"><audio><f src="d1" len="341786" size="2763685">B01___09_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-09-timing.txt</y></audio></page><page num="10"><audio><f src="d1" len="328777" size="2659614">B01___10_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-10-timing.txt</y></audio></page><page num="11"><audio><f src="d1" len="252552" size="2049812">B01___11_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-11-timing.txt</y></audio></page><page num="12"><audio><f src="d1" len="441626" size="3562615">B01___12_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-12-timing.txt</y></audio></page><page num="13"><audio><f src="d1" len="503850" size="4060195">B01___13_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-13-timing.txt</y></audio></page><page num="14"><audio><f src="d1" len="284839" size="2308110">B01___14_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-14-timing.txt</y></audio></page><page num="15"><audio><f src="d1" len="318903" size="2580620">B01___15_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-15-timing.txt</y></audio></page><page num="16"><audio><f src="d1" len="260023" size="2109580">B01___16_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-16-timing.txt</y></audio></page><page num="17"><audio><f src="d1" len="256157" size="2078651">B01___17_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-17-timing.txt</y></audio></page><page num="18"><audio><f src="d1" len="298109" size="2414063">B01___18_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-18-timing.txt</y></audio></page><page num="19"><audio><f src="d1" len="277577" size="2250014">B01___19_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-19-timing.txt</y></audio></page><page num="20"><audio><f src="d1" len="282384" size="2288257">B01___20_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-20-timing.txt</y></audio></page><page num="21"><audio><f src="d1" len="428199" size="3454990">B01___21_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-21-timing.txt</y></audio></page><page num="22"><audio><f src="d1" len="318328" size="2576022">B01___22_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-22-timing.txt</y></audio></page><page num="23"><audio><f src="d1" len="332121" size="2686363">B01___23_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-23-timing.txt</y></audio></page><page num="24"><audio><f src="d1" len="372506" size="3009446">B01___24_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-24-timing.txt</y></audio></page><page num="25"><audio><f src="d1" len="331389" size="2680512">B01___25_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-25-timing.txt</y></audio></page><page num="26"><audio><f src="d1" len="642978" size="5173221">B01___26_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-26-timing.txt</y></audio></page><page num="27"><audio><f src="d1" len="551863" size="4444300">B01___27_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-27-timing.txt</y></audio></page><page num="28"><audio><f src="d1" len="174132" size="1422455">B01___28_Matthew_____ENGWEBN2DA.mp3</f><y>C01-41-MAT-28-timing.txt</y></audio></page><features type="book"><e name="wj-marked" value="true"/></features></book-details>

static/book-details/C01/book-details-MRK.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><book-details><f>71-MRKeng-web.usfm</f><features type="book"><e name="wj-marked" value="true"/></features></book-details>

static/book-details/C02/book-details-JHN.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><book-details><f>JHN.usfm</f></book-details>

static/book-details/C02/book-details-LUK.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><book-details><f>LUK.usfm</f></book-details>

static/book-details/C02/book-details-MAT.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><book-details><f>MAT.usfm</f></book-details>

static/book-details/C02/book-details-MRK.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><book-details><f>MRK.usfm</f></book-details>