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 === 'viewBox') {
      target.setAttribute(prop, propValue);

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



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


function createSvgPath(element, allowedProperties, dataset) {

  var svg = document.createElementNS(dataset["xmlns"], "svg");
  var path = document.createElementNS(dataset["xmlns"], "path");
  var title = document.createElement("title");
  
  var dAttribute = dataset["d"];
  var titleContent = dataset["title"];
  
  delete dataset["d"];
  delete dataset["title"];
  
  copyProperties(dataset, svg, allowedProperties);
  
  path.setAttribute("d", dAttribute);
  title.textContent = titleContent;
  
  svg.appendChild(title);
  svg.appendChild(path);
  
  return svg;
}


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 if (elementType === "svg-path") {
      var newElement = createSvgPath(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"];
  var allowedProperties = ["id", "class", "type", "name", "ariaHaspopup", "ariaExpanded", "ariaControls", "for", "min", "max", "value", "style", "pattern", "required", "selected", "xmlns", "height", "viewBox", "width", "fill", "d", "title"];

  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);
  }
})();