Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve Filter Dialog (especially) on Mobile #248

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Improve Filter Dialog (especially) on Mobile #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c76eb1
Use img lazyloading
michikrug Mar 18, 2022
fda52d1
Use partial loading
michikrug Mar 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 34 additions & 42 deletions static/js/map/map.settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1681,46 +1681,24 @@ const refreshSavedSettings = function () {

const createFilterButton = (function () {
let templateDiv
let lazyImageObserver

function createTemplateDiv() {
const containerDiv = document.createElement('div')
containerDiv.innerHTML = `
<div class='filter-button'>
<div class='filter-button-content'>
<div id='btnheader'></div>
<div><div class='filter-image'></div>
<div id='btnfooter'></div>
<div class="filter-button">
<div class="filter-button-content">
<div id="btnheader"></div>
<img class="filter-image" src="../../images/placeholder.png" loading="lazy">
<div id="btnfooter"></div>
</div>
</div>`
return containerDiv.firstElementChild
}

function tryCreateLazyImageObserver() {
if (!('IntersectionObserver' in window)) {
return null
}

return new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImage = entry.target
lazyImage.style.content = lazyImage.dataset.lazyContent
delete lazyImage.dataset.lazyContent
observer.unobserve(lazyImage)
}
})
})
}

return function (id, header, footer, iconUrl, isActive) {
if (typeof templateDiv === 'undefined') {
templateDiv = createTemplateDiv()
}
if (typeof lazyImageObserver === 'undefined') {
lazyImageObserver = tryCreateLazyImageObserver()
}

// Clone a template div, which is faster than creating and parsing HTML for each filter button.
const buttonDiv = templateDiv.cloneNode(true)
buttonDiv.dataset.id = id
Expand All @@ -1732,14 +1710,8 @@ const createFilterButton = (function () {
headerDiv.removeAttribute('id')
headerDiv.textContent = header

const imageDiv = buttonDiv.querySelector('div.filter-image')
const imageContent = `url(${iconUrl})`
if (lazyImageObserver === null) {
imageDiv.style.content = imageContent
} else {
imageDiv.dataset.lazyContent = imageContent
lazyImageObserver.observe(imageDiv)
}
const imageImg = buttonDiv.querySelector('img.filter-image')
imageImg.setAttribute('src', iconUrl)

const footerDiv = buttonDiv.querySelector('#btnfooter')
footerDiv.removeAttribute('id')
Expand Down Expand Up @@ -1772,16 +1744,35 @@ class FilterManager {
const modalDiv = document.getElementById(modalId)
this._settingsIds = settings[settingsKey]
this._titleElement = modalDiv.querySelector(this.getTitleSelector())
this._buttonById = {}
this._filterListDiv = modalDiv.querySelector(this.getListSelector())
this._buttonById = { }
this._modalInitialized = false

const appendButtons = (start, end) => {
if (start > 0) this._filterListDiv.lastChild.remove()
const buttons = Object.values(this._buttonById)
this._filterListDiv.append(...buttons.slice(start, end))
if (end < buttons.length) {
const loadMoreButton = document.createElement('div')
loadMoreButton.classList.add('load-more-button')
loadMoreButton.innerHTML = 'Load More...'
loadMoreButton.addEventListener('click', () => {
appendButtons(end, end + 100)
})
this._filterListDiv.appendChild(loadMoreButton)
}
}

setModalFunction(modalDiv, 'onCloseEnd', () => {
this._filterListDiv.innerHTML = ''
})

setModalFunction(modalDiv, 'onOpenStart', () => {
if (this._modalInitialized) {
appendButtons(0, 100)
return
}

const filterListDiv = modalDiv.querySelector(this.getListSelector())

for (const id of this.getAllIds()) {
const isActive = this._settingsIds.has(id) !== isExclusion
const button = createFilterButton(
Expand All @@ -1792,12 +1783,13 @@ class FilterManager {
isActive
)
this._buttonById[id] = button
filterListDiv.appendChild(button)
}

appendButtons(0, 100)

this._updateTitle()

filterListDiv.addEventListener('click', e => {
this._filterListDiv.addEventListener('click', e => {
const button = e.target.closest('.filter-button')
if (button === null) {
return
Expand Down Expand Up @@ -1829,8 +1821,8 @@ class FilterManager {
}
}

filterListDiv.parentElement.querySelector('.filter-select-all').addEventListener('click', onSelectDeselectAllClick.bind(this, true))
filterListDiv.parentElement.querySelector('.filter-deselect-all').addEventListener('click', onSelectDeselectAllClick.bind(this, false))
this._filterListDiv.parentElement.querySelector('.filter-select-all').addEventListener('click', onSelectDeselectAllClick.bind(this, true))
this._filterListDiv.parentElement.querySelector('.filter-deselect-all').addEventListener('click', onSelectDeselectAllClick.bind(this, false))

this._modalInitialized = true
})
Expand Down
12 changes: 10 additions & 2 deletions static/sass/components/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
height: 2rem;
}

.filter-button {
.filter-button, .load-more-button {
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -107,10 +107,13 @@
width: 32px;
height: 32px;
margin: auto;
content: url(../../images/placeholder.png);
}
}

.load-more-button {
background-color: #cddfff;
}

.filter-button-content {
text-align: center;
}
Expand Down Expand Up @@ -138,6 +141,11 @@
}
}

.load-more-button {
color: $text-color-dark;
background-color: #1c40b7;
}

.btn-flat {
color: $text-color-dark !important;
}
Expand Down