Changeset 6636

Timestamp:

04/30/07 09:02:01 (2 years ago)

Author:

tobie

Message:

Insertion overhaul: Add Element.insert(content[, position = 'Bottom']). Deprecate Insertion (kept for backwards compatibility). Make Ajax.Updater option.insertion accept both Insertion.Top or the now preferred 'Top'. ref. #7907

Files:

• spinoffs/prototype/branches/dom/CHANGELOG (modified) (1 diff)
• spinoffs/prototype/branches/dom/src/ajax.js (modified) (1 diff)
• spinoffs/prototype/branches/dom/src/dom.js (modified) (6 diffs)
• spinoffs/prototype/branches/dom/src/enumerable.js (modified) (1 diff)
• spinoffs/prototype/branches/dom/src/prototype.js (modified) (1 diff)
• spinoffs/prototype/branches/dom/test/unit/ajax.html (modified) (3 diffs)
• spinoffs/prototype/branches/dom/test/unit/dom.html (modified) (4 diffs)

spinoffs/prototype/branches/dom/CHANGELOG

@@ -1 +1 @@
-*SVN*
+
+* Insertion overhaul: Add Element.insert(content[, position = 'Bottom']). Deprecate Insertion (kept for backwards compatibility). Make Ajax.Updater option.insertion accept both Insertion.Top or the now preferred 'Top'. Closes #7907. [Tobie Langel]
-
-* Add Function#curry, Function#delay, Function#defer, and Function#wrap.  Closes #8134.  [Andrew Dupont, Tobie Langel, sam]

spinoffs/prototype/branches/dom/src/ajax.js

@@ -255 +255 @@
-  updateContent: function() {
-    var receiver = this.container[this.success() ? 'success' : 'failure'];
-
-
-this.
+, options = this.options
+
+
-    
-    if (receiver = $(receiver)) {
-
-
-
-
+
+
+
+
+
+
-    }
-    

spinoffs/prototype/branches/dom/src/dom.js

@@ -125 +125 @@
-  },
-  
+  insert: function(element, content, position) {
+    element = $(element);
+    position = (position || 'bottom').toLowerCase();
+    var t = Element._insertionTranslations[position], fragments, stripped;
+    
+    if(content && content.ownerDocument === document) 
+      return t.insert(element, content);
+
+    content = content.toString();
+    stripped = content.stripScripts();
+    
+    if (element.insertAdjacentHTML) {
+      try {
+        element.insertAdjacentHTML(t.adjacency, stripped);
+      } catch (e) {
+        var tagName = element.tagName.toUpperCase();
+        if (['THEAD','TBODY','TR','TD'].include(tagName)) {
+          fragments = Element._getContentFromAnonymousTable(content, tagName);
+          if(position == 'top') fragments.reverse();
+          fragments.each(t.insert.curry(element));
+        } else { throw e }
+      }
+    } else {
+      var range = element.ownerDocument.createRange();
+      t.initializeRange(element, range);
+      fragments = [range.createContextualFragment(stripped)];
+      if(position == 'top') fragments.reverse();
+      fragments.each(t.insert.curry(element));
+    }
+    content.evalScripts.bind(content).defer();   
+    return element;
+  },
+
-  inspect: function(element) {
-    element = $(element);
@@ -428 +461 @@
-
-Object.extend(Element.Methods, {
-  childOf: Element.Methods.descendantOf,
-  childElements: Element.Methods.immediateDescendants
-});
@@ -446 +478 @@
-}
-else if (Prototype.Browser.IE) {
+  Element._getContentFromAnonymousTable = function(html, tagName) {
+    var div = document.createElement('div'), depth;
+      switch (tagName) {
+        case 'THEAD':
+        case 'TBODY':
+          div.innerHTML = '<table><tbody>' +  html + '</tbody></table>';
+          depth = 2;
+          break;
+        case 'TR':
+          div.innerHTML = '<table><tbody><tr>' +  html + '</tr></tbody></table>';
+          depth = 3;
+          break;
+        case 'TD':
+          div.innerHTML = '<table><tbody><tr><td>' +  html + '</td></tr></tbody></table>';
+          depth = 4;
+      }
+      depth.times(function() { div = div.firstChild });
+      return $A(div.childNodes);
+  };
+  
-  Element.Methods.getStyle = function(element, style) {
-    element = $(element);
@@ -484 +536 @@
-    var tagName = element.tagName.toUpperCase();  
-    if (['THEAD','TBODY','TR','TD'].include(tagName)) {
-      var div = document.createElement('div');
-      switch (tagName) {
-        case 'THEAD':
-        case 'TBODY':
-          div.innerHTML = '<table><tbody>' +  html.stripScripts() + '</tbody></table>';
-          depth = 2;
-          break;
-        case 'TR':
-          div.innerHTML = '<table><tbody><tr>' +  html.stripScripts() + '</tr></tbody></table>';
-          depth = 3;
-          break;
-        case 'TD':
-          div.innerHTML = '<table><tbody><tr><td>' +  html.stripScripts() + '</td></tr></tbody></table>';
-          depth = 4;
-      }
-      $A(element.childNodes).each(function(node) { element.removeChild(node) });
-depth.times(function() { div = div.firstChild });
-$A(div.childNodes).each(function(node) { element.appendChild(node) }
+Element._getContentFromAnonymousTable(html.stripScripts(), tagName).each(
+  element.appendChild
-    } else {
-      element.innerHTML = html.stripScripts();
@@ -517 +554 @@
-  };
-}
+
+Element._insertionTranslations = {
+  before: {
+    adjacency: 'beforeBegin',
+    insert: function(element, node) {
+      element.parentNode.insertBefore(node, element);
+    },
+    initializeRange: function(element, range) {
+      range.setStartBefore(element);      
+    }
+  },
+  top: {
+    adjacency: 'afterBegin',
+    insert: function(element, node) {
+      element.insertBefore(node, element.firstChild);
+    },
+    initializeRange: function(element, range) {
+      range.selectNodeContents(element);
+      range.collapse(true);
+    }
+  },
+  bottom: {
+    adjacency: 'beforeEnd',
+    insert: function(element, node) {
+      element.appendChild(node);
+    }
+  },
+  after: {
+    adjacency: 'afterEnd',
+    insert: function(element, node) {
+      element.parentNode.insertBefore(node, element.nextSibling);
+    },
+    initializeRange: function(element, range) {
+      range.setStartAfter(element);
+    }
+  }
+};
+Element._insertionTranslations.bottom.initializeRange = 
+Element._insertionTranslations.top.initializeRange;
-
-Element._attributeTranslations = {
@@ -669 +745 @@
-};
-
-var Toggle = { display: Element.toggle };
-
-/*--------------------------------------------------------------------------*/
-
-Abstract.Insertion = function(adjacency) {
-  this.adjacency = adjacency;
-}
-
-Abstract.Insertion.prototype = {
-  initialize: function(element, content) {
-    this.element = $(element);
-    this.content = content.stripScripts();
-    
-    if (this.adjacency && this.element.insertAdjacentHTML) {
-      try {
-        this.element.insertAdjacentHTML(this.adjacency, this.content);
-      } catch (e) {
-        var tagName = this.element.tagName.toUpperCase();
-        if (['TBODY', 'TR'].include(tagName)) {
-          this.insertContent(this.contentFromAnonymousTable());
-        } else {
-          throw e;
-        }
-      }
-    } else {
-      this.range = this.element.ownerDocument.createRange();
-      if (this.initializeRange) this.initializeRange();
-      this.insertContent([this.range.createContextualFragment(this.content)]);
-    }
-
-    content.evalScripts.bind(content).defer();   
-  },
-  
-  contentFromAnonymousTable: function() {
-    var div = document.createElement('div');
-    div.innerHTML = '<table><tbody>' + this.content + '</tbody></table>';
-    return $A(div.childNodes[0].childNodes[0].childNodes);
-  }
-}
-
-var Insertion = new Object();
-
-Insertion.Before = Class.create();
-Insertion.Before.prototype = Object.extend(new Abstract.Insertion('beforeBegin'), {
-  initializeRange: function() {
-    this.range.setStartBefore(this.element);
-  },
-  
-  insertContent: function(fragments) {
-    fragments.each((function(fragment) {
-      this.element.parentNode.insertBefore(fragment, this.element);
-    }).bind(this));
-  }
-});
-
-Insertion.Top = Class.create();
-Insertion.Top.prototype = Object.extend(new Abstract.Insertion('afterBegin'), {
-  initializeRange: function() {
-    this.range.selectNodeContents(this.element);
-    this.range.collapse(true);
-  },
-  
-  insertContent: function(fragments) {
-    fragments.reverse(false).each((function(fragment) {
-      this.element.insertBefore(fragment, this.element.firstChild);
-    }).bind(this));
-  }
-});
-
-Insertion.Bottom = Class.create();
-Insertion.Bottom.prototype = Object.extend(new Abstract.Insertion('beforeEnd'), {
-  initializeRange: function() {
-    this.range.selectNodeContents(this.element);
-    this.range.collapse(this.element);
-  },
-  
-  insertContent: function(fragments) {
-    fragments.each((function(fragment) {
-      this.element.appendChild(fragment);
-    }).bind(this));
-  }
-});
-
-Insertion.After = Class.create();
-Insertion.After.prototype = Object.extend(new Abstract.Insertion('afterEnd'), {
-  initializeRange: function() {
-    this.range.setStartAfter(this.element);
-  },
-  
-  insertContent: function(fragments) {
-    fragments.each((function(fragment) {
-      this.element.parentNode.insertBefore(fragment, 
-        this.element.nextSibling);
-    }).bind(this));
-  }
-});
-
-/*--------------------------------------------------------------------------*/
-

spinoffs/prototype/branches/dom/src/enumerable.js

@@ -1 @@
-, $continue = new Error('"throw $continue" is deprecated, use "return" instead')
+
-
-var Enumerable = {

spinoffs/prototype/branches/dom/src/prototype.js

@@ -30 +30 @@
-<%= include 'enumerable.js', 'array.js', 'hash.js', 'range.js' %>
-
-
+, 'deprecated.js'
-
-Element.addMethods();

spinoffs/prototype/branches/dom/test/unit/ajax.html

@@ -30 +30 @@
-// <![CDATA[
-  var responderCounter = 0;
-
+
+
+
+
+
-  new Test.Unit.Runner({
-    
@@ -77 +81 @@
-      new Ajax.Updater("content", "fixtures/content.html", { method:'get' });
-      
-      // lowercase comparison because of MSIE which presents HTML tags in uppercase
-      var sentence = ("Pack my box with <em>five dozen</em> liquor jugs! " +
-        "Oh, how <strong>quickly</strong> daft jumping zebras vex...").toLowerCase();
-
-      wait(1000,function(){
-        assertEqual(sentence, $("content").innerHTML.strip().toLowerCase());
@@ -96 +96 @@
-          assertEqual("", $("content2").innerHTML);
-        });
+      }); 
+    }},
+    
+    testUpdaterWithInsertion: function() {with(this) {
+      $('content').update();
+      new Ajax.Updater("content", "fixtures/content.html", { method:'get', insertion: Insertion.Top });
+      wait(1000,function(){
+        assertEqual(sentence, $("content").innerHTML.strip().toLowerCase());
+        $('content').update();
+        new Ajax.Updater("content", "fixtures/content.html", { method:'get', insertion: 'bottom' });      
+        wait(1000,function(){
+          assertEqual(sentence, $("content").innerHTML.strip().toLowerCase());
+        });
-      });
-    }},
-
+   
-    testResponders: function(){with(this) {
-      // check for internal responder

spinoffs/prototype/branches/dom/test/unit/dom.html

@@ -268 +268 @@
-<div id="ancestor"><div id="child"><div><div id="great-grand-child"></div></div></div></div>
-<div id="not-in-the-family"></div>
+
+<div id="insertions-container"><div id="insertions-main"><p>some content.</p></div></div>
+<div id="insertions-node-container"><div id="insertions-node-main"><p>some content.</p></div></div>
+<div id="element-insertions-container"><div id="element-insertions-main"><p>some content.</p></div></div>
+<div id="wrap-container"><p id="wrap"></p></div>
-<!-- Tests follow -->
-<script type="text/javascript" language="javascript" charset="utf-8">
@@ -273 +278 @@
-
-  var testVar = 'to be updated', testVar2 = '';
-
+
+
+
-  Element.addMethods({
-    hashBrowns: function(element) { return 'hash browns'; }
@@ -314 +321 @@
-      assertElementsMatch(document.getElementsByClassName('B', 'class_names_ul'));
-    }},
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-      assert($('second_row').descendantOf('table'));
-    }},
-    
+    testElementMethodInsert: function() {with(this) {
+      $('element-insertions-main').insert('some text before','before');
+      assert(getInnerHTML('element-insertions-container').startsWith('some text before'));
+      $('element-insertions-main').insert('some text after', 'after');
+      assert(getInnerHTML('element-insertions-container').endsWith('some text after'));
+      $('element-insertions-main').insert('some text top', 'top');
+      assert(getInnerHTML('element-insertions-main').startsWith('some text top'));
+      $('element-insertions-main').insert('some text bottom', 'bottom');
+      assert(getInnerHTML('element-insertions-main').endsWith('some text bottom'));
+      
+      $('element-insertions-main').insert('some more text at the bottom');
+      assert(getInnerHTML('element-insertions-main').endsWith('some more text at the bottom'));
+    }},
+    
+    testInsertionBackwardsCompatibility: function() {with(this) {
+      new Insertion.Before('element-insertions-main', 'some backward-compatibility testing before');
+      assert(getInnerHTML('element-insertions-container').include('some backward-compatibility testing before'));
+      new Insertion.After('element-insertions-main', 'some backward-compatibility testing after');
+      assert(getInnerHTML('element-insertions-container').include('some backward-compatibility testing after'));
+      new Insertion.Top('element-insertions-main', 'some backward-compatibility testing top');
+      assert(getInnerHTML('element-insertions-main').startsWith('some backward-compatibility testing top'));
+      new Insertion.Bottom('element-insertions-main', 'some backward-compatibility testing bottom');
+      assert(getInnerHTML('element-insertions-main').endsWith('some backward-compatibility testing bottom'));
+    }},
+
-    testElementVisible: function(){with(this) {
-      assertNotEqual('none', $('test-visible').style.display);
@@ -442 +506 @@
-      });
-    }},
-
+    
-    testElementSelectorMethod: function() {with(this) {
-      var testSelector = $('container').getElementsBySelector('p.test');