Skip to content

Commit

Permalink
Style-Me++
Browse files Browse the repository at this point in the history
  • Loading branch information
@Simon-Rey
Simon-Rey committed Nov 3, 2024
1 parent 1ad7dfc commit 3341ffe
Show file tree
Hide file tree
Showing 6 changed files with 167 additions and 26 deletions.
8 changes: 4 additions & 4 deletions petitbonhomme/_data/clothing_items.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,7 @@
image: Close-Up/2023 - Clothes - 302FFF94-98AB-4942-A3C6-E6A6F3C3BAAB.webp
worn_image: Worn/2023 - Clothes - 1988FFE1-FE96-4C45-A87F-C1E9CE111BFB.webp
id: 23
z_index: 4
z_index: 6
- name: Long Sleeve Black T-Shirt Tico
brand: No Brand
colors:
Expand Down Expand Up @@ -1657,7 +1657,7 @@
materials:
- Polyester & Plastics
size: Shoe EUR 41.5
category: Hiking Shoes
category: Hiking shoes
multiplicity: 1
buying_price: 75
buying_place: Candy Shop Amsterdam
Expand Down Expand Up @@ -1833,7 +1833,7 @@
image: Close-Up/2023 - Clothes - B60272ED-FB74-4CB7-8BF0-B72F17A53932.webp
worn_image: Worn/2023 - Clothes - 7B248220-7642-40CD-81BA-FFAFC19DB59A.webp
id: 96
z_index: 8
z_index: 9
- name: Dark Blue Dickies Pants
brand: Dickies
colors:
Expand Down Expand Up @@ -3111,7 +3111,7 @@
image: Close-Up/2023 - Clothes - 6BA03860-4946-43D7-8A1C-EDFBFCD25EEB.webp
worn_image: Worn/2023 - Clothes - E781F996-CB3D-4CE7-B6CF-488D47A8FEA6.webp
id: 165
z_index: 8
z_index: 9
- name: Dark Blue Hollister Hoodie
brand: Hollister
colors:
Expand Down
2 changes: 1 addition & 1 deletion petitbonhomme/_data/clothing_items_categories.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,4 +99,4 @@
- name: "Scarf"
default_z_index: 8
- name: "Bow Tie"
default_z_index: 8
default_z_index: 9
10 changes: 7 additions & 3 deletions petitbonhomme/_includes/item_display_style_me.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
{% assign item = include.item %}

<div class="item" onclick="toggleItemSelection(this)" data-name="{{ item.name }}" data-worn-image="{{ site.baseurl }}/assets/img/clothes/{{ item.worn_image }}" data-z-index="{{ item.z_index| plus: 20 }}">
<img src="{{ site.baseurl }}/assets/img/clothes/{{ item.image }}" alt="{{ item.name }}" class="category-item">
</div>
{% if item.image and item.image != "Close-Up/" and item.worn_image and item.worn_image != "Worn/" %}
<div class="wardrobe-item" onclick="toggleItemSelection(this)" data-name="{{ item.name }}" data-worn-image="{{ site.baseurl }}/assets/img/clothes/{{ item.worn_image }}" data-image="{{ site.baseurl }}/assets/img/clothes/{{ item.image }}" data-z-index="{{ item.z_index| plus: 20 }}" data-brand="{{ item.brand }}" data-colors="{{ item.colors | join: ' ' }}" data-colors-family="{{ color-families }}">
<div class="wardrobe-item-img-wrap">
<img src="{{ site.baseurl }}/assets/img/clothes/{{ item.image }}" alt="{{ item.name }}" class="category-item">
</div>
</div>
{% endif %}
3 changes: 2 additions & 1 deletion petitbonhomme/_includes/wardrobe_by_category.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% for category in include.categories %}
<div class="category-wrap">
<div class="category-title collapsible-header">
{% assign firstHeader = site.data.clothing_items_categories | find: "name", category.name %}
<div class="category-title {% if firstHeader %}first-category-title {% endif %}collapsible-header">
<h2><span>{{ category.name | title_case }}</span><span class="arrow-down"> </span></h2>
</div>
<div class="collapsible-content">
Expand Down
58 changes: 49 additions & 9 deletions petitbonhomme/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -811,14 +811,19 @@ Wardrobe Page
}

#wardrobe-wrap .category-title {
font-weight: bold;
font-size: larger;
background-color: var(--color-frame-light);
padding: 10px 20px;
cursor: pointer;
}

#wardrobe-wrap > .category-wrap > .category-title {
font-size: larger;
}

.first-category-title {
position: sticky;
top: 0;
z-index: 1;
cursor: pointer;
}

#wardrobe-wrap .category-title h2 {
Expand Down Expand Up @@ -883,22 +888,57 @@ Style Me Page
========== */

#style-me-wrap {
display: flex;
flex-direction: row;
gap: 20px;
display: flex;
flex-direction: row;
gap: 20px;
justify-content: center;
align-items: center;
}

@media screen and (max-width: 950px) {
#style-me-wrap {
flex-direction: column-reverse;
}
}

#style-me-outfit .outfit-stack {
margin: 20vh auto;
width: min(80vh, 80vw);
height: min(80vh, 80vw);
}

#style-me-wrap #wardrobe-wrap {
height: 35vh;
overflow: auto;
max-height: 40vh;
overflow-y: scroll;
}

#style-me-wrap #wardrobe-wrap .category-item {
max-height: 25vh;
}

#style-me-filters .brand-widget {
font-size: smaller;
}

#style-me-wrap .category-wrap h2 {
font-size: smaller;
}

#style-me-filters .color-family-checkbox .color-family-checkbox-inner-wrap {
width: 1ch;
height: 1ch;
}

#style-me-filters .color-selector {
width: 1ch;
height: 1ch;
border-right: 1px solid white;
}

#style-me-filters .color-selector:last-of-type {
border-right: none;
}

#style-me-filters .color-family-checkbox .color-family-checkbox-checkmark {
max-width: 1ch;
max-height: 1ch;
}
112 changes: 104 additions & 8 deletions petitbonhomme/styleme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,34 @@ layout: default
function showWheel(stack) {}
function hideWheel(stack) {}

function generateId(str) {
return str.trim().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\-]/g, '');
}

const outfitStack = document.querySelector('.outfit-stack');
const wheel = document.querySelector('.wheel');
const selectedItems = [];

function updateWheelAngles() {
const wheelLinks = wheel.querySelectorAll('.outfit-wheel-item-image-wrap');
const angle = 360 / selectedItems.length;

wheelLinks.forEach((link, index) => {
link.style.setProperty('--angle', `${index * angle}deg`);
});
}

function toggleItemSelection(item) {
const itemName = item.dataset.name;
const itemId = generateId(itemName);

if (selectedItems.includes(itemName)) {
selectedItems.splice(selectedItems.indexOf(itemName), 1);

const existingImg = outfitStack.querySelector(`img[data-item-id="${item.id}"]`);
const existingImg = outfitStack.querySelector(`img[data-item-id="${itemId}"]`);
if (existingImg) outfitStack.removeChild(existingImg);

const existingWheelItem = wheel.querySelector(`a[data-item-id="${item.id}"]`);
const existingWheelItem = wheel.querySelector(`a[data-item-id="${itemId}"]`);
if (existingWheelItem) wheel.removeChild(existingWheelItem);

} else {
Expand All @@ -48,33 +63,114 @@ layout: default
img.alt = itemName;
img.className = 'outfit-item-image';
img.style.zIndex = item.dataset.zIndex;
img.setAttribute('data-item-id', item.id);
img.setAttribute('data-item-id', itemId);
outfitStack.prepend(img);

const angle = 360 / (selectedItems.length);

const wheelLink = document.createElement('a');
wheelLink.className = 'outfit-wheel-item-image-wrap';
wheelLink.href = `/wardrobe/${item.id}.html`;
wheelLink.style.setProperty('--angle', `${angle}deg`);
wheelLink.setAttribute('data-item-id', item.id);
wheelLink.setAttribute('data-item-id', itemId);

const wheelDiv = document.createElement('div');
const wheelImg = document.createElement('img');
wheelImg.src = item.dataset.wheelImage;
wheelImg.src = item.dataset.image;
wheelImg.alt = itemName;
wheelImg.className = 'outfit-wheel-item-image';

wheelDiv.appendChild(wheelImg);
wheelLink.appendChild(wheelDiv);
wheel.appendChild(wheelLink);
}

updateWheelAngles();
}

document.addEventListener('DOMContentLoaded', function () {
const stackItems = document.querySelectorAll('#style-me-outfit .outfit-item-image');
stackItems.forEach((item) => {
item.style.zIndex = (parseInt(window.getComputedStyle(item).zIndex, 10) || 0) + 20;
});

const nextCollapsibles = document.querySelectorAll(".collapsible-header");

nextCollapsibles.forEach(function (e) {
e.addEventListener("click", function () {
this.classList.toggle("collapsed");
this.nextElementSibling.classList.toggle("hidden");
});

e.classList.toggle("collapsed");
e.nextElementSibling.classList.toggle("hidden");
});

function filterWardrobeItems() {
const selectedBrands = Array.from(document.querySelectorAll('.brand-checkbox-wrap input:checked'))
.map(input => input.value.toLowerCase());
const selectedColors = Array.from(document.querySelectorAll('.color-selector.selected'))
.map(colorEl => colorEl.dataset.color.toLowerCase());

const wardrobeItems = document.querySelectorAll('.wardrobe-item');

wardrobeItems.forEach(item => {
const itemBrand = item.dataset.brand.toLowerCase();
const itemColors = item.dataset.colors.toLowerCase().split(" ");

const brandMatch = selectedBrands.length === 0 || selectedBrands.includes(itemBrand);
const colorMatch = selectedColors.length === 0 || itemColors.some(color => selectedColors.includes(color));

if (brandMatch && colorMatch) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});

const categoryWraps = document.querySelectorAll('.category-wrap');
categoryWraps.forEach(categoryWrap => {
const visibleItems = categoryWrap.querySelectorAll('.wardrobe-item:not([style*="display: none"])');
categoryWrap.style.display = visibleItems.length > 0 ? '' : 'none';
});
}

function setupColorSelector() {
const familyCheckboxes = document.querySelectorAll(".color-family-checkbox");
familyCheckboxes.forEach(familyCheckbox => {
familyCheckbox.addEventListener("click", filterWardrobeItems);
});

const colorSelectors = document.querySelectorAll(".color-selector");
colorSelectors.forEach(colorSelector => {
colorSelector.addEventListener("click", filterWardrobeItems);
});
}

function setupBrandSelector() {
const brandWidgets = document.querySelectorAll('.brand-widget');

brandWidgets.forEach(brandWidget => {
const resetButton = brandWidget.querySelector(".all-brands-toggle-button");
resetButton.addEventListener('click', () => {
brandWidget.querySelectorAll('input[name="brand"]').forEach(checkbox => {
checkbox.checked = false;
});
filterWardrobeItems();
});

const searchInput = brandWidget.querySelector('.brand-search');
searchInput.addEventListener('input', () => {
const filterValue = searchInput.value.toLowerCase();
brandWidget.querySelectorAll('.brand-checkbox-wrap').forEach(item => {
item.style.display = item.dataset.brand.toLowerCase().includes(filterValue) ? '' : 'none';
});
});

brandWidget.querySelectorAll('input[name="brand"]').forEach(checkbox => {
checkbox.addEventListener('change', filterWardrobeItems);
});
});
}

setupColorSelector();
setupBrandSelector();
});
</script>

0 comments on commit 3341ffe

Please sign in to comment.