toloframework/lib/htmltree.js

/**
 * A HtmlNode has the following attributes:
 * * __type__:
 *   * __VOID__, __EMPTY__: this is a fake node, it will just aggregate nodes in the __children__ attribute.
 *   * __TAG__, __ELEMENT__: an element of the DOM.
 *   * __TEXT__: a text without any tag arround it.
 * * __name__: the name of the element if this node is a DOM element.
 * * __attribs__: an object of all the element attributes, if this node is a DOM element.
 * * __text__: the content of the text element if this node is a text element.
 * * __children__: an array of the children nodes.
 * * __extra__: an object for free information addition.
 *
 * @module node
 */

var id = 1;

/**
 * Not a real element. Just a list of elements.
 * Must contain `children`.
 */
exports.VOID = 0;

/**
 * DOM element tag.
 * Has an attribute *name*.
 * @const
 */
exports.TAG = 1;
exports.ELEMENT = 1;


/**
 * HTML text node.
 * Has an attribute *text*.
 * @const
 */
exports.TEXT = 2;

/**
 * HTML CDATA section.
 * @example
 * <![CDATA[This a is a CDATA section...]]>
 * @const
 */
exports.CDATA = 3;

/**
 * @example
 * <?xml-stylesheet href="default.css" title="Default style"?>
 */
exports.PROCESSING = 4;

/**
 * HTML comment.
 * @example
 * <-- This is a comment -->
 * @const
 */
exports.COMMENT = 5;

/**
 * @const
 */
exports.DOCTYPE = 6;

/**
 * @const
 */
exports.TYPE = 7;

/**
 * Example: `&amp;`, `&lt;`, ...
 */
exports.ENTITY = 8;

/**
 * Put the `text` attribute verbatim, without any transformation, nor parsing.
 */
exports.VERBATIM = 98;

/**
 * Every children is a diffrent HTML file. Usefull to generate several pages.
 */
exports.PAGES = 99;

/**
 * @return a deep copy of `root`.
 */
exports.clone = function(root) {
  return JSON.parse(JSON.stringify(root));
};

/**
 * Return the next incremental id.
 */
exports.nextId = function() {
  return "W" + (id++);
};

/**
 * @param {object} root root of the tree we want to look in.
 * @param {string} name name of the searched TAG. Must be in lowercase.
 * @return the first TAG node with the name `name`.
 */
exports.getElementByName = function(root, name) {
  if (!root) return null;
  if (root.name && root.name.toLowerCase() === name.toLowerCase()) return root;
  if (Array.isArray(root.children)) {
    var i, node;
    for (i = 0 ; i < root.children.length ; i++) {
      node = exports.getElementByName(root.children[i], name);
      if (node !== null) return node;
    }
  }
  return null;
};

/**
 * Remove `child` from the children's list of `parent`.
 */
exports.removeChild = function(parent, child) {
  if (Array.isArray(parent.children)) {
    var i, node;
    for (i = 0 ; i < parent.children.length ; i++) {
      node = parent.children[i];
      if (node === child) {
        parent.children.splice(i, 1);
        break;
      }
    }
  }
};

exports.trim = function(root) {
  var children = root.children;
  function isEmpty(node) {
    if (node.type != exports.TEXT) return false;
    if (!node.text) return false;
    if (node.text.trim().length == 0) return true;
    return false;
  }
  while (children.length > 0 && isEmpty(children[0])) {
    children.shift();
  }
  while (children.length > 0 && isEmpty(children[children.length - 1])) {
    children.pop();
  }
  if (children.length > 0) {
    if (children[0].type == exports.TEXT) {
      children[0].text = children[0].text.trimLeft();
    }
    if (children[children.length - 1].type == exports.TEXT) {
      children[children.length - 1].text = children[children.length - 1].text.trimRight();
    }
  }
};

exports.trimLeft = function(root) {
  var children = root.children;
  function isEmpty(node) {
    if (node.type != exports.TEXT) return false;
    if (!node.text) return false;
    if (node.text.trim().length == 0) return true;
    return false;
  }
  while (children.length > 0 && isEmpty(children[0])) {
    children.shift();
  }
  if (children.length > 0) {
    if (children[0].type == exports.TEXT) {
      children[0].text = children[0].text.trimLeft();
    }
  }
};

exports.trimRight = function(root) {
  var children = root.children;
  function isEmpty(node) {
    if (node.type != exports.TEXT) return false;
    if (!node.text) return false;
    if (node.text.trim().length == 0) return true;
    return false;
  }
  while (children.length > 0 && isEmpty(children[children.length - 1])) {
    children.pop();
  }
  if (children.length > 0) {
    if (children[children.length - 1].type == exports.TEXT) {
      children[children.length - 1].text = children[children.length - 1].text.trimRight();
    }
  }
};

/**
 * Convert a node in HTML code.
 */
exports.toString = function(node) {
  var txt = '',
      key, val;
  if (!node) return '';
  if (node.type == exports.TAG) {
    txt += "<" + node.name;
    for (key in node.attribs) {
      val = "" + node.attribs[key];
      txt += " " + key;
      if( typeof val === 'string' ) {
        // Add a value on ly if it is a string.
        txt += "=" + JSON.stringify(val) + "";
      }
    }
    if (typeof node.html === 'string') {
      txt += ">" + node.html;
    }
    else if (node.children && node.children.length > 0) {
      txt += ">";
      node.children.forEach(
        function(child) {
          txt += exports.toString(child);
        }
      );
      txt += "</" + node.name + ">";
    } else {
      if (node.void) txt += ">";
      else if (node.autoclose) txt += "/>";
      else txt += "></" + node.name + ">";
    }
  }
  else if (node.type == exports.ENTITY) {
    txt += node.text;
  }
  else if (node.type == exports.VERBATIM) {
    txt += node.text;
  }
  else if (node.type == exports.TEXT) {
    txt += node.text.replace(/&/g, '&amp;').replace(/</g, '&lt;');
  }
  else if (node.type == exports.PROCESSING) {
    txt += "<?" + node.name;
    for (key in node.attribs) {
      val = "" + node.attribs[key];
      txt += " " + key + "=" + JSON.stringify(val) + "";
    }
    txt += "?>";
  }
  else if (typeof node.html === 'string') {
    txt += node.html;
  }
  else if (node.children) {
    node.children.forEach(
      function(child) {
        txt += exports.toString(child);
      }
    );
  }

  return txt;
};
/**
 * Put on console a representation of the tree.
 */
exports.debug = function(node, indent) {
  if (typeof indent === 'undefined') indent = '';
  if (!node) {
    return console.log(indent + "UNDEFINED!");
  }
  if (node.type == exports.TEXT) {
    console.log(indent + "\"" + node.text.trim() + "\"");
  } else {
    if (node.children && node.children.length > 0) {
      console.log(
        indent + "<" + (node.name ? node.name : node.type) + "> "
          + (node.attribs ? JSON.stringify(node.attribs) : '')
      );
      node.children.forEach(
        function(child) {
          exports.debug(child, indent + '  ');
        }
      );
      console.log(indent + "</" + (node.name ? node.name : node.type) + "> ");
    } else {
      console.log(
        indent + "<" + (node.name ? node.name : node.type) + " "
          + (node.attribs ? JSON.stringify(node.attribs) : '') + " />"
      );
    }
  }
};
/**
 * Walk through the HTML tree and, eventually, replace branches.
 * The functions used as arguments take only one argument: the current node.
 * @param node {object} root node
 * @param functionBottomUp {function} function to call when traversing the tree bottom-up.
 * @param functionTopDowy {function} function to call when traversing the tree top-down.
 * @param parent {object} parent node or *undefined*.
 */
exports.walk = function(node, functionBotomUp, functionTopDown, parent) {
  if (!node) return;
  var i, child, replacement, children;
  if (typeof functionTopDown === 'function') {
    functionTopDown(node, parent);
  }
  if (node.children) {
    children = [];
    node.children.forEach(
      function(item) {
        children.push(item);
      }
    );
    children.forEach(
      function(child) {
        exports.walk(child, functionBotomUp, functionTopDown, node);
      }
    );
  }
  if (typeof functionBotomUp === 'function') {
    return functionBotomUp(node, parent);
  }
};
/**
 * Get/Set an attribute.
 */
exports.att = function(node, name, value) {
  if (typeof value === 'undefined') {
    if (node.attribs) {
      return node.attribs[name];
    }
    return undefined;
  }
  if (!node.attribs) {
    node.attribs = {};
  }
  node.attribs[name] = value;
};
/**
 * Return the text content of a node.
 */
exports.text = function(node, text) {
  if (typeof text === 'undefined') {
    if (node.type == exports.TEXT) {
      return node.text;
    }
    if (node.children) {
      var txt = "";
      node.children.forEach(
        function(child) {
          txt += exports.text(child);
        }
      );
      return txt;
    } else {
      return "";
    }
  } else {
    node.children = [
      {
        type: exports.TEXT,
        text: text
      }
    ];
  }
};
/**
 * Return a node representing a viewable error message.
 */
exports.createError = function(msg) {
  return {
    type: exports.TAG,
    name: "div",
    attribs: {
      style: "margin:4px;padding:4px;border:2px solid #fff;color:#fff;background:#f00;"
        + "box-shadow:0 0 2px #000;overflow:auto;font-family:monospace;font-size:1rem;"
    },
    children: [
      {
        type: exports.TEXT,
        text: msg.replace("\n", "<br/>", "g")
      }
    ]
  };
};
/**
 * Add a class to a node of type TAG.
 */
exports.addClass = function(node, className) {
  if (!node.attribs) {
    node.attribs = {};
  }
  var classes = (node.attribs["class"] || "").split(/[ \t\n\r]/g);
  var i;
  for (i = 0 ; i < classes.length ; i++) {
    if (className == classes[i]) return false;
  }
  var txt = "";
  classes.push(className);
  for (i = 0 ; i < classes.length ; i++) {
    if (txt.length > 0) {
      txt += " ";
    }
    txt += classes[i];
  }
  if (txt.length > 0) {
    node.attribs["class"] = txt;
  }
  return true;
};
/**
 * Return a node of type TAG représenting a javascript content.
 */
exports.createJavascript = function(code) {
  return {
    type: exports.TAG,
    name: "script",
    attribs: {
      type: "text/javascript"
    },
    children: [
      {
        type: exports.TEXT,
        text: "//<![CDATA[\n" + code + "//]]>"
      }
    ]
  };
};

exports.forEachAttrib = function(node, func) {
  var attribs = node.attribs,
      attName, attValue, count = 0;
  if (!attribs) return 0;
  for (attName in attribs) {
    attValue = attribs[attName];
    if (typeof attValue === 'string') {
      func(attName, attValue);
    }
  }
  return count;
};

/**
 * Apply a function on every child of a node.
 */
exports.forEachChild = function(node, func) {
  var children = node.children, i, child;
  if (!children) return false;
  for (i = 0 ; i < children.length ; i++) {
    child = children[i];
    if (typeof child.type === 'undefined' || child.type == exports.VOID) {
      exports.forEachChild(child, func);
    }
    else if (true === func(child, i)) {
      break;
    }
  }
  return i;
};
/**
 * If a node's children is of type VOID, we must remove it and add its
 * children to node's children.
 *
 * Then following tree:
 * ```
 * {
 *   children: [
 *     {
 *       children: [
 *         {type: Tree.TAG, name: "hr"},
 *         {
 *           children: [{type: Tree.TAG, name: "img"}]
 *         }
 *         {type: Tree.TEXT, text: "Hello"},
 *       ]
 *     },
 *     {type: Tree.TEXT, text: "World"},
 *   ],
 *   type: Tree.TAG,
 *   name: "div"
 * }
 * ```
 * will be tranformed in:
 * ```
 * {
 *   children: [
 *     {type: Tree.TAG, name: "hr"},
 *     {type: Tree.TAG, name: "img"},
 *     {type: Tree.TEXT, text: "Hello"},
 *     {type: Tree.TEXT, text: "World"},
 *   ],
 *   type: Tree.TAG,
 *   name: "div"
 * }
 * ```
 */
exports.normalizeChildren = function(node, recurse) {
  if (typeof recurse === 'undefined') recurse = false;
  if (node.children) {
    var children = [];
    extractNonVoidChildren(node, children);
    node.children = children;
    if (recurse) {
      node.children.forEach(
        function(child) {
          exports.normalizeChildren(child, true);
        }
      );
    }
  }
};

function extractNonVoidChildren(node, target) {
  if (typeof target === 'undefined') target = [];
  if (node.children && node.children.length > 0) {
    node.children.forEach(
      function(child) {
        if (!child.type || child.type == exports.VOID) {
          extractNonVoidChildren(child, target);
        } else {
          target.push(child);
        }
      }
    );
  }
  return target;
}

/**
 * @return The first children tag with name `tagname`, or `null` if not found.
 */
exports.findChild = function(root, tagname) {
  if (!Array.isArray(root.children)) return null;
  for (var i = 0 ; i < root.children.length ; i++) {
    var item = root.children[i];
    if (item.type == exports.TAG && item.name == tagname) return item;
  }
  return null;
};

/**
 * If a tag called `tagname` exist among `root`'s children, return it.
 * Otherwise, create a new tag, append it to `root` and return it.
 */
exports.findOrAppendChild = function(root, tagname, attribs, children) {
  var child = exports.findChild(root, tagname);
  if (child) return child;
  child = exports.tag(tagname, attribs, children);
  if (!Array.isArray(root.children)) {
    root.children = [child];
  } else {
    root.children.push(child);
  }
  return child;
};

/**
 * Return a div element.
 */
exports.div = function(attribs, children) {
  return exports.tag("div", attribs, children);
};

/**
 * @example
 * // <span style='color: red'>ERROR</span>
 * htmltree.tag("span", {style: "color: red"}, "ERROR");
 * @example
 * // <b><span class="dirty">OK!</span></b>
 * htmltree.tag("b", {}, [
 *   htmltree.tag("span", "dirty", "OK!")
 * ]);
 */
exports.tag = function(name, attribs, children) {
  if (!attribs) attribs = {};
  if (typeof attribs === 'string') attribs = {"class": attribs};
  if (typeof children === 'undefined') children = [];
  if (!Array.isArray(children)) {
    if (typeof children === 'string') {
      children = {
        type: exports.TEXT,
        text: children
      };
    }
    children = [children];
  }
  return {
    type: exports.TAG,
    name: name,
    attribs: attribs,
    children: children
  };
};
/**
 * Return multi-lingual text.
 */
exports.createText = function(dic) {
  var key, val, children = [];
  for (key in dic) {
    val = dic[key];
    children.push(
      {
        type: exports.TAG,
        name: "span",
        attribs: {
          lang: key
        },
        children: [
          {
            type: exports.TEXT,
            text: val
          }
        ]
      }
    );
  }
  return children;
};
/**
 * @description
 * Remove all TEXT or COMMENT children.
 *
 * @param root the htmlnode from which you want to keep only TAG children.
 * @memberof node
 */
exports.keepOnlyTagChildren = function(root) {
  if (!root.children) return root;
  var children = [];
  root.children.forEach(
    function(node) {
      if (node.type == exports.TAG) {
        children.push(node);
      }
    }
  );
  root.children = children;
  return root;
};


/**
 * @param {string} html.
 * @return A node
 */
exports.fromHtml = function( html ) {

};