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

Commit c747016

Browse files
jaspermdegrootjaspermdegroot
committed
Button: First pass on buttons without calls to buttonMarkup().
1 parent 5cc953f commit c747016

File tree

5 files changed

+87
-63
lines changed

5 files changed

+87
-63
lines changed

‎css/structure/jquery.mobile.button.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; vertical-align: middle; }
88
.ui-mobile .ui-btn-left, .ui-mobile .ui-btn-right, .ui-btn-left > .ui-btn, .ui-btn-right > .ui-btn { margin: 0; } /* .ui-mobile to increase specificity level */
99
.ui-btn-block { display: block; }
10-
10+
.ui-btn.ui-focus {
11+
z-index: 1;
12+
}
1113
.ui-header > .ui-btn,
1214
.ui-footer > .ui-btn { display: inline-block; margin: 0; }
1315
.ui-header .ui-btn-block,

‎css/themes/default/jquery.mobile.theme.css‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,9 @@ button,
2727
/* Focus state
2828
-----------------------------------------------------------------------------------------------------------*/
2929

30-
.ui-btn:focus, .ui-link-inherit:focus {
31-
outline: 0;
32-
}
30+
.ui-btn:focus,
3331
.ui-btn.ui-focus {
34-
z-index: 1;
32+
outline: 0;
3533
}
3634
.ui-mobile-nosupport-boxshadow * {
3735
-moz-box-shadow: none !important;
@@ -174,7 +172,8 @@ button,
174172
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
175173
}
176174

177-
.ui-btn-a:focus {
175+
.ui-btn-a:focus,
176+
.ui-btn-a.ui-focus {
178177
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
179178
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
180179
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
@@ -282,7 +281,8 @@ button,
282281
text-shadow: 0 /*{b-bactive-shadow-x}*/ 1px /*{b-bactive-shadow-y}*/ 0 /*{b-bactive-shadow-radius}*/ #3373a5 /*{b-bactive-shadow-color}*/;
283282
}
284283

285-
.ui-btn-b:focus {
284+
.ui-btn-b:focus,
285+
.ui-btn-b.ui-focus {
286286
-moz-box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
287287
-webkit-box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
288288
box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
@@ -391,7 +391,8 @@ button,
391391
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
392392
}
393393

394-
.ui-btn-c:focus {
394+
.ui-btn-c:focus,
395+
.ui-btn-c.ui-focus {
395396
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
396397
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
397398
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
@@ -500,7 +501,8 @@ button,
500501
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
501502
}
502503

503-
.ui-btn-d:focus {
504+
.ui-btn-d:focus,
505+
.ui-btn-d.ui-focus {
504506
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
505507
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
506508
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
@@ -609,7 +611,8 @@ button,
609611
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
610612
}
611613

612-
.ui-btn-e:focus {
614+
.ui-btn-e:focus,
615+
.ui-btn-e.ui-focus {
613616
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
614617
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
615618
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;

‎js/jquery.mobile.buttonMarkup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ function closestEnabledButton( element ) {
273273
//auto self-init widgets
274274
$.mobile._enhancer.add( "mobile.buttonmarkup", undefined, function( target ) {
275275

276-
$( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", target )
276+
$( ".ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", target )
277277
.jqmEnhanceable()
278278
.not( "button, input, .ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
279279
.buttonMarkup();

‎js/jquery.mobile.links.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ $.mobile._enhancer.add( "mobile.links", undefined, function( target ) {
3232
});
3333
})
3434
.end()
35-
.not( ".ui-btn, .ui-link-inherit, :jqmData(role='none'), :jqmData(role='nojs')" )
35+
.not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
3636
.addClass( "ui-link" );
3737

3838
});

‎js/widgets/forms/button.js‎

Lines changed: 70 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ $.widget( "mobile.button", $.mobile.widget, {
3232
theme: null,
3333
icon: null,
3434
iconpos: null,
35+
iconshadow: true,
3536
corners: true,
3637
shadow: true,
37-
iconshadow: true,
3838
inline: null,
3939
mini: null
4040
},
@@ -43,65 +43,84 @@ $.widget( "mobile.button", $.mobile.widget, {
4343
var $button,
4444
o = this.options,
4545
$el = this.element,
46-
classes = "";
47-
48-
// if this is a link, check if it's been enhanced and, if not, use the right function
49-
if ( $el[ 0 ].tagName === "A" ) {
50-
if ( !$el.hasClass( "ui-btn" ) ) {
51-
$el.buttonMarkup();
52-
}
53-
return;
54-
}
46+
classes = "ui-btn";
5547

56-
// get the inherited theme
57-
// TODO centralize for all widgets
58-
if ( !o.theme ) {
59-
o.theme = $.mobile.getInheritedTheme( $el, "a" );
60-
}
6148
o.disabled = $el.prop( "disabled" );
6249
o = splitOptions( o );
63-
64-
// TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
65-
/* if ( $el[0].className.length ) {
66-
classes = $el[0].className;
67-
} */
68-
if ( !!~$el[ 0 ].className.indexOf( "ui-btn-left" ) ) {
69-
classes = "ui-btn-left";
50+
51+
if ( !o.theme ) {
52+
o.theme = "a";
7053
}
71-
72-
if ( !!~$el[ 0 ].className.indexOf( "ui-btn-right" ) ) {
73-
classes = "ui-btn-right";
54+
55+
classes += " ui-btn-" + o.theme;
56+
if ( o.corners ) {
57+
classes += " ui-btn-corner-all";
7458
}
75-
76-
if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
77-
if ( classes ) {
59+
if ( o.shadow ) {
60+
classes += " ui-shadow";
61+
}
62+
if ( o.inline ) {
63+
classes += " ui-btn-inline";
64+
}
65+
if ( o.mini ) {
66+
classes += " ui-mini";
67+
}
68+
69+
if ( o.icon ) {
70+
if ( !o.iconpos ) {
71+
o.iconpos = "left";
72+
}
73+
classes += " ui-icon-" + o.icon + " ui-btn-icon-" + o.iconpos;
74+
if ( o.iconshadow ) {
75+
classes += " ui-shadow-icon";
76+
}
77+
}
78+
79+
if ( $el[ 0 ].tagName.toLowerCase() === "input" ) {
80+
var input = true;
81+
}
82+
83+
if ( input ) {
84+
// TODO: Wwe have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
85+
/* if ( $el[0].className.length ) {
86+
classes = $el[0].className;
87+
} */
88+
if ( !!~$el[ 0 ].className.indexOf( "ui-btn-left" ) ) {
89+
classes += " ui-btn-left";
90+
}
91+
92+
if ( !!~$el[ 0 ].className.indexOf( "ui-btn-right" ) ) {
93+
classes += " ui-btn-right";
94+
}
95+
96+
if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
7897
classes += " ui-submit";
79-
} else {
80-
classes = "ui-submit";
8198
}
99+
$( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
100+
101+
this.button = $( "<div></div>" )
102+
[ "text" ]( $el.val() )
103+
.insertBefore( $el )
104+
.addClass( classes )
105+
.append( $el.addClass( "ui-btn-hidden" ) );
106+
107+
$button = this.button;
108+
109+
this._on( $el, {
110+
focus: function() {
111+
$button.addClass( $.mobile.focusClass );
112+
},
113+
114+
blur: function() {
115+
$button.removeClass( $.mobile.focusClass );
116+
}
117+
});
118+
} else {
119+
this.button = $el.addClass( classes );
82120
}
83-
$( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
84-
85-
// Add ARIA role
86-
this.button = $( "<div></div>" )
87-
[ $el.html() ? "html" : "text" ]( $el.html() || $el.val() )
88-
.insertBefore( $el )
89-
.buttonMarkup( o.btn )
90-
.addClass( classes )
91-
.append( $el.addClass( "ui-btn-hidden" ) );
121+
92122
this._setOption( "disabled", o.widget.disabled );
93123

94-
$button = this.button;
95-
96-
this._on( $el, {
97-
focus: function() {
98-
$button.addClass( $.mobile.focusClass );
99-
},
100-
101-
blur: function() {
102-
$button.removeClass( $.mobile.focusClass );
103-
}
104-
});
105124
},
106125

107126
widget: function() {
@@ -155,7 +174,7 @@ $.widget( "mobile.button", $.mobile.widget, {
155174
}
156175
});
157176

158-
$.mobile.button.initSelector = "button, [type='button'], [type='submit'], [type='reset']";
177+
$.mobile.button.initSelector = "a:jqmData(role='button'), button, [type='button'], [type='submit'], [type='reset']";
159178

160179
//auto self-init widgets
161180
$.mobile._enhancer.add( "mobile.button" );

0 commit comments

Comments
 (0)