Changeset 6638

Timestamp:

04/30/07 09:31:54 (2 years ago)

Author:

tobie

Message:

Make Element into a constructor: new Element(tagName, attributes). Add Element#writeAttribute which accepts a hash of attributes or a name/value pair. ref. #7476.

Files:

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

spinoffs/prototype/branches/dom/CHANGELOG

@@ -1 +1 @@
-*SVN*
+
+* Make Element into a constructor: new Element(tagName, attributes). Add Element#writeAttribute which accepts a hash of attributes or a name/value pair. Closes #7476. [Mislav Marohnić, haraldmartin, Tobie Langel]
-
-* 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]

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

@@ -38 +38 @@
-/*--------------------------------------------------------------------------*/
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-Element.extend = function(element) {
-  var F = Prototype.BrowserFeatures;
@@ -263 +279 @@
-    if (Prototype.Browser.IE) {
-      if (!element.attributes) return null;
-
+.read
-      if (t.values[name]) return t.values[name](element, name);
-      if (t.names[name])  name = t.names[name];
@@ -270 +286 @@
-    }    
-    return element.getAttribute(name);
+  },
+  
+  writeAttribute: function(element, name, value) {
+    element = $(element);
+    var attributes = {}, t = Element._attributeTranslations.write;
+    
+    if (typeof name == 'object') attributes = name;
+    else attributes[name] = value === undefined ? true : value;
+    
+    for (var attr in attributes) {
+      var name = t.names[attr] || attr, value = attributes[attr];
+      if(t.values[attr]) name = t.values[attr](element, value);
+      if (value === false || value === null)
+        element.removeAttribute(name);
+      else if (value === true)
+        element.setAttribute(name, name);
+      else element.setAttribute(name, value);
+    }
+    return element;
-  },
-  
@@ -463 +498 @@
-  childElements: Element.Methods.immediateDescendants
-});
+
+Element._attributeTranslations = {
+  write: {
+    names: {
+      className: 'class',
+      htmlFor:   'for'      
+    }, 
+    values: {}
+  }
+};
-
-if (Prototype.Browser.Opera) { 
@@ -544 +589 @@
-    html.evalScripts.bind(html).defer();
-    return element;
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-}
-else if (Prototype.Browser.Gecko) {
@@ -594 +699 @@
-Element._insertionTranslations.top.initializeRange;
-
-Element._attributeTranslations = {
-  names: {
-    colspan:   "colSpan",
-    rowspan:   "rowSpan",
-    valign:    "vAlign",
-    datetime:  "dateTime",
-    accesskey: "accessKey",
-    tabindex:  "tabIndex",
-    enctype:   "encType",
-    maxlength: "maxLength",
-    readonly:  "readOnly",
-    longdesc:  "longDesc"
-  },
-  values: {
-    _getAttr: function(element, attribute) {
-      return element.getAttribute(attribute, 2);
-    },
-    _flag: function(element, attribute) {
-      return $(element).hasAttribute(attribute) ? attribute : null;
-    },
-    style: function(element) {
-      return element.style.cssText.toLowerCase();
-    },
-    title: function(element) {
-      var node = element.getAttributeNode('title');
-      return node.specified ? node.nodeValue : null;
-    }
-  }
-};
-
-(function() {
-  Object.extend(this, {
-    href: this._getAttr,
-    src:  this._getAttr,
-    type: this._getAttr,
-    disabled: this._flag,
-    checked:  this._flag,
-    readonly: this._flag,
-    multiple: this._flag
-  });
-}).call(Element._attributeTranslations.values);
-
-Element.Methods.Simulated = {
-  hasAttribute: function(element, attribute) {
-
+.read
-    attribute = t.names[attribute] || attribute;
-    node = $(element).getAttributeNode(attribute);
@@ -743 +806 @@
-  Object.extend(Element, Element.Methods);
-  delete Element.ByTag;
+  Element.cache = {};
-};
-

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

@@ -224 +224 @@
-</form>
-
+<!-- writeAttributes  -->
+<p id="write_attribute_para"></a>
+<a id="write_attribute_link" href="test.html"></a>
+<form action="/dev/null" id="write_attribute_form" method="get" accept-charset="utf-8">
+  <label id="write_attribute_label"></label>
+  <input type="checkbox" name="write_attribute_checkbox" value="" id="write_attribute_checkbox">
+  <input type="checkbox" checked="checked" name="write_attribute_checked_checkbox" value="" id="write_attribute_checked_checkbox">
+  <input type="text" name="write_attribute_input" value="" id="write_attribute_input">
+  <select id="write_attribute_select">
+    <option>Cat</option>
+    <option>Dog</option>
+  </select>
+</form>
+
+<table id="write_attribute_table">
+  <tr><td id="write_attribute_td">A</td><td>B</td></tr>
+  <tr><td>C</td></tr>
+  <tr><td>D</td><td>E</td><td>F</td></tr>
+</table>
+
-<div id="dom_attribute_precedence">
-  <form action="blech" method="post">
@@ -490 +510 @@
-    }},
-    
-
-    testElementReplaceWithScript: function() {with(this) {
-      $('testdiv-replace-4').replace('hello from div!<script>testVarReplace="hello!"</'+'script>');
@@ -900 +919 @@
-    }},
-    
+    testElementWriteAttribute: function() {with(this) {
+      var element = Element.extend(document.body.appendChild(document.createElement('p')));
+      assertRespondsTo('writeAttribute', element);
+      assertEqual(element, element.writeAttribute('id', 'write_attribute_test'));
+      assertEqual('write_attribute_test', element.id);
+      assertEqual('http://prototypejs.org/', $('write_attribute_link').
+        writeAttribute({href: 'http://prototypejs.org/', title: 'Home of Prototype'}).href);
+      assertEqual('Home of Prototype', $('write_attribute_link').title);
+      
+      var element2 = Element.extend(document.createElement('p'));
+      element2.writeAttribute('id', 'write_attribute_without_hash');
+      assertEqual('write_attribute_without_hash', element2.id);
+      element2.writeAttribute('animal', 'cat');
+      assertEqual('cat', element2.readAttribute('animal'));
+    }},
+    
+    testElementWriteAttributeWithBooleans: function() {with(this) {
+      var input = $('write_attribute_input'),
+        select = $('write_attribute_select'),
+        checkbox = $('write_attribute_checkbox'),
+        checkedCheckbox = $('write_attribute_checked_checkbox');
+      assert( input.          writeAttribute('readonly').            hasAttribute('readonly'));
+      assert(!input.          writeAttribute('readonly', false).     hasAttribute('readonly'));
+      assert( input.          writeAttribute('readonly', true).      hasAttribute('readonly'));
+      assert(!input.          writeAttribute('readonly', null).      hasAttribute('readonly'));
+      assert( input.          writeAttribute('readonly', 'readonly').hasAttribute('readonly'));
+      assert( select.         writeAttribute('multiple').            hasAttribute('multiple'));
+      assert( input.          writeAttribute('disabled').            hasAttribute('disabled'));
+      assert( checkbox.       writeAttribute('checked').             checked);
+      assert(!checkedCheckbox.writeAttribute('checked', false).      checked);
+    }},
+
+    testElementWriteAttributeWithIssues: function() {with(this) {
+      var input = $('write_attribute_input').writeAttribute({maxlength: 90, tabindex: 10}),
+        td = $('write_attribute_td').writeAttribute({valign: 'bottom', colspan: 2, rowspan: 2});
+      assertEqual(90, input.readAttribute('maxlength'));
+      assertEqual(10, input.readAttribute('tabindex'));
+      assertEqual(2,  td.readAttribute('colspan'));
+      assertEqual(2,  td.readAttribute('rowspan'));
+      assertEqual('bottom', td.readAttribute('valign'));
+      
+      var p = $('write_attribute_para'), label = $('write_attribute_label');
+      assertEqual('some-class',     p.    writeAttribute({'class':   'some-class'}).    readAttribute('class'));
+      assertEqual('some-className', p.    writeAttribute({className: 'some-className'}).readAttribute('class'));
+      assertEqual('some-id',        label.writeAttribute({'for':     'some-id'}).       readAttribute('for'));
+      assertEqual('some-other-id',  label.writeAttribute({htmlFor:   'some-other-id'}). readAttribute('for'));
+      
+      assert(p.writeAttribute({style: 'width: 5px;'}).readAttribute('style').toLowerCase().include('width'));      
+    }},
+    
+    testElementWriteAttributeWithCustom: function() {with(this) {
+      var p = $('write_attribute_para').writeAttribute({name: 'martin', location: 'stockholm', age: 26});
+      assertEqual('martin',    p.readAttribute('name'));
+      assertEqual('stockholm', p.readAttribute('location'));
+      assertEqual('26',        p.readAttribute('age'));
+    }},
+    
+    testNewElement: function() {with(this) {
+      assert(new Element('h1'));
+      
+      var XHTML_TAGS = $w(
+        'a abbr acronym address area '+
+        'b bdo big blockquote br button caption '+
+        'cite code col colgroup dd del dfn div dl dt '+
+        'em fieldset form h1 h2 h3 h4 h5 h6 hr '+
+        'i iframe img input ins kbd label legend li '+
+        'map object ol optgroup option p param pre q samp '+
+        'script select small span strong style sub sup '+
+        'table tbody td textarea tfoot th thead tr tt ul var');
+        
+      XHTML_TAGS.each(function(tag, index) {
+        var id = tag + '_' + index, element = document.body.appendChild(new Element(tag, {id: id}));
+        assertEqual(tag, element.tagName.toLowerCase());
+        assertEqual(element, document.body.lastChild);
+        assertEqual(id, element.id);
+      });
+      
+      
+      assertRespondsTo('update', new Element('div'));
+      Element.addMethods({
+        cheeseCake: function(){
+          return 'Cheese cake';
+        }
+      });
+      
+      assertRespondsTo('cheeseCake', new Element('div'));
+      
+      /* window.ElementOld = function(tagName, attributes) { 
+        if (Prototype.Browser.IE && attributes && attributes.name) { 
+          tagName = '<' + tagName + ' name="' + attributes.name + '">'; 
+          delete attributes.name; 
+        } 
+        return Element.extend(document.createElement(tagName)).writeAttribute(attributes || {}); 
+      };
+      
+      benchmark(function(){
+        XHTML_TAGS.each(function(tagName){new Element(tagName)});
+      }, 5);
+      
+      benchmark(function(){
+        XHTML_TAGS.each(function(tagName){new ElementOld(tagName)});
+      }, 5); */
+      
+      assertEqual('foobar', new Element('a', {custom: 'foobar'}).readAttribute('custom'));
+      var input = document.body.appendChild(new Element('input', 
+        {id: 'my_input_field_id', name: 'my_input_field'}));
+      assertEqual(input, document.body.lastChild);
+      assertEqual('my_input_field', $(document.body.lastChild).name);
+      if (Prototype.Browser.IE)
+        assertMatch(/name=["']?my_input_field["']?/, $('my_input_field').outerHTML);
+    }},
+
-    testElementGetHeight: function() {with(this) {
-      assertIdentical(100, $('dimensions-visible').getHeight());