diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.css b/blocks/gmo-campaign-header/gmo-campaign-header.css index e69de29b..00343bc9 100644 --- a/blocks/gmo-campaign-header/gmo-campaign-header.css +++ b/blocks/gmo-campaign-header/gmo-campaign-header.css @@ -0,0 +1,163 @@ +.gmo-campaign-header.block { + display: flex; + 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 { + 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; + } +} +.filters { + font: normal normal normal 14px/17px Adobe Clean; + color: #505050; + letter-spacing: 0px; + width: 176px; + height: 32px; + &.categories { + width: 200px; + } + &.status { + 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; + & > .dropdown-label { + overflow: hidden; + } + & > .icon { + padding-top: 4px; + height: 16px; + } + } + & > .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; + } +} + +.dropoption.selected { + background-color:#959595; +} +.icon.inactive { + display: none; + visibility: hidden; +} +.dropdown-content a { + display: block; + padding: 10px; + text-decoration: none; + color: #333; + &:hover { + background-color: #ddd; + } +} +.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 e69de29b..d9961bdd 100644 --- a/blocks/gmo-campaign-header/gmo-campaign-header.js +++ b/blocks/gmo-campaign-header/gmo-campaign-header.js @@ -0,0 +1,183 @@ +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 +
+
+
+
+
+
+
+
Reset filters
+
+ + `; + document.querySelectorAll('.dropdown-button').forEach((button) => { + button.addEventListener('click', (event) => { + toggleDropdown(event.target); + }); + }); + 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) { + const dropdown = element.closest('.filter-dropdown'); + const icons = dropdown.querySelectorAll('.icon'); + icons.forEach((icon) => { + icon.classList.toggle('inactive'); + }) + dropdown.classList.toggle('active'); +} + +function toggleOption(optionValue, optionType) { + const dropdownOption = document.querySelector(`[data-value='${optionValue}'][data-type='${optionType}']`); + dropdownOption.classList.toggle("selected"); + 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'); + } +}