From d6c4604fecdf71a607ba00a72b051d591eaf1c92 Mon Sep 17 00:00:00 2001
From: Salvador Melo <salmelo16@gmail.com>
Date: Wed, 30 Dec 2020 14:13:44 -0500
Subject: [PATCH] collapsible duties and projects

---
 Wicked Ones/wicked-ones.css  | 40 +++++++++++++++++++++
 Wicked Ones/wicked-ones.html | 67 +++++++++++++++++++++++++++---------
 2 files changed, 90 insertions(+), 17 deletions(-)

diff --git a/Wicked Ones/wicked-ones.css b/Wicked Ones/wicked-ones.css
index 05a30168aa..00154c9c05 100644
--- a/Wicked Ones/wicked-ones.css	
+++ b/Wicked Ones/wicked-ones.css	
@@ -278,6 +278,46 @@ input.sheet-zero {
   visibility: hidden;
 }
 
+/* Hiders */
+
+input.sheet-hider[value="hide"] + .sheet-hider {
+  display: none;
+}
+
+/* Clear default button styling */
+button.sheet-toggle {
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  border-style: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+/* .sheet-header > button.sheet-toggle {
+  float: right;
+} */
+
+/* Hide the section(s) that do not match the attribute value */
+input.sheet-direction:not([value="show"]) + button.sheet-toggle > span.sheet-show {
+  display: none;
+}
+input.sheet-direction:not([value="hide"]) + button.sheet-toggle > span.sheet-hide {
+  display: none;
+}
+
+span.sheet-hider-arrow {
+  position: relative;
+  right: -10px;
+  width: 0;
+  height: 0;
+
+  border-top: 10px solid black;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+}
+
 /* CLOCKS */
 
 .sheet-clocks .itemcontrol {
diff --git a/Wicked Ones/wicked-ones.html b/Wicked Ones/wicked-ones.html
index 6ae186c142..bd81720488 100644
--- a/Wicked Ones/wicked-ones.html	
+++ b/Wicked Ones/wicked-ones.html	
@@ -5,9 +5,9 @@
     </div>
     <div class="sheet-gear">
       <div class="header" data-i18n="gear">Gear</div>
-      <div class="auto-expand"><span name="attr_gear"></span>
-        <textarea spellcheck="false" name="attr_gear" data-i18n-placeholder="gear-placeholder" placeholder="Battle axe, spiked armor, horned helmet, bag of tasty snacks"></textarea>
-      </div>
+        <fieldset class="repeating_gear">
+          <input type="text" name="attr_gear"/>
+        </fieldset>
       <div class="header" data-i18n="supply">Supply</div>
     </div>
     <div class="sheet-stress">
@@ -25,23 +25,41 @@
       Minions
     </div>
     <div class="sheet-duties">
-      <div class="header" data-i18n="dungeon-duties">Dungeon Duties</div>
-      <div class="duties-header">
-        <div data-i18n="tier">Tier</div>
-        <div data-i18n="type">Type</div>
-        <div data-i18n="description">Description</div>
+      <div class="header"> 
+        <span data-i18n="dungeon-duties">Dungeon Duties</span>
+        <input type="hidden" class="direction" name="attr_hide-duties" value="show"/>
+        <button type="action" name="act_toggle-duties" class="toggle">
+          <span class="show">▼</span>
+          <span class="hide">◄</span>
+        </button>
       </div>
-      <fieldset class="repeating_duties">
-        <input type="text" name="attr_duty-tier"/>
-        <input type="text" name="attr_duty-type"/>
-        <div class="auto-expand"><span name="attr_duty-desc"></span>
-          <textarea pellcheck="false" name="attr_duty-desc"></textarea>
+      <input type="hidden" class="hider" name="attr_hide-duties"/>
+      <div class="hider">
+        <div class="duties-header">
+          <div data-i18n="tier">Tier</div>
+          <div data-i18n="type">Type</div>
+          <div data-i18n="description">Description</div>
         </div>
-      </fieldset>
+        <fieldset class="repeating_duties">
+          <input type="text" name="attr_duty-tier"/>
+          <input type="text" name="attr_duty-type"/>
+          <div class="auto-expand"><span name="attr_duty-desc"></span>
+            <textarea spellcheck="false" name="attr_duty-desc"></textarea>
+          </div>
+        </fieldset>
+      </div>
     </div>
     <div class="sheet-downtime clocks">
-      <div class="header" data-i18n="downtime-projects">Downtime Projects</div>
-      <div>
+      <div class="header">
+        <span data-i18n="downtime-projects">Downtime Projects</span>
+        <input type="hidden" class="direction" name="attr_hide-downtime-list" value="show"/>
+        <button type="action" name="act_toggle-downtime-list" class="toggle">
+          <span class="show">▼</span>
+          <span class="hide">◄</span>
+        </button>
+      </div>
+      <input type="hidden" name="attr_hide-downtime-list" class="hider"/>
+      <div class="hider">
         <ul data-i18n-list="projects-list">
           <li data-i18n="brew-project" data-i18n-list-item="brew"><strong>Brew</strong> Potions and Alchemicals</li>
           <li data-i18n="build-project" data-i18n-list-item="build"><strong>Build</strong> Locks, Traps, Tricks, and Rooms.</li>
@@ -132,4 +150,19 @@
   <div class="sheet-xp">
     XP
   </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/worker">
+  on("clicked:toggle-downtime-list clicked:toggle-duties", function(eventInfo) {
+    //get the right attribute for the button we clicked
+    var attr = eventInfo.triggerName.replace("clicked:toggle", "hide")
+    
+    // Check the current value of the hidden attribute.
+    getAttrs([attr], function(v) {
+      console.log(v)
+      // Toggle the hidden attribute value between "hide" and "show"
+      var set = {}
+      set[attr] = v[attr] !== "hide" ? "hide" : "show"
+      setAttrs(set);
+    });
+  });
+</script>
\ No newline at end of file