Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-06-19 19:09:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: filter form client-side js to extract out some logic

Browse Source
This commit is contained in:
Julian Lam
2023-02-08 14:01:14 -05:00
parent 2fde4ae3f7
commit 1322faa3bf
1 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
public/src/client/flags/list.js
View File

@@ -47,35 +47,60 @@ define('forum/flags/list', [
Flags.enableFilterForm = function () {
const $filtersEl = components.get('flags/filters');
if ($filtersEl && $filtersEl.get(0).nodeName !== 'FORM') {
// Harmony; update hidden form and submit on change
const filtersEl = $filtersEl.get(0);
const formEl = filtersEl.querySelector('form');
// Parse ajaxify data to set form values to reflect current filters
for (const filter in ajaxify.data.filters) {
if (ajaxify.data.filters.hasOwnProperty(filter)) {
$filtersEl.find('[name="' + filter + '"]').val(ajaxify.data.filters[filter]);
filtersEl.addEventListener('click', (e) => {
const subselector = e.target.closest('[data-value]');
if (!subselector) {
return;
}
const name = subselector.getAttribute('data-name');
const value = subselector.getAttribute('data-value');
formEl[name].value = value;
applyFilters(formEl);
});
} else {
// Persona; parse ajaxify data to set form values to reflect current filters
for (const filter in ajaxify.data.filters) {
if (ajaxify.data.filters.hasOwnProperty(filter)) {
$filtersEl.find('[name="' + filter + '"]').val(ajaxify.data.filters[filter]);
}
}
}
$filtersEl.find('[name="sort"]').val(ajaxify.data.sort);
$filtersEl.find('[name="sort"]').val(ajaxify.data.sort);
document.getElementById('apply-filters').addEventListener('click', function () {
const payload = $filtersEl.serializeArray();
// cid is special comes from categoryFilter module
selectedCids.forEach(function (cid) {
payload.push({ name: 'cid', value: cid });
document.getElementById('apply-filters').addEventListener('click', function () {
applyFilters($filtersEl.get(0));
});
ajaxify.go('flags?' + (payload.length ? $.param(payload) : 'reset=1'));
});
$filtersEl.find('button[data-target="#more-filters"]').click((ev) => {
const textVariant = ev.target.getAttribute('data-text-variant');
if (!textVariant) {
return;
}
ev.target.setAttribute('data-text-variant', ev.target.textContent);
ev.target.firstChild.textContent = textVariant;
});
$filtersEl.find('button[data-target="#more-filters"]').click((ev) => {
const textVariant = ev.target.getAttribute('data-text-variant');
if (!textVariant) {
return;
}
ev.target.setAttribute('data-text-variant', ev.target.textContent);
ev.target.firstChild.textContent = textVariant;
});
}
};
function applyFilters(formEl) {
const payload = new FormData(formEl);
// cid is special comes from categoryFilter module
selectedCids.forEach(function (cid) {
payload.append('cid', cid);
});
const length = Array.from(payload.values()).filter(Boolean);
const qs = new URLSearchParams(payload).toString();
ajaxify.go('flags?' + (length ? qs : 'reset=1'));
}
Flags.enableCheckboxes = function () {
const flagsList = document.querySelector('[component="flags/list"]');
const checkboxes = flagsList.querySelectorAll('[data-flag-id] input[type="checkbox"]');