dom-api-shady.html

<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="settings.html">
<link rel="import" href="dom-innerHTML.html">
<script>
(function() {
  'use strict';

  var Settings = Polymer.Settings;
  var DomApi = Polymer.DomApi;
  var dom = DomApi.factory;
  var TreeApi = Polymer.TreeApi;
  var getInnerHTML = Polymer.domInnerHTML.getInnerHTML;
  var CONTENT = DomApi.CONTENT;

  // *************** Configure DomApi for Shady DOM!! ***************
  if (Settings.useShadow) {
    return;
  }

  var nativeInsertBefore = Element.prototype.insertBefore;
  var nativeRemoveChild = Element.prototype.removeChild;
  var nativeAppendChild = Element.prototype.appendChild;
  var nativeCloneNode = Element.prototype.cloneNode;
  var nativeImportNode = Document.prototype.importNode;

  Polymer.Base.extend(DomApi.prototype, {

    _lazyDistribute: function(host) {
      // note: only try to distribute if the root is not clean; this ensures
      // we don't distribute before initial distribution
      if (host.shadyRoot && host.shadyRoot._distributionClean) {
        host.shadyRoot._distributionClean = false;
        Polymer.dom.addDebouncer(host.debounce('_distribute',
          host._distributeContent));
      }
    },

    appendChild: function(node) {
      return this._addNode(node);
    },

    insertBefore: function(node, ref_node) {
      return this._addNode(node, ref_node);
    },

    // cases in which we may not be able to just do standard native call
    // 1. container has a shadyRoot (needsDistribution IFF the shadyRoot
    // has an insertion point)
    // 2. container is a shadyRoot (don't distribute, instead set
    // container to container.host.
    // 3. node is <content> (host of container needs distribution)
    _addNode: function(node, ref_node) {
      this._removeNodeFromParent(node);
      var addedInsertionPoint;
      var root = this.getOwnerRoot();
      // if a <content> is added, make sure it's parent has logical info.
      if (root) {
        addedInsertionPoint = this._maybeAddInsertionPoint(node, this.node);
      }
      if (TreeApi.Logical.hasChildNodes(this.node)) {
        if (ref_node && ref_node.__parentNode !== this.node) {
          throw Error('The ref_node to be inserted before is not a child ' +
            'of this node');
        }
        TreeApi.Logical.recordInsertBefore(node, this.node, ref_node);
      }
      this._addNodeToHost(node);
      // if not distributing and not adding to host, do a fast path addition
      if (!this._maybeDistribute(node, this.node) &&
        !this._tryRemoveUndistributedNode(node)) {
        if (ref_node) {
          // if ref_node is <content> replace with first distributed node
          ref_node = ref_node.localName === CONTENT ?
            this._firstComposedNode(ref_node) : ref_node;
        }
        // if adding to a shadyRoot, add to host instead
        var container = this.node._isShadyRoot ? this.node.host : this.node;
        if (ref_node) {
          nativeInsertBefore.call(container, node, ref_node);
        } else {
          nativeAppendChild.call(container, node);
        }
        TreeApi.Composed.recordInsertBefore(container, node, ref_node);
      }
      if (addedInsertionPoint) {
        this._updateInsertionPoints(root.host);
      }
      this.notifyObserver();
      return node;
    },

    /**
      Removes the given `node` from the element's `lightChildren`.
      This method also performs dom composition.
    */
    removeChild: function(node) {
      if (dom(node).parentNode !== this.node) {
        console.warn('The node to be removed is not a child of this node',
          node);
      }
      this._removeNodeFromHost(node);
      if (!this._maybeDistribute(node, this.node)) {
        // if removing from a shadyRoot, remove form host instead
        var container = this.node._isShadyRoot ? this.node.host : this.node;
        // not guaranteed to physically be in container; e.g.
        // undistributed nodes.
        if (container === node.parentNode) {
          nativeRemoveChild.call(container, node);
          TreeApi.Composed.recordRemoveChild(container, node);
        }
      }
      this.notifyObserver();
      return node;
    },

    replaceChild: function(node, ref_node) {
      this.insertBefore(node, ref_node);
      this.removeChild(ref_node);
      return node;
    },

    _hasCachedOwnerRoot: function(node) {
      return Boolean(node._ownerShadyRoot !== undefined);
    },

    getOwnerRoot: function() {
      return this._ownerShadyRootForNode(this.node);
    },

    _ownerShadyRootForNode: function(node) {
      if (!node) {
        return;
      }
      if (node._ownerShadyRoot === undefined) {
        var root;
        if (node._isShadyRoot) {
          root = node;
        } else {
          var parent = Polymer.dom(node).parentNode;
          if (parent) {
            root = parent._isShadyRoot ? parent :
              this._ownerShadyRootForNode(parent);
          } else {
           root = null;
          }
        }
        node._ownerShadyRoot = root;
      }
      return node._ownerShadyRoot;
    },

    _maybeDistribute: function(node, parent) {
      // TODO(sorvell): technically we should check non-fragment nodes for
      // <content> children but since this case is assumed to be exceedingly
      // rare, we avoid the cost and will address with some specific api
      // when the need arises.  For now, the user must call
      // distributeContent(true), which updates insertion points manually
      // and forces distribution.
      var fragContent = (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) &&
        !node.__noContent && Polymer.dom(node).querySelector(CONTENT);
      var wrappedContent = fragContent &&
        (Polymer.dom(fragContent).parentNode.nodeType !==
        Node.DOCUMENT_FRAGMENT_NODE);
      var hasContent = fragContent || (node.localName === CONTENT);
      // There are 2 possible cases where a distribution may need to occur:
      // 1. <content> being inserted (the host of the shady root where
      //    content is inserted needs distribution)
      // 2. children being inserted into parent with a shady root (parent
      //    needs distribution)
      if (hasContent) {
        var root = this._ownerShadyRootForNode(parent);
        if (root) {
          var host = root.host;
          // note, insertion point list update is handled after node
          // mutations are complete
          this._lazyDistribute(host);
        }
      }
      var parentNeedsDist = this._parentNeedsDistribution(parent);
      if (parentNeedsDist) {
        this._lazyDistribute(parent);
      }
      // Return true when distribution will fully handle the composition
      // Note that if a content was being inserted that was wrapped by a node,
      // and the parent does not need distribution, return false to allow
      // the nodes to be added directly, after which children may be
      // distributed and composed into the wrapping node(s)
      return parentNeedsDist || (hasContent && !wrappedContent);
    },

    /* note: parent argument is required since node may have an out
    of date parent at this point; returns true if a <content> is being added */
    _maybeAddInsertionPoint: function(node, parent) {
      var added;
      if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE &&
        !node.__noContent) {
        var c$ = dom(node).querySelectorAll(CONTENT);
        for (var i=0, n, np, na; (i<c$.length) && (n=c$[i]); i++) {
          np = dom(n).parentNode;
          // don't allow node's parent to be fragment itself
          if (np === node) {
            np = parent;
          }
          na = this._maybeAddInsertionPoint(n, np);
          added = added || na;
        }
      } else if (node.localName === CONTENT) {
        TreeApi.Logical.saveChildNodes(parent);
        TreeApi.Logical.saveChildNodes(node);
        added = true;
      }
      return added;
    },

    _tryRemoveUndistributedNode: function(node) {
      if (this.node.shadyRoot) {
        var parent = TreeApi.Composed.getParentNode(node);
        if (parent) {
          nativeRemoveChild.call(parent, node);
        }
        return true;
      }
    },

    _updateInsertionPoints: function(host) {
      var i$ = host.shadyRoot._insertionPoints =
        dom(host.shadyRoot).querySelectorAll(CONTENT);
      // ensure <content>'s and their parents have logical dom info.
      for (var i=0, c; i < i$.length; i++) {
        c = i$[i];
        TreeApi.Logical.saveChildNodes(c);
        TreeApi.Logical.saveChildNodes(dom(c).parentNode);
      }
    },

    _parentNeedsDistribution: function(parent) {
      return parent && parent.shadyRoot && 
        DomApi.hasInsertionPoint(parent.shadyRoot);
    },

    _removeNodeFromParent: function(node) {
      // note: we may need to notify and not have logical info so fallback
      // to composed parentNode.

      var parent = node.__parentNode || node.parentNode;
      //var parent = dom(node).parentNode;
      // TODO(sorvell): hasDomApi doesn't make sense now
      if (parent && DomApi.hasApi(parent)) {
        dom(parent).notifyObserver();
      }
      this._removeNodeFromHost(node, true);
    },

    // NOTE: if `ensureComposedRemoval` is true then the node should be
    // removed from its composed parent.
    _removeNodeFromHost: function(node, ensureComposedRemoval) {
      // note that it's possible for both the node's host and its parent
      // to require distribution... both cases are handled here.
      var hostNeedsDist;
      var root;
      // important that we want to do this only if the node has a logical parent
      var parent = node.__parentNode;
      if (parent) {
        // distribute node's parent iff needed
        dom(node)._distributeParent();
        root = this._ownerShadyRootForNode(node);
        // remove node from root and distribute it iff needed
        if (root) {
          root.host._elementRemove(node);
          hostNeedsDist = this._removeDistributedChildren(root, node);
        }
        TreeApi.Logical.recordRemoveChild(node, parent);
      }
      this._removeOwnerShadyRoot(node);
      if (root && hostNeedsDist) {
        this._updateInsertionPoints(root.host);
        this._lazyDistribute(root.host);
      } else if (ensureComposedRemoval) {
        TreeApi.Composed.recordRemoveChild(
          TreeApi.Composed.getParentNode(node), node);
      }
    },

    _removeDistributedChildren: function(root, container) {
      var hostNeedsDist;
      var ip$ = root._insertionPoints;
      for (var i=0; i<ip$.length; i++) {
        var content = ip$[i];
        if (this._contains(container, content)) {
          var dc$ = dom(content).getDistributedNodes();
          for (var j=0; j<dc$.length; j++) {
            hostNeedsDist = true;
            var node = dc$[j];
            var parent = node.parentNode;
            if (parent) {
              nativeRemoveChild.call(parent, node);
              TreeApi.Composed.recordRemoveChild(parent, node);
            }
          }
        }
      }
      return hostNeedsDist;
    },

    _contains: function(container, node) {
      while (node) {
        if (node == container) {
          return true;
        }
        node = dom(node).parentNode;
      }
    },

    // a node being added is always in this same host as this.node.
    _addNodeToHost: function(node) {
      var root = this.getOwnerRoot();
      if (root) {
        root.host._elementAdd(node);
      }
    },

    _removeOwnerShadyRoot: function(node) {
      // optimization: only reset the tree if node is actually in a root
      if (this._hasCachedOwnerRoot(node)) {
        var c$ = dom(node).childNodes;
        for (var i=0, l=c$.length, n; (i<l) && (n=c$[i]); i++) {
          this._removeOwnerShadyRoot(n);
        }
      }
      node._ownerShadyRoot = undefined;
    },

    // TODO(sorvell): This will fail if distribution that affects this
    // question is pending; this is expected to be exceedingly rare, but if
    // the issue comes up, we can force a flush in this case.
    _firstComposedNode: function(content) {
      var n$ = dom(content).getDistributedNodes();
      for (var i=0, l=n$.length, n, p$; (i<l) && (n=n$[i]); i++) {
        p$ = dom(n).getDestinationInsertionPoints();
        // means that we're composed to this spot.
        if (p$[p$.length-1] === content) {
          return n;
        }
      }
    },

    // TODO(sorvell): consider doing native QSA and filtering results.
    querySelector: function(selector) {
      return this.querySelectorAll(selector)[0];
    },

    querySelectorAll: function(selector) {
      return this._query(function(n) {
        return DomApi.matchesSelector.call(n, selector);
      }, this.node);
    },

    _query: function(matcher, node) {
      node = node || this.node;
      var list = [];
      this._queryElements(dom(node).childNodes, matcher, list);
      return list;
    },

    _queryElements: function(elements, matcher, list) {
      for (var i=0, l=elements.length, c; (i<l) && (c=elements[i]); i++) {
        if (c.nodeType === Node.ELEMENT_NODE) {
          this._queryElement(c, matcher, list);
        }
      }
    },

    _queryElement: function(node, matcher, list) {
      if (matcher(node)) {
        list.push(node);
      }
      this._queryElements(dom(node).childNodes, matcher, list);
    },

    getDestinationInsertionPoints: function() {
      return this.node._destinationInsertionPoints || [];
    },

    getDistributedNodes: function() {
      return this.node._distributedNodes || [];
    },

    _clear: function() {
      while (this.childNodes.length) {
        this.removeChild(this.childNodes[0]);
      }
    },

    setAttribute: function(name, value) {
      this.node.setAttribute(name, value);
      this._distributeParent();
    },

    removeAttribute: function(name) {
      this.node.removeAttribute(name);
      this._distributeParent();
    },

    _distributeParent: function() {
      if (this._parentNeedsDistribution(this.parentNode)) {
        this._lazyDistribute(this.parentNode);
      }
    },

    cloneNode: function(deep) {
      var n = nativeCloneNode.call(this.node, false);
      if (deep) {
        var c$ = this.childNodes;
        var d = dom(n);
        for (var i=0, nc; i < c$.length; i++) {
          nc = dom(c$[i]).cloneNode(true);
          d.appendChild(nc);
        }
      }
      return n;
    },

    importNode: function(externalNode, deep) {
      // for convenience use this node's ownerDoc if the node isn't a document
      var doc = this.node instanceof Document ? this.node :
        this.node.ownerDocument;
      var n = nativeImportNode.call(doc, externalNode, false);
      if (deep) {
        var c$ = dom(externalNode).childNodes;
        var d = dom(n);
        for (var i=0, nc; i < c$.length; i++) {
          nc = dom(doc).importNode(c$[i], true);
          d.appendChild(nc);
        }
      }
      return n;
    },

    _getComposedInnerHTML: function() {
      return getInnerHTML(this.node, true);
    }

  });

  Object.defineProperties(DomApi.prototype, {

    childNodes: {
      get: function() {
        var c$ = TreeApi.Logical.getChildNodes(this.node);
        return Array.isArray(c$) ? c$ : TreeApi.arrayCopyChildNodes(this.node);
      },
      configurable: true
    },

    children: {
      get: function() {
        return Array.prototype.filter.call(this.childNodes, function(n) {
          return (n.nodeType === Node.ELEMENT_NODE);
        });
      },
      configurable: true
    },

    parentNode: {
      get: function() {
        return this.node.__parentNode ||
          TreeApi.Composed.getParentNode(this.node);
      },
      configurable: true
    },

    firstChild: {
      get: function() {
        return this.node.__firstChild || this.node.firstChild;
      },
      configurable: true
    },

    lastChild: {
      get: function() {
        return this.node.__lastChild || this.node.lastChild;
      },
      configurable: true
    },

    nextSibling: {
      get: function() {
        return this.node.__nextSibling || this.node.nextSibling;
      },
      configurable: true
    },

    previousSibling: {
      get: function() {
        return this.node.__previousSibling || this.node.previousSibling;
      },
      configurable: true
    },

    firstElementChild: {
      get: function() {
        if (this.node.__firstChild) {
          var n = this.node.__firstChild;
          while (n && n.nodeType !== Node.ELEMENT_NODE) {
            n = n.__nextSibling;
          }
          return n;
        } else {
          return this.node.firstElementChild;
        }
        
      },
      configurable: true
    },

    lastElementChild: {
      get: function() {
        if (this.node.__lastChild) {
          var n = this.node.__lastChild;
          while (n && n.nodeType !== Node.ELEMENT_NODE) {
            n = n.__previousSibling;
          }
          return n;
        } else {
          return this.node.lastElementChild;
        }
      },
      configurable: true
    },

    nextElementSibling: {
      get: function() {
        if (this.node.__nextSibling) {
          var n = this.node.__nextSibling;
          while (n && n.nodeType !== Node.ELEMENT_NODE) {
            n = n.__nextSibling;
          }
          return n;
        } else {
          return this.node.nextElementSibling;
        }
      },
      configurable: true
    },

    previousElementSibling: {
      get: function() {
        if (this.node.__previousSibling) {
          var n = this.node.__previousSibling;
          while (n && n.nodeType !== Node.ELEMENT_NODE) {
            n = n.__previousSibling;
          }
          return n;
        } else {
          return this.node.previousElementSibling;
        }
      },
      configurable: true
    },

    // textContent / innerHTML
    textContent: {
      get: function() {
        var nt = this.node.nodeType;
        if (nt === Node.TEXT_NODE || nt === Node.COMMENT_NODE) {
          return this.node.textContent;
        } else {
          var tc = [];
          for (var i = 0, cn = this.childNodes, c; c = cn[i]; i++) {
            if (c.nodeType !== Node.COMMENT_NODE) {
              tc.push(c.textContent);
            }
          }
          return tc.join('');
        }
      },
      set: function(text) {
        var nt = this.node.nodeType;
        if (nt === Node.TEXT_NODE || nt === Node.COMMENT_NODE) {
          this.node.textContent = text;
        } else {
          this._clear();
          if (text) {
            this.appendChild(document.createTextNode(text));
          }
        }
      },
      configurable: true
    },

    innerHTML: {
      get: function() {
        var nt = this.node.nodeType;
        if (nt === Node.TEXT_NODE || nt === Node.COMMENT_NODE) {
          return null;
        } else {
          return getInnerHTML(this.node);
        }
      },
      set: function(text) {
        var nt = this.node.nodeType;
        if (nt !== Node.TEXT_NODE || nt !== Node.COMMENT_NODE) {
          this._clear();
          var d = document.createElement('div');
          d.innerHTML = text;
          // here, appendChild may move nodes async so we cannot rely
          // on node position when copying
          var c$ = TreeApi.arrayCopyChildNodes(d);
          for (var i=0; i < c$.length; i++) {
            this.appendChild(c$[i]);
          }
        }
      },
      configurable: true
    }

  });

  DomApi.hasInsertionPoint = function(root) {
    return Boolean(root && root._insertionPoints.length);
  };

})();
</script>