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