From 1d4822968e3aa5bbf3a8f6226b6d83c5d85989e6 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Thu, 9 Aug 2018 16:41:30 +0100
Subject: [PATCH] Toggle category sections

---
 frontend/building-edit.html | 28 +++++++++++++++++++--------
 frontend/building-view.html | 24 +++++++++++++++--------
 frontend/index.html         | 20 +++++++++++++------
 frontend/main.css           | 12 +++++++++---
 frontend/main.js            | 38 ++++++++++++++++++++++++++++++++++++-
 frontend/maps.html          | 20 +++++++++++++------
 6 files changed, 110 insertions(+), 32 deletions(-)

diff --git a/frontend/building-edit.html b/frontend/building-edit.html
index b4f50a44..bb0b8db1 100755
--- a/frontend/building-edit.html
+++ b/frontend/building-edit.html
@@ -60,8 +60,11 @@
     <h2 class="h2">Edit building data</h2>
     <form action="building-view.html" method="GET">
       <fieldset class="data-section">
-        <legend class="h3 bullet-prefix location">Location</legend>
-        <div class="data-list">
+        <legend
+            class="h3 bullet-prefix location toggled-on"
+            data-toggle="collapse"
+            data-target="#data-list-location">Location</legend>
+        <div id="data-list-location" class="data-list collapse show">
           <label for="">Building name</label>
           <input class="form-control" type="text" value="">
           <label for="">Building number</label>
@@ -77,8 +80,11 @@
         </div>
       </fieldset>
       <fieldset class="data-section">
-        <legend class="h3 bullet-prefix age">Age</legend>
-        <div class="data-list">
+        <legend
+            class="h3 bullet-prefix age"
+            data-toggle="collapse"
+            data-target="#data-list-age">Age</legend>
+        <div id="data-list-age" class="data-list collapse">
           <label for="">Year built (best estimate)</label>
           <input class="form-control" type="number" step="1" value="2018">
           <label for="">Year built (upper estimate)</label>
@@ -92,8 +98,11 @@
         </div>
       </fieldset>
       <fieldset class="data-section">
-        <legend class="h3 bullet-prefix size">Size</legend>
-        <div class="data-list">
+        <legend
+            class="h3 bullet-prefix size"
+            data-toggle="collapse"
+            data-target="#data-list-size">Size</legend>
+        <div id="data-list-size" class="data-list collapse">
           <label for="">Attic storeys</label>
           <input class="form-control" type="number" step="1" value="0">
           <label for="">Core storeys</label>
@@ -103,8 +112,11 @@
         </div>
       </fieldset>
       <fieldset class="data-section">
-        <legend class="h3 bullet-prefix like">Like Me!</legend>
-        <div class="data-list">
+        <legend
+            class="h3 bullet-prefix like"
+            data-toggle="collapse"
+            data-target="#data-list-like">Like Me!</legend>
+        <div id="data-list-like" class="data-list collapse">
           <label for="">Like this building?</label>
           <div class="form-check">
             <input class="form-check-input position-static" type="checkbox" checked>
diff --git a/frontend/building-view.html b/frontend/building-view.html
index 8ee5b8c4..eb527caf 100755
--- a/frontend/building-view.html
+++ b/frontend/building-view.html
@@ -59,8 +59,10 @@
   <div id="legend" class="info-container">
     <h2 class="h2">Building data</h2>
     <section class="data-section">
-      <h3 class="h3 bullet-prefix location">Location</h3>
-      <dl class="data-list">
+      <h3 class="h3 bullet-prefix location toggled-on"
+          data-toggle="collapse"
+          data-target="#data-list-location">Location</h3>
+      <dl id="data-list-location" class="data-list collapse show">
         <dt>Building Name</dt>
         <dd><span class="no-data">no data</span></dd>
         <dt>Building Number</dt>
@@ -76,8 +78,10 @@
       </dl>
     </section>
     <section class="data-section">
-      <h3 class="h3 bullet-prefix age">Age</h3>
-      <dl class="data-list">
+      <h3 class="h3 bullet-prefix age"
+          data-toggle="collapse"
+          data-target="#data-list-age">Age</h3>
+      <dl id="data-list-age" class="data-list collapse">
         <dt>Year built (best estimate)</dt>
         <dd>2018</dd>
         <dt>Year built (lower estimate)</dt>
@@ -91,8 +95,10 @@
       </dl>
     </section>
     <section class="data-section">
-      <h3 class="h3 bullet-prefix size">Size</h3>
-      <dl class="data-list">
+      <h3 class="h3 bullet-prefix size"
+          data-toggle="collapse"
+          data-target="#data-list-size">Size</h3>
+      <dl id="data-list-size" class="data-list collapse">
         <dt>Attic storeys</dt>
         <dd>0</dd>
         <dt>Core storeys</dt>
@@ -102,8 +108,10 @@
       </dl>
     </section>
     <section class="data-section">
-      <h3 class="h3 bullet-prefix like">Like Me!</h3>
-      <dl class="data-list">
+      <h3 class="h3 bullet-prefix like"
+          data-toggle="collapse"
+          data-target="#data-list-like">Like Me!</h3>
+      <dl id="data-list-like" class="data-list collapse">
         <dt>Likes</dt>
         <dd> 25</dd>
       </dl>
diff --git a/frontend/index.html b/frontend/index.html
index 916ff873..bdfa809d 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -65,9 +65,13 @@
   <div id="legend" class="info-container offscreen">
       <h2 class="h2">Maps</h2>
       <div class="data-section">
-        <h3 class="h3 bullet-prefix age">Age</h3>
-        <dl class="data-list">
-          <dt><a href="/maps/date_year" data-map="date_year">Year Built</a></dt>
+        <h3 class="h3 bullet-prefix age toggled-on"
+            data-toggle="collapse"
+            data-target="#data-list-age">Age</h3>
+        <dl id="data-list-age" class="data-list collapse show">
+          <dt>
+            <a href="/maps/date_year"
+               data-map="date_year">Year Built</a></dt>
           <dd>
             <ul class="data-legend">
               <li>
@@ -151,9 +155,13 @@
         </dl>
       </div>
       <div class="data-section">
-        <h3 class="h3 bullet-prefix size">Size</h3>
-        <dl class="data-list">
-          <dt><a href="/maps/size_storeys" data-map="size_storeys">Number of storeys</a></dt>
+        <h3 class="h3 bullet-prefix size"
+            data-toggle="collapse"
+            data-target="#data-list-size">Size</h3>
+        <dl id="data-list-size" class="data-list collapse">
+          <dt>
+            <a href="/maps/size_storeys"
+            data-map="size_storeys">Number of storeys</a></dt>
           <dd>
             <ul class="data-legend">
                 <li>
diff --git a/frontend/main.css b/frontend/main.css
index e49a392b..0ff7e538 100755
--- a/frontend/main.css
+++ b/frontend/main.css
@@ -442,9 +442,10 @@ small {
 }
 .bullet-prefix {
     position: relative;
-    padding-left: 1.5rem;
+    padding: 0rem 0.5rem 0.5rem 1.5rem;
+    cursor: pointer;
 }
-.bullet-prefix:before {
+.bullet-prefix::before {
     display: block;
     position: absolute;
     left: 0px;
@@ -453,12 +454,17 @@ small {
     height: 10px;
     background-color: #7d7d7d;
     content: ' ';
+    transition: background-color 0.2s;
+}
+.bullet-prefix:hover::before,
+.bullet-prefix.toggled-on::before {
+    background-color: #222;
 }
 .data-section .h3 {
     margin: 0;
 }
 .data-list {
-    margin: 0.5rem 0 1rem;
+    margin: 0rem 0 1rem;
     padding-left: 1.5rem;
 }
 .data-list a {
diff --git a/frontend/main.js b/frontend/main.js
index ab9d8a47..007712f0 100755
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -152,6 +152,41 @@ function carousel(){
     navigate(0);
 }
 
+/**
+ * Expand/collapse
+ *
+ * Create a toggle with:
+ *   - data-toggle="collapse"
+ *   - data-target="<CSS-selector>"
+ * E.g.
+ *   <button data-toggle="collapse" data-target="#section1">Toggle 1<button>
+ *   <div id="section1">...</div>
+ */
+function collapse(){
+    var toggles = document.querySelectorAll('[data-toggle="collapse"]')
+    if(!toggles.length){
+        return
+    }
+    function toggle_collapse(e){
+        e.preventDefault()
+        var toggle = e.target
+        var targets = document.querySelectorAll(toggle.dataset.target)
+        for (let index = 0; index < targets.length; index++) {
+            const target = targets[index];
+            const now_showing = target.classList.toggle('show')
+            if (now_showing){
+                toggle.classList.add('toggled-on')
+            } else {
+                toggle.classList.remove('toggled-on')
+            }
+        }
+    }
+    for (let index = 0; index < toggles.length; index++) {
+        const toggle = toggles[index];
+        toggle.addEventListener("click", toggle_collapse)
+    }
+}
+
 /**
  * Intro interactions
  */
@@ -159,7 +194,7 @@ function intro(){
     var welcome = document.querySelector('.welcome-float')
     var info = document.querySelector('.info-container')
     var links = document.querySelectorAll('a[href="maps.html"]')
-    if(!welcome || !info || !links){
+    if(!welcome || !info || !links.length){
         return;
     }
     function from_intro_to_maps(e){
@@ -191,4 +226,5 @@ if('querySelector' in document
     carousel();
     map();
     intro();
+    collapse();
 }
diff --git a/frontend/maps.html b/frontend/maps.html
index 9f0058a4..b3d76667 100755
--- a/frontend/maps.html
+++ b/frontend/maps.html
@@ -59,9 +59,13 @@
   <div id="legend" class="info-container">
     <h2 class="h2">Maps</h2>
     <div class="data-section">
-      <h3 class="h3 bullet-prefix age">Age</h3>
-      <dl class="data-list">
-        <dt><a href="/maps/date_year" data-map="date_year">Year Built</a></dt>
+      <h3 class="h3 bullet-prefix age toggled-on"
+          data-toggle="collapse"
+          data-target="#data-list-age">Age</h3>
+      <dl id="data-list-age" class="data-list collapse show">
+        <dt>
+          <a href="/maps/date_year"
+             data-map="date_year">Year Built</a></dt>
         <dd>
           <ul class="data-legend">
             <li>
@@ -145,9 +149,13 @@
       </dl>
     </div>
     <div class="data-section">
-      <h3 class="h3 bullet-prefix size">Size</h3>
-      <dl class="data-list">
-        <dt><a href="/maps/size_storeys" data-map="size_storeys">Number of storeys</a></dt>
+      <h3 class="h3 bullet-prefix size"
+          data-toggle="collapse"
+          data-target="#data-list-size">Size</h3>
+      <dl id="data-list-size" class="data-list collapse">
+        <dt>
+          <a href="/maps/size_storeys"
+          data-map="size_storeys">Number of storeys</a></dt>
         <dd>
           <ul class="data-legend">
               <li>