Skip to content

Commit

Permalink
finish refactor, enable visual functionality
Browse files Browse the repository at this point in the history 
- added all javascript needed for visual functionality
- finished refactoring structure
  • Loading branch information
@mdickson-adbe
mdickson-adbe committed Apr 12, 2024
1 parent 11e69de commit d4120fb
Show file tree
Hide file tree
Showing 2 changed files with 207 additions and 93 deletions.
66 changes: 60 additions & 6 deletions blocks/gmo-campaign-header/gmo-campaign-header.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -98,6 +107,13 @@
}
}

.dropoption.selected {
background-color:#959595;
}
.icon.inactive {
display: none;
visibility: hidden;
}
.dropdown-content a {
display: block;
padding: 10px;
Expand All @@ -106,4 +122,42 @@
&: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;
}
}
}
234 changes: 147 additions & 87 deletions blocks/gmo-campaign-header/gmo-campaign-header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,122 +2,182 @@ import { decorateIcons } from '../../scripts/lib-franklin.js';

export default async function decorate(block) {
block.innerHTML = `
<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>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" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" class="dropoption">Option 5</a>
</div>
<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>
<div class="filter-wrapper">
<div class="label">Status</div>
<div class="filter-dropdown" id="campaign-status">
<div class="dropdown-button">
<div>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" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" class="dropoption">Option 5</a>
<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>
<div class="filter-wrapper">
<div class="label">Cloud Business</div>
<div class="filter-dropdown" id="campaign-business">
<div class="dropdown-button">
<div>All Cloud Businesses</div>
<span class="icon icon-chevronDown"></span>
<span class="icon icon-chevronUp inactive"></span>
<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 class="dropdown-content" id="dropdownOptions">
<a href="#" id="option1" data-value="option1" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" class="dropoption">Option 5</a>
</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>
<div class="filter-wrapper">
<div class="label">Products</div>
<div class="filter-dropdown" id="campaign-products">
<div class="dropdown-button">
<div>All Products</div>
<span class="icon icon-chevronDown"></span>
<span class="icon icon-chevronUp inactive"></span>
<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 class="dropdown-content" id="dropdownOptions">
<a href="#" id="option1" data-value="option1" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" class="dropoption">Option 5</a>
</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="filter-wrapper">
<div class="label">Other (TBD)</div>
<div class="filter-dropdown" id="campaign-other">
<div class="dropdown-button">
<div>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" class="dropoption">Option 1</a>
<a href="#" id="option2" data-value="option2" class="dropoption">Option 2</a>
<a href="#" id="option3" data-value="option3" class="dropoption">Option 3</a>
<a href="#" id="option4" data-value="option4" class="dropoption">Option 4</a>
<a href="#" id="option5" data-value="option5" class="dropoption">Option 5</a>
</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.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");
}
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 d4120fb

Please sign in to comment.