Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit abcddc9

Browse files
author
Gabriel "_|Nix|_" Schulhof
committed
Merge pull request #5241 from jquery/button-markup-corners-can-be-string
Button markup corners can be string -- Fixes #3496
2 parents 6ce1418 + 37eb988 commit abcddc9

10 files changed

+161
-99
lines changed

‎js/index.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
'widgets/forms/select.custom.js',
5151
'widgets/forms/select.js',
5252
'jquery.mobile.buttonMarkup.js',
53-
'jquery.mobile.controlGroup.js',
53+
'widgets/controlgroup.js',
5454
'jquery.mobile.links.js',
5555
'widgets/fixedToolbar.js',
5656
'widgets/popup.js',

‎js/jquery.mobile.buttonMarkup.js

+35-3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,32 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.vmouse" ], function
99
//>>excludeEnd("jqmBuildExclude");
1010
(function( $, undefined ) {
1111

12+
var cornerClasses = {
13+
"tl": " ui-btn-corner-tl",
14+
"tr": " ui-btn-corner-tr",
15+
"bl": " ui-btn-corner-bl",
16+
"br": " ui-btn-corner-br",
17+
"top": " ui-btn-corner-top",
18+
"bottom": " ui-btn-corner-bottom",
19+
"left": " ui-btn-corner-left",
20+
"right": " ui-btn-corner-right"
21+
};
22+
cornerClasses[true] = " ui-btn-corner-all";
23+
cornerClasses[false] = "";
24+
25+
var groupCornerClasses = {
26+
"tl": " ui-corner-tl",
27+
"tr": " ui-corner-tr",
28+
"bl": " ui-corner-bl",
29+
"br": " ui-corner-br",
30+
"top": " ui-corner-top",
31+
"bottom": " ui-corner-bottom",
32+
"left": " ui-corner-left",
33+
"right": " ui-corner-right"
34+
};
35+
groupCornerClasses[true] = " ui-corner-all";
36+
groupCornerClasses[false] = "";
37+
1238
$.fn.buttonMarkup = function( options ) {
1339
var $workingSet = this,
1440
mapToDataAttr = function( key, value ) {
@@ -28,14 +54,17 @@ $.fn.buttonMarkup = function( options ) {
2854
inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
2955
shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
3056
corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
57+
cornerstyle:options.cornerstyle!== undefined ? options.cornerstyle: el.jqmData( "cornerstyle" ),
3158
iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ),
3259
mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" )
3360
}, options ),
3461

62+
// Lookup table from which to grab corner classes
63+
cornerLookup,
3564
// Classes Defined
3665
innerClass = "ui-btn-inner",
3766
textClass = "ui-btn-text",
38-
buttonClass, iconClass,
67+
buttonClass, iconClass, cornerClass,
3968
hover = false,
4069
state = "up",
4170
// Button inner markup
@@ -80,11 +109,14 @@ $.fn.buttonMarkup = function( options ) {
80109
o.theme = $.mobile.getInheritedTheme( el, "c" );
81110
}
82111

112+
cornerLookup = ( o.cornerstyle === "group" ? groupCornerClasses: cornerClasses );
113+
cornerClass = ( cornerLookup[ o.corners ] ? cornerLookup[ o.corners ] : "" );
114+
83115
buttonClass = "ui-btn ";
84116
buttonClass += ( hover ? "ui-btn-hover-" + o.theme : "" );
85117
buttonClass += ( state ? " ui-btn-" + state + "-" + o.theme : "" );
86118
buttonClass += o.shadow ? " ui-shadow" : "";
87-
buttonClass += o.corners ? " ui-btn-corner-all" : "";
119+
buttonClass += cornerClass;
88120

89121
if ( o.mini !== undefined ) {
90122
// Used to control styling in headers/footers, where buttons default to `mini` style.
@@ -115,7 +147,7 @@ $.fn.buttonMarkup = function( options ) {
115147
}
116148
}
117149

118-
innerClass += o.corners ? " ui-btn-corner-all" : "";
150+
innerClass += cornerClass;
119151

120152
if ( o.iconpos && o.iconpos === "notext" && !el.attr( "title" ) ) {
121153
el.attr( "title", el.getEncodedText() );

‎js/jquery.mobile.controlGroup.js

-70
This file was deleted.

‎js/jquery.mobile.init.js

-11
Original file line numberDiff line numberDiff line change
@@ -122,17 +122,6 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
122122
// so if it's 1, use 0 from now on
123123
$.mobile.defaultHomeScroll = ( !$.support.scrollTop || $( window ).scrollTop() === 1 ) ? 0 : 1;
124124

125-
126-
// TODO: Implement a proper registration mechanism with dependency handling in order to not have exceptions like the one below
127-
//auto self-init widgets for those widgets that have a soft dependency on others
128-
if ( $.fn.controlgroup ) {
129-
$( document ).bind( "pagecreate create", function( e ) {
130-
$( ":jqmData(role='controlgroup')", e.target )
131-
.jqmEnhanceable()
132-
.controlgroup({ excludeInvisible: false });
133-
});
134-
}
135-
136125
//dom-ready inits
137126
if ( $.mobile.autoInitializePage ) {
138127
$.mobile.initializePage();

‎js/jquery.mobile.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ define([
2626
'./widgets/forms/select.custom',
2727
'./widgets/forms/select',
2828
'./jquery.mobile.buttonMarkup',
29-
'./jquery.mobile.controlGroup',
29+
'./widgets/controlgroup',
3030
'./jquery.mobile.links',
3131
'./widgets/fixedToolbar',
3232
'./widgets/popup',
@@ -35,4 +35,4 @@ define([
3535
], function( require ) {
3636
require( [ './jquery.mobile.init' ], function() {} );
3737
});
38-
//>>excludeEnd("jqmBuildExclude");
38+
//>>excludeEnd("jqmBuildExclude");

‎js/widgets/controlgroup.js

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2+
//>>description: Visually groups sets of buttons, checks, radios, etc.
3+
//>>label: Controlgroups
4+
//>>group: Forms
5+
//>>css.structure: ../../css/structure/jquery.mobile.controlgroup.css
6+
//>>css.theme: ../../css/themes/default/jquery.mobile.theme.css
7+
8+
define( [ "jquery",
9+
"../jquery.mobile.buttonMarkup",
10+
"./forms/button",
11+
"../jquery.mobile.widget" ], function( $ ) {
12+
//>>excludeEnd("jqmBuildExclude");
13+
(function( $, undefined ) {
14+
15+
$.widget( "mobile.controlgroup", $.mobile.widget, {
16+
options: {
17+
shadow: false,
18+
excludeInvisible: true,
19+
type: "vertical",
20+
mini: false,
21+
initSelector: ":jqmData(role='controlgroup')"
22+
},
23+
24+
_create: function() {
25+
var $el = this.element,
26+
ui = {
27+
inner: $( "<div class='ui-controlgroup-controls'></div>" ),
28+
legend: $( "<div role='heading' class='ui-controlgroup-label'></div>" )
29+
},
30+
grouplegend = $el.children( "legend" ),
31+
groupcontrols = $el.children( ".ui-controlgroup-controls" ),
32+
self = this;
33+
34+
// Apply the proto
35+
$el.wrapInner( ui.inner );
36+
if ( grouplegend.length ) {
37+
ui.legend.append( grouplegend ).insertBefore( $el.children( 0 ) );
38+
}
39+
$el.addClass( "ui-corner-all ui-controlgroup" );
40+
41+
$.each( this.options, function( key, value ) {
42+
// Cause initial options to be applied by their handler by temporarily setting the option to undefined
43+
// - the handler then sets it to the initial value
44+
self.options[ key ] = undefined;
45+
self._setOption( key, value, true );
46+
});
47+
48+
this._refresh( true );
49+
},
50+
51+
_flipClasses: function( els, flCorners ) {
52+
els.removeClass( "ui-controlgroup-last" )
53+
.buttonMarkup( { corners: false, shadow: false } )
54+
.eq( 0 ).buttonMarkup( { corners: flCorners[ 0 ], cornerstyle: "group" } )
55+
.end()
56+
.last().buttonMarkup( { corners: flCorners[ 1 ], cornerstyle: "group" } ).addClass( "ui-controlgroup-last" );
57+
},
58+
59+
_setOption: function( key, value ) {
60+
var setter = "_set" + key.charAt( 0 ).toUpperCase() + key.slice( 1 );
61+
62+
if ( this[ setter ] !== undefined ) {
63+
this[ setter ]( value );
64+
}
65+
66+
this._super( key, value );
67+
this.element.attr( "data-" + ( $.mobile.ns || "" ) + ( key.replace( /([A-Z])/, "-$1" ).toLowerCase() ), value );
68+
},
69+
70+
_setType: function( value ) {
71+
this.element
72+
.removeClass( "ui-controlgroup-horizontal ui-controlgroup-vertical" )
73+
.addClass( "ui-controlgroup-" + value );
74+
this.options.type = value;
75+
this.refresh();
76+
},
77+
78+
_setShadow: function( value ) {
79+
this.element.toggleClass( "ui-shadow", value );
80+
},
81+
82+
_setMini: function( value ) {
83+
this.element.toggleClass( "ui-mini", value );
84+
},
85+
86+
_refresh: function( create ) {
87+
var els = this.element
88+
.find( ".ui-btn" + ( ( !create && this.options.excludeInvisible ) ? ":visible" : "" ) )
89+
.not( '.ui-slider-handle' ),
90+
corners = [ true, true ];
91+
92+
if ( els.length > 1 ) {
93+
corners = ( this.options.type === "horizontal" ? [ "left", "right" ] : [ "top", "bottom" ] );
94+
}
95+
96+
this._flipClasses( els, corners );
97+
},
98+
99+
refresh: function() {
100+
this._refresh( false );
101+
}
102+
});
103+
104+
$( document ).bind( "pagecreate create", function( e ) {
105+
$.mobile.controlgroup.prototype.enhanceWithin( e.target, true );
106+
});
107+
})(jQuery);
108+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
109+
});
110+
//>>excludeEnd("jqmBuildExclude");

‎tests/functional/button-markup.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
$("[data-setter]").each(function() {
1717
var self = $(this),
1818
val = ($(this).is("[type='checkbox']") ? $(this).is(":checked") : $(this).val()),
19-
key = $(this).parent().find("label").text(),
19+
key = $(this).parent().find("label").text().match(/(^[a-z]*)/)[1],
2020
apply = $("#button-" + key + "-apply").is(":checked");
2121

2222
if (apply) {
@@ -26,7 +26,8 @@
2626
});
2727
if (!options.empty) {
2828
delete options.empty;
29-
$("#sample-link,#sample-input-button,#sample-button").buttonMarkup(options);
29+
$("#sample-link").buttonMarkup(options);
30+
$("#sample-input-button,#sample-button" ).button( "option", options );
3031
}
3132
});
3233
});
@@ -55,7 +56,7 @@ <h1>jQuery Mobile Widget Option Tester</h1>
5556
<label for="button-icon">icon</label>
5657
<input data-setter="true" type="text" id="button-icon"></input>
5758
</div>
58-
</td><td>
59+
</td><td>
5960
<div data-role="fieldcontain">
6061
<label for="button-icon-apply">Apply</label>
6162
<input data-apply="true" type="checkbox" id="button-icon-apply"></input>
@@ -103,7 +104,7 @@ <h1>jQuery Mobile Widget Option Tester</h1>
103104
</td></tr><tr><td>
104105
<div data-role="fieldcontain">
105106
<label for="button-corners">corners</label>
106-
<input data-setter="true" type="checkbox" id="button-corners"></input>
107+
<input data-setter="true" type="text" id="button-corners"></input>
107108
</div>
108109
</td><td>
109110
<div data-role="fieldcontain">

‎tests/unit/button-markup/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
$.testHelper.asyncLoad([
1414
[
1515
"jquery.mobile.buttonMarkup",
16-
"jquery.mobile.controlGroup",
16+
"widgets/controlgroup",
1717
"widgets/fixedToolbar",
1818
"widgets/forms/button",
1919
],

0 commit comments

Comments
 (0)