Skip to content

Commit

Permalink
Campaign List filters display (#65)
Browse files Browse the repository at this point in the history 
* initial html structure setup

* refactor from select to div implementation

Select with multiselect displays as a list, not a dropdown

* finish refactor, enable visual functionality

- added all javascript needed for visual functionality
- finished refactoring structure
  • Loading branch information
@mdickson-adbe
mdickson-adbe authored Apr 12, 2024
1 parent 793951c commit 99c061b
Show file tree
Hide file tree
Showing 2 changed files with 346 additions and 0 deletions.
163 changes: 163 additions & 0 deletions blocks/gmo-campaign-header/gmo-campaign-header.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
183 changes: 183 additions & 0 deletions blocks/gmo-campaign-header/gmo-campaign-header.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
import { decorateIcons } from '../../scripts/lib-franklin.js';

export default async function decorate(block) {
block.innerHTML = `
<div class="inputs-wrapper">
<div class="search-wrapper">
<span class="icon icon-search"></span>
<input id="campaign-search" maxlength="512" type="search" class="campaign-search" placeholder="Search Marketing Moments...">
</div>
<div class="filter-wrapper">
<div class="label">Categories</div>
<div class="filter-dropdown" id="campaign-categories">
<div class="dropdown-button">
<div class="dropdown-label">All Categories</div>
<span class="icon icon-chevronDown"></span>
<span class="icon icon-chevronUp inactive"></span>
</div>
<div class="dropdown-content" id="dropdownOptions">
<a href="#" id="option1" data-value="option1" data-type="category" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" data-type="category" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" data-type="category" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" data-type="category" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" data-type="category" class="dropoption">Option 5</a>
</div>
</div>
</div>
<div class="filter-wrapper">
<div class="label">Status</div>
<div class="filter-dropdown" id="campaign-status">
<div class="dropdown-button">
<div class="dropdown-label">All Statuses</div>
<span class="icon icon-chevronDown"></span>
<span class="icon icon-chevronUp inactive"></span>
</div>
<div class="dropdown-content" id="dropdownOptions">
<a href="#" id="option1" data-value="option1" data-type="status" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" data-type="status" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" data-type="status" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" data-type="status" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" data-type="status" class="dropoption">Option 5</a>
</div>
</div>
</div>
<div class="filter-wrapper">
<div class="label">Cloud Business</div>
<div class="filter-dropdown" id="campaign-business">
<div class="dropdown-button">
<div class="dropdown-label">All Cloud Businesses</div>
<span class="icon icon-chevronDown"></span>
<span class="icon icon-chevronUp inactive"></span>
</div>
<div class="dropdown-content" id="dropdownOptions">
<a href="#" id="option1" data-value="option1" data-type="business" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" data-type="business" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" data-type="business" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" data-type="business" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" data-type="business" class="dropoption">Option 5</a>
</div>
</div>
</div>
<div class="filter-wrapper">
<div class="label">Products</div>
<div class="filter-dropdown" id="campaign-products">
<div class="dropdown-button">
<div class="dropdown-label">All Products</div>
<span class="icon icon-chevronDown"></span>
<span class="icon icon-chevronUp inactive"></span>
</div>
<div class="dropdown-content" id="dropdownOptions">
<a href="#" id="option1" data-value="option1" data-type="product" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" data-type="product" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" data-type="product" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" data-type="product" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" data-type="product" class="dropoption">Option 5</a>
</div>
</div>
</div>
<div class="filter-wrapper">
<div class="label">Other (TBD)</div>
<div class="filter-dropdown" id="campaign-other">
<div class="dropdown-button">
<div class="dropdown-label">Other</div>
<span class="icon icon-chevronDown"></span>
<span class="icon icon-chevronUp inactive"></span>
</div>
<div class="dropdown-content" id="dropdownOptions">
<a href="#" id="option1" data-value="option1" data-type="other" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" data-type="other" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" data-type="other" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" data-type="other" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" data-type="other" class="dropoption">Option 5</a>
</div>
</div>
</div>
</div>
<div class="selections-wrapper">
<div class="selected-filters-list">
</div>
<div class="reset-filters inactive">Reset filters</div>
</div>
<span class="icon icon-close inactive"></span>
`;
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');
}
}

0 comments on commit 99c061b

Please sign in to comment.