[PROJ-18.6/compl] switching-sidebar-menu-btns

Adding logic for "switching" btn's in "sidebar/menu". Render/re-render.

Worth noting:
  - that all this work/part (needs to be captured).

FS-dev: B-3 / JS basic

Author: matowdev

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-6-switching-sidebar-menu-btns/data/demo.json

@@ -2,7 +2,10 @@
   {
     "id": 1,
     "icon": "gantel-icon",
-    "name": "Отжимания",
+    "name": "Гантеля",
+    "title": "Отжимания",
+    "width": 23,
+    "height": 23,
     "target": 10,
     "days": [
       { "comment": "Первый подход всегда даётся тяжело.." },
@@ -11,8 +14,21 @@
   },
   {
     "id": 2,
+    "icon": "water-icon",
+    "name": "Бутылка с водой",
+    "title": "Водный баланс",
+    "width": 25,
+    "height": 25,
+    "target": 10,
+    "days": [{ "comment": "Очень хотелось!" }]
+  },
+  {
+    "id": 3,
     "icon": "food-icon",
-    "name": "Правильное питание",
+    "name": "Тарелка с едой",
+    "title": "Правильное питание",
+    "width": 23,
+    "height": 24,
     "target": 10,
     "days": [{ "comment": "Круто!" }]
   }

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-6-switching-sidebar-menu-btns/index.html

@@ -23,27 +23,7 @@
         <img class="sidebar__logo" src="./images/logo.svg" width="66" height="71" alt="Логотип: Habit">
       </div>
       <nav class="sidebar__nav" aria-label="Навигация по привычкам" title="Навигация по привычкам">
-        <ul class="sidebar__nav-list">
-          <li class="sidebar__nav-item">
-            <button class="sidebar__nav-btn sidebar__nav-btn_active" type="button" aria-label="Выбрать привычку"
-              title="Отжимания">
-              <img class="sidebar__nav-icon" src="./images/gantel-icon.svg" width="23" height="23"
-                alt="Иконка: Гантеля">
-            </button>
-          </li>
-          <li class="sidebar__nav-item">
-            <button class="sidebar__nav-btn" type="button" aria-label="Выбрать привычку" title="Водный баланс">
-              <img class="sidebar__nav-icon" src="./images/water-icon.svg" width="25" height="25"
-                alt="Иконка: Бутылка с водой">
-            </button>
-          </li>
-          <li class="sidebar__nav-item">
-            <button class="sidebar__nav-btn" type="button" aria-label="Выбрать привычку" title="Правильное питание">
-              <img class="sidebar__nav-icon" src="./images/food-icon.svg" width="23" height="24"
-                alt="Иконка: Тарелка с едой">
-            </button>
-          </li>
-        </ul>
+        <ul class="sidebar__nav-list" id="sidebar-list"></ul>
       </nav>
       <div class="sidebar__add-btn-wrap">
         <button class="sidebar__add-btn" type="button" aria-label="Добавить привычку" aria-haspopup="true"

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-6-switching-sidebar-menu-btns/js/index.js

@@ -3,6 +3,11 @@
 let habbits = [];
 const HABBITS_KEY = 'HABBITS';
 
+// app
+const app = {
+  'menu-list': document.getElementById('sidebar-list'),
+};
+
 // ** utility **
 function loadData() {
   const habbitsStr = localStorage.getItem(HABBITS_KEY);
@@ -17,7 +22,61 @@ function saveData() {
   localStorage.setItem(HABBITS_KEY, JSON.stringify(habbits));
 }
 
-// загрузка данных.. по сути автоматическая/сразу (соответственно через IIFE)
+// ** render **
+function rerenderMenu(activeHabbit) {
+  if (!activeHabbit) {
+    return;
+  }
+
+  for (const habbit of habbits) {
+    const existed = document.querySelector(`[menu-habbit-id="${habbit.id}"]`); // определение/флаг.. есть уже элемент (создавался) или нет
+
+    if (!existed) {
+      // если НЕТ.. создание li/элемента sidebar/меню.. привычки (согласно data)
+      const habbitItem = document.createElement('li');
+      habbitItem.classList.add('sidebar__nav-item');
+
+      const habbitBtn = document.createElement('button');
+      habbitBtn.classList.add('sidebar__nav-btn');
+      habbitBtn.setAttribute('type', 'button');
+      habbitBtn.setAttribute('aria-label', 'Выбрать привычку');
+      habbitBtn.setAttribute('title', habbit.title);
+      habbitBtn.setAttribute('menu-habbit-id', habbit.id);
+      habbitBtn.innerHTML = `<img class="sidebar__nav-icon" src="./images/${habbit.icon}.svg" width="${habbit.width}" height="${habbit.height}" alt="Иконка: ${habbit.name}">`;
+
+      habbitBtn.addEventListener('click', () => rerender(habbit.id)); // тонкий момент.. по сути "замыкание" для каждой кнопки/её ID.. потом передача именно его/себя в rerender()
+
+      // проверка на активность (при создании)
+      if (activeHabbit.id === habbit.id) {
+        habbitBtn.classList.add('sidebar__nav-btn_active');
+      }
+
+      habbitItem.append(habbitBtn);
+      app['menu-list'].append(habbitItem);
+    } else {
+      // если ЕСТЬ.. только обновление "активного" класса
+      if (activeHabbit.id === habbit.id) {
+        existed.classList.add('sidebar__nav-btn_active');
+      } else {
+        existed.classList.remove('sidebar__nav-btn_active');
+      }
+    }
+  }
+}
+
+// поиск элемента/привычки.. запуск отрисовки/переключение активности
+function rerender(activeHabbitId) {
+  const activeHabbit = habbits.find((habbit) => habbit.id === activeHabbitId);
+  rerenderMenu(activeHabbit);
+}
+
+// init
 (() => {
+  // загрузка данных.. по сути автоматическая/сразу (соответственно через IIFE)
   loadData();
+
+  // запуск работы с sidebar/меню..
+  if (habbits.length > 0) {
+    rerender(habbits[0].id); // пока.. принудительно передаёт
+  }
 })();