MediaWiki:Script/Element.js : Différence entre versions
Ligne 1 : | Ligne 1 : | ||
function camelToKebab(str) { | function camelToKebab(str) { | ||
− | return str.replace(/([a-z0-9])([A-Z])/g, | + | return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(); |
} | } | ||
− | |||
function copyProperties(source, target, allowedProps) { | function copyProperties(source, target, allowedProps) { | ||
Ligne 11 : | Ligne 10 : | ||
var propValue = source[property]; | var propValue = source[property]; | ||
− | if (property === | + | if (property === "viewBox") { |
target.setAttribute(property, propValue); | target.setAttribute(property, propValue); | ||
− | + | } else if ( | |
− | } else if (property.indexOf("data") === 0 || allowedProps.indexOf(property) !== -1) { | + | property.indexOf("data") === 0 || |
+ | allowedProps.indexOf(property) !== -1 | ||
+ | ) { | ||
target.setAttribute(camelToKebab(property), propValue); | target.setAttribute(camelToKebab(property), propValue); | ||
} | } | ||
Ligne 20 : | Ligne 21 : | ||
} | } | ||
− | + | function createElement( | |
− | function createElement(elementsToReplace, elementsNS, allowedProperties, elementDataset, elementType) { | + | elementsToReplace, |
− | + | elementsNS, | |
+ | allowedProperties, | ||
+ | elementDataset, | ||
+ | elementType | ||
+ | ) { | ||
if (elementsNS.indexOf(elementType) !== -1) { | if (elementsNS.indexOf(elementType) !== -1) { | ||
− | var newElement = document.createElementNS("http://www.w3.org/2000/svg", elementType); | + | var newElement = document.createElementNS( |
+ | "http://www.w3.org/2000/svg", | ||
+ | elementType | ||
+ | ); | ||
} else { | } else { | ||
var newElement = document.createElement(elementType); | var newElement = document.createElement(elementType); | ||
} | } | ||
− | + | ||
var childdNodes = elementsToReplace.childNodes; | var childdNodes = elementsToReplace.childNodes; | ||
− | + | ||
copyProperties(elementDataset, newElement, allowedProperties); | copyProperties(elementDataset, newElement, allowedProperties); | ||
− | + | ||
for (var childIndex = 0; childIndex < childdNodes.length; childIndex++) { | for (var childIndex = 0; childIndex < childdNodes.length; childIndex++) { | ||
newElement.appendChild(childdNodes[childIndex].cloneNode(true)); | newElement.appendChild(childdNodes[childIndex].cloneNode(true)); | ||
} | } | ||
− | + | ||
return newElement; | return newElement; | ||
} | } | ||
− | + | function replaceElement( | |
− | function replaceElement(elementsToReplace, allowedElements, elementsNS, allowedProperties) { | + | elementsToReplace, |
− | + | allowedElements, | |
+ | elementsNS, | ||
+ | allowedProperties | ||
+ | ) { | ||
var elementDataset = elementsToReplace.dataset; | var elementDataset = elementsToReplace.dataset; | ||
var elementType = elementDataset.element; | var elementType = elementDataset.element; | ||
− | + | ||
if (allowedElements.indexOf(elementType) !== -1) { | if (allowedElements.indexOf(elementType) !== -1) { | ||
− | var newElement = createElement(elementsToReplace, elementsNS, allowedProperties, elementDataset, elementType); | + | var newElement = createElement( |
+ | elementsToReplace, | ||
+ | elementsNS, | ||
+ | allowedProperties, | ||
+ | elementDataset, | ||
+ | elementType | ||
+ | ); | ||
elementsToReplace.parentNode.replaceChild(newElement, elementsToReplace); | elementsToReplace.parentNode.replaceChild(newElement, elementsToReplace); | ||
Ligne 54 : | Ligne 71 : | ||
} | } | ||
} | } | ||
− | |||
function addCollapsible(toggleButton) { | function addCollapsible(toggleButton) { | ||
toggleButton.setAttribute("tabindex", 0); | toggleButton.setAttribute("tabindex", 0); | ||
var collapsibleContent = toggleButton.nextElementSibling.nextElementSibling; | var collapsibleContent = toggleButton.nextElementSibling.nextElementSibling; | ||
− | toggleButton.addEventListener("click", function(event) { | + | var expandedClass = "mw-collapsible-toggle-expanded"; |
− | if ( | + | var isCollapsed = false; |
− | this.classList.remove( | + | toggleButton.addEventListener("click", function (event) { |
+ | if (isCollapsed) { | ||
+ | this.classList.remove(expandedClass); | ||
+ | collapsibleContent.style.maxHeight = null; | ||
collapsibleContent.style.overflow = "hidden"; | collapsibleContent.style.overflow = "hidden"; | ||
− | |||
} else { | } else { | ||
+ | this.classList.add(expandedClass); | ||
collapsibleContent.classList.remove("tabber-noactive"); | collapsibleContent.classList.remove("tabber-noactive"); | ||
− | + | collapsibleContent.style.maxHeight = | |
− | collapsibleContent.style.maxHeight = collapsibleContent.scrollHeight + "px"; | + | collapsibleContent.scrollHeight + 100 + "px"; |
} | } | ||
+ | isCollapsed = !isCollapsed; | ||
}); | }); | ||
− | toggleButton.addEventListener("keyup", function(event) { | + | toggleButton.addEventListener("keyup", function (event) { |
if (event.keyCode === 13) { | if (event.keyCode === 13) { | ||
this.click(); | this.click(); | ||
} | } | ||
}); | }); | ||
− | collapsibleContent.addEventListener("transitionend", function(event) { | + | collapsibleContent.addEventListener("transitionend", function (event) { |
− | if ( | + | console.log(isCollapsed); |
+ | if (isCollapsed) { | ||
this.style.overflow = "visible"; | this.style.overflow = "visible"; | ||
} else { | } else { | ||
− | + | this.classList.add("tabber-noactive"); | |
} | } | ||
}); | }); | ||
} | } | ||
+ | (function () { | ||
+ | var allowedElements = [ | ||
+ | "input", | ||
+ | "button", | ||
+ | "select", | ||
+ | "option", | ||
+ | "label", | ||
+ | "form", | ||
+ | "svg", | ||
+ | "path", | ||
+ | "title", | ||
+ | ]; | ||
+ | var elementsNS = ["svg", "path", "title"]; | ||
+ | var allowedProperties = [ | ||
+ | "id", | ||
+ | "class", | ||
+ | "type", | ||
+ | "name", | ||
+ | "ariaHaspopup", | ||
+ | "ariaExpanded", | ||
+ | "ariaControls", | ||
+ | "for", | ||
+ | "min", | ||
+ | "max", | ||
+ | "value", | ||
+ | "style", | ||
+ | "pattern", | ||
+ | "required", | ||
+ | "selected", | ||
+ | "disabled", | ||
+ | "checked", | ||
+ | "tabindex", | ||
+ | "placeholder", | ||
+ | "xmlns", | ||
+ | "height", | ||
+ | "viewBox", | ||
+ | "width", | ||
+ | "fill", | ||
+ | "d", | ||
+ | "title", | ||
+ | ]; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
var elementsToReplace = document.querySelector("div[data-element]"); | var elementsToReplace = document.querySelector("div[data-element]"); | ||
− | + | ||
while (elementsToReplace) { | while (elementsToReplace) { | ||
− | replaceElement(elementsToReplace, allowedElements, elementsNS, allowedProperties); | + | replaceElement( |
+ | elementsToReplace, | ||
+ | allowedElements, | ||
+ | elementsNS, | ||
+ | allowedProperties | ||
+ | ); | ||
elementsToReplace = document.querySelector("div[data-element]"); | elementsToReplace = document.querySelector("div[data-element]"); | ||
} | } | ||
− | var toggleButtons = document.querySelectorAll(".improved-collapsible.custom-js > .mw-collapsible-toggle"); | + | var toggleButtons = document.querySelectorAll( |
− | + | ".improved-collapsible.custom-js > .mw-collapsible-toggle" | |
+ | ); | ||
+ | |||
for (var toggleButton of toggleButtons) { | for (var toggleButton of toggleButtons) { | ||
addCollapsible(toggleButton); | addCollapsible(toggleButton); | ||
} | } | ||
})(); | })(); |
Version du 10 mars 2024 à 01:23
function camelToKebab(str) {
return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
}
function copyProperties(source, target, allowedProps) {
var sourceKeys = Object.keys(source);
for (var keyIndex = 0; keyIndex < sourceKeys.length; keyIndex++) {
var property = sourceKeys[keyIndex];
var propValue = source[property];
if (property === "viewBox") {
target.setAttribute(property, propValue);
} else if (
property.indexOf("data") === 0 ||
allowedProps.indexOf(property) !== -1
) {
target.setAttribute(camelToKebab(property), propValue);
}
}
}
function createElement(
elementsToReplace,
elementsNS,
allowedProperties,
elementDataset,
elementType
) {
if (elementsNS.indexOf(elementType) !== -1) {
var newElement = document.createElementNS(
"http://www.w3.org/2000/svg",
elementType
);
} else {
var newElement = document.createElement(elementType);
}
var childdNodes = elementsToReplace.childNodes;
copyProperties(elementDataset, newElement, allowedProperties);
for (var childIndex = 0; childIndex < childdNodes.length; childIndex++) {
newElement.appendChild(childdNodes[childIndex].cloneNode(true));
}
return newElement;
}
function replaceElement(
elementsToReplace,
allowedElements,
elementsNS,
allowedProperties
) {
var elementDataset = elementsToReplace.dataset;
var elementType = elementDataset.element;
if (allowedElements.indexOf(elementType) !== -1) {
var newElement = createElement(
elementsToReplace,
elementsNS,
allowedProperties,
elementDataset,
elementType
);
elementsToReplace.parentNode.replaceChild(newElement, elementsToReplace);
} else {
elementsToReplace.remove();
}
}
function addCollapsible(toggleButton) {
toggleButton.setAttribute("tabindex", 0);
var collapsibleContent = toggleButton.nextElementSibling.nextElementSibling;
var expandedClass = "mw-collapsible-toggle-expanded";
var isCollapsed = false;
toggleButton.addEventListener("click", function (event) {
if (isCollapsed) {
this.classList.remove(expandedClass);
collapsibleContent.style.maxHeight = null;
collapsibleContent.style.overflow = "hidden";
} else {
this.classList.add(expandedClass);
collapsibleContent.classList.remove("tabber-noactive");
collapsibleContent.style.maxHeight =
collapsibleContent.scrollHeight + 100 + "px";
}
isCollapsed = !isCollapsed;
});
toggleButton.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
this.click();
}
});
collapsibleContent.addEventListener("transitionend", function (event) {
console.log(isCollapsed);
if (isCollapsed) {
this.style.overflow = "visible";
} else {
this.classList.add("tabber-noactive");
}
});
}
(function () {
var allowedElements = [
"input",
"button",
"select",
"option",
"label",
"form",
"svg",
"path",
"title",
];
var elementsNS = ["svg", "path", "title"];
var allowedProperties = [
"id",
"class",
"type",
"name",
"ariaHaspopup",
"ariaExpanded",
"ariaControls",
"for",
"min",
"max",
"value",
"style",
"pattern",
"required",
"selected",
"disabled",
"checked",
"tabindex",
"placeholder",
"xmlns",
"height",
"viewBox",
"width",
"fill",
"d",
"title",
];
var elementsToReplace = document.querySelector("div[data-element]");
while (elementsToReplace) {
replaceElement(
elementsToReplace,
allowedElements,
elementsNS,
allowedProperties
);
elementsToReplace = document.querySelector("div[data-element]");
}
var toggleButtons = document.querySelectorAll(
".improved-collapsible.custom-js > .mw-collapsible-toggle"
);
for (var toggleButton of toggleButtons) {
addCollapsible(toggleButton);
}
})();