r2692 - - add a uiButtonCommon class that all others inherits for easing options management.
Author: malk0.phpgtk
Date: Wed Jun 10 17:41:55 2009
New Revision: 2692
Modified:
branches/labs/button/previousAttempts/malko/demo.html
branches/labs/button/previousAttempts/malko/jquery-ui-button.css
branches/labs/button/previousAttempts/malko/jquery-ui-button.js
Log:
- add a uiButtonCommon class that all others inherits for easing options
management.
- add support for 'auto' as orientation and size inside class attribute.
- now we can combine class ui-button with
ui-button-size-orientation-iconname and will work (wasn't true before)
- now buttonsets are just grouping elements not visual. replaced
ui-state-highlight with ui-state-active for down state of toggle buttons
Modified: branches/labs/button/previousAttempts/malko/demo.html
==============================================================================
--- branches/labs/button/previousAttempts/malko/demo.html (original)
+++ branches/labs/button/previousAttempts/malko/demo.html Wed Jun 10
17:41:55 2009
@@ -45,7 +45,7 @@
jQuery().ready(function(){
var icon = "info";
-
$('[class*=ui-button]:gt(0)').button({checkButtonset:true,toggle:function(event,ui){alert('toggle
button '+(ui.isActive()?'on':'off'))}});
+
$('[class*=ui-button]').button({checkButtonset:true,toggle:function(event,ui){alert('toggle
button '+(ui.isActive()?'on':'off'))}});
$('#settingBar select').change(function(){
if($(this).is('#bodySizeSelector'))
return $('body').css('fontSize',$(this).val());
@@ -117,6 +117,11 @@
<li>replace ui-icon- by ui-icon-none</li>
<li>change padding values to feat like existing buttons inside other
plugins</li>
<li>replace ui-widget-content on button by ui-widget but not for
buttonset</li>
+ <li>----</li>
+ <li>add a uiButtonCommon class that all others inherits for easing
options management.</li>
+ <li>add support for auto orientation and size inside class
attribute.</li>
+ <li>now we can combine class ui-button with
ui-button-size-orientation-iconname and will work (wasn't true before)</li>
+ <li>now buttonsets are just grouping elements not visual. replaced
ui-state-highlight with ui-state-active for down state of toggle
buttons</li>
</ul>
@@ -172,6 +177,7 @@
</div>
<h3>Using A element</h3>
+ <a href="javascript:" class="ui-button">standard button starting with no
icon</a>
<a href="javascript:" class="ui-button-info">standard button</a>
<a href="javascript:" class="ui-button-info toggle">toggle button</a>
<h3>Using SPAN element</h3>
Modified: branches/labs/button/previousAttempts/malko/jquery-ui-button.css
==============================================================================
--- branches/labs/button/previousAttempts/malko/jquery-ui-button.css
(original)
+++ branches/labs/button/previousAttempts/malko/jquery-ui-button.css Wed
Jun 10 17:41:55 2009
@@ -1,7 +1,6 @@
.ui-buttonset{
- padding:0.2em;
display:inline-block;
- margin:0 0.1em;
+ margin:0 1em;
vertical-align:bottom;
white-space:nowrap;
}
@@ -24,6 +23,9 @@
outline:none;
font-size:1em;
}
+/*button.ui-button{
+ padding:0.1525em 0.6em; /* this look offer pretty good consistency for
firefox but will broke opera and perhaps midori/chrome/safari ie still a
problem * /
+}*/
button.ui-button-inlineBlockFix{
display:inline !important;
width:1;
Modified: branches/labs/button/previousAttempts/malko/jquery-ui-button.js
==============================================================================
--- branches/labs/button/previousAttempts/malko/jquery-ui-button.js
(original)
+++ branches/labs/button/previousAttempts/malko/jquery-ui-button.js Wed Jun
10 17:41:55 2009
@@ -8,7 +8,83 @@
* ui.core.js
*/
(function($){
- $.widget("ui.button",{
+
+ // handle some common methods for all derivative plugins
+ var uiButtonCommon = {
+ /*
+ * read extra options settings in widget.element's class attribute and
return them as object
+ * baseClass is the extended class (ui-button),
+ * optionsList an associtive list of optionNames with their possible
values separated by a pipe '|'
+ * if an empty value is set at first position it'll be considered
optional.
+ */
+ _readClassNameOpts: function(baseClass,optionsList,elmt){
+ elmt=(!elmt)?this.element:$(elmt);
+ //prepare expression
+ var exp = '(?:^|\\s)'+baseClass+'(?=-)';
+ var opts={}, optName;
+ var classAttr = elmt.attr('class');
+ if(null===classAttr || classAttr.length <1)
+ return opts;
+ for(optName in optionsList ){
+ exp += ( optionsList[optName].substr(0,1)=='|'
)?'(?:-('+optionsList[optName].substr(1)+'))?':'-('+optionsList[optName]+')';
+ }
+ exp = new RegExp(exp+'(?:$|\\s)');
+ var matches = classAttr.match(exp);
+ if( null==matches)
+ return opts;
+ //prepare options objects from matches
+ var id=1;
+ for(optName in optionsList){
+ if(undefined!==matches[id]){
+ opts[optName] = matches[id];
+ }
+ id++;
+ }
+ return opts;
+ },
+ // add options settings only if current option setting is different from
default option value else just ignore it.
+ _mergeOpts: function(opts){
+ var defaults = $[this.namespace][this.widgetName].defaults;
+ for( var optName in opts){
+ if( defaults[optName] === this.options[optName] ){
+ this.options[optName] = opts[optName];
+ }
+ }
+ return this;
+ },
+ // effectively apply settings by calling _setData on given options names.
+ // additional parameter ifNotDefault will only apply settings if
different from default.
+ _applyOpts: function(names,ifNotDefault){
+ if(! ifNotDefault){
+ for(var i=0;i<names.length;i++){
+ this._setData(names[i],this.options[names[i]]);
+ }
+ return this;
+ }
+ var defaults = $[this.namespace][this.widgetName].defaults;
+ for(var i=0;i<names.length;i++){
+ if( defaults[names[i]] !== this.options[names[i]] ){
+ this._setData(names[i],this.options[names[i]]);
+ }
+ }
+ return this;
+ },
+ /**
+ * remove matching class names from element and eventually add new class
on given element (default to widget.element)
+ */
+ _rmExpClass:function(exp,add,elmt){
+ elmt=(!elmt)?this.element:$(elmt);
+ eval('exp = /(?:^|\\s)'+exp.replace(/\*/g,'[a-zA-Z_0-9-]*')+'(?=$|
\\s)/g;');
+ elmt.attr('class',elmt.attr('class').replace(exp,''));
+ if( undefined!==add ){
+ elmt.addClass(add);
+ }
+ return this;
+ }
+ }
+
+ // base ui-button plugin
+ $.widget("ui.button",$.extend({},uiButtonCommon,{
elmt_icon:null,
elmt_iconContainer:null,
@@ -22,22 +98,14 @@
_sizeValue:'',
_init:function(){
var self = this;
+ //-- should think about aborting or not init when ui-button-none,
ui-buttonset are used.
+ if( this.element.attr('class').match(/(?:^|\s+)ui-button(set|-none(\s|
$))/) ){
+ return $.widget.prototype.destroy.apply(this, arguments);
+ }
// read inline options from class attribute (that can't be null!!!)
- var inlineOptions = self.element.attr('class');
- if( undefined === inlineOptions || null === inlineOptions ){
- inlineOptions = ['ui-button','','',''];
- }else{
- _inlineOptions = inlineOptions.match(/(?:^|\s+)ui-button(?:-(tiny|
normal|small|big|huge))?(?:-([itlbr](?=$|\s|-)))?(?:-([\w0-9_-]+))?(?:$|
\s+)/);
- if( null !== _inlineOptions){
- inlineOptions = _inlineOptions;
- }else{
- if( this.element.attr('class').match(/(?:^|\s+)ui-buttonset/) )
- return null;
- else
- inlineOptions = ['ui-button','','',''];
- }
- }
+ var inlineOptions=self._readClassNameOpts('ui-button',{size:'|auto|tiny|
small|normal|big|huge',orientation:'|auto|[trbli]',icon:'|[a-zA-Z0-9_-]+'})
+ self._mergeOpts(inlineOptions);
self.element.addClass('ui-button ui-widget ui-state-default')
.hover(self._hover,self._blur);
@@ -46,37 +114,17 @@
self._wrapLabel();
self._wrapIcon();
- if( 'auto' == self.options.size && inlineOptions[1] &&
inlineOptions[1].length){
- self.options.size = inlineOptions[1];
- }
- if( 'auto' == self.options.orientation && inlineOptions[2] &&
inlineOptions[2].length){
- self.options.orientation = inlineOptions[2];
- }
-
- if( '' == self.options.icon ){
- self.options.icon = (inlineOptions[3] &&
inlineOptions[3].length)?inlineOptions[3]:'';
- }
-
+ // detect some toggle markup options
if( self.element.hasClass('toggle') ){
self.options.isToggle = true;
}
- if( self.element.hasClass('active')){
+ if( self.element.hasClass('active') ||
self.element.hasClass('ui-state-active')){
self.options.active = true;
}
- self._setData('size',self.options.size);
- self._setData('orientation',self.options.orientation);
- self._setData('icon',self.options.icon);
- self._setData('corners',self._getData('corners'));
- if( self.options.isToggle){
- self._setData('isToggle',self.options.isToggle);
- }
- if( self.options.active){
- self._setData('active',self.options.active);
- }
- if( null!==self.options.label){
- self._setData('label',self.options.label);
- }
+ // apply some settings
+ self._applyOpts(['size','orientation','icon','corners'])
+ ._applyOpts(['toggle','active','label','isToggle'],true);
if(! $.support.style){
this.element.addClass('ui-button-inlineBlockFix');
@@ -95,6 +143,7 @@
}
}
}
+ return this;
},
_hover: function(){
$(this).addClass('ui-state-hover');
@@ -102,7 +151,6 @@
_blur: function(){
$(this).removeClass('ui-state-hover');
},
-
_setIcon:function(){
var ico = this._getData('icon');
this.iconIsImage =( ico.match(/\.(jpe?g|png|gif|ico)$/i) )?true:false;
@@ -157,7 +205,6 @@
}
return this;
},
-
_setData:function(key,value){
var self = this;
switch(key){
@@ -208,7 +255,7 @@
case 'active':
if(! self._getData('isToggle'))
return false;
- self.element.toggleClass('ui-state-highlight
active',value?true:false);
+ self.element.toggleClass('ui-state-active active',value?true:false);
self._trigger('setactive',0,self);
break;
}
@@ -257,7 +304,8 @@
return this;
}
- });
+ }));
+
$.extend($.ui.button, {
version: "@VERSION",
getter:'isActive',
@@ -274,35 +322,27 @@
}
});//*/
- $.widget('ui.buttonset',{
+ $.widget('ui.buttonset',$.extend({},uiButtonCommon,{
_orientationValue:'',
_sizeValue:'',
_initiated:false,
_init:function(){
var self=this;
// read inline options
- var inlineOptions = self.element.attr('class').match(/(?:^|
\s+)ui-buttonset(?:-(tiny|normal|small|big|huge))?(?:-([itlbr](?=$|\s|
-)))?(?:$|\s+)/);
- if( null === inlineOptions){
- return;
- }
- if( 'auto' == self.options.size && inlineOptions[1] &&
inlineOptions[1].length){
- self.options.size = inlineOptions[1];
- }
- if( 'auto' == self.options.orientation && inlineOptions[2] &&
inlineOptions[2].length){
- self.options.orientation = inlineOptions[2];
- }
- self.element.addClass('ui-buttonset
ui-widget-content'+(self.element.is('[class*=ui-corner]')?'':'
ui-corner-all'));
+ var inlineOptions=self._readClassNameOpts('ui-buttonset',{size:'|auto|
tiny|small|normal|big|huge',orientation:'|auto|[trbli]'})
+ self._mergeOpts(inlineOptions);
+
+ self.element.addClass('ui-buttonset
ui-widget'+(self.element.is('[class*=ui-corner]')?'':' ui-corner-all'));
if( !$.support.style){
self.element.addClass('ui-button-inlineBlockFix');
}
- self._setData('size',self.options.size);
- self._setData('orientation',self.options.orientation);
+ self._applyOpts(['size','orientation'])
self._initiated = true;
self.propagateSettings();
},
-
+ // propagate settings to child nodes
propagateSettings:function(){
var self=this;
self.element.contents().each(function(){
@@ -312,7 +352,6 @@
$(this).button().button('importButtonSetSettings',self);
})
},
-
_setData:function(key,value){
var self = this;
switch(key){
@@ -332,7 +371,7 @@
return $.widget.prototype._setData.apply(this, arguments);
}
- });
+ }));
$.extend($.ui.buttonset,{
version: "@VERSION",
@@ -351,25 +390,20 @@
});
}*/
- $.widget("ui.selectbuttonset",{
+ $.widget("ui.selectbuttonset",$.extend({},uiButtonCommon,{
multiple:false,
buttonset:null,
_init:function(){
var self=this;
// read inline options
- var inlineOptions = self.element.attr('class').match(/(?:^|
\s+)ui-buttonset(?:-(tiny|normal|small|big|huge))?(?:-([itlbr](?=$|\s|
-)))?(?:$|\s+)/);
+ var inlineOptions=self._readClassNameOpts('ui-buttonset',{size:'|auto|
tiny|small|normal|big|huge',orientation:'|auto|[trbli]'})
+ self._mergeOpts(inlineOptions);
- if(inlineOptions && inlineOptions[1] && inlineOptions[1].length ){
- self._setData('size',inlineOptions[1]);
- }
- if(inlineOptions && inlineOptions[2] && inlineOptions[2].length){
- self._setData('orientation',inlineOptions[2]);
- }
if( self.element.attr('multiple') ){
self.multiple = true;
}
self.buttonset = $('<div class="ui-buttonset"></div>');
- self.buttonset.buttonset();
+ self.buttonset.buttonset(self.options);
self.element.hide();
self.element.after(self.buttonset);
self.refresh();
@@ -382,10 +416,10 @@
self.element.children('option').each(function(i){
var option = $(this);
var label = option.html();
- var optionIcon = option.attr('class').match(/(?:^|
\s)ui-icon-([\w0-9_-]+)(?:$|\s)/);
+ var optionIcon = option.attr('class').match(/(?:^|\s)ui-icon-(.+)(?:$|
\s)/);
if(null !== optionIcon)
optionIcon = optionIcon[1];
- $('<div
class="ui-button-'+size+('auto'===orientation?'':'-'+orientation)+(optionIcon?'-'+optionIcon:'')+'
toggle'+(option.is(':selected')?' active':'')+'">'+label+'</div>')
+ $('<button type="button"
class="ui-button-'+size+('auto'===orientation?'':'-'+orientation)+(optionIcon?'-'+optionIcon:'')+'
toggle'+(option.is(':selected')?' active':'')+'">'+label+'</button>')
.appendTo(self.buttonset)
.button({
'corners':(i==0?'left':(i+1<self.element.attr('options').length?'none':'right')),
@@ -404,7 +438,7 @@
self.element.change();
self._trigger('toggle',event,[self.element,button.element]);
}
- });
+ }));
$.extend($.ui.selectbuttonset, {
version: "@VERSION",
defaults:{