Button markup corners can be string #5241

Merged
merged 14 commits into from Nov 2, 2012
Commits
+161 −99
Split
View
@@ -50,7 +50,7 @@
'widgets/forms/select.custom.js',
'widgets/forms/select.js',
'jquery.mobile.buttonMarkup.js',
- 'jquery.mobile.controlGroup.js',
+ 'widgets/controlgroup.js',
'jquery.mobile.links.js',
'widgets/fixedToolbar.js',
'widgets/popup.js',
@@ -9,6 +9,32 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.vmouse" ], function
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
+var cornerClasses = {
+ "tl": " ui-btn-corner-tl",
+ "tr": " ui-btn-corner-tr",
+ "bl": " ui-btn-corner-bl",
+ "br": " ui-btn-corner-br",
+ "top": " ui-btn-corner-top",
+ "bottom": " ui-btn-corner-bottom",
+ "left": " ui-btn-corner-left",
+ "right": " ui-btn-corner-right"
+};
+cornerClasses[true] = " ui-btn-corner-all";
+cornerClasses[false] = "";
+
+var groupCornerClasses = {
+ "tl": " ui-corner-tl",
+ "tr": " ui-corner-tr",
+ "bl": " ui-corner-bl",
+ "br": " ui-corner-br",
+ "top": " ui-corner-top",
+ "bottom": " ui-corner-bottom",
+ "left": " ui-corner-left",
+ "right": " ui-corner-right"
+};
+groupCornerClasses[true] = " ui-corner-all";
+groupCornerClasses[false] = "";
+
$.fn.buttonMarkup = function( options ) {
var $workingSet = this,
mapToDataAttr = function( key, value ) {
@@ -28,14 +54,17 @@ $.fn.buttonMarkup = function( options ) {
inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
+ cornerstyle:options.cornerstyle!== undefined ? options.cornerstyle: el.jqmData( "cornerstyle" ),
iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ),
mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" )
}, options ),
+ // Lookup table from which to grab corner classes
+ cornerLookup,
// Classes Defined
innerClass = "ui-btn-inner",
textClass = "ui-btn-text",
- buttonClass, iconClass,
+ buttonClass, iconClass, cornerClass,
hover = false,
state = "up",
// Button inner markup
@@ -80,11 +109,14 @@ $.fn.buttonMarkup = function( options ) {
o.theme = $.mobile.getInheritedTheme( el, "c" );
}
+ cornerLookup = ( o.cornerstyle === "group" ? groupCornerClasses: cornerClasses );
+ cornerClass = ( cornerLookup[ o.corners ] ? cornerLookup[ o.corners ] : "" );
+
buttonClass = "ui-btn ";
buttonClass += ( hover ? "ui-btn-hover-" + o.theme : "" );
buttonClass += ( state ? " ui-btn-" + state + "-" + o.theme : "" );
buttonClass += o.shadow ? " ui-shadow" : "";
- buttonClass += o.corners ? " ui-btn-corner-all" : "";
+ buttonClass += cornerClass;
if ( o.mini !== undefined ) {
// Used to control styling in headers/footers, where buttons default to `mini` style.
@@ -115,7 +147,7 @@ $.fn.buttonMarkup = function( options ) {
}
}
- innerClass += o.corners ? " ui-btn-corner-all" : "";
+ innerClass += cornerClass;
if ( o.iconpos && o.iconpos === "notext" && !el.attr( "title" ) ) {
el.attr( "title", el.getEncodedText() );
@@ -1,70 +0,0 @@
-//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
-//>>description: Visually groups sets of buttons, checks, radios, etc.
-//>>label: Controlgroups
-//>>group: Forms
-//>>css.structure: ../css/structure/jquery.mobile.controlgroup.css
-//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
-
-define( [ "jquery", "./jquery.mobile.buttonMarkup" ], function( $ ) {
-//>>excludeEnd("jqmBuildExclude");
-(function( $, undefined ) {
-
-$.fn.controlgroup = function( options ) {
- function flipClasses( els, flCorners ) {
- els.removeClass( "ui-btn-corner-all ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right ui-controlgroup-last ui-shadow" )
- .eq( 0 ).addClass( flCorners[ 0 ] )
- .end()
- .last().addClass( flCorners[ 1 ] ).addClass( "ui-controlgroup-last" );
- }
-
- return this.each(function() {
- var $el = $( this ),
- o = $.extend({
- direction: $el.jqmData( "type" ) || "vertical",
- shadow: false,
- excludeInvisible: true,
- mini: $el.jqmData( "mini" )
- }, options ),
- grouplegend = $el.children( "legend" ),
- groupheading = $el.children( ".ui-controlgroup-label" ),
- groupcontrols = $el.children( ".ui-controlgroup-controls" ),
- flCorners = o.direction === "horizontal" ? [ "ui-corner-left", "ui-corner-right" ] : [ "ui-corner-top", "ui-corner-bottom" ],
- type = $el.find( "input" ).first().attr( "type" );
-
- // First unwrap the controls if the controlgroup was already enhanced
- if ( groupcontrols.length ) {
- groupcontrols.contents().unwrap();
- }
- $el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );
-
- if ( grouplegend.length ) {
- // Replace legend with more stylable replacement div
- $( "<div role='heading' class='ui-controlgroup-label'>" + grouplegend.html() + "</div>" ).insertBefore( $el.children( 0 ) );
- grouplegend.remove();
- } else if ( groupheading.length ) {
- // Just move the heading if the controlgroup was already enhanced
- $el.prepend( groupheading );
- }
-
- $el.addClass( "ui-corner-all ui-controlgroup ui-controlgroup-" + o.direction );
-
- flipClasses( $el.find( ".ui-btn" + ( o.excludeInvisible ? ":visible" : "" ) ).not( '.ui-slider-handle' ), flCorners );
- flipClasses( $el.find( ".ui-btn-inner" ), flCorners );
-
- if ( o.shadow ) {
- $el.addClass( "ui-shadow" );
- }
-
- if ( o.mini ) {
- $el.addClass( "ui-mini" );
- }
-
- });
-};
-
-// The pagecreate handler for controlgroup is in jquery.mobile.init because of the soft-dependency on the wrapped widgets
-
-})(jQuery);
-//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
-});
-//>>excludeEnd("jqmBuildExclude");
View
@@ -122,17 +122,6 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
// so if it's 1, use 0 from now on
$.mobile.defaultHomeScroll = ( !$.support.scrollTop || $( window ).scrollTop() === 1 ) ? 0 : 1;
-
- // TODO: Implement a proper registration mechanism with dependency handling in order to not have exceptions like the one below
- //auto self-init widgets for those widgets that have a soft dependency on others
- if ( $.fn.controlgroup ) {
- $( document ).bind( "pagecreate create", function( e ) {
- $( ":jqmData(role='controlgroup')", e.target )
- .jqmEnhanceable()
- .controlgroup({ excludeInvisible: false });
- });
- }
-
//dom-ready inits
if ( $.mobile.autoInitializePage ) {
$.mobile.initializePage();
View
@@ -26,7 +26,7 @@ define([
'./widgets/forms/select.custom',
'./widgets/forms/select',
'./jquery.mobile.buttonMarkup',
- './jquery.mobile.controlGroup',
+ './widgets/controlgroup',
'./jquery.mobile.links',
'./widgets/fixedToolbar',
'./widgets/popup',
@@ -35,4 +35,4 @@ define([
], function( require ) {
require( [ './jquery.mobile.init' ], function() {} );
});
-//>>excludeEnd("jqmBuildExclude");
+//>>excludeEnd("jqmBuildExclude");
View
@@ -0,0 +1,110 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Visually groups sets of buttons, checks, radios, etc.
+//>>label: Controlgroups
+//>>group: Forms
+//>>css.structure: ../../css/structure/jquery.mobile.controlgroup.css
+//>>css.theme: ../../css/themes/default/jquery.mobile.theme.css
+
+define( [ "jquery",
+ "../jquery.mobile.buttonMarkup",
+ "./forms/button",
+ "../jquery.mobile.widget" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+ $.widget( "mobile.controlgroup", $.mobile.widget, {
+ options: {
+ shadow: false,
+ excludeInvisible: true,
+ type: "vertical",
+ mini: false,
+ initSelector: ":jqmData(role='controlgroup')"
+ },
+
+ _create: function() {
+ var $el = this.element,
+ ui = {
+ inner: $( "<div class='ui-controlgroup-controls'></div>" ),
+ legend: $( "<div role='heading' class='ui-controlgroup-label'></div>" )
+ },
+ grouplegend = $el.children( "legend" ),
+ groupcontrols = $el.children( ".ui-controlgroup-controls" ),
+ self = this;
+
+ // Apply the proto
+ $el.wrapInner( ui.inner );
+ if ( grouplegend.length ) {
+ ui.legend.append( grouplegend ).insertBefore( $el.children( 0 ) );
+ }
+ $el.addClass( "ui-corner-all ui-controlgroup" );
+
+ $.each( this.options, function( key, value ) {
+ // Cause initial options to be applied by their handler by temporarily setting the option to undefined
+ // - the handler then sets it to the initial value
+ self.options[ key ] = undefined;
+ self._setOption( key, value, true );
+ });
+
+ this._refresh( true );
+ },
+
+ _flipClasses: function( els, flCorners ) {
+ els.removeClass( "ui-controlgroup-last" )
+ .buttonMarkup( { corners: false, shadow: false } )
+ .eq( 0 ).buttonMarkup( { corners: flCorners[ 0 ], cornerstyle: "group" } )
+ .end()
+ .last().buttonMarkup( { corners: flCorners[ 1 ], cornerstyle: "group" } ).addClass( "ui-controlgroup-last" );
+ },
+
+ _setOption: function( key, value ) {
+ var setter = "_set" + key.charAt( 0 ).toUpperCase() + key.slice( 1 );
+
+ if ( this[ setter ] !== undefined ) {
+ this[ setter ]( value );
+ }
+
+ this._super( key, value );
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + ( key.replace( /([A-Z])/, "-$1" ).toLowerCase() ), value );
+ },
+
+ _setType: function( value ) {
+ this.element
+ .removeClass( "ui-controlgroup-horizontal ui-controlgroup-vertical" )
+ .addClass( "ui-controlgroup-" + value );
+ this.options.type = value;
+ this.refresh();
+ },
+
+ _setShadow: function( value ) {
+ this.element.toggleClass( "ui-shadow", value );
+ },
+
+ _setMini: function( value ) {
+ this.element.toggleClass( "ui-mini", value );
+ },
+
+ _refresh: function( create ) {
+ var els = this.element
+ .find( ".ui-btn" + ( ( !create && this.options.excludeInvisible ) ? ":visible" : "" ) )
+ .not( '.ui-slider-handle' ),
+ corners = [ true, true ];
+
+ if ( els.length > 1 ) {
+ corners = ( this.options.type === "horizontal" ? [ "left", "right" ] : [ "top", "bottom" ] );
+ }
+
+ this._flipClasses( els, corners );
+ },
+
+ refresh: function() {
+ this._refresh( false );
+ }
+ });
+
+ $( document ).bind( "pagecreate create", function( e ) {
+ $.mobile.controlgroup.prototype.enhanceWithin( e.target, true );
+ });
+})(jQuery);
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
@@ -16,7 +16,7 @@
$("[data-setter]").each(function() {
var self = $(this),
val = ($(this).is("[type='checkbox']") ? $(this).is(":checked") : $(this).val()),
- key = $(this).parent().find("label").text(),
+ key = $(this).parent().find("label").text().match(/(^[a-z]*)/)[1],
apply = $("#button-" + key + "-apply").is(":checked");
if (apply) {
@@ -26,7 +26,8 @@
});
if (!options.empty) {
delete options.empty;
- $("#sample-link,#sample-input-button,#sample-button").buttonMarkup(options);
+ $("#sample-link").buttonMarkup(options);
+ $("#sample-input-button,#sample-button" ).button( "option", options );
}
});
});
@@ -55,7 +56,7 @@
<label for="button-icon">icon</label>
<input data-setter="true" type="text" id="button-icon"></input>
</div>
- </td><td>
+ </td><td>
<div data-role="fieldcontain">
<label for="button-icon-apply">Apply</label>
<input data-apply="true" type="checkbox" id="button-icon-apply"></input>
@@ -103,7 +104,7 @@
</td></tr><tr><td>
<div data-role="fieldcontain">
<label for="button-corners">corners</label>
- <input data-setter="true" type="checkbox" id="button-corners"></input>
+ <input data-setter="true" type="text" id="button-corners"></input>
</div>
</td><td>
<div data-role="fieldcontain">
@@ -13,7 +13,7 @@
$.testHelper.asyncLoad([
[
"jquery.mobile.buttonMarkup",
- "jquery.mobile.controlGroup",
+ "widgets/controlgroup",
"widgets/fixedToolbar",
"widgets/forms/button",
],
Oops, something went wrong.