From 3a5280c8fd76df8d50edbf1a52eada0017794b57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kate=20Mih=C3=A1likov=C3=A1?= <kate@katemihalikova.cz>
Date: Wed, 20 Jul 2022 18:29:26 +0200
Subject: [PATCH] app: refactor indicators and filters to provide more robust
 system for adding new icons and transitions

---
 layouts/category.hbs   |   1 +
 layouts/index.hbs      |   1 +
 layouts/skill.hbs      |   6 +--
 partials/header.hbs    |  16 +++---
 partials/list-item.hbs |  17 ++-----
 src/filter.js          | 111 ++++++++++++++++++-----------------------
 src/firebase.css       |  17 +------
 src/firebase.js        |  43 +++++++---------
 src/indicators.js      |  89 +++++++++++++++++++++++++++++++++
 9 files changed, 170 insertions(+), 131 deletions(-)
 create mode 100644 src/indicators.js

diff --git a/layouts/category.hbs b/layouts/category.hbs
index d111e3519..60a4e37f6 100644
--- a/layouts/category.hbs
+++ b/layouts/category.hbs
@@ -54,6 +54,7 @@
           </div>
         {{/if}}
       </main>
+      <script src="indicators.js"></script>
       <script src="firebase.js"></script>
     </body>
   </html>
diff --git a/layouts/index.hbs b/layouts/index.hbs
index d269a3787..cd921bdbc 100644
--- a/layouts/index.hbs
+++ b/layouts/index.hbs
@@ -40,6 +40,7 @@
       {{/each}}
     </div>
   </main>
+  <script src="indicators.js"></script>
   <script src="firebase.js"></script>
   <script src="filter.js"></script>
   </body>
diff --git a/layouts/skill.hbs b/layouts/skill.hbs
index a8da7b8ff..870acf6d6 100644
--- a/layouts/skill.hbs
+++ b/layouts/skill.hbs
@@ -53,10 +53,7 @@
           <h1 class="display-5 d-flex">
             <span class="d-block mt-4">
               <span class="indicator indicator-detail text-center p-1" data-slug="{{slug}}">
-                <span class="done">✅️</span>
-                <span class="star">⭐️</span>
-                <span class="maybe">❓</span>
-                <span class="not-done">❔️</span>
+                <span class="indicator-icon"></span>
               </span>
               {{name}}
             </span>
@@ -144,6 +141,7 @@
     </div>
 
   </main>
+  <script src="indicators.js"></script>
   <script src="firebase.js"></script>
   <script>
     function htmlDecode(input) {
diff --git a/partials/header.hbs b/partials/header.hbs
index 92f002051..dbdfbb6df 100644
--- a/partials/header.hbs
+++ b/partials/header.hbs
@@ -5,17 +5,15 @@
       <div class="filter-group ms-5">
         <span class="text-white me-2">filters</span>
         <div class="btn-group bg-dark" role="group">
-          <button type="button" class="btn px-4 btn-outline-light active filter-not-done-or-maybe">❔️</button>
-          <button type="button" class="btn px-4 btn-outline-light active filter-star">⭐️</button>
-          <button type="button" class="btn px-4 btn-outline-light active filter-done">✅️</button>
+          <button type="button" class="btn px-4 btn-outline-light active filter-indicator"></button>
         </div>
         <div class="btn-group bg-dark ms-3" role="group">
-          <button type="button" class="btn px-3 btn-outline-light active filter-level-1">1</button>
-          <button type="button" class="btn px-3 btn-outline-light active filter-level-2">2</button>
-          <button type="button" class="btn px-3 btn-outline-light active filter-level-3">3</button>
-          <button type="button" class="btn px-3 btn-outline-light active filter-level-4">4</button>
-          <button type="button" class="btn px-3 btn-outline-light active filter-level-5">5</button>
-          <button type="button" class="btn px-3 btn-outline-light active filter-extra">extra</button>
+          <button type="button" class="btn px-3 btn-outline-light active filter-level" data-level="1">1</button>
+          <button type="button" class="btn px-3 btn-outline-light active filter-level" data-level="2">2</button>
+          <button type="button" class="btn px-3 btn-outline-light active filter-level" data-level="3">3</button>
+          <button type="button" class="btn px-3 btn-outline-light active filter-level" data-level="4">4</button>
+          <button type="button" class="btn px-3 btn-outline-light active filter-level" data-level="5">5</button>
+          <button type="button" class="btn px-3 btn-outline-light active filter-level" data-level="extra">extra</button>
         </div>
       </div>
       <span class="filter-nothing-found alert alert-danger mt-4 d-none" role="alert">Nothing has been found.</span>
diff --git a/partials/list-item.hbs b/partials/list-item.hbs
index 7aa413ed6..3607ed765 100644
--- a/partials/list-item.hbs
+++ b/partials/list-item.hbs
@@ -12,23 +12,12 @@
 >
   {{#if skill}}
     <span
-      class="
-        indicator indicator-list text-center p-1
-        {{#ifEquals level 0 }}is-level-0{{/ifEquals}}
-        {{#ifEquals level 1 }}is-level-1{{/ifEquals}}
-        {{#ifEquals level 2 }}is-level-2{{/ifEquals}}
-        {{#ifEquals level 3 }}is-level-3{{/ifEquals}}
-        {{#ifEquals level 4 }}is-level-4{{/ifEquals}}
-        {{#ifEquals level 5 }}is-level-5{{/ifEquals}}
-        {{#ifEquals level "extra" }}is-extra{{/ifEquals}}
-      "
+      class="indicator indicator-list text-center p-1"
       data-slug="{{slug}}"
+      data-level="{{level}}"
     >
       <span class="locked">🔒️</span>
-      <span class="done">✅️</span>
-      <span class="star">⭐️</span>
-      <span class="maybe">❓</span>
-      <span class="not-done">❔️</span>
+      <span class="indicator-icon"></span>
     </span>
     {{#unless resources}}
       {{#unless text}}
diff --git a/src/filter.js b/src/filter.js
index f6ec69a89..e54a908d0 100644
--- a/src/filter.js
+++ b/src/filter.js
@@ -3,16 +3,7 @@ const allGroups = document.querySelectorAll(".skill-group");
 const allColumns = document.querySelectorAll(".skill-section");
 const nothingFound = document.querySelector(".filter-nothing-found");
 
-const doneFilter = document.querySelector(".filter-done");
-const starFilter = document.querySelector(".filter-star");
-const notDoneOrMaybeFilter = document.querySelector(".filter-not-done-or-maybe");
-const extraFilter = document.querySelector(".filter-extra");
-
-const levelFilter1 = document.querySelector(".filter-level-1");
-const levelFilter2 = document.querySelector(".filter-level-2");
-const levelFilter3 = document.querySelector(".filter-level-3");
-const levelFilter4 = document.querySelector(".filter-level-4");
-const levelFilter5 = document.querySelector(".filter-level-5");
+const levelFilters = document.querySelectorAll(".filter-level");
 
 const filterCounter = document.querySelector(".filter-counter");
 const shownSkills = document.querySelector(".shown-skills");
@@ -21,47 +12,53 @@ const allItemsCount = allItems.length
 
 document.querySelector(".total-skills").innerHTML = allItemsCount;
 
+const filterPlaceholder = document.querySelector(".filter-indicator");
+const filterContainer = filterPlaceholder.parentElement;
+filterPlaceholder.remove();
+
+const indicatorFilters = Object.keys(INDICATOR_BIG_FILTERS).map(icon => {
+  let filterButton = filterPlaceholder.cloneNode(true);
+  filterButton.textContent = icon;
+  filterButton.dataset.icon = icon;
+  filterContainer.appendChild(filterButton);
+  return filterButton;
+});
+
 const FILTERS_VALUE = "FILTERS_VALUE";
 
+function getFiltersValues() {
+  let levelFiltersValues = {};
+  levelFilters.forEach(el => {
+    levelFiltersValues[el.dataset.level] = el.classList.contains("active");
+  });
+
+  let indicatorFiltersValues = {};
+  indicatorFilters.forEach(el => {
+    INDICATOR_BIG_FILTERS[el.dataset.icon].forEach(indicator => {
+      indicatorFiltersValues[indicator] = el.classList.contains("active");
+    });
+  });
+
+  return {levelFiltersValues, indicatorFiltersValues};
+}
+
 function filterItems() {
-  let filtersValue = {
-    done: doneFilter.classList.contains("active"),
-    star: starFilter.classList.contains("active"),
-    notDoneOrMaybe: notDoneOrMaybeFilter.classList.contains("active"),
-    extra: extraFilter.classList.contains("active"),
-    level1: levelFilter1.classList.contains("active"),
-    level2: levelFilter2.classList.contains("active"),
-    level3: levelFilter3.classList.contains("active"),
-    level4: levelFilter4.classList.contains("active"),
-    level5: levelFilter5.classList.contains("active"),
-  };
+  let {levelFiltersValues, indicatorFiltersValues} = getFiltersValues();
+  levelFiltersValues[0] = levelFiltersValues[1];
 
   allItems.forEach(el => {
     let indicator = el.querySelector(".indicator");
-    let type = indicator.classList.contains("is-done") ? "done"
-      : indicator.classList.contains("is-star") ? "star"
-      : "notDoneOrMaybe";
-    let isExtra = indicator.classList.contains("is-extra");
-    let isLevel1 = indicator.classList.contains("is-level-1");
-    let isLevel2 = indicator.classList.contains("is-level-2");
-    let isLevel3 = indicator.classList.contains("is-level-3");
-    let isLevel4 = indicator.classList.contains("is-level-4");
-    let isLevel5 = indicator.classList.contains("is-level-5");
-
-    let isActive =
-      (isLevel1 && !filtersValue.level1) ||
-      (isLevel2 && !filtersValue.level2) ||
-      (isLevel3 && !filtersValue.level3) ||
-      (isLevel4 && !filtersValue.level4) ||
-      (isLevel5 && !filtersValue.level5) ||
-      (isExtra && !filtersValue.extra) ? false : filtersValue[type];
+
+    let isActiveByLevel = levelFiltersValues[indicator.dataset.level];
+    let isActiveByIndicator = indicatorFiltersValues[indicator.dataset.currentIndicator];
+    let isActive = isActiveByLevel && isActiveByIndicator;
 
     el.classList.toggle("d-flex", isActive);
     el.classList.toggle("d-none", !isActive);
   });
 
   allGroups.forEach(el => {
-    let addOrRemove = el.querySelectorAll(".skill-item.d-flex").length === 0 && (filtersValue.done || filtersValue.star || filtersValue.notDoneOrMaybe);
+    let addOrRemove = el.querySelectorAll(".skill-item.d-flex").length === 0;
     el.classList.toggle("d-none", addOrRemove);
     el.previousElementSibling.classList.toggle("d-none", addOrRemove);
   });
@@ -71,7 +68,7 @@ function filterItems() {
     el.classList.toggle("d-none", addOrRemove);
   });
 
-  let nothingWasFound = document.querySelectorAll(".skill-item.d-flex").length === 0 && (filtersValue.done || filtersValue.star || filtersValue.notDoneOrMaybe);
+  let nothingWasFound = document.querySelectorAll(".skill-item.d-flex").length === 0;
   nothingFound.classList.toggle("d-none", !nothingWasFound);
 
   let shownSkillsCount = document.querySelectorAll(".skill-item.d-flex").length;
@@ -93,7 +90,7 @@ function showAllItems() {
   allItems.forEach(el => {
     el.classList.add("d-flex");
     el.classList.remove("d-none");
-    el.querySelector(".indicator").classList.remove("is-done", "is-star");
+    el.querySelector(".indicator .indicator-icon").textContent = "";
   });
 
   allGroups.forEach(el => {
@@ -105,17 +102,7 @@ function showAllItems() {
 }
 
 function saveFilters() {
-  let filtersStateToSave = {
-    done: doneFilter.classList.contains("active"),
-    star: starFilter.classList.contains("active"),
-    notDone: notDoneOrMaybeFilter.classList.contains("active"),
-    extra: extraFilter.classList.contains("active"),
-    level1: levelFilter1.classList.contains("active"),
-    level2: levelFilter2.classList.contains("active"),
-    level3: levelFilter3.classList.contains("active"),
-    level4: levelFilter4.classList.contains("active"),
-    level5: levelFilter5.classList.contains("active"),
-  };
+  let filtersStateToSave = getFiltersValues();
 
   let filtersKey = FILTERS_VALUE;
   if (isAdmin) {
@@ -140,15 +127,14 @@ function loadFilters() {
   if (filtersStateToLoad) {
     try {
       filtersStateToLoad = JSON.parse(filtersStateToLoad);
-      doneFilter.classList.toggle("active", filtersStateToLoad.done);
-      starFilter.classList.toggle("active", filtersStateToLoad.star);
-      notDoneOrMaybeFilter.classList.toggle("active", filtersStateToLoad.notDone);
-      extraFilter.classList.toggle("active", filtersStateToLoad.extra);
-      levelFilter1.classList.toggle("active", filtersStateToLoad.level1);
-      levelFilter2.classList.toggle("active", filtersStateToLoad.level2);
-      levelFilter3.classList.toggle("active", filtersStateToLoad.level3);
-      levelFilter4.classList.toggle("active", filtersStateToLoad.level4);
-      levelFilter5.classList.toggle("active", filtersStateToLoad.level5);
+
+      // @TODO new implementation
+
+      // backward compatibility
+      if ("done" in filtersStateToLoad) {
+
+        // @TODO backward compatibility implementation
+
     } catch (e) {
     }
   }
@@ -160,8 +146,7 @@ function onFilterButtonClick(e) {
   filterItems();
 }
 
-[doneFilter, starFilter, notDoneOrMaybeFilter, extraFilter, levelFilter1, levelFilter2, levelFilter3, levelFilter4, levelFilter5]
-  .forEach(el => el.addEventListener("click", onFilterButtonClick));
+[...indicatorFilters, ...levelFilters].forEach(el => el.addEventListener("click", onFilterButtonClick));
 loadFilters();
 INDICATOR_CHANGE_CALLBACKS.push(filterItems);
 USER_LOGGED_OUT_CALLBACKS.push(showAllItems);
diff --git a/src/firebase.css b/src/firebase.css
index 1758a59ce..30d1bd54e 100644
--- a/src/firebase.css
+++ b/src/firebase.css
@@ -1,15 +1,5 @@
-.not-done,
-.maybe,
-.done,
-.star,
-.indicator.is-done .not-done,
-.indicator.is-star .not-done,
-.indicator.is-maybe .not-done,
+.indicator-icon,
 .logged-in .locked,
-.indicator.not-done .locked,
-.indicator.is-done .locked,
-.indicator.is-star .locked,
-.indicator.is-maybe .locked,
 .logged-in .note.note-empty,
 .logged-in .login,
 .logout,
@@ -22,10 +12,7 @@
   display: none;
 }
 
-.indicator.is-done .done,
-.indicator.is-star .star,
-.indicator.is-maybe .maybe,
-.logged-in .not-done,
+.logged-in .indicator-icon,
 .logged-in .note,
 .logged-in .logout,
 .logged-in .filter-group,
diff --git a/src/firebase.js b/src/firebase.js
index f285599ba..842a5bbbc 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -39,38 +39,27 @@ let indicators = document.querySelectorAll(".indicator");
 
 function setStateOfAllIndicators(data) {
   indicators.forEach(indicator => {
-    indicator.classList.toggle("is-done", data[indicator.dataset.slug] === true);
-    indicator.classList.toggle("is-star", data[indicator.dataset.slug] === 'star');
-    indicator.classList.toggle("is-maybe", data[indicator.dataset.slug] === 'maybe');
+    let currentIndicator = convertIndicatorForBackwardCompatibility(data[indicator.dataset.slug]) || DEFAULT_INDICATOR;
+    indicator.dataset.currentIndicator = currentIndicator;
+    indicator.querySelector(".indicator-icon").textContent = INDICATOR_ICONS[currentIndicator];
   });
 }
 
 function indicatorListener(event) {
   event.preventDefault();
 
-  let isDone = this.classList.contains("is-done");
-  let isStar = this.classList.contains("is-star");
-  let isMaybe = this.classList.contains("is-maybe");
-
-  let newValue;
-
-  if (userFlags.intro) {
-    // maybe → not-done
-    // any other → maybe
-    newValue = isMaybe ? "not-done" : "maybe";
-  } else if (event.shiftKey) {
-    // anything → maybe
-    newValue = "maybe";
-  } else {
-    // star → done
-    // done → not-done
-    // not-done or maybe → star
-    newValue = isStar ? "done" : isDone ? "not-done" : "star";
-  }
-
-  // convert original values to boolean to preserve backward compatibility
-  if (newValue === "done") newValue = true;
-  if (newValue === "not-done") newValue = false;
+  let newValue = Object.entries(INDICATOR_TRANSITIONS)
+    .find(([indicator]) => this.dataset.currentIndicator === indicator)[1]({
+      userFlags,
+      shift: event.shiftKey,
+      ctrl: event.ctrlKey,
+      alt: event.altKey,
+      altGr: event.ctrlKey && event.altKey,
+      meta: event.metaKey,
+      left: event.button === 0,
+      middle: event.button === 1,
+      right: event.button === 2,
+    });
 
   firebase.firestore().collection("db").doc("v1")
     .collection("users").doc(sessionStorage.getItem(SELECTED_USER_ID))
@@ -80,6 +69,8 @@ function indicatorListener(event) {
 
 indicators.forEach(indicator => {
   indicator.addEventListener("click", indicatorListener, false);
+  indicator.addEventListener("auxclick", indicatorListener, false);
+  indicator.addEventListener("contextmenu", e => e.preventDefault(), false);
 });
 
 let removeFirebaseNoteListener = () => {
diff --git a/src/indicators.js b/src/indicators.js
new file mode 100644
index 000000000..99e2064a7
--- /dev/null
+++ b/src/indicators.js
@@ -0,0 +1,89 @@
+// @ts-check
+
+const INDICATOR_ICONS = {
+  "not-done": "❔️",
+  "maybe": "❓",
+  "star": "⭐️",
+  "together": "🗨️",
+  "alone-then-together": "👁‍🗨",
+  "alone-then-tick": "🟨",
+  "tick": "☑️",
+  "ignore": "❎",
+  "done": "✅️",
+};
+
+/** @typedef {keyof typeof INDICATOR_ICONS} Indicator */
+
+/**
+@type {{[K in Indicator]: (params: {
+  userFlags: Record<string, boolean>,
+  shift: boolean,
+  ctrl: boolean,
+  alt: boolean,
+  altGr: boolean,
+  meta: boolean,
+  left: boolean,
+  middle: boolean,
+  right: boolean,
+}) => Exclude<Indicator, K>}}
+@chart
+```mermaid
+flowchart LR
+
+    not-done("not-done\n❔")
+    maybe("maybe\n❓")
+    star("star\n⭐")
+    together("together\n🗨️")
+    alone-then-together("alone-then-together\n👁‍🗨")
+    alone-then-tick("alone-then-tick\n🟨")
+    tick("tick\n☑️")
+    ignore("ignore\n❎")
+    done("done\n✅")
+
+    %% standard transition
+    not-done --> star --> done --> not-done
+
+    %% flag transitions
+    not-done --->|intro flag XOR shift key| maybe --> star
+    maybe --->|intro flag XOR shift key| not-done
+
+    %% shift key transitions
+    star -->|shift key| together --> done
+    together -->|shift key| alone-then-together --> done
+    alone-then-together -->|shift key| alone-then-tick --> done
+    alone-then-tick -->|shift key| tick --> done
+
+    %% ctrl key transitions
+    star -->|ctrl key| ignore --> not-done
+```
+*/
+const INDICATOR_TRANSITIONS = {
+  "not-done": ({userFlags, shift}) => userFlags.intro /*xor*/!== shift ? "maybe" : "star",
+  "maybe": ({userFlags, shift}) => userFlags.intro /*xor*/!== shift ? "not-done" : "star",
+  "star": ({shift, ctrl}) => shift ? "together" : ctrl ? "ignore" :"done",
+  "together": ({shift}) => shift ? "alone-then-together" : "done",
+  "alone-then-together": ({shift}) => shift ? "alone-then-tick": "done",
+  "alone-then-tick": ({shift}) => shift ? "tick" : "done",
+  "tick": () => "done",
+  "ignore": () => "not-done",
+  "done": () => "not-done",
+};
+
+/** @type {Indicator} */
+const DEFAULT_INDICATOR = "not-done";
+
+/** @returns {Indicator} */
+function convertIndicatorForBackwardCompatibility(indicator) {
+  if (indicator === true) return "done";
+  if (indicator === false) return "not-done";
+  return indicator;
+};
+
+/** @typedef {(typeof INDICATOR_ICONS)[Indicator]} EE */
+
+/** @type {Record<string, Indicator[]>} */
+const INDICATOR_BIG_FILTERS = {
+  "❔️": ["not-done", "maybe"],
+  "⭐": ["star", "together", "alone-then-together", "alone-then-tick", "tick"],
+  "✅️": ["ignore", "done"],
+};