From 59d5bc3b08eef40792e2d08601c8f99c659be744 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Wed, 10 Apr 2024 16:12:04 -0400 Subject: [PATCH 1/3] initial html structure setup --- .../gmo-campaign-header.css | 36 +++++++++++++++ .../gmo-campaign-header.js | 44 +++++++++++++++++++ 2 files changed, 80 insertions(+) diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.css b/blocks/gmo-campaign-header/gmo-campaign-header.css index e69de29b..2cb93581 100644 --- a/blocks/gmo-campaign-header/gmo-campaign-header.css +++ b/blocks/gmo-campaign-header/gmo-campaign-header.css @@ -0,0 +1,36 @@ +.gmo-campaign-header.block { + display: flex; + height: 50px; + margin-top: 20px; +} +.campaign-search { + width: 400px; + height: 32px; + margin-top: 18px; + margin-right: 10px; +} +.filter-wrapper { + height: 100%; + & label { + font: normal normal normal 12px/15px Adobe Clean; + display: block; + height: 18px; + color: #747474; + } + &:not(:last-child) { + margin-right: 10px; + } +} +.filters { + font: normal normal normal 14px/17px Adobe Clean; + color: #505050; + letter-spacing: 0px; + width: 176px; + height: 32px; + &.categories { + width: 200px; + } + &.status { + width: 200px; + } +} diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.js b/blocks/gmo-campaign-header/gmo-campaign-header.js index e69de29b..5ba37cac 100644 --- a/blocks/gmo-campaign-header/gmo-campaign-header.js +++ b/blocks/gmo-campaign-header/gmo-campaign-header.js @@ -0,0 +1,44 @@ + + +export default async function decorate(block) { + block.innerHTML = ` + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ `; +} \ No newline at end of file From 11e69de22f45840a69132d9505f36425a9061940 Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Thu, 11 Apr 2024 16:52:57 -0400 Subject: [PATCH 2/3] refactor from select to div implementation Select with multiselect displays as a list, not a dropdown --- .../gmo-campaign-header.css | 79 +++++++++- .../gmo-campaign-header.js | 137 ++++++++++++++---- 2 files changed, 184 insertions(+), 32 deletions(-) diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.css b/blocks/gmo-campaign-header/gmo-campaign-header.css index 2cb93581..594d0e58 100644 --- a/blocks/gmo-campaign-header/gmo-campaign-header.css +++ b/blocks/gmo-campaign-header/gmo-campaign-header.css @@ -3,20 +3,42 @@ height: 50px; margin-top: 20px; } -.campaign-search { - width: 400px; - height: 32px; +.search-wrapper { + background-color: #FFF; margin-top: 18px; margin-right: 10px; + border: 1px solid #D3d3d3; + border-radius: 4px; + & > .icon { + background-color: #FFF; + height: 14px; + } +} +.campaign-search { + width: 400px; + height: 26px; + border: none; + &:focus { + outline: none; + } } .filter-wrapper { height: 100%; + width: 176px; + display: flex; + flex-direction: column; & label { font: normal normal normal 12px/15px Adobe Clean; display: block; height: 18px; color: #747474; } + & .label { + font: normal normal normal 12px/15px Adobe Clean; + display: block; + height: 18px; + color: #747474; + } &:not(:last-child) { margin-right: 10px; } @@ -34,3 +56,54 @@ width: 200px; } } + +.filter-dropdown { + position: relative; + display: inline-block; + font: normal normal normal 14px/17px Adobe Clean; + letter-spacing: 0px; + height: 32px; + background-color: #FFF; + width: 100%; + border: 1px solid #D3D3D3; + border-radius: 4px; + & > .dropdown-button { + height: 32px; + line-height: 32px; + padding-left: 10px; + display: flex; + justify-content: space-between; + & > .icon { + padding-top: 4px; + height: 16px; + } + & > .icon.inactive { + display: none; + visibility: hidden; + } + } + & > .dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + + max-height: 200px; + overflow-y: auto; + border: 1px solid #ccc; + z-index: 1; + width: 174px; + } + &.active .dropdown-content { + display: block; + } +} + +.dropdown-content a { + display: block; + padding: 10px; + text-decoration: none; + color: #333; + &:hover { + background-color: #ddd; + } +} \ No newline at end of file diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.js b/blocks/gmo-campaign-header/gmo-campaign-header.js index 5ba37cac..148ae045 100644 --- a/blocks/gmo-campaign-header/gmo-campaign-header.js +++ b/blocks/gmo-campaign-header/gmo-campaign-header.js @@ -1,44 +1,123 @@ - +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 +
+
- - +
Cloud Business
+
+
+
All Cloud Businesses
+ + +
+
+ Option 1 + Option 2 + Option 3 + Option 4 + Option 5 +
+
- - +
Products
+
+
+
All Products
+ + +
+
+ Option 1 + Option 2 + Option 3 + Option 4 + Option 5 +
+
- - +
Other (TBD)
+
+
+
Other
+ + +
+
+ Option 1 + Option 2 + Option 3 + Option 4 + Option 5 +
+
`; + document.querySelectorAll('.dropdown-button').forEach((button) => { + button.addEventListener('click', (event) => { + toggleDropdown(event.target); + }); + }); + document.querySelector('.dropoption').addEventListener('click', (event) => { + toggleOption(event.target.dataset.value); + }) + 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); + dropdownOption.classList.toggle("selected"); } \ No newline at end of file From d4120fbc7b9d3abceb91b633a61667899a143f4a Mon Sep 17 00:00:00 2001 From: Michael Dickson Date: Fri, 12 Apr 2024 15:13:17 -0400 Subject: [PATCH 3/3] 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'); + } +}