Changeset 10527

Timestamp:

09/16/07 21:17:19 (8 months ago)

Author:

peller

Message:

Merge attributemap branch. Still need to move style/class quirks from _Widget to parser, fix Slider,TextArea?,ComboBox?,FilteringSelect? widgets. Refs #3058

Location:

dijit/trunk

Files:

• changes.txt (modified) (2 diffs)
• Dialog.js (modified) (5 diffs)
• form/Button.js (modified) (1 diff)
• form/InlineEditBox.js (modified) (1 diff)
• form/Slider.js (modified) (1 diff)
• form/templates/Button.html (modified) (1 diff)
• form/templates/CheckBox.html (modified) (1 diff)
• form/templates/ComboBox.html (modified) (1 diff)
• form/templates/ComboButton.html (modified) (2 diffs)
• form/templates/DropDownButton.html (modified) (1 diff)
• form/templates/HorizontalSlider.html (modified) (2 diffs)
• form/templates/Spinner.html (modified) (1 diff)
• form/templates/TextBox.html (modified) (1 diff)
• form/templates/VerticalSlider.html (modified) (2 diffs)
• form/Textarea.js (modified) (1 diff)
• form/TextBox.js (modified) (1 diff)
• form/_FormWidget.js (modified) (3 diffs)
• layout/StackContainer.js (modified) (1 diff)
• layout/templates/TooltipDialog.html (modified) (1 diff)
• templates/Dialog.html (modified) (1 diff)
• _Templated.js (modified) (3 diffs)
• _Widget.js (modified) (5 diffs)

dijit/trunk/changes.txt

@@ -26 +26 @@
 createWidget() call removed since multiple renderers are no longer supported (see next section).
 
-At least for the dijit widgets, all widgets are guaranteed to work programatically, which in
+At least for the dijit widgets, all widgets are guaranteed to work programmatically, which in
 effect means that all widgets must have templates, unless the default <div> works.
 
@@ -59 +59 @@
 (not separated by semi-colons)
 
+Standard HTML attributes like 'id', 'name', 'lang', etc. are carried over programmatically
+by the _Widget constructor and do not need to be declared in the template (see _Widget.attributeMap)
+
 Parent/Child relationships
 --------------------------

dijit/trunk/Dialog.js

@@ -84 +84 @@
                 templatePath: dojo.moduleUrl("dijit", "templates/Dialog.html"),
 
-                // title: String
-                //              Title of the dialog
-                title: "",
-
                 // open: Boolean
                 //              is True or False depending on state of dialog
@@ -95 +91 @@
 
                 _lastFocusItem:null,
+
+                attributeMap: dojo.mixin(dojo.clone(dijit._Widget.prototype.attributeMap),
+                        {title: "titleBar"}),
 
                 postCreate: function(){
@@ -193 +192 @@
                                 // see if we are shift-tabbing from titleBar
                                 if(node == this.titleBar && evt.shiftKey && evt.keyCode == dojo.keys.TAB){
-                                        if (this._lastFocusItem){
+                                        if(this._lastFocusItem){
                                                 this._lastFocusItem.focus(); // send focus to last item in dialog if known
                                         }
@@ -199 +198 @@
                                 }else{
                                         // see if the key is for the dialog
-                                        while (node){
+                                        while(node){
                                                 if(node == this.domNode){
-                                                        if (evt.keyCode == dojo.keys.ESCAPE){
-                                                                this.hide();
+                                                        if(evt.keyCode == dojo.keys.ESCAPE){
+                                                                this.hide(); 
                                                         }else{
                                                                 return; // just let it go
@@ -210 +209 @@
                                         }
                                         // this key is for the disabled document window
-                                        if (evt.keyCode != dojo.keys.TAB){ // allow tabbing into the dialog for a11y
+                                        if(evt.keyCode != dojo.keys.TAB){ // allow tabbing into the dialog for a11y
                                                 dojo.stopEvent(evt);
                                         // opera won't tab to a div

dijit/trunk/form/Button.js

@@ -235 +235 @@
         templatePath: dojo.moduleUrl("dijit.form", "templates/ComboButton.html"),
 
+        attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
+                {id:"", name:""}),
+
         // optionsTitle: String
         //  text that describes the options menu (accessibility)

dijit/trunk/form/InlineEditBox.js

@@ -191 +191 @@
                                 var isFirst = true;
                                 dojo.forEach(value.split("\n"), function(line){
-                                        if(isFirst){ isFirst = false; }
-                                        else {
+                                        if(isFirst){
+                                                isFirst = false;
+                                        }else{
                                                 _this.textNode.appendChild(document.createElement("BR")); // preserve line breaks
                                         }

dijit/trunk/form/Slider.js

@@ -41 +41 @@
 
         widgetsInTemplate: true,
+
+        attributeMap: dojo.mixin(dojo.clone(dijit._Widget.prototype.attributeMap),
+                {id:"", name:"valueNode"}),
 
         baseClass: "dijitSlider",

dijit/trunk/form/templates/Button.html

@@ -3 +3 @@
         ><div class='dijitRight'
         ><button class="dijitStretch dijitButtonNode dijitButtonContents" dojoAttachPoint="focusNode,titleNode"
-                tabIndex="${tabIndex}" type="${type}" id="${id}" name="${name}" waiRole="button" waiState="labelledby-${id}_label"
+                type="${type}" waiRole="button" waiState="labelledby-${id}_label"
                 ><div class="dijitInline ${iconClass}"></div
                 ><span class="dijitButtonText" id="${id}_label" dojoAttachPoint="containerNode">${label}</span

dijit/trunk/form/templates/CheckBox.html

@@ -1 +1 @@
 <span class="${baseClass}" baseClass="${baseClass}"
         ><input
-                id="${id}" tabIndex="${tabIndex}" type="${_type}" name="${name}" value="${value}"
+                type="${_type}"
                 class="dijitCheckBoxInput"
                 dojoAttachPoint="inputNode,focusNode"

dijit/trunk/form/templates/ComboBox.html

@@ -3 +3 @@
         ><tr
                 ><td class='dijitReset dijitStretch dijitInputField' dojoAttachPoint="nodeWithBorder"
-                        ><input type="text" autocomplete="off" name="${name}"
+                        ><input type="text" autocomplete="off"
                         dojoAttachEvent="onkeypress, onkeyup, onfocus, onblur, compositionend"
-                        dojoAttachPoint="textbox,focusNode" id='${id}'
-                        tabIndex='${tabIndex}' size='${size}' maxlength='${maxlength}'
-                        waiRole="combobox"
+                        dojoAttachPoint="textbox,focusNode" waiRole="combobox"
                 /></td
                 ><td class='dijitReset dijitRight dijitButtonNode dijitDownArrowButton'

dijit/trunk/form/templates/ComboButton.html

@@ -1 @@
-<table class='dijit dijitReset dijitInline dijitLeft dijitComboButton'  baseClass='dijitComboButton'
-        id="${id}" name="${name}" cellspacing='0' cellpadding='0'
+<table class='dijit dijitReset dijitInline dijitLeft dijitComboButton' baseClass='dijitComboButton'
+        cellspacing='0' cellpadding='0'
         dojoAttachEvent="onmouseover:_onMouse,onmouseout:_onMouse,onmousedown:_onMouse">
         <tr>
@@ -15 +15 @@
                         baseClass="dijitComboButtonDownArrow"
                         title="${optionsTitle}"
-                        tabIndex="${tabIndex}"
                         waiRole="button" waiState="haspopup-true"
                 ><div waiRole="presentation">&#9660;</div>

dijit/trunk/form/templates/DropDownButton.html

@@ -2 +2 @@
         dojoAttachEvent="onmouseover:_onMouse,onmouseout:_onMouse,onmousedown:_onMouse,onclick:_onArrowClick,onkeypress:_onKey"
         ><div class='dijitRight'>
-        <button tabIndex="${tabIndex}" class="dijitStretch dijitButtonNode dijitButtonContents" type="${type}" id="${id}" name="${name}"
+        <button class="dijitStretch dijitButtonNode dijitButtonContents" type="${type}"
                 dojoAttachPoint="focusNode,titleNode" waiRole="button" waiState="haspopup-true,labelledby-${id}_label"
                 ><div class="dijitInline ${iconClass}"></div

dijit/trunk/form/templates/HorizontalSlider.html

@@ -1 @@
-<table class="dijit dijitReset dijitSlider" cellspacing="0" cellpadding="0" border="0" rules="none" id="${id}"
+<table class="dijit dijitReset dijitSlider" cellspacing="0" cellpadding="0" border="0" rules="none"
         ><tr class="dijitReset"
                 ><td class="dijitReset" colspan="2"></td
@@ -13 +13 @@
                 ></td
                 ><td class="dijitReset"
-                        ><input dojoAttachPoint="valueNode" name="${name}" type="hidden"
+                        ><input dojoAttachPoint="valueNode" type="hidden"
                         /><div style="position:relative;" dojoAttachPoint="sliderBarContainer"
                                 ><div dojoAttachPoint="progressBar" class="dijitSliderBar dijitHorizontalSliderBar dijitSliderProgressBar dijitHorizontalSliderProgressBar" dojoAttachEvent="onclick:_onBarClick"
-                                        ><div tabIndex="${tabIndex}" dojoAttachPoint="sliderHandle,focusNode" class="dijitSliderMoveable dijitHorizontalSliderMoveable" dojoAttachEvent="onkeypress:_onKeyPress,onclick:_onHandleClick" waiRole="slider" valuemin="${minimum}" valuemax="${maximum}"
+                                        ><div dojoAttachPoint="sliderHandle,focusNode" class="dijitSliderMoveable dijitHorizontalSliderMoveable" dojoAttachEvent="onkeypress:_onKeyPress,onclick:_onHandleClick" waiRole="slider" valuemin="${minimum}" valuemax="${maximum}"
                                                 ><div class="dijitSliderImageHandle dijitHorizontalSliderImageHandle"></div
                                         ></div

dijit/trunk/form/templates/Spinner.html

@@ -6 +6 @@
                 <td rowspan="2" class="dijitReset dijitStretch dijitInputField" dojoAttachPoint="nodeWithBorder">
                         <input dojoAttachPoint="textbox,focusNode" type="${type}" dojoAttachEvent="onfocus,onkeyup"
-                                name="${name}" size="${size}" maxlength="${maxlength}"
-                                waiRole="spinbutton" autocomplete="off" tabIndex="${tabIndex}" id="${id}"
+                                waiRole="spinbutton" autocomplete="off"
                         /></td>
                 <td class="dijitReset dijitRight dijitButtonNode dijitUpArrowButton"

dijit/trunk/form/templates/TextBox.html

@@ -1 +1 @@
 <input dojoAttachPoint='textbox,focusNode' dojoAttachEvent='onfocus,onkeyup,onkeypress:_onKeyPress' autocomplete="off"
-        id='${id}' name='${name}' class="dijitInputField" type='${type}' size='${size}' maxlength='${maxlength}' tabIndex='${tabIndex}'/>
+        class="dijitInputField" type='${type}' />

dijit/trunk/form/templates/VerticalSlider.html

@@ -1 @@
-<table class="dijitReset dijitSlider" cellspacing="0" cellpadding="0" border="0" rules="none" id="${id}"
+<table class="dijitReset dijitSlider" cellspacing="0" cellpadding="0" border="0" rules="none"
 ><tbody class="dijitReset"
         ><tr class="dijitReset"
                 ><td class="dijitReset"></td
                 ><td class="dijitReset dijitSliderButtonContainer dijitVerticalSliderButtonContainer"
-                        ><div class="dijitVerticalSliderIncrementIcon" tabIndex=-1 style="display:none" dojoAttachPoint="incrementButton" dojoAttachEvent="onclick: increment"><span class="dijitSliderButtonInner">+</a></span></div
+                        ><div class="dijitVerticalSliderIncrementIcon" tabIndex="-1" style="display:none" dojoAttachPoint="incrementButton" dojoAttachEvent="onclick: increment"><span class="dijitSliderButtonInner">+</a></span></div
                 ></td
                 ><td class="dijitReset"></td
@@ -18 +18 @@
                 ><td dojoAttachPoint="leftDecoration" class="dijitReset" style="text-align:center;height:100%;"></td
                 ><td class="dijitReset" style="height:100%;"
-                        ><input dojoAttachPoint="valueNode" type="hidden" name="${name}"
+                        ><input dojoAttachPoint="valueNode" type="hidden"
                         /><center style="position:relative;height:100%;" dojoAttachPoint="sliderBarContainer"
                                 ><div dojoAttachPoint="remainingBar" class="dijitSliderBar dijitVerticalSliderBar dijitSliderRemainingBar dijitVerticalSliderRemainingBar" dojoAttachEvent="onclick:_onBarClick"></div
                                 ><div dojoAttachPoint="progressBar" class="dijitSliderBar dijitVerticalSliderBar dijitSliderProgressBar dijitVerticalSliderProgressBar" dojoAttachEvent="onclick:_onBarClick"
-                                        ><div tabIndex="${tabIndex}" dojoAttachPoint="sliderHandle,focusNode" class="dijitSliderMoveable" dojoAttachEvent="onkeypress:_onKeyPress,onclick:_onHandleClick" style="vertical-align:top;" waiRole="slider" valuemin="${minimum}" valuemax="${maximum}"
+                                        ><div dojoAttachPoint="sliderHandle,focusNode" class="dijitSliderMoveable" dojoAttachEvent="onkeypress:_onKeyPress,onclick:_onHandleClick" style="vertical-align:top;" waiRole="slider" valuemin="${minimum}" valuemax="${maximum}"
                                                 ><div class="dijitSliderImageHandle dijitVerticalSliderImageHandle"></div
                                         ></div

dijit/trunk/form/Textarea.js

@@ -105 +105 @@
                         // An additional problem is that the browser gives the document object a
                         // very cryptic accessible name, e.g.
-                        // wyciwyg://13/http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_InlineEditBox.html
+                        // wysiwyg://13/http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_InlineEditBox.html
                         // When focus is fired from the document object, the screen reader speaks
                         // the accessible name.  The cyptic accessile name is confusing.

dijit/trunk/form/TextBox.js

@@ -29 +29 @@
                 // size: String
                 //              HTML INPUT tag size declaration.
-                size: "20",
+                size: "",
 
                 // maxlength: String
                 //              HTML INPUT tag maxlength declaration.
-                maxlength: "999999",
+                maxlength: "",
 
                 templatePath: dojo.moduleUrl("dijit.form", "templates/TextBox.html"),
+
+                attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
+                        {size:"focusNode", maxlength:"focusNode"}),
 
                 getTextValue: function(){

dijit/trunk/form/_FormWidget.js

@@ -57 +57 @@
         //              Fires onChange for each value change or only on demand
         intermediateChanges: false,
+
+        // These mixins assume that the focus node is an INPUT, as many but not all _FormWidgets are.
+        // Don't attempt to mixin the 'type' attribute here programatically -- it must be declared
+        // directly in the template as read by the parser in order to function
+        attributeMap: dojo.mixin(dojo.clone(dijit._Widget.prototype.attributeMap),
+                {id:"focusNode", name:"focusNode", value:"focusNode", tabIndex:"focusNode", alt:"focusNode"}),
 
         setDisabled: function(/*Boolean*/ disabled){
@@ -147 +153 @@
 
                 // get original class (non state related) specified in template
-                var origClass = (this.styleNode||this.domNode).className;
+                var origClass = (this.stateNode||this.domNode).className;
 
                 // compute list of classname representing the states of the widget
@@ -177 +183 @@
                 }
 
-                (this.styleNode || this.domNode).className = origClass + " " + classes.join(" ");
+                (this.stateNode || this.domNode).className = origClass + " " + classes.join(" ");
         },
 

dijit/trunk/layout/StackContainer.js

@@ -381 +381 @@
                                         break;
                                 case dojo.keys.DELETE:
-                                        if (this._currentChild.closable){
+                                        if(this._currentChild.closable){
                                                 this.onCloseButtonClick(this._currentChild);
                                                 dojo.stopEvent(evt);

dijit/trunk/layout/templates/TooltipDialog.html

@@ -1 @@
-<div id="${id}" class="dijitTooltipDialog" >
+<div class="dijitTooltipDialog" >
         <div class="dijitTooltipContainer">
-                <div  class ="dijitTooltipContents dijitTooltipFocusNode" dojoAttachPoint="containerNode" tabindex="0" waiRole="dialog"></div>
+                <div class ="dijitTooltipContents dijitTooltipFocusNode" dojoAttachPoint="containerNode" tabindex="0" waiRole="dialog"></div>
         </div>
         <span dojoAttachPoint="tabEnd" tabindex="0" dojoAttachEvent="focus:_cycleFocus"></span>

dijit/trunk/templates/Dialog.html

@@ -1 +1 @@
 <div class="dijitDialog">
-                <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar" tabindex="0" waiRole="dialog" title="${title}">
-                <span dojoAttachPoint="titleNode" class="dijitDialogTitle">${title}</span>
-                <span dojoAttachPoint="closeButtonNode" class="dijitDialogCloseIcon" dojoAttachEvent="onclick: hide">
-                        <span dojoAttachPoint="closeText" class="closeText">x</span>
-                </span>
+        <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar" tabindex="0" waiRole="dialog">
+        <span dojoAttachPoint="titleNode" class="dijitDialogTitle">${title}</span>
+        <span dojoAttachPoint="closeButtonNode" class="dijitDialogCloseIcon" dojoAttachEvent="onclick: hide">
+                <span dojoAttachPoint="closeText" class="closeText">x</span>
+        </span>
         </div>
                 <div dojoAttachPoint="containerNode" class="dijitDialogPaneContent"></div>

dijit/trunk/_Templated.js

@@ -41 +41 @@
                 buildRendering: function(){
                         // summary:
-                        //              Construct the UI for this widget from a template.
-                        // description:
+                        //              Construct the UI for this widget from a template, setting this.domNode.
+
                         // Lookup cached version of template, and download to cache if it
                         // isn't there already.  Returns either a DomNode or a string, depending on
                         // whether or not the template contains ${foo} replacement parameters.
-
                         var cached = dijit._Templated.getCachedTemplate(this.templatePath, this.templateString);
 
@@ -75 +74 @@
                         // attachment points which should be defined on the template node.
                         this._attachTemplateNodes(node);
-                        if(this.srcNodeRef){
-                                dojo.style(this.styleNode || node, "cssText", this.srcNodeRef.style.cssText);
-                                if(this.srcNodeRef.className){
-                                        node.className += " " + this.srcNodeRef.className;
-                                }
+
+                        var source = this.srcNodeRef;
+                        if(source && source.parentNode){
+                                source.parentNode.replaceChild(node, source);
                         }
 
                         this.domNode = node;
-                        if(this.srcNodeRef && this.srcNodeRef.parentNode){
-                                this.srcNodeRef.parentNode.replaceChild(this.domNode, this.srcNodeRef);
-                        }
                         if(this.widgetsInTemplate){
-                                var childWidgets = dojo.parser.parse(this.domNode);
+                                var childWidgets = dojo.parser.parse(node);
                                 this._attachTemplateNodes(childWidgets, function(n,p){
                                         return n[p];
@@ -93 +88 @@
                         }
 
-                        this._fillContent(this.srcNodeRef);
+                        this._fillContent(source);
                 },
 

dijit/trunk/_Widget.js

@@ -20 +20 @@
         dir: "",
 
+        // class: String
+        // HTML class attribute
+        "class": "",
+
+        // style: String
+        // HTML style attribute
+        style: "",
+
+        // title: String
+        // HTML title attribute
+        title: "",
+
         // srcNodeRef: DomNode
         //              pointer to original dom node
         srcNodeRef: null,
 
-        // domNode DomNode:
+        // domNode: DomNode
         //              this is our visible representation of the widget! Other DOM
         //              Nodes may by assigned to other properties, usually through the
@@ -31 +43 @@
         domNode: null,
 
+        // attributeMap: Object
+        //              A map of attributes -- typically standard HTML attributes -- to transfer
+        //              from the parsed node into the new dom, at the widget's domNode, by default.
+        //              Other node references can be specified as properties of 'this'
+        attributeMap: {id:"", dir:"", lang:"", "class":"", style:"", title:""},  // TODO: add on* handlers?
+
         //////////// INITIALIZATION METHODS ///////////////////////////////////////
 
@@ -37 +55 @@
         },
 
-        create: function(params, srcNodeRef) {
+        create: function(params, srcNodeRef){
                 // summary:
                 //              To understand the process by which widgets are instantiated, it
@@ -89 +107 @@
 
                 this.buildRendering();
+
+                // Copy attributes listed in attributeMap into the newly created DOM for the widget
+                // The placement of these attributes is according to the property mapping in attributeMap
+                // Note special handling for 'style' and 'class' attributes which are lists and can
+                // have elements from both old and new structures, and some attributes like "type"
+                // cannot be processed this way as they are not mutable.
+
+//KLUDGE: skip the widgets which aren't yet working.  See #3058
+if(!/dijit\.form\.(Slider|TextArea|ComboBox|FilteringSelect)/.test(this.declaredClass))
+
+                for(var attr in this.attributeMap){
+                        if(this.domNode){
+                                var node = this[this.attributeMap[attr] || "domNode"];
+                                var value = this[attr];
+                                if(value !== "" || (params && params[attr])){
+                                        var domValue = node.getAttribute(attr);
+                                        // Deal with IE quirks for 'class' and 'style'
+                                        switch(attr){
+                                        case "class":
+                                                domValue = node.className;
+                                                break;
+                                        case "style":
+                                                if(domValue && dojo.isObject(domValue)){
+                                                        domValue = domValue.cssText; // required for IE, doesn't work in Opera
+                                                }
+                                        }
+                                        if(domValue){
+                                                var delim = {style: ";", "class": " "}[attr];
+                                                // style and class attributes are special and contain lists
+                                                // which need to be combined
+                                                if(delim){
+                                                        value += delim + domValue;
+                                                        domValue = null;
+