r2816 - - no icon option if not passed as a long class attribute (ie: ui-button-buttonMode-size-o...

Author: malk0.phpgtk
Date: Thu Jun 18 18:45:06 2009
New Revision: 2816
Modified:
branches/labs/button/ui.button.js
Log:
- no icon option if not passed as a long class attribute (ie:
ui-button-buttonMode-size-orientation-shortIconName) must be passed as full
icon name (ui-icon-iconName)
- rewrite most of the event handling
- add keyboard navigation and "clicking" support
Modified: branches/labs/button/ui.button.js
==============================================================================
--- branches/labs/button/ui.button.js (original)
+++ branches/labs/button/ui.button.js Thu Jun 18 18:45:06 2009
@@ -36,11 +36,15 @@
 // read inline options from class attribute (that can't be null!!!)
 var inlineOptions=self._readClassNameOpts('ui-button',{buttonMode:'|
toggle',size:'|auto|tiny|small|normal|big|huge',orientation:'|auto|
[trbli]',icon:'|[a-zA-Z0-9_-]+'})
+ if( inlineOptions.icon && ! inlineOptions.icon.match(/\.(gif|png|
jpe?g)$/i)){
+ inlineOptions.icon = 'ui-icon-'+inlineOptions.icon;
+ }
 self._mergeOpts(inlineOptions);
- self.element.addClass($.ui.button.classes.base+'
ui-widget '+$.ui.button.classes.stateDefault)
- .hover(self._hover,self._blur);
-
+ self.element.addClass($.ui.button.classes.base+'
ui-widget '+$.ui.button.classes.stateDefault);
+ if(! self.element.attr('tabindex')){
+ self.element.attr('tabindex',0);
+ }
 // preapre wrapers elements
 self._wrapLabel();
 self._wrapIcon();
@@ -77,14 +81,65 @@
 }
 }
 }
+ self._bindCommonEvents();
 return this;
 },
- _hover: function(){
- $(this).addClass($.ui.button.classes.stateHover);
- },
- _blur: function(){
- $(this).removeClass($.ui.button.classes.stateHover);
+
+ //--- events ---//
+ _bindCommonEvents: function(){
+ var self = this;
+ var _mouseenter= function(){
+ var elmt = $(this);
+ if(! elmt.button('option','disabled') ){
+ elmt.addClass($.ui.button.classes.stateHover);
+ }
+ };
+ var _mouseleave= function(){
+
$(this).removeClass($.ui.button.classes.stateHover+' '+$.ui.button.classes.stateDown);
+ };
+ var _pressed= function(event){
+ var elmt = $(this);
+ if( elmt.button('option','disabled') ){
+ return false;
+ }
+ if( event.type==='mousedown' || (event.type==='keydown' &&
(event.keyCode == $.ui.keyCode.ENTER || event.keyCode == $.ui.keyCode.SPACE
)) ){
+ elmt.addClass($.ui.button.classes.stateDown);
+ self.element.click()
+ }
+ };
+ var _released=function(event){
+ var elmt = $(this);
+ // release event should not do anything if actual element wasn't
pressed before (we probably have dragged the mouse from another element.)
+ if(! elmt.hasClass($.ui.button.classes.stateDown) )
+ return false;
+ $(this).removeClass($.ui.button.classes.stateDown);
+ };
+ var _focus=function(event){
+ var elmt = $(this);
+ if( elmt.button('option','disabled') ){
+ return false;
+ }
+ elmt.addClass($.ui.button.classes.stateFocus);
+ };
+ var _blur= function(){
+ $(this).removeClass($.ui.button.classes.stateFocus);
+ };
+ var events = {
+ mouseenter:_mouseenter,
+ mouseleave:_mouseleave,
+ mousedown:_pressed,
+ keydown:_pressed,
+ mouseup:_released,
+ keyup:_released,
+ focus:_focus,
+ blur:_blur,
+ };
+ var eventName = '';
+ for( eventName in events){
+ self.element.bind(eventName+'.ui-button',events[eventName]);
+ }
 },
+ //--- markup ---//
 _setIcon:function(){
 var ico = this._getData('icon');
 this._iconIsImage =( ico.match(/\.(jpe?g|png|gif|ico)$/i) )?true:false;
@@ -94,12 +149,12 @@
 if( '' === ico || null === ico){
 this._elmt_icon = null;
 this._elmt_iconContainer.hide();
- ico='none';
+ ico='ui-icon-none';
 }
 if( this._iconIsImage){
 this._elmt_icon=$('<img src="'+escape(ico)+'" />');
 }else{
- this._elmt_icon=$('');
+ this._elmt_icon=$('');
 }
 if(this._elmt_icon.length && ! $.support.style){
 this._elmt_icon.css({margin:0});
@@ -107,7 +162,13 @@
 this._elmt_iconContainer.append(this._elmt_icon);
 this._elmt_iconContainer.show();
 },
-
+ _wrapIcon:function(){
+ if( null!==this._elmt_iconContainer){
+ return;
+ }
+ this._elmt_iconContainer=$('');
+ this.element.append(this._elmt_iconContainer);
+ },
 _wrapLabel:function(){
 if( null!==this._elmt_label ){
 return;
@@ -118,15 +179,7 @@
 }else{

this.element.append(_elmt_label.append('&nbsp').addClass($.ui.button.classes.wrapperLabelEmpty));
 }
- this._elmt_label =
this.element.find('>.'+$.ui.button.classes.wrapperLabel);
- },
-
- _wrapIcon:function(){
- if( null!==this._elmt_iconContainer){
- return;
- }
- this._elmt_iconContainer=$('');
- this.element.append(this._elmt_iconContainer);
+ this._elmt_label =
this.element.find('>.'+$.ui.button.classes.wrapperLabel).disableSelection();
 },
 _checkElmtPos: function(){
 var actual =
this.element.find('span:first').is('.'+$.ui.button.classes.wrapperIcon)?true:false;
@@ -139,6 +192,7 @@
 }
 return this;
 },
+ //--- applying options settings ---//
 _setData:function(key,value){
 var self = this;
 switch(key){
@@ -178,6 +232,8 @@
 break;
 case 'disabled':
 self.element.toggleClass($.ui.button.stateDisabled,value);
+ self.element.attr('disabled',value?'disabled':false);
+ self.element.bind('click.uibutton',function(){return false;})
 break;
 case 'buttonMode':
 switch(value){
@@ -186,18 +242,17 @@
 self._cbToggle = function(event){return self.toggle(event);};
 }
 self.element.addClass($.ui.button.classes.modeToggle);
- self.element.bind('click.ui.button',self._cbToggle);
+ self.element.bind('click.uibutton',self._cbToggle);
 break;
 default:
 if(! self._cbToggle){
- self.element.unbind('click.ui.button',self._cbToggle);
+ self.element.unbind('click.uibutton',self._cbToggle);
 self.element.removeClass($.ui.button.classes.modeToggle);
 }
-
 }
 break;
 case 'active':
- if( self._getData('buttonMode') !== 'toggle')
+ if( self._getData('buttonMode') !== 'toggle' ||
self._getData('disabled') )
 return false;
 self.element.toggleClass($.ui.button.classes.stateActive+'
active',value?true:false);
 self._trigger('setactive',0,self);
@@ -205,9 +260,6 @@
 }
 return $.widget.prototype._setData.apply(this, arguments);
 },
- isActive:function(){
- return this._getData('active');
- },
 importButtonSetSettings:function(buttonSet){
 var self=this;
 var buttonSetSize = buttonSet._getData('size');
@@ -234,7 +286,12 @@
 }
 },
- //** callbacks **//
+
+ //--- getter ---///
+ isActive:function(){
+ return this._getData('active');
+ },
+ //--- public methods ---//
 toggle: function(event){
 this._setData('active',this._getData('active')?false:true);
 return this;
@@ -269,7 +326,7 @@
 stateDefault: 'ui-state-default',
 stateActive: 'ui-state-active',
 stateHover: 'ui-state-hover',
- stateDown: 'ui-state-highlight',
+ stateDown: 'ui-state-highlight', // must be different than
active!
 stateFocus: 'ui-state-focus',
 stateDisabled: 'ui-state-disabled',
 blockFix: 'ui-button-inlineBlockFix'