@rr0/cms
Version:
RR0 Content Management System (CMS)
149 lines (148 loc) • 6.57 kB
JavaScript
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _FilterForm_tagSelector, _FilterForm_langs, _FilterForm_formSelector;
export class FilterForm {
/**
*
* @param {string} formSelector
* @param {function} tagSelector
* @param {string[]} checkedLangs The array of initially-checked inputs.
* @param {object} supportedLangs Key-values of languages
* @param {function} tagAttribute returns the attribute that will provide a possible value to check.
*/
constructor(formSelector, tagSelector, checkedLangs, supportedLangs, tagAttribute) {
/**
* @member {function}
*/
_FilterForm_tagSelector.set(this, void 0);
/**
* @member {object}
*/
_FilterForm_langs.set(this, void 0);
/**
* @member {string}
*/
_FilterForm_formSelector.set(this, void 0);
__classPrivateFieldSet(this, _FilterForm_formSelector, formSelector, "f");
__classPrivateFieldSet(this, _FilterForm_tagSelector, tagSelector, "f");
this.checked = checkedLangs;
__classPrivateFieldSet(this, _FilterForm_langs, supportedLangs, "f");
this.tagAttribute = tagAttribute;
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", ready);
}
else {
this.ready();
}
}
/**
*
* @param {string} value
* @return {HTMLElement[]}
*/
getTags(value) {
const selector = __classPrivateFieldGet(this, _FilterForm_tagSelector, "f").call(this, value);
const tags = Array.from(document.querySelectorAll(selector))
.filter(element => !["HTML", "I"].includes(element.nodeName));
const lang = __classPrivateFieldGet(this, _FilterForm_langs, "f")[value];
return lang ? tags.map(tag => {
const transform = lang.transform;
return transform ? transform(tag) : tag;
}) : tags;
}
clicked() {
const inputs = Array.from(document.querySelectorAll(__classPrivateFieldGet(this, _FilterForm_formSelector, "f") + ` input[type="checkbox"]`));
for (const input of inputs) {
const tags = this.getTags(input.value);
for (let i = 0; i < tags.length; i++) {
const item = tags[i];
item.classList.toggle("visible", input.checked);
item.classList.toggle("hidden", !input.checked);
this.hint(input, input.checked ? "Cliquez pour masquer" : "Cliquez pour afficher");
const id = item.getAttribute("id");
if (id) {
item.setAttribute("value", id);
}
}
}
const checkedOnes = inputs.filter(input => input.checked);
if (checkedOnes.length <= 1) {
checkedOnes.forEach(checkedOne => {
checkedOne.disabled = true;
let listStyleType;
let dir;
switch (checkedOne.value) {
case "he":
listStyleType = "hebrew";
dir = "rtl";
break;
case "ar":
listStyleType = "arabic-indic";
dir = "rtl";
break;
default:
listStyleType = null;
dir = null;
}
const list = document.querySelector("ol.indexed");
if (list) {
list.style["list-style-type"] = listStyleType;
list.setAttribute("dir", dir);
}
this.hint(checkedOne, inputs.length > 1 ? "Sélectionnez un autre choix avant de déselectionner celui-ci" : "Seul choix disponible");
});
}
else {
checkedOnes.forEach(checkedOne => {
checkedOne.disabled = false;
});
}
}
hint(input, hint) {
const labeled = input.parentElement.nodeName === "LABEL" ? input.parentElement : input;
labeled.title = hint;
}
ready() {
const ps = this.getTags();
const values = ps.reduce((ls, p) => {
ls.add(this.tagAttribute(p));
return ls;
}, new Set());
const valuesArr = Array.from(values);
let checked = valuesArr.filter(value => this.checked.includes(value));
if (checked.length <= 0) {
checked = valuesArr[0];
}
const form = document.querySelector(__classPrivateFieldGet(this, _FilterForm_formSelector, "f"));
for (const value of values) {
const label = document.createElement("label");
const input = document.createElement("input");
input.type = "checkbox";
input.value = value;
input.onclick = this.clicked.bind(this);
if (checked.includes(value)) {
input.checked = true;
}
label.appendChild(input);
const lang = __classPrivateFieldGet(this, _FilterForm_langs, "f")[value];
if (lang) {
label.append(" " + lang.label);
form.append(label);
}
else {
console.warn("Unusupported lang", lang);
}
}
this.clicked();
}
}
_FilterForm_tagSelector = new WeakMap(), _FilterForm_langs = new WeakMap(), _FilterForm_formSelector = new WeakMap();