Skip to content

Commit

Permalink
fix ui bug where actions on a second filter instance affect UI of fir…
Browse files Browse the repository at this point in the history 
…st filter instance
  • Loading branch information
Rasyadi Abdoellah committed Feb 7, 2020
1 parent 382f049 commit f366299
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 47 deletions.
155 changes: 111 additions & 44 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,61 +14,123 @@

<body>
<h1>This is a sandbox</h1>
<div>

<div class="btn-group" role="group" aria-label="day filter" data-filter-type="exclusive">
<button class="btn btn-outline-primary filter-btn" data-filter="day" data-value="1">day 1</button>
<button class="btn btn-outline-primary filter-btn" data-filter="day" data-value="2">day 2</button>
<button class="btn btn-outline-primary filter-btn" data-filter="day" data-value="3">day 3</button>
<button class="btn btn-outline-primary filter-btn" data-reset='all'>reset all</button>
</div>
<div class="btn-group" role="group" aria-label="day filter" data-filter-type="exclusive">
<button class="btn btn-outline-primary filter-btn" data-filter="day" data-value="1">day 1</button>
<button class="btn btn-outline-primary filter-btn" data-filter="day" data-value="2">day 2</button>
<button class="btn btn-outline-primary filter-btn" data-filter="day" data-value="3">day 3</button>
<button class="btn btn-outline-primary filter-btn" data-reset='all'>reset all</button>
</div>

<div class="btn-group" role="group" aria-label="topic filter">
<button class="btn btn-outline-primary filter-btn" data-filter="topic" data-value="1">topic 1</button>
<button class="btn btn-outline-primary filter-btn" data-filter="topic" data-value="2">topic 2</button>
<button class="btn btn-outline-primary filter-btn" data-filter="topic" data-value="3">topic 3</button>
<button class="btn btn-outline-primary filter-btn active" data-filter="topic" data-reset="filter">reset</button>
<div class="btn-group" role="group" aria-label="topic filter">
<button class="btn btn-outline-primary filter-btn" data-filter="topic" data-value="1">topic 1</button>
<button class="btn btn-outline-primary filter-btn" data-filter="topic" data-value="2">topic 2</button>
<button class="btn btn-outline-primary filter-btn" data-filter="topic" data-value="3">topic 3</button>
<button class="btn btn-outline-primary filter-btn active" data-filter="topic" data-reset="filter">reset</button>

</div>
</div>

<div class="btn-group" role="group" aria-label="category">
<button class="btn btn-outline-primary filter-btn" data-filter="category" data-value="1">category 1</button>
<button class="btn btn-outline-primary filter-btn" data-filter="category" data-value="2">category 2</button>
<button class="btn btn-outline-primary filter-btn" data-filter="category" data-value="3">category 3</button>
<button class="btn btn-outline-primary filter-btn active" data-filter="category" data-reset="filter">reset</button>
<div class="btn-group" role="group" aria-label="category">
<button class="btn btn-outline-primary filter-btn" data-filter="category" data-value="1">category 1</button>
<button class="btn btn-outline-primary filter-btn" data-filter="category" data-value="2">category 2</button>
<button class="btn btn-outline-primary filter-btn" data-filter="category" data-value="3">category 3</button>
<button class="btn btn-outline-primary filter-btn active" data-filter="category" data-reset="filter">reset</button>
</div>

<button class="btn btn-outline-primary filter-btn" data-reset="all">reset all</button>
<button class="btn btn-outline-primary filter-btn active" data-filter="day" data-reset="filter">reset day</button>



<div class="row">
<div class="col filter-item" data-day="1" data-topic="1" data-category="2">
day 1 topic 1 category 2 item 1
</div>
<div class="col filter-item" data-day="1" data-topic="1" data-category="1">
day 1 topic 1 category 1 item 2
</div>
<div class="col filter-item" data-day="1" data-topic="2" data-category="3">
day 1 topic 2 category 3 item 3
</div>
<div class="col filter-item" data-day="2" data-topic="2" data-category="1">
day 2 topic 2 item 4
</div>
<div class="col filter-item" data-day="2" data-topic="1" data-category="2">
day 2 topic 1 item 5
</div>
<div class="col filter-item" data-day="2" data-topic="3" data-category="3">
day 2 topic 3 item 6
</div>
<div class="col filter-item" data-day="1" data-topic="3" data-category="2">
day 1 topic 3 item 7
</div>
<div class="col filter-item" data-day="3" data-topic="2" data-category="3">
day 3 topic 2 item 8
</div>
<div class="col filter-item" data-day="3" data-topic="1" data-category="1">
day 3 topic 1 item 9
</div>
</div>
</div>

<button class="btn btn-outline-primary filter-btn" data-reset="all">reset all</button>
<button class="btn btn-outline-primary filter-btn active" data-filter="day" data-reset="filter">reset day</button>
<div>

<div class="btn-group" role="group" aria-label="day filter" data-filter-type="exclusive">
<button class="btn btn-outline-primary sec-filter-btn" data-filter="day" data-value="1">day 1</button>
<button class="btn btn-outline-primary sec-filter-btn" data-filter="day" data-value="2">day 2</button>
<button class="btn btn-outline-primary sec-filter-btn" data-filter="day" data-value="3">day 3</button>
<button class="btn btn-outline-primary sec-filter-btn" data-reset='all'>reset all</button>
</div>

<div class="btn-group" role="group" aria-label="topic filter">
<button class="btn btn-outline-primary sec-filter-btn" data-filter="topic" data-value="1">topic 1</button>
<button class="btn btn-outline-primary sec-filter-btn" data-filter="topic" data-value="2">topic 2</button>
<button class="btn btn-outline-primary sec-filter-btn" data-filter="topic" data-value="3">topic 3</button>
<button class="btn btn-outline-primary sec-filter-btn active" data-filter="topic" data-reset="filter">reset</button>

<div class="row">
<div class="col filter-item" data-day="1" data-topic="1" data-category="2">
day 1 topic 1 category 2 item 1
</div>
<div class="col filter-item" data-day="1" data-topic="1" data-category="1">
day 1 topic 1 category 1 item 2
</div>
<div class="col filter-item" data-day="1" data-topic="2" data-category="3">
day 1 topic 2 category 3 item 3
</div>
<div class="col filter-item" data-day="2" data-topic="2" data-category="1">
day 2 topic 2 item 4
</div>
<div class="col filter-item" data-day="2" data-topic="1" data-category="2">
day 2 topic 1 item 5
</div>
<div class="col filter-item" data-day="2" data-topic="3" data-category="3">
day 2 topic 3 item 6
</div>
<div class="col filter-item" data-day="1" data-topic="3" data-category="2">
day 1 topic 3 item 7
</div>
<div class="col filter-item" data-day="3" data-topic="2" data-category="3">
day 3 topic 2 item 8

<div class="btn-group" role="group" aria-label="category">
<button class="btn btn-outline-primary sec-filter-btn" data-filter="category" data-value="1">category 1</button>
<button class="btn btn-outline-primary sec-filter-btn" data-filter="category" data-value="2">category 2</button>
<button class="btn btn-outline-primary sec-filter-btn" data-filter="category" data-value="3">category 3</button>
<button class="btn btn-outline-primary sec-filter-btn active" data-filter="category" data-reset="filter">reset</button>
</div>
<div class="col filter-item" data-day="3" data-topic="1" data-category="1">
day 3 topic 1 item 9

<button class="btn btn-outline-primary sec-filter-btn" data-reset="all">reset all</button>
<button class="btn btn-outline-primary sec-filter-btn active" data-filter="day" data-reset="filter">reset day</button>



<div class="row">
<div class="col sec-filter-item" data-day="1" data-topic="1" data-category="2">
day 1 topic 1 category 2 item 1
</div>
<div class="col sec-filter-item" data-day="1" data-topic="1" data-category="1">
day 1 topic 1 category 1 item 2
</div>
<div class="col sec-filter-item" data-day="1" data-topic="2" data-category="3">
day 1 topic 2 category 3 item 3
</div>
<div class="col sec-filter-item" data-day="2" data-topic="2" data-category="1">
day 2 topic 2 item 4
</div>
<div class="col sec-filter-item" data-day="2" data-topic="1" data-category="2">
day 2 topic 1 item 5
</div>
<div class="col sec-filter-item" data-day="2" data-topic="3" data-category="3">
day 2 topic 3 item 6
</div>
<div class="col sec-filter-item" data-day="1" data-topic="3" data-category="2">
day 1 topic 3 item 7
</div>
<div class="col sec-filter-item" data-day="3" data-topic="2" data-category="3">
day 3 topic 2 item 8
</div>
<div class="col sec-filter-item" data-day="3" data-topic="1" data-category="1">
day 3 topic 1 item 9
</div>
</div>
</div>

Expand All @@ -82,6 +144,11 @@ <h1>This is a sandbox</h1>
<script>
const itemFilter = new Filter({ day: {}, topic: {}, category: {} })
itemFilter.init()

const secFilter = new Filter({ day: {}, topic: {}, category: {} })
secFilter.setItemClass('sec-filter-item')
secFilter.setSelector('sec-filter-btn')
secFilter.init()
</script>


Expand Down
6 changes: 3 additions & 3 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,14 +130,14 @@ class Filter {
//check for active class on current element after .toggle() is called. if active, adds element data to filters object. if false, removes data
if (el.classList.contains(this.toggler)) {
this.filters[filter][value] = true //add value to filter obj
document.querySelector(`[data-filter=${filter}][data-reset="filter"]`).classList.remove(`${this.toggler}`)//remove active from reset button
document.querySelector(`.${this._btnClass}[data-filter=${filter}][data-reset="filter"]`).classList.remove(`${this.toggler}`)//remove active from reset button

//current behaviour assumes that all filters on = resetting the filter to show all. This also assumes that if there is a local reset button it is used as the show all button
if ((this._isAdditive || (parent.dataset && parent.dataset.filterType === 'additive')) && Filter.isEqualObj(this.filters[filter], this.__filterMap[filter])) {
this.resetFilter(el)
this.resetFilterGrpUi(el)
// set the reset button (used as a show all) to active
document.querySelector(`[data-filter=${filter}][data-reset="filter"]`).classList.add(`${this.toggler}`)
document.querySelector(`.${this._btnClass}[data-filter=${filter}][data-reset="filter"]`).classList.add(`${this.toggler}`)
}
} else {
delete this.filters[filter][value]
Expand Down Expand Up @@ -191,7 +191,7 @@ class Filter {
}

resetFilterGrpUi(el) {
el = document.querySelector(`[data-filter="${el.dataset.filter}"]`).parentNode.firstElementChild
el = document.querySelector(`.${this.selector}[data-filter="${el.dataset.filter}"]`).parentNode.firstElementChild
do {
el.classList.remove(`${this.toggler}`)
} while (el = el.nextElementSibling)
Expand Down

0 comments on commit f366299

Please sign in to comment.