Permalink
Browse files

Button: First pass on buttons without calls to buttonMarkup().

  • Loading branch information...
jaspermdegroot committed Apr 22, 2013
1 parent 5cc953f commit c7470167dbdd5577bb1487b77fdb30166bcfdd55
@@ -7,7 +7,9 @@
.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; vertical-align: middle; }
.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 */
.ui-btn-block { display: block; }
-
+.ui-btn.ui-focus {
+ z-index: 1;
+}
.ui-header > .ui-btn,
.ui-footer > .ui-btn { display: inline-block; margin: 0; }
.ui-header .ui-btn-block,
@@ -27,11 +27,9 @@ button,
/* Focus state
-----------------------------------------------------------------------------------------------------------*/
-.ui-btn:focus, .ui-link-inherit:focus {
- outline: 0;
-}
+.ui-btn:focus,
.ui-btn.ui-focus {
- z-index: 1;
+ outline: 0;
}
.ui-mobile-nosupport-boxshadow * {
-moz-box-shadow: none !important;
@@ -174,7 +172,8 @@ button,
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
}
-.ui-btn-a:focus {
+.ui-btn-a:focus,
+.ui-btn-a.ui-focus {
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
@@ -282,7 +281,8 @@ button,
text-shadow: 0 /*{b-bactive-shadow-x}*/ 1px /*{b-bactive-shadow-y}*/ 0 /*{b-bactive-shadow-radius}*/ #3373a5 /*{b-bactive-shadow-color}*/;
}
-.ui-btn-b:focus {
+.ui-btn-b:focus,
+.ui-btn-b.ui-focus {
-moz-box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
@@ -391,7 +391,8 @@ button,
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
}
-.ui-btn-c:focus {
+.ui-btn-c:focus,
+.ui-btn-c.ui-focus {
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
@@ -500,7 +501,8 @@ button,
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
}
-.ui-btn-d:focus {
+.ui-btn-d:focus,
+.ui-btn-d.ui-focus {
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
@@ -609,7 +611,8 @@ button,
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
}
-.ui-btn-e:focus {
+.ui-btn-e:focus,
+.ui-btn-e.ui-focus {
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
@@ -273,7 +273,7 @@ function closestEnabledButton( element ) {
//auto self-init widgets
$.mobile._enhancer.add( "mobile.buttonmarkup", undefined, function( target ) {
- $( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", target )
+ $( ".ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", target )
.jqmEnhanceable()
.not( "button, input, .ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
.buttonMarkup();
@@ -32,7 +32,7 @@ $.mobile._enhancer.add( "mobile.links", undefined, function( target ) {
});
})
.end()
- .not( ".ui-btn, .ui-link-inherit, :jqmData(role='none'), :jqmData(role='nojs')" )
+ .not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
.addClass( "ui-link" );
});
View
@@ -32,9 +32,9 @@ $.widget( "mobile.button", $.mobile.widget, {
theme: null,
icon: null,
iconpos: null,
+ iconshadow: true,
corners: true,
shadow: true,
- iconshadow: true,
inline: null,
mini: null
},
@@ -43,65 +43,84 @@ $.widget( "mobile.button", $.mobile.widget, {
var $button,
o = this.options,
$el = this.element,
- classes = "";
-
- // if this is a link, check if it's been enhanced and, if not, use the right function
- if ( $el[ 0 ].tagName === "A" ) {
- if ( !$el.hasClass( "ui-btn" ) ) {
- $el.buttonMarkup();
- }
- return;
- }
+ classes = "ui-btn";
- // get the inherited theme
- // TODO centralize for all widgets
- if ( !o.theme ) {
- o.theme = $.mobile.getInheritedTheme( $el, "a" );
- }
o.disabled = $el.prop( "disabled" );
o = splitOptions( o );
-
- // 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
- /* if ( $el[0].className.length ) {
- classes = $el[0].className;
- } */
- if ( !!~$el[ 0 ].className.indexOf( "ui-btn-left" ) ) {
- classes = "ui-btn-left";
+
+ if ( !o.theme ) {
+ o.theme = "a";
}
-
- if ( !!~$el[ 0 ].className.indexOf( "ui-btn-right" ) ) {
- classes = "ui-btn-right";
+
+ classes += " ui-btn-" + o.theme;
+ if ( o.corners ) {
+ classes += " ui-btn-corner-all";
}
-
- if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
- if ( classes ) {
+ if ( o.shadow ) {
+ classes += " ui-shadow";
+ }
+ if ( o.inline ) {
+ classes += " ui-btn-inline";
+ }
+ if ( o.mini ) {
+ classes += " ui-mini";
+ }
+
+ if ( o.icon ) {
+ if ( !o.iconpos ) {
+ o.iconpos = "left";
+ }
+ classes += " ui-icon-" + o.icon + " ui-btn-icon-" + o.iconpos;
+ if ( o.iconshadow ) {
+ classes += " ui-shadow-icon";
+ }
+ }
+
+ if ( $el[ 0 ].tagName.toLowerCase() === "input" ) {
+ var input = true;
+ }
+
+ if ( input ) {
+ // 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
+ /* if ( $el[0].className.length ) {
+ classes = $el[0].className;
+ } */
+ if ( !!~$el[ 0 ].className.indexOf( "ui-btn-left" ) ) {
+ classes += " ui-btn-left";
+ }
+
+ if ( !!~$el[ 0 ].className.indexOf( "ui-btn-right" ) ) {
+ classes += " ui-btn-right";
+ }
+
+ if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
classes += " ui-submit";
- } else {
- classes = "ui-submit";
}
+ $( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
+
+ this.button = $( "<div></div>" )
+ [ "text" ]( $el.val() )
+ .insertBefore( $el )
+ .addClass( classes )
+ .append( $el.addClass( "ui-btn-hidden" ) );
+
+ $button = this.button;
+
+ this._on( $el, {
+ focus: function() {
+ $button.addClass( $.mobile.focusClass );
+ },
+
+ blur: function() {
+ $button.removeClass( $.mobile.focusClass );
+ }
+ });
+ } else {
+ this.button = $el.addClass( classes );
}
- $( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
-
- // Add ARIA role
- this.button = $( "<div></div>" )
- [ $el.html() ? "html" : "text" ]( $el.html() || $el.val() )
- .insertBefore( $el )
- .buttonMarkup( o.btn )
- .addClass( classes )
- .append( $el.addClass( "ui-btn-hidden" ) );
+
this._setOption( "disabled", o.widget.disabled );
- $button = this.button;
-
- this._on( $el, {
- focus: function() {
- $button.addClass( $.mobile.focusClass );
- },
-
- blur: function() {
- $button.removeClass( $.mobile.focusClass );
- }
- });
},
widget: function() {
@@ -155,7 +174,7 @@ $.widget( "mobile.button", $.mobile.widget, {
}
});
-$.mobile.button.initSelector = "button, [type='button'], [type='submit'], [type='reset']";
+$.mobile.button.initSelector = "a:jqmData(role='button'), button, [type='button'], [type='submit'], [type='reset']";
//auto self-init widgets
$.mobile._enhancer.add( "mobile.button" );

0 comments on commit c747016

Please sign in to comment.