Changeset 14229

Timestamp:

07/02/08 08:56:50 (6 months ago)

Author:

toonetown

Message:

Refs #7033 - Update focus handling in rolling list and add in ability to set and get value by path on the file picker !strict

Location:

dojox/trunk/widget

Files:

• FilePicker.js (modified) (4 diffs)
• FilePicker/FilePicker.css (modified) (1 diff)
• RollingList.js (modified) (20 diffs)
• RollingList/RollingList.css (modified) (6 diffs)
• tests/test_FilePicker.html (modified) (1 diff)
• tests/test_RollingList.html (modified) (4 diffs)

dojox/trunk/widget/FilePicker.js

@@ -7 +7 @@
 
 dojo.declare("dojox.widget._FileInfoPane", 
-        [dojox.widget._RollingListPane, dijit._Templated], {
+        [dojox.widget._RollingListPane], {
         // summary: a pane to display the information for the currently-selected
         //      file
@@ -43 +43 @@
         className: "dojoxFilePicker",
         
+        // fileSeparator: string
+        //  Our file separator - it will be guessed if not set
+        fileSeparator: "",
+        
+        // topDir: string
+        //      The top directory string - it will be guessed if not set
+        topDir: "",
+                
         // parentAttr: string
         //      the attribute to read for finding our parent directory
         parentAttr: "parentDir",
+        
+        // pathAttr: string
+        //  the attribute to read for getting the full path of our file
+        pathAttr: "path",
+        
+        startup: function(){
+                if(this._started){ return; }
+                this.inherited(arguments);
+                // Figure out our file separator if we don't have it yet
+                var conn, child = this.getChildren()[0];
+                var setSeparator = dojo.hitch(this, function(){
+                        if(conn){
+                                this.disconnect(conn);
+                        }
+                        delete conn;
+                        var item = child.items[0];
+                        if(item){
+                                var store = this.store;
+                                var parent = store.getValue(item, this.parentAttr);
+                                var path = store.getValue(item, this.pathAttr);
+                                if(!this.fileSeparator){
+                                        this.fileSeparator = path.substring(parent.length, parent.length + 1);
+                                }
+                                if(!this.topDir){
+                                        this.topDir = parent;
+                                }
+                        }
+                });
+                if(!this.fileSeparator || !this.topDir){
+                        if(!child.items){
+                                conn = this.connect(child, "onItems", setSeparator);
+                        }else{
+                                setSeparator();
+                        }
+                }
+        },
         
         getChildItems: function(item){
@@ -54 +98 @@
                 }
                 return ret;
+        },
+        
+        _onChange: function(/*item*/val){
+                this.onChange();
+                if(this.store.isItem(val)){
+                        this.onPathChange(this.store.getValue(val, this.pathAttr));
+                }else{
+                        this.onPathChange("");
+                }
         },
         
@@ -81 +134 @@
         },
         
+        onPathChange: function(/*string*/ newPath){
+                // Summary: called with the new path whenever a path has been changed
+        },
+        
         setValueFromString: function(/*string*/ path){
                 // Summary: sets the value of this widget based off the given path

dojox/trunk/widget/FilePicker/FilePicker.css

@@ -1 +1 @@
 @import url("../RollingList/RollingList.css");
+
+.dojoxFileInfoPane *{
+        white-space: normal;
+}
 
 .dojoxFileInfoLabel {
         font-weight: bold;
+        white-space: nowrap;
+}
+
+.dojoxFileInfoPane {
+        width: 20em;
 }
 

dojox/trunk/widget/RollingList.js

@@ -10 +10 @@
 
 dojo.declare("dojox.widget._RollingListPane",
-        [dijit.layout.ContentPane, dijit._Contained], {
+        [dijit.layout.ContentPane, dijit._Templated, dijit._Contained], {
         // summary: a core pane that can be attached to a RollingList.  All panes
         //  should extend this one
+
+        // templateString: string
+        //      our template
+        templateString: '<div class="dojoxRollingListPane"><table><tbody><tr><td dojoAttachPoint="containerNode"></td></tr></tbody></div>',
 
         // class: string
@@ -46 +50 @@
         queryOptions: null,
         
-        _setContentAndScroll: function(cont){
+        // focusByNode: boolean
+        //  set to false if the subclass will handle its own node focusing
+        _focusByNode: true,
+        
+        _setContentAndScroll: function(/*String|DomNode|Nodelist*/cont){
                 // summary: sets the value of the content and scrolls it into view
                 this._setContent(cont);
@@ -64 +72 @@
                         }), 1);
                 }
+                this.connect(this.focusNode||this.domNode, "onkeypress", "_focusKey");
                 this.parentWidget._updateClass(this.domNode, "Pane");
                 this.inherited(arguments);
         },
 
+        _focusKey: function(/*Event*/e){
+                // summary: called when a keypress happens on the widget
+                if(e.charOrCode == dojo.keys.LEFT_ARROW && this.parentPane){
+                        this.parentPane.focus();
+                        this.parentWidget.scrollIntoView(this.parentPane);
+                }else if(e.charOrCode == dojo.keys.ENTER){
+                        this.parentWidget.onExecute();
+                }
+        },
+        
+        focus: function(){
+                // summary: sets the focus to this current widget
+                if(this.parentWidget._focusedPane != this){
+                        this.parentWidget._focusedPane = this;
+                        this.parentWidget.scrollIntoView(this);
+                        if(this._focusByNode){
+                                try{dijit.focus(this.focusNode||this.domNode);}catch(e){}
+                        }
+                }
+        },
+        
         _loadCheck: function(/* Boolean? */ forceLoad){
+                // summary: checks that the store is loaded
                 if(!this._started){
                         var c = this.connect(this, "startup", function(){
@@ -75 +106 @@
                         });
                 }
-                // summary: checks that the store is loaded
                 var displayState = this._isShown();
                 if((this.store || this.items) && (forceLoad || (this.refreshOnShow && displayState) || (!this.isLoaded && displayState))){
@@ -199 +229 @@
 
 dojo.declare("dojox.widget._RollingListGroupPane",
-        [dojox.widget._RollingListPane, dijit._Templated], {
+        [dojox.widget._RollingListPane], {
         // summary: a pane that will handle groups (treats them as menu items)
         
@@ -221 +251 @@
         },
         
-        _setContent: function(cont){
+        _setContent: function(/*String|DomNode|Nodelist*/cont){
                 if(!this._menu){
                         // Only set the content if we don't already have a menu
@@ -282 +312 @@
         
         focus: function(){
+                // summary: sets the focus to this current widget
                 if(this._menu){
-                        var focusDom = dojo.query(".dojoxRollingListItemSelected", 
-                                                this.domNode)[0] || this._menu.getChildren()[0].domNode;
-                        if(focusDom){
-                                var focusWidget = dijit.byNode(focusDom);
-                                if(focusWidget && focusWidget.focusNode){
-                                        focusWidget.focusNode.focus();
-                                }
-                        }
-                }else{
-                        var conn = this.connect(this, "onItems", function(){
-                                this.disconnect(conn);
-                                this.focus();
-                        });                     
+                        if(this._pendingFocus){
+                                this.disconnect(this._pendingFocus);
+                        }
+                        delete this._pendingFocus;
+                        
+                        // We focus the right widget - either the focusedChild, the
+                        //   selected node, the first menu item, or the menu itself
+                        var focusWidget = this._menu.focusedChild;
+                        if(!focusWidget)
+                        {
+                                var focusNode = dojo.query(".dojoxRollingListItemSelected", this.domNode)[0];
+                                if(focusNode){
+                                        focusWidget = dijit.byNode(focusNode);
+                                }
+                        }
+                        if(!focusWidget){
+                                focusWidget = this._menu.getChildren()[0] || this._menu;
+                        }
+                        this._focusByNode = false;
+                        if(focusWidget.focusNode){
+                                try{dijit.focus(focusWidget.focusNode);}catch(e){}
+                        }else if(focusWidget.focus){
+                                focusWidget.focus();
+                        }else{
+                                this._focusByNode = true;
+                        }
+                        this.inherited(arguments);
+                }else if(!this._pendingFocus){
+                        this._pendingFocus = this.connect(this, "onItems", "focus");
                 }
         },
@@ -305 +352 @@
                         parentMenu: this.parentPane ? this.parentPane._menu : null,
                         onCancel: function(/*Boolean*/ closeAll){ 
-                                if(self.parentPane &&self.parentPane.focus){
+                                if(self.parentPane){
                                         self.parentPane.focus();
                                 }
@@ -318 +365 @@
                         if(item.disabled){ return; }
                         evt.alreadySelected = dojo.hasClass(item.domNode, "dojoxRollingListItemSelected");
-                        if(evt.alreadySelected && evt.type == "keypress"){
+                        if(evt.alreadySelected && 
+                                ((evt.type == "keypress" && evt.charOrCode != dojo.keys.ENTER) ||
+                                (evt.type == "internal"))){
                                 var p = this.parentWidget.getChildren()[this.getIndexInParent() + 1];
-                                if(p && p.focus){
+                                if(p){
                                         p.focus();
-                                }
-                                this.parentWidget.scrollIntoView(this);
-                                return;
-                        }
-                        this._setSelected(item, menu);
-                        this.parentWidget._onItemClick(evt, this, item.item, item.children);
+                                        this.parentWidget.scrollIntoView(p);
+                                }
+                        }else{
+                                this._setSelected(item, menu);
+                                this.parentWidget._onItemClick(evt, this, item.item, item.children);
+                                if(evt.type == "keypress" && evt.charOrCode == dojo.keys.ENTER){
+                                        this.parentWidget.onExecute();
+                                }
+                        }
                 });
                 if(!menu._started){
@@ -368 +420 @@
         // templateString: string
         //  our template string to use
-        templateString: '<div class="dojoxRollingList ${className}" dojoAttachPoint="containerNode"></div>',
+        templateString: '<div class="dojoxRollingList ${className}" dojoAttachPoint="containerNode" dojoAttachEvent="onkeypress:_onKey"></div>',
         
         // className: string
@@ -393 +445 @@
         //      the attribute to read for finding our parent item (if any)
         parentAttr: "",
-        
-        // scrollDuration: integer
-        //  time (in millis) to animate the smooth scroll across
-        scrollDuration: 150,
         
         // value: item
@@ -430 +478 @@
                 var selItem = null;
                 while(child && !selItem){
-                        var val = child._getSelected();
+                        var val = child._getSelected ? child._getSelected() : null;
                         if(val){
                                 selItem = val.item;
@@ -453 +501 @@
                 }
                 this.layout();
-                this.scrollIntoView(widget, this.getChildren().length > 1);
+                widget.focus();
         },
         
@@ -471 +519 @@
                                         dojo.toggleClass(node, c + type + k, options[k]);
                                 }
+                                dojo.toggleClass(node, c + type + "FocusSelected", 
+                                        (dojo.hasClass(node, c + type + "Focus") && dojo.hasClass(node, c + type + "Selected")));
+                                dojo.toggleClass(node, c + type + "HoverSelected", 
+                                        (dojo.hasClass(node, c + type + "Hover") && dojo.hasClass(node, c + type + "Selected")));
                         }
                 });
         },
         
-        scrollIntoView: function(/* Widget */ childWidget, /* Boolean? */ doFocus){
-                // summary: smoothly scrolls the given widget into view
-                window.setTimeout(dojo.hitch(this, function(){
-                        var node = this.domNode;
-                        if(this._currentAnim && this._currentAnim.status() == "playing"){
-                                this._currentAnim.stop();
-                        }
-                        delete this._currentAnim;
-                        var tgt = node.scrollWidth - node.clientWidth;
-                        var _doFocus = function(){
-                                if(doFocus && childWidget.focus){
-                                        childWidget.focus();
-                                }
-                        };
-                        if(node.scrollLeft != tgt){
-                                this._currentAnim = new dojo._Animation({
-                                        curve: new dojo._Line(node.scrollLeft, tgt),
-                                        onAnimate: function(val){
-                                                node.scrollLeft = val;
-                                        },
-                                        duration: this.scrollDuration,
-                                        onEnd: _doFocus
-                                }).play();
-                        }else{
-                                _doFocus();
-                        }
+        scrollIntoView: function(/* Widget */ childWidget){
+                // summary: scrolls the given widget into view
+                if(this._scrollingTimeout){ 
+                        window.clearTimeout(this._scrollingTimeout);
+                }
+                delete this._scrollingTimeout;
+                this._scrollingTimeout = window.setTimeout(dojo.hitch(this, function(){
+                        if(childWidget.domNode){
+                                dijit.scrollIntoView(childWidget.domNode);
+                        }
+                        delete this._scrollingTimeout;
+                        return;
                 }), 1);
         },
@@ -516 +554 @@
                         });
                 }
-                this.scrollIntoView(children[children.length-1]);
-        },
-        
+                if(this._focusedPane){
+                        var foc = this._focusedPane;
+                        delete this._focusedPane;
+                        foc.focus();
+                }else if(children && children.length){
+                        children[0].focus();
+                }
+        },
+        
+        _onChange: function(/*item*/ value){
+                this.onChange(value);
+        },
+
         _setValue: function(/* item */ value){
                 // summary: internally sets the value and fires onchange
@@ -524 +572 @@
                 if(!this._itemsMatch(this.value, value)){
                         this.value = value;
-                        this.onChange(value);
+                        this._onChange(value);
                 }
         },
@@ -661 +709 @@
                 }else if(pane){
                         this._removeAfter(pane);
+                        this.scrollIntoView(pane);
                 }
                 if(!evt || evt.type != "internal"){
@@ -732 +781 @@
                                         if(!this.disabled){try{dijit.focus(this.focusNode);}catch(e){}}
                                 };
-                                widgetItem.connect(widgetItem.focusNode, "blur", function(){
+                                widgetItem.connect(widgetItem.focusNode, "onmouseenter", function(){
+                                        self._updateClass(this.domNode, "Item", {"Hover": true});
+                                });
+                                widgetItem.connect(widgetItem.focusNode, "onmouseleave", function(){
                                         self._updateClass(this.domNode, "Item", {"Hover": false});
                                 });
+                                widgetItem.connect(widgetItem.focusNode, "blur", function(){
+                                        self._updateClass(this.domNode, "Item", {"Focus": false});
+                                });
                                 widgetItem.connect(widgetItem.focusNode, "focus", function(){
-                                        self._updateClass(this.domNode, "Item", {"Hover": true});
+                                        self._updateClass(this.domNode, "Item", {"Focus": true});
+                                        self._focusedPane = parentPane;
+                                });
+                                widgetItem.connect(widgetItem.focusNode, "ondblclick", function(){
+                                        self.onExecute();
                                 });
                         }
@@ -752 +811 @@
         },
         
+        _onKey: function(/*Event*/ e){
+                // summary: called when a keypress event happens on this widget
+                if(e.charOrCode == dojo.keys.ESCAPE && this._savedFocus){
+                        try{dijit.focus(this._savedFocus);}catch(e){}
+                        delete this._savedFocus;
+                        dojo.stopEvent(e);
+                        return;
+                }
+                if(e.charOrCode == dojo.keys.LEFT_ARROW || 
+                        e.charOrCode == dojo.keys.RIGHT_ARROW){
+                        dojo.stopEvent(e);
+                        return;
+                }
+        },
+        
+        handleKey:function(/*Event*/e){
+                // summary: handle the key for the given event - called by dropdown
+                //      widgets
+                if(e.charOrCode == dojo.keys.DOWN_ARROW){
+                        if(!this._focusedPane){
+                                var child = this.getChildren()[0];
+                                if(child){
+                                        this._savedFocus = dijit.getFocus(this);
+                                        child.focus();
+                                }
+                        }else{
+                                this._savedFocus = dijit.getFocus(this);
+                                var foc = this._focusedPane;
+                                delete this._focusedPane;
+                                foc.focus();
+                        }
+                        return false;
+                }else if(e.charOrCode == dojo.keys.ESCAPE){
+                        this.onCancel();
+                        return false;
+                }
+                return true;
+        },
+
         startup: function(){
                 if(this._started){ return; }
@@ -797 +895 @@
         },
         
+        onExecute: function(){
+                // summary: exists so that popups don't disappear too soon
+        },
+        
+        onCancel: function(){
+                // summary: exists so that we can close ourselves if we wish
+        },
+        
         onChange: function(/* item */ value){
                 // summary: called when the value of this widget has changed

dojox/trunk/widget/RollingList/RollingList.css

@@ -36 +36 @@
         background-color: #f7f7f7;
 }
-.tundra .dojoxRollingListPane .dojoxRollingListItemHover {
+.tundra .dojoxRollingListPane .dojoxRollingListItemHover,
+.tundra .dojoxRollingListPane .dojoxRollingListItemFocus {
         background-color: #e3e3e3;
 }
@@ -43 +44 @@
         background-color: #3559ac;
         font-weight: bold;
+}
+.tundra .dojoxRollingListPane .dojoxRollingListItemHoverSelected,
+.tundra .dojoxRollingListPane .dojoxRollingListItemFocusSelected {
+        background-color: #9aacd6;
 }
 .tundra .dojoxRollingListItem {
@@ -51 +56 @@
         background-color: #fff;
 }
-.soria .dojoxRollingListPane .dojoxRollingListItemHover {
+.soria .dojoxRollingListPane .dojoxRollingListItemHover, 
+.soria .dojoxRollingListPane .dojoxRollingListItemFocus {
         background-color: #e3e3e3;
 }
@@ -58 +64 @@
         background-color: #d9e6f9;
         font-weight: bold;
+}
+.soria .dojoxRollingListPane .dojoxRollingListItemHoverSelected,
+.soria .dojoxRollingListPane .dojoxRollingListItemFocusSelected {
+        background-color: #ecf3fc;
 }
 .soria .dojoxRollingListItem {
@@ -67 +77 @@
         background-color: #fff;
 }
-.nihilo .dojoxRollingListPane .dojoxRollingListItemHover {
+.nihilo .dojoxRollingListPane .dojoxRollingListItemHover,
+.nihilo .dojoxRollingListPane .dojoxRollingListItemFocus {
         background-color: #e3e3e3;
 }
@@ -75 +86 @@
         font-weight: bold;
 }
+.nihilo .dojoxRollingListPane .dojoxRollingListItemHoverSelected,
+.nihilo .dojoxRollingListPane .dojoxRollingListItemFocusSelected {
+        background-color: #fff1c2;
+}
 .nihilo .dojoxRollingListItem {
         font-family: inherit;

dojox/trunk/widget/tests/test_FilePicker.html

@@ -38 +38 @@
         <hr>
         <div dojoType="dojox.data.FileStore" url="../../data/demos/stores/filestore_dojotree.php" jsId="fileStore" pathAsQueryParam="true"></div>
-        <div dojoType="dojox.widget.FilePicker" style="width: 50%;" store="fileStore" query="{}"></div>
+        <div dojoType="dojox.widget.FilePicker" jsId="myPicker" id="myPicker" style="width: 50%;" store="fileStore" query="{}"></div>
 </body>
 </html>

dojox/trunk/widget/tests/test_RollingList.html

@@ -136 +136 @@
                 doResize = function(){
                         var newSize = isBig ? {w: 340, h: 100} : {w: 500, h: 300};
-                        dijit.byId("myList").resize(newSize);
+                        myList.resize(newSize);