add tree component

fujohnwang · Mar 16, 2022 · ead7fd2 · ead7fd2
1 parent e8a72dd
commit ead7fd2
Show file tree

Hide file tree

Showing 11 changed files with 1,437 additions and 123 deletions.
diff --git a/public/bundle.css b/public/bundle.css
diff --git a/public/bundle.js b/public/bundle.js
diff --git a/public/bundle.js.map b/public/bundle.js.map
diff --git a/public/manifest.json b/public/manifest.json
@@ -11,7 +11,8 @@
     "tabs",
     "scripting",
     "bookmarks",
-    "notifications"
+    "notifications",
+    "tts"
   ],
   "background": {
     "service_worker": "background.js",

diff --git a/src/App.svelte b/src/App.svelte
@@ -8,13 +8,15 @@
     import Default from './SaveBookmark.svelte';
     import Settings from './Settings.svelte';
     import ResultList from "./ResultList.svelte";
+    import FolderSelection from "./FolderSelection.svelte";
 
     import {searchKeyword} from './repo.js';
 
     const routes = {
         '/': Default,
         '/settings': Settings,
         '/results': ResultList,
+        '/folders':FolderSelection,
         '*': Default
     }
 

diff --git a/src/FolderSelection.svelte b/src/FolderSelection.svelte
@@ -0,0 +1,40 @@
+<script>
+    import BookmarkFolderTree from "./tree/BookmarkFolderTree.svelte";
+    import {onMount} from "svelte";
+
+    let nodes = [];
+
+    onMount(async () => {
+        chrome.bookmarks.getTree(function (results) {
+            console.log("populate tree with resuts: %o", results)
+            nodes = [...results[0].children]
+        });
+    })
+
+</script>
+
+
+<div class="flex flex-wrap -m-2">
+    <div class="p-2 w-full">
+        <BookmarkFolderTree bind:nodes={nodes}/>
+    </div>
+
+    <div class="flex justify-between items-center p-2 mx-2 space-x-2 w-full">
+        <div class="flex-none">
+            <button class="btn btn-primary">New Folder</button>
+        </div>
+        <div class="grow">
+            &nbsp;
+        </div>
+        <div class="flex-none">
+            <div class="flex justify-end items-center space-x-2">
+                <button class="btn btn-primary">Cancel</button>
+                <button class="btn btn-primary">Choose</button>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+
+
diff --git a/src/SaveBookmark.svelte b/src/SaveBookmark.svelte
@@ -1,5 +1,6 @@
 <script>
     import {onMount} from "svelte";
+    import {push, pop, replace} from 'svelte-spa-router';
 
     let title = "";
     let url = "";
@@ -24,6 +25,27 @@
         });
     }
 
+    function openChromeBookmarkPopup() {
+        push('/folders')
+        // console.log("send bookmark key combination to open default bookmark popup...")
+        // window.dispatchEvent(new KeyboardEvent('keydown', {
+        //     'key': 'd',
+        //     shiftKey: false,
+        //     ctrlKey: false,
+        //     metaKey: true
+        // }));
+        // chrome.tts.speak('Hello, world.', {'lang': 'en-US', 'rate': 1.0, 'enqueue': true});
+        //
+        // chrome.bookmarks.getTree(function (nodes) {
+        //     nodes.forEach((node) => {
+        //         if(node.children && node.children.length) {
+        //             console.log("add folder : %o", node)
+        //         }
+        //     })
+        // })
+
+    }
+
     function save() {
         // save bookmark and then
         chrome.runtime.sendMessage({
@@ -48,7 +70,8 @@
             <label class="label" for="title">
                 <span class="label-text">Title</span>
             </label>
-            <input id="title" type="text" placeholder="Type here" class="input input-bordered input-sm w-full" bind:value={title}/>
+            <input id="title" type="text" placeholder="Type here" class="input input-bordered input-sm w-full"
+                   bind:value={title}/>
         </div>
     </div>
     <div class="p-2 w-full">
@@ -57,7 +80,8 @@
                 <span class="label-text">Folder</span>
             </label>
             <div class="inline-flex space-x-2">
-                <select id="parentFolder" class="select select-bordered select-sm w-4/5" bind:value={folderSelected} disabled>
+                <select id="parentFolder" class="select select-bordered select-sm w-4/5" bind:value={folderSelected}
+                        disabled>
                     <option value="volvo">Volvo</option>
                     <option value="saab">Saab</option>
                     <option value="opel">Opel</option>
@@ -68,10 +92,14 @@
                     <!--                    </option>-->
                     <!--                {/each}-->
                 </select>
-                <button class="btn btn-sm btn-ghost w-1/5 bg-transparent text-accent">
-                    More<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                        </svg>
+                <button class="btn btn-sm btn-ghost w-1/5 bg-transparent text-accent"
+                        on:click={openChromeBookmarkPopup}>
+                    More
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                         stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                              d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"/>
+                    </svg>
                 </button>
             </div>
 

diff --git a/src/tree/BookmarkFolderTree.svelte b/src/tree/BookmarkFolderTree.svelte
@@ -0,0 +1,11 @@
+<script>
+    import Node from "./BookmarkNode.svelte";
+
+    export let nodes = [];
+</script>
+
+<ul class="m-1 p-1">
+    {#each nodes as node}
+        <Node bind:node={node}/>
+    {/each}
+</ul>
diff --git a/src/tree/BookmarkNode.svelte b/src/tree/BookmarkNode.svelte
@@ -0,0 +1,46 @@
+<script>
+    import {slide} from 'svelte/transition';
+    import ParentFolderIcon from './ParentFolderIcon.svelte';
+    import LeafFolderIcon from './LeafFolderIcon.svelte';
+
+    export let node;
+    export let level = 0;
+
+    let expanded = false;
+
+    function toggle() {
+        expanded = !expanded;
+        if(expanded) {
+            chrome.bookmarks.getSubTree(node.id, function (results){
+                console.log(`subtree of ${node.title} is: %o`, results)
+            })
+        }
+    }
+</script>
+
+<li on:click={toggle} style="padding-left:{level*1}rem" class="cursor-pointer" transition:slide>
+    <div class="flex bg-gray-100 text-center justify-center">
+            {#if node.children && node.children.length }
+                <ParentFolderIcon/>
+            {:else}
+                <LeafFolderIcon/>
+            {/if}
+            <span>{node.title}</span>
+    </div>
+</li>
+
+<!--{#if node.children && expanded}-->
+<!--    {#each node.children as child}-->
+<!--        <svelte:self node={child} level={level+1}/>-->
+<!--    {/each}-->
+<!--{/if}-->
+
+<style>
+    li {
+        border-bottom: solid 1px #eee;
+        margin: 0 0;
+        padding: 1rem;
+        background: #fafafa;
+        display: flex;
+    }
+</style>
diff --git a/src/tree/LeafFolderIcon.svelte b/src/tree/LeafFolderIcon.svelte
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+    <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
+</svg>
diff --git a/src/tree/ParentFolderIcon.svelte b/src/tree/ParentFolderIcon.svelte
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+    <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V8a2 2 0 00-2-2h-5L9 4H4zm7 5a1 1 0 10-2 0v1H8a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V9z" />
+</svg>