wip cards

arvindrag · Apr 14, 2024 · 3490a1d · 3490a1d
1 parent c128f7b
commit 3490a1d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 24 deletions.
diff --git a/arneson/index.html b/arneson/index.html
@@ -25,8 +25,7 @@
       <main id="main">
         <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 id="cards" class="container row fillh"></div>
         </div>
       </main>
     <footer class="page-footer grey darken-4"></footer>
@@ -37,6 +36,6 @@
       </div>
     </div>
   </div>
-  </div>
+</div>
 </body>
 </html>
diff --git a/arneson/src/cards.js b/arneson/src/cards.js
diff --git a/arneson/src/main.js b/arneson/src/main.js
@@ -104,7 +104,6 @@ class EditTagsModal {
 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());
@@ -124,10 +123,12 @@ class EditTextModal {
   }
 }
 class CardsSet {
-  constructor(parent_elem) {
+  constructor(tree, parent_elem) {
+    this.tree = tree
     this.elem = CARDS_SET.genElementAndAttach();
     this.elem.cardsSet = this;
     this.curFocus = null;
+    this.child = null
     this.editTextModal = new EditTextModal(parent_elem);
     this.editTagsModal = new EditTagsModal(parent_elem);
     const active_tags_div = document.querySelector("#active_tags");
@@ -136,6 +137,15 @@ class CardsSet {
       this
     );
   }
+  focus(){
+    curFocus
+  }
+  unFocus(){
+    this.curFocus.child.hide()
+  }
+  hide(){
+    this.elem.classList.add("hide")
+  }
   keyMap(e) {
     if (e.key == "Shift") {
       return
@@ -175,7 +185,7 @@ class CardsSet {
           // this.curFocus.focusNext();
         } else {
           M.toast({ html: "<b>shift+right: subtree</b>" });
-          // this.curFocus.genAfter(this, "And then...").edit();
+          this.tree.addChildCardSetAndFocus(this.curFocus)
         }
         return;
       }
@@ -212,18 +222,29 @@ class CardsSet {
 class CardSetTree {
   constructor(elem) {
     this.elem = elem;
-    this.root = new CardsSet(this.elem);
+    this.root = new CardsSet(this, this.elem);
     this.elem.appendChild(this.root.elem);
     this.focus = this.root
     document.addEventListener("keyup", (e) => {
-      this.focus.keyMap(e);
+      this.focusKeyMap(e)
     });
   }
+  focusKeyMap(e){
+    this.focus.keyMap(e);
+  }
+  focus(thing){
+    this.focus.unfocus()
+    this.focus = thing
+  }
+  addChildCardSetAndFocus(parentCard){
+    const child = new CardsSet(this, this.elem)
+    child.addCard("And then")
+    parentCard.child = child
+    parentCard.parent.elem.after(child.elem)
+    this.focus(child)
+  }
 }
 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();
 
diff --git a/arneson/src/static_html.js b/arneson/src/static_html.js
@@ -27,26 +27,21 @@ class StaticHTML{
     return elem
   }  
 }
-const CARDS_SET = new StaticHTML("div", `<div class="container col"></div>`)
-const CARD = new StaticHTML("div",`<div class="row">
-  <div class="col s12 m6">
+const CARDS_SET = new StaticHTML("div", `<div class="cardsset col s3"></div>`)
+const CARD = new StaticHTML("div",
+`<div class="row s12">
     <div class="card waves-effect waves-light red lighten-2 ref_cardElem">
       <div class="card-content white-text">
         <p class="ref_text white-text"></p>
       </div>
     </div>
-  </div>
 </div>`)
-const ACTIVE_TAGS = new StaticHTML("div",`<div class="card grey darken-3">
-<div class="card-content white-text">
-<div class="ref_tags white-text col"></div>
-</div>
+const ACTIVE_TAGS = new StaticHTML("div",
+`<div class="card grey darken-3">
+  <div class="card-content white-text">
+    <div class="ref_tags white-text col"></div>
+  </div>
 </div>`)
-// const ACTIVE_TAGS = new StaticHTML("div",`<div class="card waves-effect waves-light red lighten-2 ref_cardElem">
-//       <div class="purple lighten-3 card-content white-text">
-//         <h6 class="ref_tags white-text">LaLaLa</h6>
-//       </div>
-//     </div>`)
 const EDIT_TEXT_MODAL = new StaticHTML("div",
 `<div class="modal purple lighten-2 white-text">
   <div class="modal-content">