Twin-Cities-Mutual-Aid · amaxama · Sep 9, 2020 · Sep 9, 2020 · Sep 10, 2020 · Sep 10, 2020
diff --git a/public/index.html b/public/index.html
@@ -48,18 +48,38 @@
 
 <body class='flex'>
   <div class="content">
-    <div class="title white-and-blue">
-      <h1 data-translation-id="page_title" class='h1'>Twin Cities Mutual Aid Map</h1>
-    </div>
-    <div class="filter-pane white-and-blue">
-      <div class='legend' id="key"></div>
-      <button data-translation-id="show_list_button" id="locations-toggle-button" class="location-list-toggle toggle-button" aria-label="Show list of locations">Show list of locations</button>
-      <button data-translation-id="help_info" id="help-info-toggle-button" class="toggle-button" aria-label="Toggle help info section">Help/info</button>
-      <button data-translation-id="refresh_button" id='refresh-page-button' class='toggle-button' aria-label="refresh page data">
-        <img class="refresh-image" alt="${lang_name}" src="/images/refresh.png">
-        <span class="refresh-text" data-translation-id="refresh">Refresh</span></button>
-      <div class='counter'>
-        <script type="text/javascript" src="//counter.websiteout.net/js/7/0/41000/0"></script>
+    <div class="header">
+      <div class="title white-and-blue">
+        <h1 data-translation-id="page_title" class='h1'>Twin Cities Mutual Aid Map</h1>
+      </div>
+
+      <div id="filter-pane" class="filter-pane white-and-blue">
+        <a id="toggle-legend-button" class="arrow-icon open">
+          <span class="left-bar"></span>
+          <span class="right-bar"></span>
+        </a>
+
+        <div class="legend-container" id="legend-container" style="max-height: 1000px;">
+          <div class="legend" id="key"></div>
+
+          <div class="action-group">
+            <button data-translation-id="show_list_button" id="locations-toggle-button" class="location-list-toggle toggle-button" aria-label="Show list of locations">
+              Show list of locations
+            </button>
+            <button data-translation-id="help_info" id="help-info-toggle-button" class="toggle-button" aria-label="Toggle help info section">
+              Help/Info
+            </button>
+            <button data-translation-id="refresh_button" id='refresh-page-button' class='toggle-button' aria-label="refresh page data">
+              <img class="refresh-image" alt="${lang_name}" src="/images/refresh.png">
+              <span class="refresh-text" data-translation-id="refresh">
+                Refresh
+              </span>
+            </button>
+            <div class='counter'>
+              <script type="text/javascript" src="//counter.websiteout.net/js/7/0/41000/0" ></script>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div id="search-controls"></div>
@@ -86,6 +106,7 @@ <h1 data-translation-id="page_title" class='h1'>Twin Cities Mutual Aid Map</h1>
         <span class="lang-name" data-translation-id="lang_name">English</span>
       </span>
     </button>
+    <div class="legend-overlay" id="legend-overlay" />
   </div>
 
   <script src="/js/list.min.js"></script>

diff --git a/src/i18n/amh.json b/src/i18n/amh.json
@@ -22,6 +22,10 @@
   "filter_by_both": "ለ ሁለቱም ክፍት ነው ",
   "filter_by_closed": "ለጊዜው ዝግ ነው ",
   "filter_by_unknown": "ሁኔታው አይታወቅም ",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "ስለ ",
   "this_project": "ይህ ፕሮጀክት ",
   "help_info": "እገዛ/ኢንፎርሜሽን ",

diff --git a/src/i18n/dak.json b/src/i18n/dak.json
@@ -22,6 +22,10 @@
   "filter_by_both": "núŋphiŋ ečhúŋ iyówiŋyaŋpi",
   "filter_by_closed": "waŋná nathákapi",
   "filter_by_unknown": "tókhetu thaŋíŋ šni",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "Oíhdakapi",
   "this_project": "wóečhuŋ kiŋ dé",
   "help_info": "Ókiya/Wónaȟ’uŋ",

diff --git a/src/i18n/eng.json b/src/i18n/eng.json
@@ -22,6 +22,10 @@
   "filter_by_both": "open for both",
   "filter_by_closed": "currently closed",
   "filter_by_unknown": "status unknown",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "About",
   "this_project": "this project",
   "help_info": "Help/info",

diff --git a/src/i18n/hin.json b/src/i18n/hin.json
@@ -14,6 +14,10 @@
   "filter_by_both": "दोनों के लिए खुला है",
   "filter_by_closed": "वर्तमान में बंद है",
   "filter_by_unknown": "अज्ञात स्थिति",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "के बारे में",
   "this_project": "यह योजना",
   "help_info": "सहायता / जानकारी",

diff --git a/src/i18n/hmn.json b/src/i18n/hmn.json
@@ -22,6 +22,10 @@
   "filter_by_both": "Cov txais hab faib khoom pub dlawb",
   "filter_by_closed": "Cov taab tom kaw lawm",
   "filter_by_unknown": "Cov tsis paub",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "Ntsig Txug",
   "this_project": "Cov haujlwm nuav",
   "help_info": "Kev Paab",

diff --git a/src/i18n/kar.json b/src/i18n/kar.json
@@ -22,6 +22,10 @@
   "filter_by_both": "td;xD.cHcgvXm",
   "filter_by_closed": "tcJtHRwtd;xD.b.",
   "filter_by_unknown": "twDRwoh.ngb.",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "b.C;'D;",
   "this_project": "w&J.w>usJRt0JtHR",
   "help_info": "rRpXRw>*h>w>usdR",

diff --git a/src/i18n/oji.json b/src/i18n/oji.json
@@ -22,6 +22,10 @@
   "filter_by_both": "Nayenzh igo onji-baakaakonigaade",
   "filter_by_closed": "Azhigwa gibaakwa'igaade",
   "filter_by_unknown": "Gaawiin gikendaagwasinoon",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "Ge-gikenjigaadeg",
   "this_project": "O'ow anokaajigan",
   "help_info": "Wii-wiidookaagooyan/nawaj wii-gikendaman",

diff --git a/src/i18n/orm.json b/src/i18n/orm.json
@@ -22,6 +22,14 @@
   "filter_by_both": "Lachuufuu bana'a",
   "filter_by_closed": "Yeroof cufa'a",
   "filter_by_unknown": "Haalli hin beekkamu",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "Waa'ee",
   "this_project": "Projektiin kun ",
   "help_info": "Gargaarsa/Odeeffanno",

diff --git a/src/i18n/som.json b/src/i18n/som.json
@@ -22,6 +22,10 @@
   "filter_by_both": "Ufuran labadaba",
   "filter_by_closed": "Hada, xiligan xiran",
   "filter_by_unknown": "Xaalad aan lagaranayn",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "Kusaabsan",
   "this_project": "Mashruucaan",
   "help_info": "Caawinta macluumaadka",

diff --git a/src/i18n/spa.json b/src/i18n/spa.json
@@ -22,9 +22,13 @@
   "filter_by_both": "abierto para ambos",
   "filter_by_closed": "actualmente cerrado",
   "filter_by_unknown": "estado desconocido",
+  "receiving": "recibando",
+  "distributing": "distribuyendo",
+  "both": "ambos",
+  "closed": "cerrado",
   "about": "Sobre",
   "this_project": "este proyecto",
-  "help_info": "Ayuda / info",
+  "help_info": "Ayuda / Info",
   "project_team": "Twin Cities Mutual Aid Project",
   "project_description": "Mapa de Ayuda de las Ciudades Gemelas es dirigido por voluntarios como parte del <a href=\"http://tcmap.org\">Twin Cities Mutual Aid Project</a>",
   "project_learn": "Aprenda sobre este proyecto en",

diff --git a/src/i18n/vie.json b/src/i18n/vie.json
@@ -22,6 +22,10 @@
   "filter_by_both": "sẵn sàng cho cả hai",
   "filter_by_closed": "Hiện tại đang đóng cửa",
   "filter_by_unknown": "Tình trạng hiện đang không xác định ",
+  "receiving": "receiving",
+  "distributing": "distributing",
+  "both": "both",
+  "closed": "closed",
   "about": "Về",
   "this_project": "Dự án này",
   "help_info": "Giúp đỡ/ Thông tin",

diff --git a/src/index.js b/src/index.js
@@ -9,6 +9,7 @@ import './styles/components/location-card.css';
 import './styles/components/map-popup.css';
 import './styles/components/form-control.css';
 import './styles/components/search.css';
+import './styles/components/filter.css';
 import './styles/typography.css';
 
 // Import Libs
@@ -57,6 +58,7 @@ const statusClosed =  {
   name: 'closed',
   label: 'not open now',
   accessibleColor: '#d7191c',
+  textColor: '#FFFFFF',
   count: 0
 }
 
@@ -66,20 +68,23 @@ const statusOptions = [
     name: 'receiving',
     label: 'open for receiving donations',
     accessibleColor: '#2c7bb6',
+    textColor: '#FFFFFF',
     count: 0
   },
   {
     id: '#03bafc',
     name: 'distributing',
     label: 'open for distributing donations',
     accessibleColor: '#abd9e9',
+    textColor: '#000000',
     count: 0
   },
   {
     id: '#9f48ea',
     name: 'both',
     label: 'open for both',
     accessibleColor: '#fdae61',
+    textColor: '#000000',
     count: 0
   },
   statusClosed
@@ -561,12 +566,3 @@ const refreshPageButton = document.getElementById('refresh-page-button')
 refreshPageButton.addEventListener("click", function() {
   refreshPage()
 })
-
-// render key
-const key = document.getElementById('key')
-statusOptions.forEach(s => {
-  const el = document.createElement('div');
-  el.classList = ['legend--item'];
-  el.innerHTML = `<span class="legend--item--swatch" style="background-color: ${s.accessibleColor}"></span>${s.label}`
-  key.append(el)
-})
diff --git a/src/js/filter.js b/src/js/filter.js
@@ -12,8 +12,10 @@ class Filter {
     this.$filters = []
 
     this.$el = el
-    this.$searchControl = document.getElementById('search-controls')
-    this.$controls = document.getElementById('filter-controls')
+    this.$searchControl = document.getElementById("search-controls")
+    this.$controls = document.getElementById("filter-controls")
+    this.$legendOverlay = document.getElementById("legend-overlay")
+    this.$toggleLegendButton = document.getElementById("toggle-legend-button")
     this.renderControls(this.$controls)
     this.list = new List(this.$el.id, {
       valueNames: [...this.sortOptions.map(o => o.name), ...this.searchOptions.searchOn],
@@ -202,7 +204,37 @@ class Filter {
       this.search.bind(this)(event.currentTarget.value)
     })
     this.$filters.forEach($e => $e.addEventListener('change', this.update.bind(this)))
+
+    this.statusOptions.forEach(statusOption => {
+      this.createLegendOverlayItem(statusOption);
+    })
+
+    this.$toggleLegendButton.addEventListener("click", 
+      event => this.toggleFilters());
+
+  }
+
+  createLegendOverlayItem(option) {
+    const item = document.createElement('div');
+    item.innerHTML = `<button class="legend-overlay-item" style="background-color: ${option.accessibleColor}; color: ${option.textColor}" data-translation-id="${option.name}">${option.name}</button>`
+    this.$legendOverlay.append(item);
+  }
+
+  toggleFilters() {
+    this.$toggleLegendButton.classList.toggle("open");
+    const panel = document.getElementById("legend-container");
+    if (panel.style.maxHeight) {
+      panel.style.maxHeight = null;
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    }
+    if (this.$legendOverlay.style.maxWidth) {
+      this.$legendOverlay.style.maxWidth = null;
+    } else {
+      this.$legendOverlay.style.maxWidth = panel.scrollWidth + "px";
+    }
   }
+
 }
 
-export default Filter
+export default Filter