MediaWiki:Script/Element.js

Révision datée du 10 mars 2023 à 21:58 par Dexter (discussion | contributions) (Page créée avec « function camelToKebab(str) { return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase(); } function copyProperties(source, target, allowedProps) { var source... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)

Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

  • Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac)
  • Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac)
  • Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5
  • Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d’exploration → Images et fichiers en cache.
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 i = 0; i < sourceKeys.length; i++) {
    
    var prop = sourceKeys[i];
    var propValue = source[prop];

    if (prop.indexOf("data") === 0) {
      target.setAttribute(camelToKebab(prop), propValue);
    }
    else if (allowedProps.indexOf(prop) !== -1) {
      target.setAttribute(camelToKebab(prop), propValue);
    }
  }
}


function createLabelInput(element, allowedProperties, dataset) {
  
  var newElement = document.createElement("label");
  var input = document.createElement("input");
      
  copyProperties(dataset, input, allowedProperties);
  
  newElement.setAttribute("for", input.id);
  newElement.appendChild(input);
  newElement.appendChild(document.createTextNode(element.textContent));
  
  return newElement
}


function createElement(element, allowedProperties, dataset, elementType) {
  
  var newElement = document.createElement(elementType);
  var children = element.childNodes;
      
  copyProperties(dataset, newElement, allowedProperties);
      
  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    newElement.appendChild(child.cloneNode(true));
  }
  
  return newElement
}


function replaceElement(element, allowedElements, allowedProperties) {
  
  var dataset = element.dataset;
  var elementType = dataset.element;
  
  if (allowedElements.indexOf(elementType) !== -1) {
    
    if (elementType === "label-input") {
      var newElement = createLabelInput(element, allowedProperties, dataset);
    } else {
      var newElement = createElement(element, allowedProperties, dataset, elementType);
    }
    
    element.parentNode.replaceChild(newElement, element);
  }
}


(function(){
  
  var elementsToReplace = document.querySelectorAll("div[data-element]");
  var allowedElements = ["input", "button", "select", "label", "form", "label-input"];
  var allowedProperties = ["id", "class", "type", "ariaHaspopup", "ariaExpanded", "ariaControls", "for", "min", "max", "value", "style"];
  
  for (var i = elementsToReplace.length - 1; i >= 0; i--) {
    
    var element = elementsToReplace[i];
    
    var children = element.children;
    
    for (var j = children.length - 1; j >= 0; j--) {
      var child = children[j];
      replaceElement(child, allowedElements, allowedProperties);
    }
    
    replaceElement(element, allowedElements, allowedProperties);
  }
})();