joosy 0.1.0.alpha → 1.0.0.RC1

data/vendor/assets/javascripts/metamorph.js

@@ -0,0 +1,409 @@
+// ==========================================================================
+// Project:   metamorph
+// Copyright: ©2011 My Company Inc. All rights reserved.
+// ==========================================================================
+
+(function(window) {
+
+  var K = function(){},
+      guid = 0,
+      document = window.document,
+
+      // Feature-detect the W3C range API, the extended check is for IE9 which only partially supports ranges
+      supportsRange = ('createRange' in document) && (typeof Range !== 'undefined') && Range.prototype.createContextualFragment,
+
+      // Internet Explorer prior to 9 does not allow setting innerHTML if the first element
+      // is a "zero-scope" element. This problem can be worked around by making
+      // the first node an invisible text node. We, like Modernizr, use ­
+      needsShy = (function(){
+        var testEl = document.createElement('div');
+        testEl.innerHTML = "<div></div>";
+        testEl.firstChild.innerHTML = "<script></script>";
+        return testEl.firstChild.innerHTML === '';
+      })();
+
+  // Constructor that supports either Metamorph('foo') or new
+  // Metamorph('foo');
+  // 
+  // Takes a string of HTML as the argument.
+
+  var Metamorph = function(html) {
+    var self;
+
+    if (this instanceof Metamorph) {
+      self = this;
+    } else {
+      self = new K();
+    }
+
+    self.innerHTML = html;
+    var myGuid = 'metamorph-'+(guid++);
+    self.start = myGuid + '-start';
+    self.end = myGuid + '-end';
+
+    return self;
+  };
+
+  K.prototype = Metamorph.prototype;
+
+  var rangeFor, htmlFunc, removeFunc, outerHTMLFunc, appendToFunc, afterFunc, prependFunc, startTagFunc, endTagFunc;
+
+  outerHTMLFunc = function() {
+    return this.startTag() + this.innerHTML + this.endTag();
+  };
+
+  startTagFunc = function() {
+    return "<script id='" + this.start + "' type='text/x-placeholder'></script>";
+  };
+
+  endTagFunc = function() {
+    return "<script id='" + this.end + "' type='text/x-placeholder'></script>";
+  };
+
+  // If we have the W3C range API, this process is relatively straight forward.
+  if (supportsRange) {
+
+    // IE 9 supports ranges but doesn't define createContextualFragment
+    if (!Range.prototype.createContextualFragment) {
+      Range.prototype.createContextualFragment = function(html) {
+        var frag = document.createDocumentFragment(),
+             div = document.createElement("div");
+        frag.appendChild(div);
+        div.outerHTML = html;
+        return frag;
+      };
+    }
+
+    // Get a range for the current morph. Optionally include the starting and
+    // ending placeholders.
+    rangeFor = function(morph, outerToo) {
+      var range = document.createRange();
+      var before = document.getElementById(morph.start);
+      var after = document.getElementById(morph.end);
+
+      if (outerToo) {
+        range.setStartBefore(before);
+        range.setEndAfter(after);
+      } else {
+        range.setStartAfter(before);
+        range.setEndBefore(after);
+      }
+
+      return range;
+    };
+
+    htmlFunc = function(html, outerToo) {
+      // get a range for the current metamorph object
+      var range = rangeFor(this, outerToo);
+
+      // delete the contents of the range, which will be the
+      // nodes between the starting and ending placeholder.
+      range.deleteContents();
+
+      // create a new document fragment for the HTML
+      var fragment = range.createContextualFragment(html);
+
+      // insert the fragment into the range
+      range.insertNode(fragment);
+    };
+
+    removeFunc = function() {
+      // get a range for the current metamorph object including
+      // the starting and ending placeholders.
+      var range = rangeFor(this, true);
+
+      // delete the entire range.
+      range.deleteContents();
+    };
+
+    appendToFunc = function(node) {
+      var range = document.createRange();
+      range.setStart(node);
+      range.collapse(false);
+      var frag = range.createContextualFragment(this.outerHTML());
+      node.appendChild(frag);
+    };
+
+    afterFunc = function(html) {
+      var range = document.createRange();
+      var after = document.getElementById(this.end);
+
+      range.setStartAfter(after);
+      range.setEndAfter(after);
+
+      var fragment = range.createContextualFragment(html);
+      range.insertNode(fragment);
+    };
+
+    prependFunc = function(html) {
+      var range = document.createRange();
+      var start = document.getElementById(this.start);
+
+      range.setStartAfter(start);
+      range.setEndAfter(start);
+
+      var fragment = range.createContextualFragment(html);
+      range.insertNode(fragment);
+    };
+
+  } else {
+    /**
+     * This code is mostly taken from jQuery, with one exception. In jQuery's case, we
+     * have some HTML and we need to figure out how to convert it into some nodes.
+     *
+     * In this case, jQuery needs to scan the HTML looking for an opening tag and use
+     * that as the key for the wrap map. In our case, we know the parent node, and
+     * can use its type as the key for the wrap map.
+     **/
+    var wrapMap = {
+      select: [ 1, "<select multiple='multiple'>", "</select>" ],
+      fieldset: [ 1, "<fieldset>", "</fieldset>" ],
+      table: [ 1, "<table>", "</table>" ],
+      tbody: [ 2, "<table><tbody>", "</tbody></table>" ],
+      tr: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
+      colgroup: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
+      map: [ 1, "<map>", "</map>" ],
+      _default: [ 0, "", "" ]
+    };
+
+    /**
+     * Given a parent node and some HTML, generate a set of nodes. Return the first
+     * node, which will allow us to traverse the rest using nextSibling.
+     *
+     * We need to do this because innerHTML in IE does not really parse the nodes.
+     **/
+    var firstNodeFor = function(parentNode, html) {
+      var arr = wrapMap[parentNode.tagName.toLowerCase()] || wrapMap._default;
+      var depth = arr[0], start = arr[1], end = arr[2];
+
+      if (needsShy) { html = '&shy;'+html; }
+
+      var element = document.createElement('div');
+      element.innerHTML = start + html + end;
+
+      for (var i=0; i<=depth; i++) {
+        element = element.firstChild;
+      }
+
+      // Look for &shy; to remove it.
+      if (needsShy) {
+        var shyElement = element;
+
+        // Sometimes we get nameless elements with the shy inside
+        while (shyElement.nodeType === 1 && !shyElement.nodeName && shyElement.childNodes.length === 1) {
+          shyElement = shyElement.firstChild;
+        }
+
+        // At this point it's the actual unicode character.
+        if (shyElement.nodeType === 3 && shyElement.nodeValue.charAt(0) === "\u00AD") {
+          shyElement.nodeValue = shyElement.nodeValue.slice(1);
+        }
+      }
+
+      return element;
+    };
+
+    /**
+     * In some cases, Internet Explorer can create an anonymous node in
+     * the hierarchy with no tagName. You can create this scenario via:
+     *
+     *     div = document.createElement("div");
+     *     div.innerHTML = "<table>&shy<script></script><tr><td>hi</td></tr></table>";
+     *     div.firstChild.firstChild.tagName //=> ""
+     *
+     * If our script markers are inside such a node, we need to find that
+     * node and use *it* as the marker.
+     **/
+    var realNode = function(start) {
+      while (start.parentNode.tagName === "") {
+        start = start.parentNode;
+      }
+
+      return start;
+    };
+
+    /**
+     * When automatically adding a tbody, Internet Explorer inserts the
+     * tbody immediately before the first <tr>. Other browsers create it
+     * before the first node, no matter what.
+     *
+     * This means the the following code:
+     *
+     *     div = document.createElement("div");
+     *     div.innerHTML = "<table><script id='first'></script><tr><td>hi</td></tr><script id='last'></script></table>
+     *
+     * Generates the following DOM in IE:
+     *
+     *     + div
+     *       + table
+     *         - script id='first'
+     *         + tbody
+     *           + tr
+     *             + td
+     *               - "hi"
+     *           - script id='last'
+     *
+     * Which means that the two script tags, even though they were
+     * inserted at the same point in the hierarchy in the original
+     * HTML, now have different parents.
+     *
+     * This code reparents the first script tag by making it the tbody's
+     * first child.
+     **/
+    var fixParentage = function(start, end) {
+      if (start.parentNode !== end.parentNode) {
+        end.parentNode.insertBefore(start, end.parentNode.firstChild);
+      }
+    };
+
+    htmlFunc = function(html, outerToo) {
+      // get the real starting node. see realNode for details.
+      var start = realNode(document.getElementById(this.start));
+      var end = document.getElementById(this.end);
+      var parentNode = end.parentNode;
+      var node, nextSibling, last;
+
+      // make sure that the start and end nodes share the same
+      // parent. If not, fix it.
+      fixParentage(start, end);
+
+      // remove all of the nodes after the starting placeholder and
+      // before the ending placeholder.
+      node = start.nextSibling;
+      while (node) {
+        nextSibling = node.nextSibling;
+        last = node === end;
+
+        // if this is the last node, and we want to remove it as well,
+        // set the `end` node to the next sibling. This is because
+        // for the rest of the function, we insert the new nodes
+        // before the end (note that insertBefore(node, null) is
+        // the same as appendChild(node)).
+        //
+        // if we do not want to remove it, just break.
+        if (last) {
+          if (outerToo) { end = node.nextSibling; } else { break; }
+        }
+
+        node.parentNode.removeChild(node);
+
+        // if this is the last node and we didn't break before
+        // (because we wanted to remove the outer nodes), break
+        // now.
+        if (last) { break; }
+
+        node = nextSibling;
+      }
+
+      // get the first node for the HTML string, even in cases like
+      // tables and lists where a simple innerHTML on a div would
+      // swallow some of the content.
+      node = firstNodeFor(start.parentNode, html);
+
+      // copy the nodes for the HTML between the starting and ending
+      // placeholder.
+      while (node) {
+        nextSibling = node.nextSibling;
+        parentNode.insertBefore(node, end);
+        node = nextSibling;
+      }
+    };
+
+    // remove the nodes in the DOM representing this metamorph.
+    //
+    // this includes the starting and ending placeholders.
+    removeFunc = function() {
+      var start = realNode(document.getElementById(this.start));
+      var end = document.getElementById(this.end);
+
+      this.html('');
+      start.parentNode.removeChild(start);
+      end.parentNode.removeChild(end);
+    };
+
+    appendToFunc = function(parentNode) {
+      var node = firstNodeFor(parentNode, this.outerHTML());
+
+      while (node) {
+        nextSibling = node.nextSibling;
+        parentNode.appendChild(node);
+        node = nextSibling;
+      }
+    };
+
+    afterFunc = function(html) {
+      // get the real starting node. see realNode for details.
+      var end = document.getElementById(this.end);
+      var parentNode = end.parentNode;
+      var nextSibling;
+      var node;
+
+      // get the first node for the HTML string, even in cases like
+      // tables and lists where a simple innerHTML on a div would
+      // swallow some of the content.
+      node = firstNodeFor(parentNode, html);
+
+      // copy the nodes for the HTML between the starting and ending
+      // placeholder.
+      while (node) {
+        nextSibling = node.nextSibling;
+        parentNode.insertBefore(node, end.nextSibling);
+        node = nextSibling;
+      }
+    };
+
+    prependFunc = function(html) {
+      var start = document.getElementById(this.start);
+      var parentNode = start.parentNode;
+      var nextSibling;
+      var node;
+
+      node = firstNodeFor(parentNode, html);
+      var insertBefore = start.nextSibling;
+
+      while (node) {
+        nextSibling = node.nextSibling;
+        parentNode.insertBefore(node, insertBefore);
+        node = nextSibling;
+      }
+    }
+  }
+
+  Metamorph.prototype.html = function(html) {
+    this.checkRemoved();
+    if (html === undefined) { return this.innerHTML; }
+
+    htmlFunc.call(this, html);
+
+    this.innerHTML = html;
+  };
+
+  Metamorph.prototype.replaceWith = function(html) {
+    this.checkRemoved();
+    htmlFunc.call(this, html, true);
+  };
+
+  Metamorph.prototype.remove = removeFunc;
+  Metamorph.prototype.outerHTML = outerHTMLFunc;
+  Metamorph.prototype.appendTo = appendToFunc;
+  Metamorph.prototype.after = afterFunc;
+  Metamorph.prototype.prepend = prependFunc;
+  Metamorph.prototype.startTag = startTagFunc;
+  Metamorph.prototype.endTag = endTagFunc;
+
+  Metamorph.prototype.isRemoved = function() {
+    var before = document.getElementById(this.start);
+    var after = document.getElementById(this.end);
+
+    return !before || !after;
+  };
+
+  Metamorph.prototype.checkRemoved = function() {
+    if (this.isRemoved()) {
+      throw new Error("Cannot perform operations on a Metamorph that is not in the DOM.");
+    }
+  };
+
+  window.Metamorph = Metamorph;
+})(this);
+