Brand widget

petitbonhomme/_includes/brand_selector.html

@@ -0,0 +1,35 @@
+{% assign sorted_brands = site.data.clothing_items_brands | sort: 'name' %}
+<div class="brand-widget">
+    <button type="button" class="all-brands-toggle-button">Select None</button>
+    <div class="brand-checkboxes-wrap">
+        {% for brand in sorted_brands %}
+            <div>
+                <label>
+                    <input type="checkbox" name="brand" value="{{ brand.name }}" checked>
+                    <span class="filter-label">{{ brand.name }}</span>
+                </label>
+            </div>
+        {% endfor %}
+    </div>
+</div>
+
+<script>
+    function toggleBrandSelector(forceSelectAll = false) {
+		const datasetCheckboxes = brandWidget.querySelectorAll('input[name="brand"]');
+        let allChecked;
+        if (forceSelectAll) {
+            allChecked = false;
+        } else {
+            allChecked = Array.from(datasetCheckboxes).every(checkbox => checkbox.checked);
+        }
+		datasetCheckboxes.forEach(checkbox => checkbox.checked = !allChecked);
+		document.getElementById('select-all-datasets').textContent = allChecked ? 'Select All' : 'Select None';
+	}
+
+    document.addEventListener("DOMContentLoaded", function() {
+        document.getElementById('all-brands-toggle-button').addEventListener('click', function () {
+            toggleBrandSelector();
+        });
+        }
+    );
+</script>

petitbonhomme/_includes/color_selector.html

@@ -1,8 +1,50 @@
+{% assign all_color_families = site.data.clothing_items_colors | map: "family" | uniq %}
 
-{% assign color = include.color %}
+<div class="color-widget">
+{% for color_family in all_color_families %}
+  {% include color_selector_family.html family=color_family %}
+{% endfor %}
+</div>
 
-<div class="color-selector selected" data-color="{{ color.name }}" data-family="{{ color.family }}" style="background-color: #{{ color.HTML_code }};" onclick="toggleColorSelector(this)">
-  <div class='color-selector-inner-wrap'>
-    <span class="color-selector-checkmark">&#10003;</span>
-  </div>
-</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const familyCheckboxes = document.querySelectorAll(".color-family-checkbox");
+
+    function toggleFamilySelection(familyCheckbox) {
+      const familyName = familyCheckbox.dataset.family;
+      const colorSelectors = document.querySelectorAll(`.color-family-colors-wrap .color-selector[data-family="${familyName}"]`);
+
+      colorSelectors.forEach(selector => {
+        if (familyCheckbox.checked) {
+          selector.classList.add("selected");
+        } else {
+          selector.classList.remove("selected");
+        }
+      });
+    }
+
+    familyCheckboxes.forEach(familyCheckbox => {
+      familyCheckbox.addEventListener("change", function () {
+        toggleFamilySelection(familyCheckbox);
+      });
+    });
+
+    function toggleColorSelector(colorSelector) {
+        const familyName = colorSelector.dataset.family;
+        const familyCheckbox = document.querySelector(`.color-family-checkbox[data-family="${familyName}"]`);
+
+        colorSelector.classList.toggle("selected");
+
+        if (colorSelector.classList.contains("selected") && !familyCheckbox.checked) {
+          familyCheckbox.checked = true;
+        }
+    }
+
+    const colorSelectors = document.querySelectorAll(".color-selector");
+    colorSelectors.forEach(colorSelector => {
+      colorSelector.addEventListener("click", function() {
+        toggleColorSelector(colorSelector);
+      });
+    });
+  });
+</script>

petitbonhomme/_includes/color_selector_family.html

@@ -0,0 +1,18 @@
+{% assign color_family = include.family %}
+{% assign colors = site.data.clothing_items_colors | where: "family", color_family %}
+
+<div class="color-family-selector">
+  <div class="color-family-selector-wrap">
+    <!-- Family Checkbox -->
+    <div class="color-family-checkbox-wrap">
+      <input type="checkbox" class="color-family-checkbox" data-family="{{ color_family }}" checked>
+    </div>
+
+    <!-- Individual Color Checkboxes -->
+    <div class="color-family-colors-wrap">
+      {% for color in colors %}
+        {% include color_selector_individual.html color=color%}
+      {% endfor %}
+    </div>
+  </div>
+</div>

petitbonhomme/_includes/color_selector_individual.html

@@ -0,0 +1,8 @@
+
+{% assign color = include.color %}
+
+<div class="color-selector selected" data-color="{{ color.name }}" data-family="{{ color.family }}" style="background-color: #{{ color.HTML_code }};">
+  <div class='color-selector-inner-wrap'>
+    <span class="color-selector-checkmark">&#10003;</span>
+  </div>
+</div>

petitbonhomme/_includes/outfit_display.html

@@ -12,11 +12,21 @@
 
   <!-- Wheel of images to appear on hover -->
   <div class="wheel" {% if show_wheel %}{% else %}style="visibility: hidden;"{% endif %}>
-    {% assign item_count = include.outfit.items.size %}
-    {% assign angle_step = 360 | divided_by: item_count %}
+
+    {% assign outfit_items = "" | split: "" %}
     {% for item_name in include.outfit.items %}
-      {% assign item = site.data.clothing_items | where: "name", item_name | first %}
-      {% if item %}
+      {% assign matching_item = site.data.clothing_items | where: "name", item_name | first %}
+      {% if matching_item %}
+        {% assign outfit_items = outfit_items | push: matching_item %}
+      {% endif %}
+    {% endfor %}
+
+    {% assign filtered_items = outfit_items | where_exp: "item", "item.image != 'Close-Up/'" %}
+    {% assign item_count = filtered_items.size %}
+
+    {% assign angle_step = 360 | divided_by: item_count %}
+    {% for item in filtered_items %}
+      {% if item.image and item.image != 'Close-Up/' %}
         {% assign angle = forloop.index0 | times: angle_step %}
         {% assign wheel_image_path = "assets/img/clothes/" | append: item.image %}
         <a class="outfit-wheel-item-image-wrap" href="{{ '/wardrobe/' | append: item.id | append: '.html' | relative_url }}" style="--angle: {{ angle }}deg;">

petitbonhomme/assets/css/style.css

@@ -432,6 +432,10 @@ Add Item Page
     margin-right: 20px;
 }
 
+/* ===========
+Color Selector
+=========== */
+
 .color-family-selector {
     background-color: white;
     padding: 4px;
@@ -458,6 +462,8 @@ Add Item Page
 .color-selector {
   border-top: 2px solid #fff;
   border-bottom: 2px solid #fff;
+    border-left: 2px solid #fff;
+    border-right: 2px solid #fff;
   width: 2ch;
   height: 2ch;
   cursor: pointer;
@@ -497,6 +503,17 @@ Add Item Page
     display: block;
 }
 
+/* ===========
+Brand Selector
+=========== */
+
+.brand-checkboxes-wrap {
+	height: 15ch;
+	overflow-y: scroll;
+    background-color: #fafbff;
+	padding: 10px;
+	border-radius: 5px;
+}
 
 /* =========
 Day Log Page

petitbonhomme/wardrobe/index.md

@@ -4,13 +4,8 @@ layout: default
 
 <h1>Wardrobe</h1>
 
-{% assign all_color_families = site.data.clothing_items_colors | map: "family" | uniq %}
-
-<div class="color-widget">
-{% for color_family in all_color_families %}
-  {% include color_family_selector.html family=color_family %}
-{% endfor %}
-</div>
+{% include color_selector.html %}
+{% include brand_selector.html %}
 
 <!-- Search and Filter Controls -->
 <div class="wardrobe-filters-wrap">