MediaWiki:Script/Element.js : Différence entre versions

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", "option", "label", "form", "label-input", "svg", "path", "title"];
  var allowedProperties = ["id", "class", "type", "ariaHaspopup", "ariaExpanded", "ariaControls", "for", "min", "max", "value", "style", "pattern", "required", "selected", "xmlns", "height", "viewBox", "width", "fill", "d"];
  
  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);
  }
})();