non-subtree but working

arvindrag · Apr 14, 2024 · c128f7b · c128f7b
1 parent 45d32d5
commit c128f7b
Show file tree

Hide file tree

Showing 5 changed files with 241 additions and 104 deletions.
diff --git a/arneson/index.html b/arneson/index.html
@@ -8,6 +8,8 @@
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
       <!-- Compiled and minified JavaScript see https://materializecss.com -->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+      <script src="https://unpkg.com/dexie/dist/dexie.js"></script>
+      <script src="src/storage.js" defer></script>
       <script src="src/static_html.js" defer></script>
       <script src="src/main.js" defer></script>
       <link rel=stylesheet href="src/main.css">
@@ -21,7 +23,11 @@
         </nav>
       </header>
       <main id="main">
-        <div id="cards" class="container"></div>
+        <div class="row">
+          <div id="active_tags" class="col s2 wrap"></div>
+          <div class="offset-s2 col"></div>
+          <div id="cards" class="row"></div>
+        </div>
       </main>
     <footer class="page-footer grey darken-4"></footer>
     <div class="col container">

diff --git a/arneson/src/main.css b/arneson/src/main.css
@@ -1,44 +1,47 @@
 body {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
- }
- main {
-  flex: 1 0 auto;
- }
- div.mainw {
-     position: relative;
-     width: 100%;
-     height: 80vh;
-  }
-  textarea {
-    color:#ffffffff;
- }
- div.fillw {
-     width: 100%;
-  }
- div.fillh {
-     height: 100%;
-  }  
- div.mcard {
-     width: 100px;
-     height: 50px;
-  }
+display: flex;
+min-height: 100vh;
+flex-direction: column;
+}
+main {
+flex: 1 0 auto;
+}
+div.mainw {
+    position: relative;
+    width: 100%;
+    height: 80vh;
+}
+textarea {
+  color:#ffffffff;
+}
+div.fillw {
+    width: 100%;
+}
+div.fillh {
+    height: 100%;
+}  
+div.mcard {
+    width: 100px;
+    height: 50px;
+}
 /*.btn input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
- color: #b71c1c !important;
+color: #b71c1c !important;
 }*/
- div.myscroll {
-    height: 100%;
+div.wrap {
+  overflow-x:auto;
+}
+div.myscroll {
+  height: 100%;
 /*    overflow-x: auto;*/
 /*    overflow-y: auto;*/
-    display: flex;
+  display: flex;
 /*    flex-wrap: nowrap;*/
-    position:relative;
-/*    white-space: nowrap;/*using nowrap*/*/
- }
- .myscroll::-webkit-scrollbar {
-   display: none;
- }
- .no-uppercase {
-      text-transform: unset !important;
- }
+  position:relative;
+/*    white-space: nowrap;/*using nowrap*/
+}
+.myscroll::-webkit-scrollbar {
+  display: none;
+}
+.no-uppercase {
+    text-transform: unset !important;
+}
diff --git a/arneson/src/main.js b/arneson/src/main.js
@@ -1,8 +1,9 @@
 class Card {
-  constructor(parent, text) {
-    this.parent = parent;
+  constructor(parent, text, tags) {
     this.elem = CARD.genElementAndAttach(this);
     this.elem.card = this;
+    this.parent = parent;
+    this.tags = tags;
     this.setText(text);
     this.cardElem.addEventListener("click", () => {
       this.setFocus();
@@ -11,15 +12,15 @@ class Card {
       this.edit();
     });
   }
-  static genAppend(parent, text) {
-    const card = new Card(parent, text);
+  static genAppend(parent, text, tags) {
+    const card = new Card(parent, text, tags);
     parent.elem.appendChild(card.elem);
     card.setFocus();
     return card;
   }
-  static genAfter(after, parent, text) {
-    const card = new Card(parent, text);
-    after.after(card.elem);
+  genAfter(parent, text) {
+    const card = new Card(parent, text, this.tags.slice(0));
+    this.elem.after(card.elem);
     card.setFocus();
     return card;
   }
@@ -39,6 +40,7 @@ class Card {
       this.parent.curFocus.unFocus();
     }
     this.parent.curFocus = this;
+    this.parent.updateTags(this.tags);
     if (this.cardElem.classList.contains("red")) {
       this.cardElem.classList.remove("red");
     }
@@ -57,80 +59,171 @@ class Card {
     }
   }
   edit() {
-    this.parent.editModal.openWith(this.text);
+    this.parent.editTextModal.open(this.text.innerHTML, (txt) => {
+      this.text.innerHTML = txt;
+    });
+  }
+  editTags() {
+    this.parent.editTagsModal.open(this.tags, (tags) => {
+      this.tags = tags;
+      this.setFocus();
+    });
+  }
+}
+class EditTagsModal {
+  constructor(parent) {
+    this.elem = EDIT_TAGS_MODAL.genElementAndAttachAppend(parent, this);
+    this.instance = M.Modal.init(this.elem);
+    this.textElemRef = null;
+    this.saveBtn.addEventListener("click", () => {
+      this.doSave();
+    });
+  }
+  doSave() {
+    console.log(this.chipsElem.querySelector(".input"));
+    this.onSaveCallBack(
+      this.chips.chipsData.map((d) => {
+        return d.tag;
+      })
+    );
+    this.instance.close();
+    this.onSaveCallBack = null;
+  }
+  open(init_tags, callback) {
+    this.chips = M.Chips.init(this.chipsElem, {
+      data: init_tags.map((t) => {
+        return { tag: t };
+      }),
+    });
+    this.onSaveCallBack = callback;
+    this.instance.open();
+    const input = this.chipsElem.querySelector(".input");
+    input.focus();
   }
 }
-class EditModal {
-  constructor(after) {
-    this.elem = EDIT_MODAL.genElementAndAttach(this);
-    after.after(this.elem);
+class EditTextModal {
+  constructor(parent) {
+    this.elem = EDIT_TEXT_MODAL.genElementAndAttachAppend(parent, this);
+    // after.after(this.elem);
     this.instance = M.Modal.init(this.elem);
     this.textElemRef = null;
     this.saveBtn.addEventListener("click", () => this.doSave());
   }
   doSave() {
     if (!this.textarea.value == "") {
-      this.textElemRef.innerHTML = this.textarea.value;
+      this.onSaveCallBack(this.textarea.value);
     }
-    this.textElemRef = null;
+    this.onSaveCallBack = null;
   }
-  openWith(textElemRef) {
-    this.textElemRef = textElemRef;
-    this.textarea.value = textElemRef.innerHTML
+  open(init_text, callback) {
+    this.textarea.value = init_text;
+    this.onSaveCallBack = callback;
     this.instance.open();
     this.textarea.focus();
     this.textarea.select();
   }
 }
 class CardsSet {
-  constructor(elem_id) {
-    this.elem = document.querySelector("#" + elem_id);
+  constructor(parent_elem) {
+    this.elem = CARDS_SET.genElementAndAttach();
+    this.elem.cardsSet = this;
     this.curFocus = null;
-    this.initKeyMap();
-    this.editModal = new EditModal(this.elem);
-  }
-  initKeyMap() {
-    const quietKeys = new Set([
-      "ArrowDown",
-      "ArrowUp",
-      "ArrowLeft",
-      "ArrowRight",
-      "Enter",
-    ]);
-    document.addEventListener("keyup", (e) => {
-      if (this.editModal.instance.isOpen) {
-        if (e.key == "Enter") {
-          this.editModal.doSave();
-          this.editModal.instance.close();
-          return;
-        }
-      } else {
-        if (e.key == "ArrowUp") {
-          this.curFocus.focusPrevious();
-          return;
-        }
-        if (e.key == "ArrowDown") {
+    this.editTextModal = new EditTextModal(parent_elem);
+    this.editTagsModal = new EditTagsModal(parent_elem);
+    const active_tags_div = document.querySelector("#active_tags");
+    this.tagsElem = ACTIVE_TAGS.genElementAndAttachAppend(
+      active_tags_div,
+      this
+    );
+  }
+  keyMap(e) {
+    if (e.key == "Shift") {
+      return
+    }
+    if (this.editTextModal.instance.isOpen) {
+      if (e.key == "Enter") {
+        console.log("enter on text");
+        this.editTextModal.doSave();
+        this.editTextModal.instance.close();
+        return;
+      }
+    } else if (this.editTagsModal.instance.isOpen) {
+      if (e.key == "Enter") {
+        console.log("enter on tags");
+        this.editTagsModal.doSave();
+        this.editTagsModal.instance.close();
+        return;
+      }
+    } else {
+      if (e.key == "ArrowUp") {
+        this.curFocus.focusPrevious();
+        return;
+      }
+      if (e.key == "ArrowDown") {
+        if (!e.shiftKey) {
+          M.toast({ html: "<b>down: next</b>" });
           this.curFocus.focusNext();
-          return;
+        } else {
+          M.toast({ html: "<b>shift+down: new</b>" });
+          this.curFocus.genAfter(this, "And then...").edit();
         }
-        if (e.key == "Enter") {
-          this.curFocus.edit();
-          return;
-        }
-        if (e.key == "n") {
-          M.toast({ html: "<b>n: new</b>" });
-          const card = Card.genAfter(this.curFocus.elem, this, "And then...");
-          card.edit();
-          return;
+        return;
+      }
+      if (e.key == "ArrowRight") {
+        if (!e.shiftKey) {
+          M.toast({ html: "<b>right: into</b>" });
+          // this.curFocus.focusNext();
+        } else {
+          M.toast({ html: "<b>shift+right: subtree</b>" });
+          // this.curFocus.genAfter(this, "And then...").edit();
         }
-        M.toast({ html: "<b>" + e.key + "</b>" });
+        return;
       }
-    });
+      if (e.key == "Enter") {
+        console.log("enter on nothing");
+        M.toast({ html: "<b>enter: edit</b>" });
+        this.curFocus.edit();
+        return;
+      }
+      if (e.key == "n") {
+        M.toast({ html: "<b>n: new</b>" });
+        this.curFocus.genAfter(this, "And then...").edit();
+        return;
+      }      
+      if (e.key == "t") {
+        M.toast({ html: "<b>t: tags</b>" });
+        this.curFocus.editTags();
+        return;
+      }
+      M.toast({ html: "<b>" + e.key + "</b>" });
+    }
+  }
+  updateTags(tags) {
+    this.tags.innerHTML = tags
+      .map((t) => {
+        return '<div class="row">#' + t.trim() + "</div>";
+      })
+      .join("\n");
   }
   addCard(text) {
-    const card = Card.genAppend(this, text);
+    const card = Card.genAppend(this, text, ["notmuch"]);
+  }
+}
+class CardSetTree {
+  constructor(elem) {
+    this.elem = elem;
+    this.root = new CardsSet(this.elem);
+    this.elem.appendChild(this.root.elem);
+    this.focus = this.root
+    document.addEventListener("keyup", (e) => {
+      this.focus.keyMap(e);
+    });
   }
 }
-cardsSet = new CardsSet("cards");
-cardsSet.addCard("Once upon a time...");
-document.append();
+const tree = new CardSetTree(document.querySelector("#cards"));
+tree.root.addCard("Once upon a time...");
+
+// cardsSet = new CardsSet("cards");
+// cardsSet.addCard("Once upon a time...");
+// document.append();
+