r2796 - implemented callbacks events: open, close, select, change. Last demo has console logging.

r2796 - implemented callbacks events: open, close, select, change. Last demo has console logging.


Author: scottjehl
Date: Tue Jun 16 15:36:31 2009
New Revision: 2796
Modified:
branches/labs/selectmenu/index.html
branches/labs/selectmenu/ui.selectmenu.js
Log:
implemented callbacks events: open, close, select, change. Last demo has
console logging.
Modified: branches/labs/selectmenu/index.html
==============================================================================
--- branches/labs/selectmenu/index.html    (original)
+++ branches/labs/selectmenu/index.html    Tue Jun 16 15:36:31 2009
@@ -62,6 +62,23 @@
                ]
            });
            
+            //sample with logging
+            $('select#speedE').selectmenu({
+                open: function(event,ui){
+                    console.log('event: '+event.type+', value: '+ui.value);
+                },
+                close: function(event,ui){
+                    console.log('event: '+event.type+', value: '+ui.value);
+                },
+                select: function(event,ui){
+                    console.log('event: '+event.type+', value: '+ui.value);
+                },
+                change: function(event,ui){
+                    console.log('event: '+event.type+', value: '+ui.value);
+                }
+            });
+            
+            
        });
        //format options
        var addressFormatting = [
@@ -187,6 +204,19 @@
                    <option value="somefile">Some unknown file</option>
                    <option value="someotherfile">Some other unknown file</option>
                </optgroup>
+            </select>
+        </fieldset>
+        
+        
+        <h2>Demo with events logged to console.</h2>
+        <fieldset>
+            <label for="speedE">Select a Speed:</label>
+            <select name="speedE" id="speedE">
+                <option value="Slower">Slower</option>
+                <option value="Slow">Slow</option>
+                <option value="Medium" selected="selected">Medium</option>
+                <option value="Fast">Fast</option>
+                <option value="Faster">Faster</option>
            </select>
        </fieldset>
Modified: branches/labs/selectmenu/ui.selectmenu.js
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.js    (original)
+++ branches/labs/selectmenu/ui.selectmenu.js    Tue Jun 16 15:36:31 2009
@@ -48,8 +48,8 @@
        //click toggle for menu visibility
        this.newelement
-            .bind('mousedown', function(){
-                self._toggle();
+            .bind('mousedown', function(event){
+                self._toggle(event);
                //make sure a click won't open/close instantly
                if(o.style == "popup"){
                    self._safemouseup = false;
@@ -66,7 +66,7 @@
                    case $.ui.keyCode.ENTER:
                    case $.ui.keyCode.SPACE:
                        ret = false;
-                        self._toggle();    
+                        self._toggle(event);    
                        break;
                    case $.ui.keyCode.UP:
                    case $.ui.keyCode.LEFT:
@@ -97,8 +97,8 @@
        
        //document click closes menu
        $(document)
-            .mousedown(function(){
-                self.close();
+            .mousedown(function(event){
+                self.close(event);
            });
        //change event on original selectmenu
@@ -134,9 +134,12 @@
                .addClass(selectOptionData[i].classes)
                .data('optionClasses', selectOptionData[i].classes)
                .mouseup(function(event){
-                        self.value($(this).data('index'));
                        if(self._safemouseup){
-                            self.close(true);
+                            var changed = $(this).data('index') != self._selectedIndex();
+                            self.value($(this).data('index'));
+                            self.select(event);
+                            if(changed){ self.change(event); }
+                            self.close(event,true);
                        }
                    return false;
                })
@@ -254,16 +257,16 @@
                    case $.ui.keyCode.ENTER:
                    case $.ui.keyCode.SPACE:
                        ret = false;
-                        self.close(true);
+                        self.close(event,true);
                        $(event.target).parents('li:eq(0)').trigger('mouseup');
                        break;        
                    case $.ui.keyCode.TAB:
                        ret = true;
-                        self.close();
+                        self.close(event);
                        break;    
                    case $.ui.keyCode.ESCAPE:
                        ret = false;
-                        self.close(true);
+                        self.close(event,true);
                        break;    
                    default:
                        ret = false;
@@ -296,7 +299,7 @@
        //transfer disabled state
        if(this.element.attr('disabled') == true){ this.disable(); }
        
-        //update value
+        //update value
        this.value(this._selectedIndex());
    },
    destroy: function() {
@@ -337,15 +340,10 @@
        });
        this._prevChar[0] = C;
    },
-    _closeOthers: function(){
-        $('.'+ this.widgetBaseClass
+'.ui-state-active').not(this.newelement).each(function(){
-            $(this).data('selectelement').selectmenu('close');
-        })
-    },
-    open: function(){
+    open: function(event){
        var self = this;
        this._refreshPosition();
-        this._closeOthers();
+        this._closeOthers(event);
        this.newelement.addClass('ui-state-active');
        this.list
            .appendTo('body')
@@ -353,18 +351,43 @@
            .find('li:not(.'+ self.widgetBaseClass +'-group):eq('+
this._selectedIndex() +') a').focus();    
        if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); }    
        this._refreshPosition();
-        return this.element;    
+        var uiHash = {
+            value: this.value()
+        };
+        this._trigger("open", event, uiHash);
    },
-    close: function(retainFocus){
-        this.newelement.removeClass('ui-state-active');
-        this.list.removeClass(this.widgetBaseClass+'-open');
-        if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-top').addClass('ui-corner-all'); }
-        if(retainFocus){this.newelement.focus();}    
-        return this.element;
-    },
-    _toggle: function(retainFocus){
-        if(this.list.is('.'+ this.widgetBaseClass +'-open')){
this.close(retainFocus); }
-        else { this.open(); }
+    close: function(event, retainFocus){
+        if(this.newelement.is('.ui-state-active')){
+            this.newelement.removeClass('ui-state-active');
+            this.list.removeClass(this.widgetBaseClass+'-open');
+            if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-top').addClass('ui-corner-all'); }
+            if(retainFocus){this.newelement.focus();}    
+            var uiHash = {
+                value: this.value()
+            };
+            this._trigger("close", event, uiHash);
+        }
+    },
+    change: function(event) {
+        var uiHash = {
+            value: this.value()
+        };
+        this._trigger("change", event, uiHash);
+    },
+    select: function(event) {
+        var uiHash = {
+            value: this.value()
+        };
+        this._trigger("select", event, uiHash);
+    },
+    _closeOthers: function(event){
+        $('.'+ this.widgetBaseClass
+'.ui-state-active').not(this.newelement).each(function(){
+            $(this).data('selectelement').selectmenu('close',event);
+        })
+    },
+    _toggle: function(event,retainFocus){
+        if(this.list.is('.'+ this.widgetBaseClass +'-open')){
this.close(event,retainFocus); }
+        else { this.open(event); }
    },
    _formatText: function(text){
        var o = this.options;
@@ -409,15 +432,8 @@
        numPerPage = (direction == 'up') ? -numPerPage : numPerPage;
        this._moveFocus(numPerPage);
    },
-    _change: function(event, index) {
-        var uiHash = {
-            value: this.value()
-        };
-        this._trigger("change", event, uiHash);
-    },
    _setData: function(key, value) {
        this.options[key] = value;
-        this._refreshValue();
        if (key == 'disabled') {
            this.element
                .add(this.newelement)
@@ -433,7 +449,6 @@
            this.element[0].selectedIndex = newValue;
            this._refreshValue();
            this._refreshPosition();
-            this._change(null, 0);
        }
        return this.element[0].selectedIndex;
    },