From d4120fbc7b9d3abceb91b633a61667899a143f4a Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Fri, 12 Apr 2024 15:13:17 -0400 Subject: [PATCH] finish refactor, enable visual functionality - added all javascript needed for visual functionality - finished refactoring structure --- .../gmo-campaign-header.css | 66 ++++- .../gmo-campaign-header.js | 234 +++++++++++------- 2 files changed, 207 insertions(+), 93 deletions(-) diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.css b/blocks/gmo-campaign-header/gmo-campaign-header.css index 594d0e58..00343bc9 100644 --- a/blocks/gmo-campaign-header/gmo-campaign-header.css +++ b/blocks/gmo-campaign-header/gmo-campaign-header.css @@ -1,17 +1,27 @@ .gmo-campaign-header.block { display: flex; - height: 50px; + flex-direction: column; margin-top: 20px; } +.inputs-wrapper { + display: flex; + height: 50px; +} .search-wrapper { background-color: #FFF; margin-top: 18px; margin-right: 10px; border: 1px solid #D3d3d3; border-radius: 4px; + display: flex; + align-items: center; & > .icon { background-color: #FFF; height: 14px; + border-radius: 4px; + & > svg { + padding-bottom: 10px; + } } } .campaign-search { @@ -73,14 +83,13 @@ padding-left: 10px; display: flex; justify-content: space-between; + & > .dropdown-label { + overflow: hidden; + } & > .icon { padding-top: 4px; height: 16px; } - & > .icon.inactive { - display: none; - visibility: hidden; - } } & > .dropdown-content { display: none; @@ -98,6 +107,13 @@ } } +.dropoption.selected { + background-color:#959595; +} +.icon.inactive { + display: none; + visibility: hidden; +} .dropdown-content a { display: block; padding: 10px; @@ -106,4 +122,42 @@ &:hover { background-color: #ddd; } -} \ No newline at end of file +} +.selections-wrapper { + margin-top: 10px; + min-height: 22px; + display: flex; + justify-content: space-between; + & > .selected-filters-list { + display: flex; + max-width: 90%; + flex-wrap: wrap; + & > .selected-filter { + background: #FFFFFF; + border: 1px solid #959595; + border-radius: 4px; + text-align: left; + font: normal normal normal 12px/15px Adobe Clean; + letter-spacing: 0px; + color: #747474; + height: 20px; + line-height: 20px; + padding: 0 7px 0 7px; + margin-right: 5px; + & > .label { + margin-right: 4px; + } + & > .icon-close { + height: 8px; + width: 6px; + } + } + } + & > .reset-filters { + font: normal normal normal 14px/17px Adobe Clean; + &.inactive { + display: none; + visibility: hidden; + } + } +} diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.js b/blocks/gmo-campaign-header/gmo-campaign-header.js index 148ae045..d9961bdd 100644 --- a/blocks/gmo-campaign-header/gmo-campaign-header.js +++ b/blocks/gmo-campaign-header/gmo-campaign-header.js @@ -2,122 +2,182 @@ import { decorateIcons } from '../../scripts/lib-franklin.js'; export default async function decorate(block) { block.innerHTML = ` -
- - -
-
-
Categories
-
-
-
All Categories
- - -
-
- Option 1 - Option 2 - Option 3 - Option 4 - Option 5 -
+
+
+ +
-
-
-
Status
-
-
-
All Statuses
- - -
-
- Option 1 - Option 2 - Option 3 - Option 4 - Option 5 +
+
Categories
+
+
+
All Categories
+ + +
+
+ Option 1 + Option 2 + Option 3 + Option 4 + Option 5 +
-
-
-
Cloud Business
-
-
-
All Cloud Businesses
- - +
+
Status
+
+
+
All Statuses
+ + +
+
+ Option 1 + Option 2 + Option 3 + Option 4 + Option 5 +
-
- Option 1 - Option 2 - Option 3 - Option 4 - Option 5 +
+
+
Cloud Business
+
+
+
All Cloud Businesses
+ + +
+
+ Option 1 + Option 2 + Option 3 + Option 4 + Option 5 +
-
-
-
Products
-
-
-
All Products
- - +
+
Products
+
+
+
All Products
+ + +
+
+ Option 1 + Option 2 + Option 3 + Option 4 + Option 5 +
-
- Option 1 - Option 2 - Option 3 - Option 4 - Option 5 +
+
+
Other (TBD)
+
+
+
Other
+ + +
+
+ Option 1 + Option 2 + Option 3 + Option 4 + Option 5 +
-
-
Other (TBD)
-
-
-
Other
- - -
-
- Option 1 - Option 2 - Option 3 - Option 4 - Option 5 -
+
+
+
Reset filters
+ `; document.querySelectorAll('.dropdown-button').forEach((button) => { button.addEventListener('click', (event) => { toggleDropdown(event.target); }); }); - document.querySelector('.dropoption').addEventListener('click', (event) => { - toggleOption(event.target.dataset.value); + document.querySelectorAll('.dropoption').forEach((button) => { + button.addEventListener('click', (event) => { + toggleOption(event.target.dataset.value, event.target.dataset.type); + }); + }); + document.querySelector('.reset-filters').addEventListener('click', () => { + resetAllFilters(); }) decorateIcons(block); } function toggleDropdown(element) { - //console.log(element); - //dropdown.parentElement.parentElement.classList.toggle('active'); - const dropdown = element.closest('.filter-dropdown'); const icons = dropdown.querySelectorAll('.icon'); icons.forEach((icon) => { icon.classList.toggle('inactive'); }) dropdown.classList.toggle('active'); - - //document.getElementById("myDropdown").classList.toggle("active"); } -function toggleOption(option) { - var dropdownOption = document.getElementById(option); +function toggleOption(optionValue, optionType) { + const dropdownOption = document.querySelector(`[data-value='${optionValue}'][data-type='${optionType}']`); dropdownOption.classList.toggle("selected"); -} \ No newline at end of file + handleSelectedFilter(dropdownOption) + checkResetBtn(); +} + +function handleSelectedFilter(option) { + const filterTagRoot = document.querySelector('.selected-filters-list'); + const filterValue = option.dataset.value; + const filterType = option.dataset.type; + if (option.classList.contains('selected')) { + const filterName = option.textContent; + const filterTag = document.createElement('div'); + filterTag.classList.add('selected-filter'); + const filterLabel = document.createElement('span'); + filterLabel.textContent = filterName; + filterLabel.classList.add('label'); + const closeOrig = document.querySelector('.icon.icon-close.inactive'); + const closeIcon = closeOrig.cloneNode(true); + closeIcon.classList.toggle('inactive'); + closeIcon.addEventListener('click', (event) => { + const filterTag = event.target.closest('.selected-filter'); + const optionValue = filterTag.dataset.value; + const optionType = filterTag.dataset.type; + toggleOption(optionValue, optionType); + }) + filterTag.appendChild(filterLabel); + filterTag.appendChild(closeIcon); + filterTag.dataset.type = filterType; + filterTag.dataset.value = filterValue; + filterTagRoot.appendChild(filterTag); + } else { + filterTagRoot.removeChild(document.querySelector(`.selected-filter[data-value='${filterValue}'][data-type='${filterType}']`)); + } +} + +function resetAllFilters() { + const selectedFilters = document.querySelectorAll('.dropoption.selected'); + selectedFilters.forEach((element) => { + element.classList.toggle('selected'); + }) + const filterTagRoot = document.querySelector('.selected-filters-list'); + filterTagRoot.replaceChildren(); + checkResetBtn(); +} + +function checkResetBtn() { + const selectedOptions = document.querySelectorAll('.dropoption.selected'); + const resetFiltersBtn = document.querySelector('.reset-filters'); + if (selectedOptions.length > 0) { + if (resetFiltersBtn.classList.contains('inactive')) resetFiltersBtn.classList.remove('inactive'); + } else { + resetFiltersBtn.classList.add('inactive'); + } +}