Skip to content

Commit 9a32fca

Browse files
arschmitzarschmitz
committed
Button: Fixup from PR Review
1 parent 9db12e9 commit 9a32fca

File tree

3 files changed

+42
-19
lines changed

3 files changed

+42
-19
lines changed

‎demos/button/default.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,10 @@
1111
<link rel="stylesheet" href="../demos.css">
1212
<script>
1313
$(function() {
14-
$( ".widget input[type=submit], .widget a, .widget button" )
15-
.button()
16-
.click(function( event ) {
17-
event.preventDefault();
18-
});
14+
$( ".widget input[type=submit], .widget a, .widget button" ).button();
15+
$( "button, input, a" ).click( function( event ) {
16+
event.preventDefault();
17+
});
1918
});
2019
</script>
2120
</head>
@@ -37,6 +36,8 @@ <h1>CSS Buttons</h1>
3736

3837
<div class="demo-description">
3938
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
39+
<p>Buttons can be styled via the button widget for by adding the classes yourself to avoid the javascript overhead if you dont need any of the methods provided by the button widget</p>p>
40+
<p>Here you can see examples of both buttons styled with css only and done using the button widget</p>
4041
</div>
4142
</body>
4243
</html>

‎demos/button/icons.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,9 @@
3030
</script>
3131
</head>
3232
<body>
33-
<div class="demo-description">
34-
<p>Some buttons with various combinations of text and icons.</p>
35-
</div>
3633
<div class="widget">
3734
<h1>Widget</h1>
38-
<a>Button with icon only</a>
35+
<a href="#">Button with icon only</a>
3936
<button>Button with icon on the left</button>
4037
<button>Button with icon on the right</button>
4138
<button>Button with icon on the bottom</button>
@@ -63,6 +60,9 @@ <h1>CSS</h1>
6360
Button with icon on top
6461
</button>
6562

63+
</div>
64+
<div class="demo-description">
65+
<p>Some buttons with various combinations of text and icons.</p>
6666
</div>
6767
</body>
6868
</html>

‎ui/button.js

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@
2929
}
3030
}(function( $ ) {
3131

32-
var baseClasses = "ui-button ui-widget ui-corner-all",
33-
typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons" +
32+
var typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons" +
3433
" ui-button-text-only ui-icon-beginning ui-icon-end ui-icon-top ui-icon-bottom",
3534
formResetHandler = function() {
3635
var form = $( this );
@@ -87,6 +86,7 @@ $.widget( "ui.button", {
8786
this.options.disabled = this.element.prop( "disabled" ) || false;
8887
}
8988

89+
this.hasTitle = this.element.attr( "title" );
9090
this._enhance();
9191

9292
if ( this.element.is( "a" ) ) {
@@ -103,7 +103,9 @@ $.widget( "ui.button", {
103103
_enhance: function() {
104104
this._setOption( "disabled", this.options.disabled );
105105

106-
this.element.addClass( baseClasses ).attr( "role", "button" );
106+
this.element
107+
.addClass( this._classes( "ui-button" ) + " ui-widget" )
108+
.attr( "role", "button" );
107109

108110
// Check to see if the label needs to be set or if its already correct
109111
if ( this.options.label && this.options.label !== this.originalLabel ) {
@@ -120,20 +122,20 @@ $.widget( "ui.button", {
120122

121123
_updateTooltip: function() {
122124
this.title = this.element.attr( "title" );
123-
this.noTitle = !this.title;
124125

125-
if ( !this.options.showLabel && !this.noTitle ){
126+
if ( !this.options.showLabel && !this.title ) {
126127
this.element.attr( "title", this.options.label );
127128
}
128129
},
129130

130131
_updateIcon: function( icon ) {
131132
if ( !this.icon ) {
132133
this.icon = $( "<span>" ).addClass( this._classes( "ui-button-icon" ) + " ui-icon" );
133-
this.element.addClass( "ui-icon-" + this.options.iconPosition );
134134

135-
if ( !this.options.showLabel ){
135+
if ( !this.options.showLabel ) {
136136
this.element.addClass( this._classes( "ui-button-icon-only" ) );
137+
} else {
138+
this.element.addClass( "ui-icon-" + this.options.iconPosition );
137139
}
138140
} else {
139141
this.icon.removeClass( this.options.icon );
@@ -145,7 +147,8 @@ $.widget( "ui.button", {
145147

146148
_destroy: function() {
147149
this.element
148-
.removeClass( this._classes( "ui-button ui-button-icon-only" ) + " " + baseClasses + " ui-state-active " + typeClasses )
150+
.removeClass( this._classes( "ui-button ui-button-icon-only" ) + " ui-widget" +
151+
" ui-state-active " + typeClasses )
149152
.removeAttr( "role" );
150153

151154
if ( this.icon ) {
@@ -156,17 +159,35 @@ $.widget( "ui.button", {
156159
}
157160
},
158161

162+
_elementsFromClassKey: function( classKey ) {
163+
switch ( classKey ) {
164+
case "ui-button-icon-only":
165+
if ( this.options.showLabel ) {
166+
return $();
167+
}
168+
break;
169+
case "ui-button-icon":
170+
if ( this.icon ) {
171+
return this.icon;
172+
}
173+
return $();
174+
default:
175+
return this._superApply( arguments );
176+
}
177+
},
178+
159179
_setOption: function( key, value ) {
160180
if ( key === "icon" ) {
161181
if ( value !== null ) {
162182
this._updateIcon( value );
163183
} else {
164184
this.icon.remove();
165-
this.element.removeClass( this._classes( "ui-button-icon" ) + " ui-icon-" + this.options.iconPosition );
185+
this.element.removeClass( this._classes( "ui-button-icon" ) + " ui-icon-" +
186+
this.options.iconPosition );
166187
}
167188
}
168189

169-
// Make sure we cant end up with a button that has no text nor icon
190+
// Make sure we can't end up with a button that has no text nor icon
170191
if ( key === "showLabel" ) {
171192
if ( ( !value && !this.options.icon ) || value ) {
172193
this.element.toggleClass( this._classes( "ui-button-icon-only" ), !value )
@@ -183,6 +204,7 @@ $.widget( "ui.button", {
183204
if ( this.isInput ) {
184205
this.element.val( value );
185206
} else {
207+
186208
// If there us an icon append it else nothing then append the value
187209
// this avoids removal of the icon when setting label text
188210
this.element.html( !!this.icon ? "" : this.icon ).append( value );

0 commit comments

Comments
 (0)