Changeset 8458

Timestamp:

05/07/07 14:43:15 (20 months ago)

Author:

doughays

Message:

Fixes #2885, #2309. AutoCompleter? now inherits from SerializableTextbox?. DateTextbox? now has a Calendar drop down, but still needs RangeBoundTextbox? min/max code working. Calendar now works under 0.9.

Location:

dijit/trunk

Files:

• form/AutoCompleter.js (modified) (19 diffs)
• form/Calendar.js (modified) (2 diffs)
• form/DateTextbox.js (modified) (2 diffs)
• form/Select.js (modified) (9 diffs)
• form/templates/AutoCompleter.html (modified) (1 diff)
• form/_DropDownTextBox.js (modified) (3 diffs)
• tests/form/autoCompleterData.json (modified) (1 diff)
• tests/form/test_AutoCompleter.html (modified) (3 diffs)
• tests/form/test_Select.html (modified) (3 diffs)

dijit/trunk/form/AutoCompleter.js

@@ -5 +5 @@
 dojo.require("dojo.data.JsonItemStore");
 dojo.require("dijit.form._DropDownTextBox");
-
+dojo.require("dijit.form.ValidationTextbox");
 
 dojo.declare(
                         "dijit.form.AutoCompleter",
-        [dijit.form._DropDownTextBox],
+        [dijit.form.SerializableTextbox, dijit.form._DropDownTextBox],
 {
         // summary:
@@ -21 +21 @@
         //              provider.
         
-        // Fixes #2313, #2562, #2790, #2883, #2884.
+        // Fixes #2885, #2309
         
         // searchLimit: Integer
@@ -88 +88 @@
         _setTextFieldValue:function(/*String*/ value){
                 // summary: Select wants to call AutoCompleter's setValue to reach FormElement's setValue
-                // But Select does not want to display the value in the text field!
-                // this function fixes that problem by separating the code
-                this.textInputNode.value=value;
+                // But Select does not want to display the "value" in the text field!
+                // this function fixes that problem by separating the code from Select's setTextValue
+                this.textbox.value=value;
         },
         setValue:function(/*String*/ value){
@@ -122 +122 @@
         enable:function(){
                 this.disabled=false;
-                this.textInputNode.removeAttribute("disabled");
+                this.textbox.removeAttribute("disabled");
         },
 
         disable: function(){
                 this.disabled = true;
-                this.textInputNode.setAttribute("disabled",true);
+                this.textbox.setAttribute("disabled",true);
         },
 
@@ -194 +194 @@
         },
 
-        _handleKeyEvents: function(/*Event*/ evt){
+        onkeypress: function(/*Event*/ evt){
                 // summary: handles keyboard events
                 if(evt.ctrlKey || evt.altKey){ return; }
@@ -235 +235 @@
 
                                                 // put caret last
-                                                this._setSelectedRange(this.textInputNode, this.textInputNode.value.length, null);
+                                                this._setSelectedRange(this.textbox, this.textbox.value.length, null);
                                         }else{
                                                 this._selectOption();
@@ -272 +272 @@
                                         //try{
                                                 this._prev_key_backspace = true;
-                                                if(!this.textInputNode.value.length){
+                                                if(!this.textbox.value.length){
                                                         this.setValue("");
                                                         //this._hideResultList();
@@ -307 +307 @@
                 // languages, it will generate this event instead of onKeyDown event
                 evt.key = evt.charCode = -1;
-                this._handleKeyEvents(evt);
-        },
-
-        _onKeyUp: function(/*Event*/ evt){
+                this.onkeypress(evt);
+        },
+
+        onkeyup: function(/*Event*/ evt){
                 // summary: callback on key up event
-                this.setValue(this.textInputNode.value);
+                this.setValue(this.textbox.value);
         },
 
@@ -373 +373 @@
                         return;
                 }
-                var zerothvalue=new String(results[0][this.searchField]);
+                var zerothvalue=new String(this.store.getValue(results[0], this.searchField));
                 if(zerothvalue&&(this.autoComplete)&&
                         (!this._prev_key_backspace)&&
-                        (this.textInputNode.value.length > 0)&&
-                        (new RegExp("^"+this.textInputNode.value, "").test(zerothvalue))){
-                                var cpos = this._getCaretPos(this.textInputNode);
+                        (this.textbox.value.length > 0)&&
+                        (new RegExp("^"+this.textbox.value, "").test(zerothvalue))){
+                                var cpos = this._getCaretPos(this.textbox);
                                 // only try to extend if we added the last character at the end of the input
-                                if((cpos+1) > this.textInputNode.value.length){
+                                if((cpos+1) > this.textbox.value.length){
                                         // only add to input node as we would overwrite Capitalisation of chars
-                                        this.textInputNode.value += zerothvalue.substr(cpos);
+                                        this.textbox.value += zerothvalue.substr(cpos);
                                         // build a new range that has the distance from the earlier
                                         // caret position to the end of the first string selected
-                                        this._setSelectedRange(this.textInputNode, cpos, this.textInputNode.value.length);
+                                        this._setSelectedRange(this.textbox, cpos, this.textbox.value.length);
                                 }
                 }
-                while(results.length){
-                        var tr = results.shift();
+                // #2309: iterate over cache nondestructively
+                for(var i=0; i<results.length; i++) {
+                        var tr=results[i];
                         if(tr){
                                 var td=this._createOption(tr);
@@ -405 +406 @@
                 // summary: creates an option to appear on the popup menu
                 var td = document.createElement("div");
-                td.appendChild(document.createTextNode(tr[this.searchField]));
-
-                td[this.searchField]=tr[this.searchField];
+                td.appendChild(document.createTextNode(this.store.getValue(tr, this.searchField)));
+                td.item=tr;
                 return td;
         },
-
-        _onFocusInput: function(){
+        onfocus:function(){
+                dijit.form.RangeBoundTextbox.prototype.onfocus.apply(this, arguments);
                 this._hasFocus = true;
         },
-
-        _onBlurInput: function(){
-                
-                        this._hasFocus = false;
-                        this._handleBlurTimer(true, 500);
+        onblur:function(){
+                dijit.form._DropDownTextBox.prototype.onblur.apply(this, arguments);
+                dijit.form.RangeBoundTextbox.prototype.onblur.apply(this, arguments);
+                this._hasFocus = false;
+                this._handleBlurTimer(true, 500);
                 
         },
@@ -455 +455 @@
                 
         },
-
-                
         _checkBlurred: function(){
-                        
-                
                         if(!this._hasFocus && !this._mouseover_list){
                                 this._hideResultList();
-                                //this._checkValueChanged();
-                        }
-                
-        },
-
+                        }
+        },
         _selectOption: function(/*Event*/ evt){
                 var tgt = null;
                 if(!evt){
                         // what if nothing is highlighted yet?
-                        evt = { target: (this._highlighted_option ? this._highlighted_option:this.optionsListNode.firstChild) };
-                }
-                if(evt.target.parentNode!=this.optionsListNode){
+                        evt = { target: this._highlighted_option };
+                        if(!evt.target) return;
+                }
+                if(evt.target&&evt.target.parentNode!=this.optionsListNode){
                         
                                 // handle autocompletion where the the user has hit ENTER or TAB
                                 // if the input is empty do nothing
-                                if(!this.textInputNode.value.length){
+                                if(!this.textbox.value.length){
                                         //this._checkValueChanged();
                                         return;
@@ -492 +486 @@
                         tgt = evt.target;
                 }
-                while((tgt.nodeType!=1)||(!tgt[this.searchField])){
+                while((tgt.nodeType!=1)||(!tgt.item[this.searchField])){
                         tgt = tgt.parentNode;
                         if(tgt == dojo.body()){
@@ -502 +496 @@
                 if(!evt.noHide){
                         this._hideResultList();
-                        this._setSelectedRange(this.textInputNode, 0, null);
+                        this._setSelectedRange(this.textbox, 0, null);
                 }
                 //this._checkValueChanged();
@@ -510 +504 @@
 
         _doSelect: function(tgt){
-                this.setValue(tgt[this.searchField]);
-        },
-
-        
-
-        _showResultList: function(){
-                        // Our dear friend IE doesnt take max-height so we need to calculate that on our own every time
-                var childs = this.optionsListNode.childNodes;
-                if(childs.length){
-                        var visibleCount = Math.min(childs.length,this.maxListLength);
-                                
-                        this.popupWidget.open(this.optionsListNode, this);
-                        with(this.optionsListNode.style)
-                        {
-                                //display = "";
-                                if(visibleCount == childs.length){
-                                                //no scrollbar is required, so unset height to let browser calcuate it,
-                                                //as in css, overflow is already set to auto
-                                        height = "";
-                                }else{
-                                        //show it first to get the correct dojo.style.getOuterHeight(childs[0])
-                                        //FIXME: shall we cache the height of the item?
-                                        var calcheight = visibleCount * (childs[0]).offsetHeight;
-                                        var windowheight=dijit.util.getViewport().h;
-                                        if(calcheight>windowheight){
-                                                var coords=dojo.coords(this.popupWidget.domNode);
-                                                calcheight=windowheight-coords.y;
-                                        }
-                                        height=calcheight+"px";
-                                                
-                                }
-                                width = this.domNode.offsetWidth+"px";
-                        }
-                        // do it again to reposition
-                        this.popupWidget.close(this);
-                        this.popupWidget.open(this.optionsListNode, this);
-                                
-                }else{
-                        this._hideResultList();
-                }
+                this.setValue(this.store.getValue(tgt.item, this.searchField));
         },
 
         arrowClicked: function(){
                         // summary: callback when arrow is clicked
-                
+                if(this.disabled) return;
                 this._handleBlurTimer(true, 0);
                 this.focus();
@@ -566 +521 @@
         },
 
-        focus: function(){
-                try{
-                        this.textInputNode.focus();
-                }catch (e){
-                                // element isn't focusable if disabled, or not visible etc - not easy to test for.
-                };
-        },
+        
 
         _startSearchFromInput: function(){
-                this._startSearch(this.textInputNode.value);
+                this._startSearch(this.textbox.value);
         },
 
@@ -589 +538 @@
         },
         postCreate: function(){
-                dijit.form.AutoCompleter.superclass.postCreate.apply(this, arguments);
+                //dijit.form.AutoCompleter.superclass.postCreate.apply(this, arguments);
+                dijit.form.SerializableTextbox.prototype.postCreate.apply(this, arguments);
+                dijit.form._DropDownTextBox.prototype.postCreate.apply(this, arguments);
 
                 /* different nodes get different parts of the style */
                 // FIXME: test different style attributes
                 //var source = this.srcNodeRef;
-                //this.textInputNode.style=source.style;
+                //this.textbox.style=source.style;
                         
                 var dpClass=dojo.getObject(this.dataProviderClass, false);
@@ -602 +553 @@
                 if(this.store==null){
                         if(this.url==""&&this.data==null){
+                                dpClass=dojo.getObject("dojo.data.JsonItemStore", false);
                                 var opts = this.domNode.getElementsByTagName("option");
                                 var ol = opts.length;
@@ -620 +572 @@
                 }
 
-                dojo.addClass(this.optionsListNode, 'dojoMenu');
-                this.optionsListNode.style.overflow="scroll";
+                
                 dojo.connect(this.optionsListNode, 'onclick', this, '_selectOption');
                 dojo.connect(this.optionsListNode, 'onmouseover', this, '_onMouseOver');
@@ -640 +591 @@
                 else this.setValue(this.value);*/
                 this.setValue(this.value);
+                // setting the value here is needed since value="" in the template causes "undefined" on form reset
+                this.textbox.setAttribute("value", this.value);
         }
 }

dijit/trunk/form/Calendar.js

@@ -7 +7 @@
 dojo.require("dijit.base.Widget");
 dojo.require("dijit.base.TemplatedWidget");
+dojo.require("dijit.base.FormElement");
 
 dojo.declare(
         "dijit.form.Calendar",
-        [dijit.base.Widget, dijit.base.TemplatedWidget],
+        [dijit.base.FormElement, dijit.base.TemplatedWidget],
         {
                 /*
@@ -51 +52 @@
                         }
                         this.clickedNode=null;
+                        dijit.form.Calendar.superclass.setValue.apply(this, arguments);
                 },
 

dijit/trunk/form/DateTextbox.js

@@ -1 +1 @@
 dojo.provide("dijit.form.DateTextbox");
 
-dojo.require("dijit.form.ValidationTextbox");
+dojo.require("dijit.form.Calendar");
+dojo.require("dijit.form._DropDownTextBox");
 dojo.require("dojo.date.calc");
 dojo.require("dojo.date.local");
 dojo.require("dojo.date.serial");
+dojo.require("dijit.form.ValidationTextbox");
 
 dojo.declare(
         "dijit.form.DateTextbox",
-        dijit.form.RangeBoundTextbox,
+        [dijit.form.RangeBoundTextbox, dijit.form._DropDownTextBox],
         {
                 // summary:
                 //              A validating, serializable, range-bound date text box.
                 // constraints object: min, max
-
+                templatePath: dojo.moduleUrl("dijit.form", "templates/AutoCompleter.html"),
                 regExpGen: dojo.date.local.regexp,
                 compare: dojo.date.calc.compare,
@@ -21 +23 @@
                 postMixInProperties: function(){
                         this.constraints.selector = 'date';
-                        dijit.form.DateTextbox.superclass.postMixInProperties.apply(this, arguments);
+                        // manual import of RangeBoundTextbox properties
+                        dijit.form.RangeBoundTextbox.prototype.postMixInProperties.apply(this, arguments);
+                        //dijit.form.DateTextbox.superclass.postMixInProperties.apply(this, arguments);
                 },
                 serialize: function(val){
                         return dojo.date.serial.toRfc3339(val, 'date');
+                },
+                setValue:function(value){
+                        // summary:
+                        //      Sets the value on the calendar drop down to value
+                        //      This change is then propagated through the calendar's onValueChanged to DateTextbox
+                        this.optionsListNode.setValue(value);
+                },
+                postCreate:function() {
+                        
+                        // apply both postCreates
+                        dijit.form.RangeBoundTextbox.prototype.postCreate.apply(this, arguments);
+                        dijit.form._DropDownTextBox.prototype.postCreate.apply(this, arguments);
+                        //dijit.form.DateTextbox.superclass.postCreate.apply(this, arguments);
+                        this.optionsListNode=new dijit.form.Calendar({value:this.getValue(), onValueChanged:dojo.hitch(this, this._calendarOnValueChanged)},this.optionsListNode);
+                },
+                _calendarOnValueChanged:function(value){
+                        // summary: taps into the popup Calendar onValueChanged
+                        dijit.form.DateTextbox.superclass.setValue.apply(this, arguments);
+                        this._hideResultList();
                 }
         }

dijit/trunk/form/Select.js

@@ -55 +55 @@
                         return state;
                 },
-
+                getValue:function(){
+                        return this.comboBoxSelectionValue.value;
+                },
                 setState: function(/*Object*/ state){
                         // summary:
@@ -92 +94 @@
 
                 _isInputEqualToResult: function(/*Object*/ result){
-                        var input = this.textInputNode.value;
+                        var input = this.textbox.value;
                         var testlabel=this.store.getValue(result, this.searchField);
                         if(!this.ignoreCase){
@@ -106 +108 @@
                         // get the actual label to display
                         var textlabel;
-                        try {
-                                // throws exception if item not in store (item created by internal processes)
+                        
+                        if(this.store.isItem(item)) {
                                 textlabel=this.store.getValue(item, this.searchField);
                         }
-                        catch(e) {
-                                // item might have been created by Select (not by store)
-                                // in this case, use associative array access
-                                textlabel=item[this.searchField];
-                        }
+                        else textlabel=item[this.searchField];
                         // if custom label function present, call it
-                        if(this.textInputNode.value!=textlabel&&this.labelFunc){
-                                textlabel=this.labelFunc(item);
-                                this.textInputNode.value = textlabel;
-                        }
+                        if(this.labelFunc){
+                                textlabel=this.labelFunc(item); 
+                        }
+                        this.textbox.value = textlabel;
                 },
                 labelFunc: function(/*Object*/ item){
                         // summary: Event handler called when the label changes
                         // returns the label that the AutoCompleter should display
-                        return item[this.searchField];
+                        return this.store.getValue(item, this.searchField);
                 },
                 getState: function(){
@@ -146 +144 @@
                         return td;
                 },
-                _onKeyUp: function(/*Event*/ evt){
+                onkeyup: function(/*Event*/ evt){
                         // summary: internal function
                         // Select needs to wait for the complete label before committing to a reverse lookup
-                        //this.setTextValue(this.textInputNode.value);
+                        //this.setTextValue(this.textbox.value);
                 },
 
@@ -166 +164 @@
                         this.domNode.appendChild(this.comboBoxSelectionValue);
                         dijit.form.Select.superclass.postCreate.apply(this, arguments);
-                        this.textInputNode.removeAttribute("name");
+                        this.textbox.removeAttribute("name");
+                        // setting the value here is needed since value="" in the template causes "undefined" on form reset
+                        this.comboBoxSelectionValue.setAttribute("value", this.value);
+                        this.setValue(this.value);
+                        // FIXME: set this in the right spot so the form resets correctly
+                        this.textbox.setAttribute("value", this.getTextValue());
                         //console.log(this.value);
                         //this.setValue(this.value);
@@ -174 +177 @@
                 },
                 _doSelect: function(/*Event*/ tgt){
-                        this._setValue(tgt[this.keyField]);
-                        this._setLabel(tgt);
+                        this._setValue(tgt.item[this.keyField]);
+                        this._setLabel(tgt.item);
                 },
                 
@@ -183 +186 @@
                         var isValidOption = false;
                         // this test doesn't work if optionsListNode is empty (page first loaded)
-                        var tgt = this.optionsListNode.firstChild;
+                        //var tgt = dojo.html.firstElement(this.optionsListNode); //PORT
+                        var tgt=this.optionsListNode.firstChild;
                         while(!isValidOption && tgt){
-                                if(this._isInputEqualToResult(tgt)){
+                                if(this._isInputEqualToResult(tgt.item)){
                                         isValidOption = true;
                                 }else{
+                                        //tgt = dojo.html.nextElement(tgt); //PORT
                                         tgt=this.optionsListNode.nextSibling;
                                 }
@@ -193 +198 @@
 
                         return isValidOption;
-                },
-                getTextValue: function(){
-                        // summary: returns current label
-                        return this.textInputNode.value;        // String
                 },
                 setTextValue:function(/*String*/ label){
                         // summary: set the label to the passed label.
                         // The hidden value is set by reverse lookup
-                        var query={};
+                        dijit.form.Select.superclass.setTextValue.apply(this, arguments);
+                        /*var query={};
                         query[this.searchField]=label;
-                        this.store.fetch({queryIgnoreCase:this.ignoreCase, query: query, onComplete:dojo.hitch(this, this._validateOption) });
+                        this.store.fetch({queryIgnoreCase:this.ignoreCase, query: query, onComplete:dojo.hitch(this, this._validateOption) });*/
                 },
                 _validateOption: function(/*Object*/ ret){
@@ -231 +233 @@