aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2014-01-22 12:02:32 -0500
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-07 10:57:59 -0400
commit02033262ee0fb1d9f33c361b3c2ddfa168604854 (patch)
tree645ed2427d14a598d02754b79e9eb8b889baf846
parent79d312f3f5cb5629d1bd7f9f899b41f304c388ef (diff)
downloadjquery-ui-02033262ee0fb1d9f33c361b3c2ddfa168604854.tar.gz
jquery-ui-02033262ee0fb1d9f33c361b3c2ddfa168604854.zip
Button: Initial commit of button re-factor
Move to using element stats rather then js class states remove ui-button-text spans. Removed button set
Diffstat
-rw-r--r--demos/button/checkbox.html38
-rw-r--r--demos/button/default.html28
-rw-r--r--demos/button/icons.html78
-rw-r--r--demos/button/index.html4
-rw-r--r--demos/button/radio.html33
-rw-r--r--tests/unit/button/button.html47
-rw-r--r--tests/unit/button/common-deprecated.js27
-rw-r--r--tests/unit/button/common.js12
-rw-r--r--tests/unit/button/core.js220
-rw-r--r--tests/unit/button/deprecated.html60
-rw-r--r--tests/unit/button/deprecated.js196
-rw-r--r--tests/unit/button/events.js30
-rw-r--r--tests/unit/button/methods.js51
-rw-r--r--tests/unit/button/options.js222
-rw-r--r--tests/visual/button/button.html28
-rw-r--r--themes/base/accordion.css12
-rw-r--r--themes/base/button.css89
-rw-r--r--themes/base/core.css15
-rw-r--r--themes/base/datepicker.css11
-rw-r--r--themes/base/theme.css33
-rw-r--r--ui/widgets/button.js597
21 files changed, 849 insertions, 982 deletions
diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html
deleted file mode 100644
index 87abbf90f..000000000
--- a/demos/button/checkbox.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Button - Checkboxes</title>
- <link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/core.js"></script>
- <script src="../../ui/widget.js"></script>
- <script src="../../ui/button.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <script>
- $(function() {
- $( "#check" ).button();
- $( "#format" ).buttonset();
- });
- </script>
- <style>
- #format { margin-top: 2em; }
- </style>
-</head>
-<body>
-
-<input type="checkbox" id="check" /><label for="check">Toggle</label>
-
-<div id="format">
- <input type="checkbox" id="check1" /><label for="check1">B</label>
- <input type="checkbox" id="check2" /><label for="check2">I</label>
- <input type="checkbox" id="check3" /><label for="check3">U</label>
-</div>
-
-<div class="demo-description">
-<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
-<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
-</div>
-</body>
-</html>
diff --git a/demos/button/default.html b/demos/button/default.html
index 88c666e9a..5418fd8c9 100644
--- a/demos/button/default.html
+++ b/demos/button/default.html
@@ -11,25 +11,33 @@
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
- $(function() {
- $( "input[type=submit], a, button" )
- .button()
- .on( "click", function( event ) {
- event.preventDefault();
- });
- });
+ $( function() {
+ $( ".widget input[type=submit], .widget a, .widget button" ).button();
+ $( "button, input, a" ).click( function( event ) {
+ event.preventDefault();
+ } );
+ } );
</script>
</head>
<body>
+<div class="widget">
+ <h1>Widget Buttons</h1>
+ <button>A button element</button>
-<button>A button element</button>
+ <input type="submit" value="A submit button">
-<input type="submit" value="A submit button">
+ <a href="#">An anchor</a>
+</div>
+<h1>CSS Buttons</h1>
+<button class="ui-button ui-widget ui-corner-all">A button element</button>
+
+<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
-<a href="#">An anchor</a>
+<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
<div class="demo-description">
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
+<p>Buttons can be styled via the button widget or by adding the classes yourself. This avoids the JavaScript overhead if you don't need any of the methods provided by the button widget.</p>
</div>
</body>
</html>
diff --git a/demos/button/icons.html b/demos/button/icons.html
index 0744218b2..f0b0f90fb 100644
--- a/demos/button/icons.html
+++ b/demos/button/icons.html
@@ -11,38 +11,58 @@
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
- $(function() {
- $( "button:first" ).button({
- icons: {
- primary: "ui-icon-locked"
- },
- text: false
- }).next().button({
- icons: {
- primary: "ui-icon-locked"
- }
- }).next().button({
- icons: {
- primary: "ui-icon-gear",
- secondary: "ui-icon-triangle-1-s"
- }
- }).next().button({
- icons: {
- primary: "ui-icon-gear",
- secondary: "ui-icon-triangle-1-s"
- },
- text: false
- });
- });
+ $( function() {
+ $( ".widget button" ).first()
+ .button()
+ .next().button( {
+ icon: "ui-icon-gear",
+ showLabel: false
+ } ).next().button( {
+ icon: "ui-icon-gear"
+ } ).next().button( {
+ icon: "ui-icon-gear",
+ iconPosition: "end"
+ } ).next().button( {
+ icon: "ui-icon-gear",
+ iconPosition: "top"
+ } ).next().button( {
+ icon: "ui-icon-gear",
+ iconPosition: "bottom"
+ } );
+ } );
</script>
</head>
<body>
-
-<button>Button with icon only</button>
-<button>Button with icon on the left</button>
-<button>Button with two icons</button>
-<button>Button with two icons and no text</button>
-
+<div class="widget">
+ <h1>Widget</h1>
+ <button>Button with only text</button>
+ <button>Button with icon only</button>
+ <button>Button with icon on the left</button>
+ <button>Button with icon on the right</button>
+ <button>Button with icon on the top</button>
+ <button>Button with icon on the bottom</button>
+</div>
+<div class="css">
+ <h1>CSS</h1>
+ <button class="ui-button ui-widget ui-corner-all">
+ Button with only text
+ </button>
+ <button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
+ <span class="ui-icon ui-icon-gear"></span> Button with icon only
+ </button>
+ <button class="ui-button ui-widget ui-corner-all">
+ <span class="ui-icon ui-icon-gear"></span> Button with icon on the left
+ </button>
+ <button class="ui-button ui-widget ui-corner-all">
+ Button with icon on the right <span class="ui-icon ui-icon-gear"></span>
+ </button>
+ <button class="ui-button ui-widget ui-corner-all">
+ <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> Button with icon on the top
+ </button>
+ <button class="ui-button ui-widget ui-corner-all">
+ Button with icon on the bottom <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span>
+ </button>
+</div>
<div class="demo-description">
<p>Some buttons with various combinations of text and icons.</p>
</div>
diff --git a/demos/button/index.html b/demos/button/index.html
index 5e1b8b7b3..55eacffd8 100644
--- a/demos/button/index.html
+++ b/demos/button/index.html
@@ -9,11 +9,7 @@
<ul>
<li><a href="default.html">Default functionality</a></li>
- <li><a href="radio.html">Radios</a></li>
- <li><a href="checkbox.html">Checkboxes</a></li>
<li><a href="icons.html">Icons</a></li>
- <li><a href="toolbar.html">Toolbar</a></li>
- <li><a href="splitbutton.html">Split Button</a></li>
</ul>
</body>
diff --git a/demos/button/radio.html b/demos/button/radio.html
deleted file mode 100644
index 86c55a39a..000000000
--- a/demos/button/radio.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Button - Radios</title>
- <link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/core.js"></script>
- <script src="../../ui/widget.js"></script>
- <script src="../../ui/button.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <script>
- $(function() {
- $( "#radio" ).buttonset();
- });
- </script>
-</head>
-<body>
-
-<form>
- <div id="radio">
- <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
- <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
- <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
- </div>
-</form>
-
-<div class="demo-description">
-<p>A set of three radio buttons transformed into a button set.</p>
-</div>
-</body>
-</html>
diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html
index 7ba400645..09b5a4c23 100644
--- a/tests/unit/button/button.html
+++ b/tests/unit/button/button.html
@@ -6,54 +6,23 @@
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button"></script>
- <script src="../../lib/bootstrap.js" data-widget="button"></script>
+ <script src="../../lib/bootstrap.js" data-widget="button" data-no-back-compat="true"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
+<form id="form1">
+ <div><button id="button">Label</button></div>
-<div><button id="button" class="foo">Label</button></div>
-
-<div id="radio0" style="margin-top: 2em;">
- <input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
- <input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
- <input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
-</div>
-<div id="checkbox0">
- <input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
- <input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
- <input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
-</div>
-<form>
- <div id="radio1" style="margin-top: 2em;">
- <input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
- <input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
- <input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
- </div>
-</form>
-<form>
- <div id="radio2" style="margin-top: 2em;">
- <input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
- <input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
- <input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
- </div>
+ <div><input id="submit" type="submit" value="Label"></div>
</form>
-<form>
- <div id="radio3">
- <input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
- <input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
- <input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
- </div>
-</form>
-
-<input type="checkbox" id="check"><label for="check">Toggle</label>
-<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
-<div><input id="submit" type="submit" value="Label"></div>
-
-<button id="button1">Button</button>
+<form id="form2">
+ <button id="button-disabled" disabled>Button</button>
+ <a href="#" id="anchor-button">Anchor Button</a>
+</form>
</div>
</body>
</html>
diff --git a/tests/unit/button/common-deprecated.js b/tests/unit/button/common-deprecated.js
new file mode 100644
index 000000000..1441d3a8a
--- /dev/null
+++ b/tests/unit/button/common-deprecated.js
@@ -0,0 +1,27 @@
+define( [
+ "lib/common",
+ "ui/button"
+], function( common ) {
+
+common.testWidget( "button", {
+ defaults: {
+ classes: {
+ "ui-button": "ui-corner-all"
+ },
+ disabled: null,
+ icon: null,
+ iconPosition: "beginning",
+ icons: {
+ primary: null,
+ secondary: null
+ },
+ label: null,
+ showLabel: true,
+ text: true,
+
+ // Callbacks
+ create: null
+ }
+} );
+
+} );
diff --git a/tests/unit/button/common.js b/tests/unit/button/common.js
index 4ef136fac..91ce1cff9 100644
--- a/tests/unit/button/common.js
+++ b/tests/unit/button/common.js
@@ -5,14 +5,14 @@ define( [
common.testWidget( "button", {
defaults: {
- classes: {},
- disabled: null,
- icons: {
- primary: null,
- secondary: null
+ classes: {
+ "ui-button": "ui-corner-all"
},
+ disabled: null,
+ icon: null,
+ iconPosition: "beginning",
label: null,
- text: true,
+ showLabel: true,
// Callbacks
create: null
diff --git a/tests/unit/button/core.js b/tests/unit/button/core.js
index f4e5d35a7..a7c164a33 100644
--- a/tests/unit/button/core.js
+++ b/tests/unit/button/core.js
@@ -3,227 +3,19 @@ define( [
"ui/widgets/button"
], function( $ ) {
-module( "button: core" );
+module( "Button: core" );
-test( "checkbox", function( assert ) {
- expect( 4 );
- var input = $( "#check" ),
- label = $( "label[for=check]" );
- ok( input.is( ":visible" ) );
- ok( label.is( ":not(.ui-button)" ) );
- input.button();
- assert.hasClasses( input, "ui-helper-hidden-accessible" );
- assert.hasClasses( label, "ui-button" );
-} );
-
-test( "radios", function( assert ) {
- expect( 8 );
- var inputs = $( "#radio0 input" ),
- labels = $( "#radio0 label" );
- ok( inputs.is( ":visible" ) );
- ok( labels.is( ":not(.ui-button)" ) );
- inputs.button();
- inputs.each( function() {
- assert.hasClasses( this, "ui-helper-hidden-accessible" );
- } );
- labels.each( function() {
- assert.hasClasses( this, "ui-button" );
- } );
-} );
-
-test( "radio groups", function( assert ) {
- expect( 12 );
-
- function assertClasses( noForm, form1, form2 ) {
- assert.hasClasses( $( "#radio0 .ui-button" + noForm ), "ui-state-active" );
- assert.hasClasses( $( "#radio1 .ui-button" + form1 ), "ui-state-active" );
- assert.hasClasses( $( "#radio2 .ui-button" + form2 ), "ui-state-active" );
- }
-
- $( "input[type=radio]" ).button();
- assertClasses( ":eq(0)", ":eq(1)", ":eq(2)" );
-
- // Click outside of forms
- $( "#radio0 .ui-button:eq(1)" ).trigger( "click" );
- assertClasses( ":eq(1)", ":eq(1)", ":eq(2)" );
-
- // Click in first form
- $( "#radio1 .ui-button:eq(0)" ).trigger( "click" );
- assertClasses( ":eq(1)", ":eq(0)", ":eq(2)" );
-
- // Click in second form
- $( "#radio2 .ui-button:eq(0)" ).trigger( "click" );
- assertClasses( ":eq(1)", ":eq(0)", ":eq(0)" );
-} );
-
-test( "radio groups - ignore elements with same name", function() {
- expect( 1 );
- var form = $( "form:first" ),
- radios = form.find( "[type=radio]" ).button(),
- checkbox = $( "<input>", {
- type: "checkbox",
- name: radios.attr( "name" )
- } );
-
- form.append( checkbox );
- radios.button( "refresh" );
- ok( true, "no exception from accessing button instance of checkbox" );
-} );
-
-test( "input type submit, don't create child elements", function() {
+asyncTest( "Disabled button loses focus", function() {
expect( 2 );
- var input = $( "#submit" );
- deepEqual( input.children().length, 0 );
- input.button();
- deepEqual( input.children().length, 0 );
-} );
-
-test( "buttonset", function( assert ) {
- expect( 6 );
- var set = $( "#radio1" ).buttonset();
- assert.hasClasses( set, "ui-buttonset" );
- deepEqual( set.children( ".ui-button" ).length, 3 );
- deepEqual( set.children( "input[type=radio].ui-helper-hidden-accessible" ).length, 3 );
- ok( set.children( "label:eq(0)" ).is( ".ui-button.ui-corner-left:not(.ui-corner-all)" ) );
- ok( set.children( "label:eq(1)" ).is( ".ui-button:not(.ui-corner-all)" ) );
- ok( set.children( "label:eq(2)" ).is( ".ui-button.ui-corner-right:not(.ui-corner-all)" ) );
-} );
-
-test( "buttonset (rtl)", function( assert ) {
- expect( 6 );
- var set,
- parent = $( "#radio1" ).parent();
-
- // Set to rtl
- parent.attr( "dir", "rtl" );
-
- set = $( "#radio1" ).buttonset();
- assert.hasClasses( set, "ui-buttonset" );
- deepEqual( set.children( ".ui-button" ).length, 3 );
- deepEqual( set.children( "input[type=radio].ui-helper-hidden-accessible" ).length, 3 );
- ok( set.children( "label:eq(0)" ).is( ".ui-button.ui-corner-right:not(.ui-corner-all)" ) );
- ok( set.children( "label:eq(1)" ).is( ".ui-button:not(.ui-corner-all)" ) );
- ok( set.children( "label:eq(2)" ).is( ".ui-button.ui-corner-left:not(.ui-corner-all)" ) );
-} );
-
-// TODO: simulated click events don't behave like real click events in IE
-// remove this when simulate properly simulates this
-// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
-if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
- asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function( assert ) {
- expect( 3 );
-
- $( "#check2" ).button().on( "change", function() {
- var lbl = $( this ).button( "widget" );
- ok( this.checked, "checked ok" );
- ok( lbl.attr( "aria-pressed" ) === "true", "aria ok" );
- assert.hasClasses( lbl, "ui-state-active" );
- } );
-
- // Support: Opera
- // Opera doesn't trigger a change event when this is done synchronously.
- // This seems to be a side effect of another test, but until that can be
- // tracked down, this delay will have to do.
- setTimeout( function() {
- $( "#check2" ).button( "widget" ).simulate( "click" );
- start();
- }, 1 );
- } );
-}
-
-test( "#7092 - button creation that requires a matching label does not find label in all cases", function( assert ) {
- expect( 5 );
- var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
- group.find( "input[type=checkbox]" ).button();
- assert.hasClasses( group.find( "label" ), "ui-button" );
-
- group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
- group.filter( "input[type=checkbox]" ).button();
- assert.hasClasses( group.filter( "label" ), "ui-button" );
-
- group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
- group.find( "input[type=checkbox]" ).button();
- assert.hasClasses( group.filter( "label" ), "ui-button" );
-
- group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
- group.find( "input[type=checkbox]" ).button();
- assert.hasClasses( group.find( "label" ), "ui-button" );
-
- group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
- group.filter( "input[type=checkbox]" ).button();
- assert.hasClasses( group.find( "label" ), "ui-button" );
-} );
-
-test( "#5946 - buttonset should ignore buttons that are not :visible", function( assert ) {
- expect( 2 );
- $( "#radio01" ).next().addBack().hide();
- var set = $( "#radio0" ).buttonset( { items: "input[type=radio]:visible" } );
- ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
- assert.hasClasses( set.find( "label:eq(1)" ), "ui-button ui-corner-left" );
-} );
-
-test( "#6262 - buttonset not applying ui-corner to invisible elements", function( assert ) {
- expect( 3 );
- $( "#radio0" ).hide();
- var set = $( "#radio0" ).buttonset();
- assert.hasClasses( set.find( "label:eq(0)" ), "ui-button ui-corner-left" );
- assert.hasClasses( set.find( "label:eq(1)" ), "ui-button" );
- assert.hasClasses( set.find( "label:eq(2)" ), "ui-button ui-corner-right" );
-
-} );
-
-asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function( assert ) {
- expect( 2 );
- var form = $( "<form>" +
- "<button></button>" +
- "<label for='c1'></label><input id='c1' type='checkbox' checked>" +
- "</form>" ),
- button = form.find( "button" ).button(),
- checkbox = form.find( "input[type=checkbox]" ).button();
-
- checkbox.prop( "checked", false ).button( "refresh" );
- assert.lacksClasses( checkbox.button( "widget" ), "ui-state-active" );
-
- form.get( 0 ).reset();
-
- // If a button has been removed, refresh should not be called on it when
- // its corresponding form is reset.
- button.remove();
+ var element = $( "#button" ).button();
+ element.focus();
setTimeout( function() {
- assert.hasClasses( checkbox.button( "widget" ), "ui-state-active" );
- start();
- }, 1 );
-} );
-asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function( assert ) {
- expect( 2 );
- var check = $( "#check" ).button(),
- label = $( "label[for='check']" );
- assert.lacksClasses( label, "ui-state-focus" );
- check.trigger( "focus" );
- setTimeout( function() {
- assert.hasClasses( label, "ui-state-focus" );
- start();
- } );
-} );
-
-test( "#7534 - Button label selector works for ids with \":\"", function( assert ) {
- expect( 1 );
- var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
- group.find( "input" ).button();
- assert.hasClasses( group.find( "label" ), "ui-button", "Found an id with a :" );
-} );
+ equal( element[ 0 ], $.ui.safeActiveElement( document ), "Button is focused" );
-asyncTest( "#9169 - Disabled button maintains ui-state-focus", function( assert ) {
- expect( 2 );
- var element = $( "#button1" ).button();
- element[ 0 ].focus();
- setTimeout( function() {
- assert.hasClasses( element, "ui-state-focus" );
element.button( "disable" );
- assert.lacksClasses( element, "ui-state-focus",
- "button does not have ui-state-focus when disabled" );
+ notEqual( element[ 0 ], $.ui.safeActiveElement( document ), "Button has had focus removed" );
start();
} );
} );
diff --git a/tests/unit/button/deprecated.html b/tests/unit/button/deprecated.html
new file mode 100644
index 000000000..788d2eeeb
--- /dev/null
+++ b/tests/unit/button/deprecated.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Button Deprecated Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../lib/css.js" data-modules="core button"></script>
+ <script src="../../lib/bootstrap.js" data-widget="button" data-deprecated="true"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+
+<div class="buttonset"><button id="button">Label</button><button>button 2</button></div>
+
+<div id="radio0" style="margin-top: 2em;">
+ <input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
+ <input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
+ <input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
+</div>
+<div id="checkbox0">
+ <input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
+ <input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
+ <input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
+</div>
+<form>
+ <div id="radio1" style="margin-top: 2em;">
+ <input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
+ <input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
+ <input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
+ </div>
+</form>
+<form>
+ <div id="radio2" style="margin-top: 2em;">
+ <input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
+ <input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
+ <input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
+ </div>
+</form>
+<form>
+ <div id="radio3">
+ <input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
+ <input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
+ <input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
+ </div>
+</form>
+
+<input type="checkbox" id="check"><label for="check">Toggle</label>
+<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
+
+<div><input id="submit" type="submit" value="Label"></div>
+<button id="button-disabled" disabled>Button</button>
+<button id="button1">Button</button>
+<a href="#" id="anchor-button">Anchor Button</a>
+
+</div>
+</body>
+</html>
diff --git a/tests/unit/button/deprecated.js b/tests/unit/button/deprecated.js
new file mode 100644
index 000000000..bb023ab4f
--- /dev/null
+++ b/tests/unit/button/deprecated.js
@@ -0,0 +1,196 @@
+define( [
+ "jquery",
+ "ui/button"
+], function( $ ) {
+
+module( "Button (deprecated): core" );
+
+test( "Calling button on a checkbox input calls checkboxradio widget", function() {
+ var checkbox = $( "#checkbox01" );
+
+ expect( 2 );
+ checkbox.button();
+
+ ok( !!checkbox.checkboxradio( "instance" ),
+ "Calling button on a checkbox creates checkboxradio instance" );
+ ok( !checkbox.checkboxradio( "option", "icon" ),
+ "Calling button on a checkbox sets the checkboxradio icon option to false" );
+} );
+
+test( "Calling buttonset calls controlgroup", function() {
+ var controlgroup = $( ".buttonset" );
+
+ expect( 1 );
+ controlgroup.buttonset();
+
+ ok( controlgroup.is( ":ui-controlgroup" ), "Calling buttonset creates controlgroup instance" );
+} );
+
+module( "Button (deprecated): methods" );
+
+test( "destroy", function( assert ) {
+ expect( 1 );
+ assert.domEqual( "#checkbox02", function() {
+ $( "#checkbox02" ).button().button( "destroy" );
+ } );
+} );
+
+test( "refresh: Ensure disabled state is preserved correctly.", function() {
+ expect( 5 );
+ var element = null;
+
+ element = $( "#checkbox02" );
+ element.button( { disabled: true } ).button( "refresh" );
+ ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" );
+ ok( element.prop( "disabled" ), "Input remains disabled after refresh" );
+
+ element = $( "#radio02" );
+ element.button( { disabled: true } ).button( "refresh" );
+ ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" );
+
+ element = $( "#checkbox02" );
+ element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
+ ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh." );
+
+ element = $( "#radio02" );
+ element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
+ ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh." );
+
+} );
+
+module( "button (deprecated): options" );
+
+test( "Setting items option on buttonset sets the button properties on the items option", function() {
+ expect( 2 );
+
+ var controlgroup = $( ".buttonset" );
+
+ controlgroup.buttonset( { items: "bar" } );
+ equal( controlgroup.controlgroup( "option", "items.button" ), "bar",
+ "items.button set when setting items option on init on buttonset" );
+
+ controlgroup.buttonset( "option", "items", "foo" );
+ equal( controlgroup.controlgroup( "option", "items.button" ), "foo",
+ "items.button set when setting items option on buttonset" );
+} );
+
+test( "disabled, null", function() {
+ expect( 2 );
+
+ $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } );
+ deepEqual( $( "#radio02" ).button( "option", "disabled" ), true,
+ "disabled option set to true" );
+ deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" );
+} );
+
+test( "text / showLabel options proxied", function() {
+ expect( 8 );
+ var button = $( "#button" );
+ button.button( {
+ text: false,
+ icon: "ui-icon-gear"
+ } );
+ equal( button.button( "option", "showLabel" ), false,
+ "Setting the text option to false sets the showLabel option to false on init" );
+ button.button( "option", "showLabel", true );
+ equal( button.button( "option", "text" ), true,
+ "Setting showLabel true with option method sets text option to true" );
+ button.button( "option", "text", false );
+ equal( button.button( "option", "showLabel" ), false,
+ "Setting text false with option method sets showLabel option to false" );
+ button.button( "option", "text", true );
+ equal( button.button( "option", "showLabel" ), true,
+ "Setting text true with option method sets showLabel option to true" );
+ button.button( "option", "showLabel", false );
+ equal( button.button( "option", "text" ), false,
+ "Setting showLabel false with option method sets text option to false" );
+ button.button( "destroy" );
+ button.button( {
+ text: true,
+ icon: "ui-icon-gear"
+ } );
+ equal( button.button( "option", "showLabel" ), true,
+ "Setting the text option to true sets the showLabel option to true on init" );
+ button.button( "destroy" );
+ button.button( {
+ showLabel: true,
+ icon: "ui-icon-gear"
+ } );
+ equal( button.button( "option", "text" ), true,
+ "Setting the showLabel option to true sets the text option to true on init" );
+ button.button( "destroy" );
+ button.button( {
+ showLabel: false,
+ icon: "ui-icon-gear"
+ } );
+ equal( button.button( "option", "text" ), false,
+ "Setting the showLabel option to false sets the text option to false on init" );
+} );
+
+test( "icon / icons options properly proxied", function() {
+ expect( 10 );
+
+ var button = $( "#button" );
+
+ button.button( {
+ icon: "foo"
+ } );
+
+ equal( button.button( "option", "icons.primary" ), "foo",
+ "Icon option properly proxied on init" );
+
+ button.button( {
+ icon: "bar"
+ } );
+
+ equal( button.button( "option", "icons.primary" ), "bar",
+ "Icon option properly proxied with option method" );
+
+ button.button( {
+ icons: {
+ primary: "foo"
+ }
+ } );
+
+ equal( button.button( "option", "icon" ), "foo",
+ "Icons primary option properly proxied with option method" );
+ equal( button.button( "option", "iconPosition" ), "beginning",
+ "Icons primary option sets iconPosition option to beginning" );
+
+ button.button( {
+ icons: {
+ secondary: "bar"
+ }
+ } );
+
+ equal( button.button( "option", "icon" ), "bar",
+ "Icons secondary option properly proxied with option method" );
+ equal( button.button( "option", "iconPosition" ), "end",
+ "Icons secondary option sets iconPosition option to end" );
+
+ button.button( "destroy" );
+
+ button.button( {
+ icons: {
+ primary: "foo"
+ }
+ } );
+
+ equal( button.button( "option", "icon" ), "foo",
+ "Icons primary option properly proxied on init" );
+ equal( button.button( "option", "iconPosition" ), "beginning",
+ "Icons primary option sets iconPosition option to beginning on init" );
+
+ button.button( {
+ icons: {
+ secondary: "bar"
+ }
+ } );
+
+ equal( button.button( "option", "icon" ), "bar",
+ "Icons secondary option properly proxied on init" );
+ equal( button.button( "option", "iconPosition" ), "end",
+ "Icons secondary option sets iconPosition option to end on init" );
+} );
+
+} );
diff --git a/tests/unit/button/events.js b/tests/unit/button/events.js
index 15a285046..0bec5a7d2 100644
--- a/tests/unit/button/events.js
+++ b/tests/unit/button/events.js
@@ -3,34 +3,18 @@ define( [
"ui/widgets/button"
], function( $ ) {
-module( "button: events" );
+module( "Button: events" );
-test( "buttonset works with single-quote named elements (#7505)", function() {
- expect( 1 );
- $( "#radio3" ).buttonset();
- $( "#radio33" ).on( "click", function() {
- ok( true, "button clicks work with single-quote named elements" );
- } ).trigger( "click" );
-} );
-
-asyncTest( "when button loses focus, ensure active state is removed (#8559)", function( assert ) {
+asyncTest( "Anchor recieves click event when spacebar is pressed", function() {
expect( 1 );
+ var element = $( "#anchor-button" ).button();
- var element = $( "#button" ).button();
-
- element.one( "keypress", function() {
- element.one( "blur", function() {
- assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" );
- start();
- } ).trigger( "blur" );
+ element.on( "click", function() {
+ ok( true, "click occcured as a result of spacebar" );
+ start();
} );
- element.trigger( "focus" );
- setTimeout( function() {
- element
- .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } )
- .simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } );
- } );
+ element.trigger( $.Event( "keyup", { keyCode: $.ui.keyCode.SPACE } ) );
} );
} );
diff --git a/tests/unit/button/methods.js b/tests/unit/button/methods.js
index 0bafd90f9..09a91bbc0 100644
--- a/tests/unit/button/methods.js
+++ b/tests/unit/button/methods.js
@@ -3,7 +3,7 @@ define( [
"ui/widgets/button"
], function( $ ) {
-module( "button: methods" );
+module( "Button: methods" );
test( "destroy", function( assert ) {
expect( 1 );
@@ -13,61 +13,22 @@ test( "destroy", function( assert ) {
} );
test( "refresh: Ensure disabled state is preserved correctly.", function() {
- expect( 8 );
+ expect( 3 );
var element = $( "<a href='#'></a>" );
element.button( { disabled: true } ).button( "refresh" );
- ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237
-
- element = $( "<div></div>" );
- element.button( { disabled: true } ).button( "refresh" );
- ok( element.button( "option", "disabled" ), "<div> buttons should remain disabled after refresh" );
+ ok( element.button( "option", "disabled" ),
+ "Anchor button should remain disabled after refresh" );
element = $( "<button></button>" );
element.button( { disabled: true } ).button( "refresh" );
ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh" );
- element = $( "<input type='checkbox'>" );
- element.button( { disabled: true } ).button( "refresh" );
- ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" );
-
- element = $( "<input type='radio'>" );
- element.button( { disabled: true } ).button( "refresh" );
- ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" );
-
element = $( "<button></button>" );
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
- ok( !element.button( "option", "disabled" ), "Changing a <button>'s disabled property should update the state after refresh." ); //See #8828
-
- element = $( "<input type='checkbox'>" );
- element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
- ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh." );
-
- element = $( "<input type='radio'>" );
- element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
- ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh." );
-} );
-
-// #8975
-test( "refresh: buttonset should turn added elements into button widgets", function() {
- expect( 2 );
- var radioButtonset = $( "#radio0" ).buttonset(),
- checkboxButtonset = $( "#checkbox0" ).buttonset();
-
- radioButtonset.append(
- "<input type='radio' name='radio' id='radio04'>" +
- "<label for='radio04'>Choice 4</label>"
- );
- checkboxButtonset.append(
- "<input type='checkbox' name='checkbox' id='checkbox04'>" +
- "<label for='checkbox04'>Choice 4</label>"
- );
-
- radioButtonset.buttonset( "refresh" );
- checkboxButtonset.buttonset( "refresh" );
+ ok( !element.button( "option", "disabled" ),
+ "Changing a <button>'s disabled property should update the state after refresh." );
- equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" );
- equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" );
} );
} );
diff --git a/tests/unit/button/options.js b/tests/unit/button/options.js
index 31542427c..207f7c25e 100644
--- a/tests/unit/button/options.js
+++ b/tests/unit/button/options.js
@@ -6,152 +6,170 @@ define( [
module( "button: options" );
test( "disabled, explicit value", function( assert ) {
- expect( 7 );
+ expect( 8 );
- var element = $( "#radio01" ).button( { disabled: false } );
- deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
- deepEqual( element.prop( "disabled" ), false, "element is disabled" );
+ var element = $( "#button" ).button( { disabled: false } );
+
+ strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
+ strictEqual( element.prop( "disabled" ), false, "Disabled property is false" );
assert.lacksClasses( element.button( "widget" ), "ui-state-disabled ui-button-disabled" );
- element = $( "#radio02" ).button( { disabled: true } );
+ element = $( "#button" ).button( { disabled: true } );
- ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
- assert.hasClasses( element.button( "widget" ), "ui-button-disabled ui-state-disabled" );
+ assert.hasClasses( element.button( "widget" ), "ui-state-disabled" );
+ strictEqual( element.button( "widget" ).attr( "aria-disabled" ), undefined,
+ "element does not get aria-disabled" );
+ assert.hasClasses( element.button( "widget" ), "ui-button-disabled" );
- deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
- deepEqual( element.prop( "disabled" ), true, "element is not disabled" );
+ strictEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
+ strictEqual( element.prop( "disabled" ), true, "Disabled property is set" );
} );
+// We are testing the default here because the default null is a special value which means to check
+// the DOM. We need to make sure this happens correctly. Checking the options should never return
+// null, it should always be true or false.
test( "disabled, null", function() {
expect( 4 );
- $( "#radio01" ).button( { disabled: null } );
- deepEqual( false, $( "#radio01" ).button( "option", "disabled" ),
- "disabled option set to false" );
- deepEqual( false, $( "#radio01" ).prop( "disabled" ), "element is disabled" );
+ var element = $( "#button" ),
+ elementDisabled = $( "#button-disabled" );
- $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } );
- deepEqual( true, $( "#radio02" ).button( "option", "disabled" ),
+ element.add( elementDisabled ).button( { disabled: null } );
+ strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
+ strictEqual( element.prop( "disabled" ), false, "element is disabled" );
+ strictEqual( elementDisabled.button( "option", "disabled" ), true,
"disabled option set to true" );
- deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" );
+ strictEqual( elementDisabled.prop( "disabled" ), true, "element is disabled" );
} );
-test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert ) {
- expect( 12 );
- var elements = [
- $( "<input type='button'>" ),
- $( "<button></button>" ),
- $( "<a></a>" ),
- $( "<div></div>" ),
- $( "<input type='checkbox' id='checkbox' checked><label for='checkbox'></label>" ),
- $( "<input type='radio' id='radio' checked><label for='radio'></label>" )
- ];
-
- $.each( elements, function() {
- var element = $( this ).first().button(),
- buttonElement = element.button( "widget" ),
- elementType = element.prop( "nodeName" ).toLowerCase();
-
- if ( element.is( "input" ) ) {
- elementType += ":" + element.attr( "type" );
- }
-
- element.trigger( "mousedown" );
- assert.hasClasses( buttonElement, "ui-state-active",
- "[" + elementType + "] has ui-state-active class after mousedown." );
-
- element.button( "disable" );
- if ( element.is( "[type=checkbox], [type=radio]" ) ) {
- assert.hasClasses( buttonElement, "ui-state-active",
- "Disabled [" + elementType + "] has ui-state-active class." );
- } else {
- assert.lacksClasses( buttonElement, "ui-state-active",
- "Disabled [" + elementType + "] does not have ui-state-active class." );
- }
- } );
-} );
+test( "showLabel, false, without icon", function( assert ) {
+ expect( 4 );
-test( "text false without icon", function() {
- expect( 1 );
- $( "#button" ).button( {
- text: false
+ var button = $( "#button" ).button( {
+ showLabel: false
} );
- ok( $( "#button" ).is( ".ui-button-text-only:not(.ui-button-icon-only)" ) );
- $( "#button" ).button( "destroy" );
+ assert.lacksClasses( button, "ui-button-icon-only" );
+ strictEqual( button.button( "option", "showLabel" ), true,
+ "showLabel false only allowed if icon true" );
+
+ button.button( "option", "showLabel", false );
+ assert.lacksClasses( button, "ui-button-icon-only" );
+ strictEqual( button.button( "option", "showLabel" ), true,
+ "showLabel false only allowed if icon true" );
} );
-test( "text false with icon", function() {
+test( "showLabel, false, with icon", function( assert ) {
expect( 1 );
- $( "#button" ).button( {
- text: false,
- icons: {
- primary: "iconclass"
- }
+ var button = $( "#button" ).button( {
+ showLabel: false,
+ icon: "iconclass"
} );
- ok( $( "#button" ).is( ".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)" ) );
-
- $( "#button" ).button( "destroy" );
+ assert.hasClasses( button, "ui-button ui-corner-all ui-widget ui-button-icon-only" );
} );
test( "label, default", function() {
expect( 2 );
- $( "#button" ).button();
- deepEqual( $( "#button" ).text(), "Label" );
- deepEqual( $( "#button" ).button( "option", "label" ), "Label" );
+ var button = $( "#button" ).button();
- $( "#button" ).button( "destroy" );
+ deepEqual( button.text(), "Label" );
+ deepEqual( button.button( "option", "label" ), "Label" );
} );
-test( "label", function() {
+test( "label, explicit value", function() {
expect( 2 );
- $( "#button" ).button( {
+ var button = $( "#button" ).button( {
label: "xxx"
} );
- deepEqual( $( "#button" ).text(), "xxx" );
- deepEqual( $( "#button" ).button( "option", "label" ), "xxx" );
- $( "#button" ).button( "destroy" );
+ deepEqual( button.text(), "xxx" );
+ deepEqual( button.button( "option", "label" ), "xxx" );
} );
-test( "label default with input type submit", function() {
+test( "label, default, with input type submit", function() {
expect( 2 );
- deepEqual( $( "#submit" ).button().val(), "Label" );
- deepEqual( $( "#submit" ).button( "option", "label" ), "Label" );
+ var button = $( "#submit" ).button();
+
+ deepEqual( button.val(), "Label" );
+ deepEqual( button.button( "option", "label" ), "Label" );
} );
-test( "label with input type submit", function() {
+test( "label, explicit value, with input type submit", function() {
expect( 2 );
- var label = $( "#submit" ).button( {
+ var button = $( "#submit" ).button( {
label: "xxx"
- } ).val();
- deepEqual( label, "xxx" );
- deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" );
+ } );
+
+ deepEqual( button.val(), "xxx" );
+ deepEqual( button.button( "option", "label" ), "xxx" );
} );
-test( "icons", function() {
- expect( 1 );
- $( "#button" ).button( {
- text: false,
- icons: {
- primary: "iconclass",
- secondary: "iconclass2"
- }
- } );
- ok( $( "#button" ).is( ":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)" ) );
+test( "icon", function( assert ) {
+ expect( 4 );
+ var button = $( "#button" ).button( {
+ showLabel: false,
+ icon: "iconclass"
+ } ),
+ icon = button.find( ".ui-icon" );
+
+ assert.hasClasses( icon, "iconclass" );
+ equal( icon.length, 1, "button with icon option set has icon" );
+
+ button.button( "option", "icon", false );
+ equal( button.find( ".ui-icon" ).length, 0, "setting icon to false removes the icon" );
+
+ button.button( "option", "icon", "iconclass" );
+ ok( button.find( ".ui-icon" ).length, "setting icon to a value adds the icon" );
- $( "#button" ).button( "destroy" );
} );
-test( "#5295 - button does not remove hoverstate if disabled", function( assert ) {
- expect( 1 );
- var btn = $( "#button" ).button();
- btn.on( "hover", function() {
- btn.button( "disable" );
- } );
- btn.trigger( "mouseenter" );
- btn.trigger( "mouseleave" );
- assert.lacksClasses( btn, "ui-state-hover" );
+test( "icon position", function( assert ) {
+ expect( 22 );
+
+ var button = $( "#button" ).button( {
+ icon: "ui-icon-gear"
+ } ),
+ icon = button.find( ".ui-icon" ),
+ space = button.find( ".ui-button-icon-space" );
+
+ equal( icon.length, 1, "button with icon option set has icon" );
+ equal( button.button( "option", "iconPosition" ), "beginning",
+ "Button has iconPosition beginning by default" );
+ equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is begining" );
+ equal( icon.next()[ 0 ], space[ 0 ], "icon is followed by a space when position is begining" );
+ equal( space.text(), " ",
+ "ui-button-icon-space contains a breaking space iconPosition:beginning" );
+ assert.lacksClasses( icon, "ui-widget-icon-block" );
+
+ button.button( "option", "iconPosition", "end" );
+ icon = button.find( ".ui-icon" );
+ space = button.find( ".ui-button-icon-space" );
+ equal( icon.length, 1, "Changing position to end does not re-create or duplicate icon" );
+ equal( button.button( "option", "iconPosition" ), "end", "Button has iconPosition end" );
+ equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is appended when position is end" );
+ equal( icon.prev()[ 0 ], space[ 0 ], "icon is preceeded by a space when position is end" );
+ equal( space.text(), " ",
+ "ui-button-icon-space contains a breaking space iconPosition:beginning" );
+ assert.lacksClasses( icon, "ui-widget-icon-block" );
+
+ button.button( "option", "iconPosition", "top" );
+ icon = button.find( ".ui-icon" );
+ equal( icon.length, 1, "Changing position to top does not re-create or duplicate icon" );
+ equal( button.button( "option", "iconPosition" ), "top", "Button has iconPosition top" );
+ equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is top" );
+ ok( !button.find( "ui-button-icon-space" ).length,
+ "Button should not have an iconSpace with position: top" );
+ assert.hasClasses( icon, "ui-widget-icon-block" );
+
+ button.button( "option", "iconPosition", "bottom" );
+ icon = button.find( ".ui-icon" );
+ equal( icon.length, 1, "Changing position to bottom does not re-create or duplicate icon" );
+ equal( button.button( "option", "iconPosition" ), "bottom", "Button has iconPosition top" );
+ equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is prepended when position is bottom" );
+ ok( !button.find( "ui-button-icon-space" ).length,
+ "Button should not have an iconSpace with position: bottom" );
+ assert.hasClasses( icon, "ui-widget-icon-block" );
+
} );
} );
diff --git a/tests/visual/button/button.html b/tests/visual/button/button.html
index 1d82cf665..bb80d8a85 100644
--- a/tests/visual/button/button.html
+++ b/tests/visual/button/button.html
@@ -10,17 +10,13 @@
$( this ).children()
.eq( 0 )
.button({
- text: false,
- icons: {
- primary: "ui-icon-help"
- }
+ showLabel: false,
+ icon: "ui-icon-help"
})
.end()
.eq( 1 )
.button({
- icons: {
- primary: "ui-icon-help"
- },
+ icon: "ui-icon-help",
disabled: true
})
.end()
@@ -62,24 +58,6 @@
</div>
<div class="buttons">
- <input type="checkbox" id="input-checkbox0">
- <input type="checkbox" id="input-checkbox1">
- <input type="checkbox" id="input-checkbox2">
- <label for="input-checkbox0">input checkbox</label>
- <label for="input-checkbox1">input checkbox</label>
- <label for="input-checkbox2">input checkbox</label>
-</div>
-
-<div class="buttons">
- <input type="radio" id="input-radio0" name="radio">
- <input type="radio" id="input-radio1" name="radio">
- <input type="radio" id="input-radio2" name="radio">
- <label for="input-radio0">input radio</label>
- <label for="input-radio1">input radio</label>
- <label for="input-radio2">input radio</label>
-</div>
-
-<div class="buttons">
<a href="#">anchor</a>
<a href="#">anchor</a>
<a href="#">anchor</a>
diff --git a/themes/base/accordion.css b/themes/base/accordion.css
index edf368eca..baffce488 100644
--- a/themes/base/accordion.css
+++ b/themes/base/accordion.css
@@ -16,18 +16,6 @@
padding: .5em .5em .5em .7em;
font-size: 100%;
}
-.ui-accordion .ui-accordion-icons {
- padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-icons .ui-accordion-icons {
- padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
- position: absolute;
- left: .5em;
- top: 50%;
- margin-top: -8px;
-}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
diff --git a/themes/base/button.css b/themes/base/button.css
index 17dea198f..fcbcda7bb 100644
--- a/themes/base/button.css
+++ b/themes/base/button.css
@@ -9,16 +9,23 @@
* http://api.jqueryui.com/button/#theming
*/
.ui-button {
+ padding: .4em 1em;
display: inline-block;
position: relative;
- padding: 0;
line-height: normal;
margin-right: .1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
- overflow: visible; /* removes extra width in IE */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ /* Support: IE <= 11 */
+ overflow: visible;
}
+
.ui-button,
.ui-button:link,
.ui-button:visited,
@@ -26,87 +33,31 @@
.ui-button:active {
text-decoration: none;
}
+
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
- width: 2.2em;
-}
-/* button elements seem to need a little more width */
-button.ui-button-icon-only {
- width: 2.4em;
-}
-.ui-button-icons-only {
- width: 3.4em;
-}
-button.ui-button-icons-only {
- width: 3.7em;
+ width: 2em;
+ box-sizing: border-box;
+ text-indent: -9999px;
+ white-space: nowrap;
}
-/* button text element */
-.ui-button .ui-button-text {
- display: block;
- line-height: normal;
-}
-.ui-button-text-only .ui-button-text {
- padding: .4em 1em;
-}
-.ui-button-icon-only .ui-button-text,
-.ui-button-icons-only .ui-button-text {
- padding: 0;
- text-indent: -9999999px;
-}
-.ui-button-text-icon-primary .ui-button-text,
-.ui-button-text-icons .ui-button-text {
- padding: .4em 1em .4em 2.1em;
-}
-.ui-button-text-icon-secondary .ui-button-text,
-.ui-button-text-icons .ui-button-text {
- padding: .4em 2.1em .4em 1em;
-}
-.ui-button-text-icons .ui-button-text {
- padding-left: 2.1em;
- padding-right: 2.1em;
-}
-/* no icon support for input elements, provide padding by default */
-input.ui-button {
- padding: .4em 1em;
+/* no icon support for input elements */
+input.ui-button.ui-button-icon-only {
+ text-indent: 0;
}
/* button icon element(s) */
-.ui-button-icon-only .ui-icon,
-.ui-button-text-icon-primary .ui-icon,
-.ui-button-text-icon-secondary .ui-icon,
-.ui-button-text-icons .ui-icon,
-.ui-button-icons-only .ui-icon {
+.ui-button-icon-only .ui-icon {
position: absolute;
top: 50%;
- margin-top: -8px;
-}
-.ui-button-icon-only .ui-icon {
left: 50%;
+ margin-top: -8px;
margin-left: -8px;
}
-.ui-button-text-icon-primary .ui-button-icon-primary,
-.ui-button-text-icons .ui-button-icon-primary,
-.ui-button-icons-only .ui-button-icon-primary {
- left: .5em;
-}
-.ui-button-text-icon-secondary .ui-button-icon-secondary,
-.ui-button-text-icons .ui-button-icon-secondary,
-.ui-button-icons-only .ui-button-icon-secondary {
- right: .5em;
-}
-
-/* button sets */
-.ui-buttonset {
- margin-right: 7px;
-}
-.ui-buttonset .ui-button {
- margin-left: 0;
- margin-right: -.3em;
-}
/* workarounds */
-/* reset extra padding in Firefox, see h5bp.com/l */
+/* Support: FireFox >= 4 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
border: 0;
diff --git a/themes/base/core.css b/themes/base/core.css
index 4a39cd395..2f7521282 100644
--- a/themes/base/core.css
+++ b/themes/base/core.css
@@ -68,15 +68,18 @@
/* Icons
----------------------------------*/
-
-/* states and images */
.ui-icon {
- display: block;
- text-indent: -99999px;
- overflow: hidden;
- background-repeat: no-repeat;
+ display: inline-block;
+ vertical-align: middle;
+ margin-top: -.25em;
+ position: relative;
}
+.ui-widget-icon-block {
+ left: 50%;
+ margin-left: -8px;
+ display: block;
+}
/* Misc visuals
----------------------------------*/
diff --git a/themes/base/datepicker.css b/themes/base/datepicker.css
index a77eab7b2..ddb8c17dd 100644
--- a/themes/base/datepicker.css
+++ b/themes/base/datepicker.css
@@ -173,3 +173,14 @@
border-right-width: 0;
border-left-width: 1px;
}
+
+/* Icons */
+.ui-datepicker .ui-icon {
+ display: block;
+ text-indent: -99999px;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ left: .5em;
+ top: .3em;
+}
+
diff --git a/themes/base/theme.css b/themes/base/theme.css
index 0e0561dc1..eddbc8a0b 100644
--- a/themes/base/theme.css
+++ b/themes/base/theme.css
@@ -53,7 +53,10 @@
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
+.ui-widget-header .ui-state-default,
+.ui-button,
+html .ui-button.ui-state-disabled:hover,
+html .ui-button.ui-state-disabled:active {
border: 1px solid #c5c5c5/*{borderColorDefault}*/;
background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/;
font-weight: normal/*{fwDefault}*/;
@@ -61,7 +64,11 @@
}
.ui-state-default a,
.ui-state-default a:link,
-.ui-state-default a:visited {
+.ui-state-default a:visited,
+a.ui-button,
+a:link.ui-button,
+a:visited.ui-button,
+.ui-button {
color: #454545/*{fcDefault}*/;
text-decoration: none;
}
@@ -70,7 +77,9 @@
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
+.ui-widget-header .ui-state-focus,
+.ui-button:hover,
+.ui-button:focus {
border: 1px solid #cccccc/*{borderColorHover}*/;
background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
font-weight: normal/*{fwDefault}*/;
@@ -83,13 +92,17 @@
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
-.ui-state-focus a:visited {
+.ui-state-focus a:visited,
+a.ui-button:hover,
+a.ui-button:focus {
color: #2b2b2b/*{fcHover}*/;
text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
+.ui-widget-header .ui-state-active,
+a.ui-button:active,
+.ui-button:active {
border: 1px solid #003eff/*{borderColorActive}*/;
background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
font-weight: normal/*{fwDefault}*/;
@@ -171,14 +184,18 @@
.ui-widget-header .ui-icon {
background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
}
-.ui-state-default .ui-icon {
+.ui-state-default .ui-icon,
+.ui-button .ui-icon {
background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
}
.ui-state-hover .ui-icon,
-.ui-state-focus .ui-icon {
+.ui-state-focus .ui-icon,
+.ui-button:hover .ui-icon,
+.ui-button:focus .ui-icon {
background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
}
-.ui-state-active .ui-icon {
+.ui-state-active .ui-icon,
+.ui-button:active .ui-icon {
background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
}
.ui-state-highlight .ui-icon {
diff --git a/ui/widgets/button.js b/ui/widgets/button.js
index 94fc75331..34a2afa40 100644
--- a/ui/widgets/button.js
+++ b/ui/widgets/button.js
@@ -22,10 +22,13 @@
// AMD. Register as an anonymous module.
define( [
"jquery",
- "../data",
+
+ // These are only for backcompat
+ // TODO: Remove after 1.12
+ "./controlgroup",
+ "./checkboxradio",
+
"../keycode",
- "../labels",
- "../version",
"../widget"
], factory );
} else {
@@ -35,391 +38,347 @@
}
}( function( $ ) {
-var lastActive,
- baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
- typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
- formResetHandler = function() {
- var form = $( this );
- setTimeout( function() {
- form.find( ":ui-button" ).button( "refresh" );
- }, 1 );
- },
- radioGroup = function( radio ) {
- var name = radio.name,
- form = radio.form,
- radios = $( [] );
- if ( name ) {
- name = name.replace( /'/g, "\\'" );
- if ( form ) {
- radios = $( form ).find( "[name='" + name + "'][type=radio]" );
- } else {
- radios = $( "[name='" + name + "'][type=radio]", radio.ownerDocument )
- .filter( function() {
- return !this.form;
- } );
- }
- }
- return radios;
- };
-
$.widget( "ui.button", {
version: "@VERSION",
defaultElement: "<button>",
options: {
+ classes: {
+ "ui-button": "ui-corner-all"
+ },
disabled: null,
- text: true,
+ icon: null,
+ iconPosition: "beginning",
label: null,
- icons: {
- primary: null,
- secondary: null
- }
+ showLabel: true
},
- _create: function() {
- this.element.closest( "form" )
- .off( "reset" + this.eventNamespace )
- .on( "reset" + this.eventNamespace, formResetHandler );
- if ( typeof this.options.disabled !== "boolean" ) {
- this.options.disabled = !!this.element.prop( "disabled" );
- } else {
- this.element.prop( "disabled", this.options.disabled );
- }
+ _getCreateOptions: function() {
+ var disabled,
- this._determineButtonType();
- this.hasTitle = !!this.buttonElement.attr( "title" );
+ // This is to support cases like in jQuery Mobile where the base widget does have
+ // an implementation of _getCreateOptions
+ options = this._super() || {};
- var that = this,
- options = this.options,
- toggleButton = this.type === "checkbox" || this.type === "radio",
- activeClass = !toggleButton ? "ui-state-active" : "";
+ this.isInput = this.element.is( "input" );
- if ( options.label === null ) {
- options.label = ( this.type === "input" ? this.buttonElement.val() : this.buttonElement.html() );
+ disabled = this.element[ 0 ].disabled;
+ if ( disabled != null ) {
+ options.disabled = disabled;
}
- this._hoverable( this.buttonElement );
+ this.originalLabel = this.isInput ? this.element.val() : this.element.html();
+ if ( this.originalLabel ) {
+ options.label = this.originalLabel;
+ }
- this.buttonElement
- .addClass( baseClasses )
- .attr( "role", "button" )
- .on( "mouseenter" + this.eventNamespace, function() {
- if ( options.disabled ) {
- return;
- }
- if ( this === lastActive ) {
- $( this ).addClass( "ui-state-active" );
- }
- } )
- .on( "mouseleave" + this.eventNamespace, function() {
- if ( options.disabled ) {
- return;
- }
- $( this ).removeClass( activeClass );
- } )
- .on( "click" + this.eventNamespace, function( event ) {
- if ( options.disabled ) {
- event.preventDefault();
- event.stopImmediatePropagation();
- }
- } );
+ return options;
+ },
- // Can't use _focusable() because the element that receives focus
- // and the element that gets the ui-state-focus class are different
- this._on( {
- focus: function() {
- this.buttonElement.addClass( "ui-state-focus" );
- },
- blur: function() {
- this.buttonElement.removeClass( "ui-state-focus" );
- }
- } );
+ _create: function() {
+ if ( !this.option.showLabel & !this.options.icon ) {
+ this.options.showLabel = true;
+ }
- if ( toggleButton ) {
- this.element.on( "change" + this.eventNamespace, function() {
- that.refresh();
- } );
+ // We have to check the option again here even though we did in _getCreateOptions,
+ // because null may have been passed on init which would override what was set in
+ // _getCreateOptions
+ if ( this.options.disabled == null ) {
+ this.options.disabled = this.element[ 0 ].disabled || false;
}
- if ( this.type === "checkbox" ) {
- this.buttonElement.on( "click" + this.eventNamespace, function() {
- if ( options.disabled ) {
- return false;
- }
- } );
- } else if ( this.type === "radio" ) {
- this.buttonElement.on( "click" + this.eventNamespace, function() {
- if ( options.disabled ) {
- return false;
- }
- $( this ).addClass( "ui-state-active" );
- that.buttonElement.attr( "aria-pressed", "true" );
-
- var radio = that.element[ 0 ];
- radioGroup( radio )
- .not( radio )
- .map( function() {
- return $( this ).button( "widget" )[ 0 ];
- } )
- .removeClass( "ui-state-active" )
- .attr( "aria-pressed", "false" );
- } );
- } else {
- this.buttonElement
- .on( "mousedown" + this.eventNamespace, function() {
- if ( options.disabled ) {
- return false;
- }
- $( this ).addClass( "ui-state-active" );
- lastActive = this;
- that.document.one( "mouseup", function() {
- lastActive = null;
- } );
- } )
- .on( "mouseup" + this.eventNamespace, function() {
- if ( options.disabled ) {
- return false;
- }
- $( this ).removeClass( "ui-state-active" );
- } )
- .on( "keydown" + this.eventNamespace, function( event ) {
- if ( options.disabled ) {
- return false;
- }
- if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
- $( this ).addClass( "ui-state-active" );
- }
- } )
+ this.hasTitle = !!this.element.attr( "title" );
- // see #8559, we bind to blur here in case the button element loses
- // focus between keydown and keyup, it would be left in an "active" state
- .on( "keyup" + this.eventNamespace + " blur" + this.eventNamespace, function() {
- $( this ).removeClass( "ui-state-active" );
- } );
+ // Check to see if the label needs to be set or if its already correct
+ if ( this.options.label && this.options.label !== this.originalLabel ) {
+ if ( this.isInput ) {
+ this.element.val( this.options.label );
+ } else {
+ this.element.html( this.options.label );
+ }
+ }
+ this._addClass( "ui-button", "ui-widget" );
+ this._setOption( "disabled", this.options.disabled );
+ this._enhance();
- if ( this.buttonElement.is( "a" ) ) {
- this.buttonElement.on( "keyup", function( event ) {
+ if ( this.element.is( "a" ) ) {
+ this._on( {
+ "keyup": function( event ) {
if ( event.keyCode === $.ui.keyCode.SPACE ) {
-
- // TODO pass through original event correctly (just as 2nd argument doesn't work)
- $( this ).trigger( "click" );
+ event.preventDefault();
+
+ // Support: PhantomJS <= 1.9, IE 8 Only
+ // If a native click is available use it so we actually cause navigation
+ // otherwise just trigger a click event
+ if ( this.element[ 0 ].click ) {
+ this.element[ 0 ].click();
+ } else {
+ this.element.trigger( "click" );
+ }
}
- } );
- }
+ }
+ } );
}
+ },
+
+ _enhance: function() {
+ this.element.attr( "role", "button" );
- this._setOption( "disabled", options.disabled );
- this._resetButton();
+ if ( this.options.icon ) {
+ this._updateIcon( "icon", this.options.icon );
+ this._updateTooltip();
+ }
},
- _determineButtonType: function() {
- var ancestor, labelSelector, checked;
+ _updateTooltip: function() {
+ this.title = this.element.attr( "title" );
- if ( this.element.is( "[type=checkbox]" ) ) {
- this.type = "checkbox";
- } else if ( this.element.is( "[type=radio]" ) ) {
- this.type = "radio";
- } else if ( this.element.is( "input" ) ) {
- this.type = "input";
- } else {
- this.type = "button";
+ if ( !this.options.showLabel && !this.title ) {
+ this.element.attr( "title", this.options.label );
}
+ },
- if ( this.type === "checkbox" || this.type === "radio" ) {
-
- // we don't search against the document in case the element
- // is disconnected from the DOM
- ancestor = this.element.parents().last();
- labelSelector = "label[for='" + this.element.attr( "id" ) + "']";
- this.buttonElement = ancestor.find( labelSelector );
- if ( !this.buttonElement.length ) {
- ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
- this.buttonElement = ancestor.filter( labelSelector );
- if ( !this.buttonElement.length ) {
- this.buttonElement = ancestor.find( labelSelector );
- }
+ _updateIcon: function( option, value ) {
+ var icon = option !== "iconPosition",
+ position = icon ? this.options.iconPosition : value,
+ displayBlock = position === "top" || position === "bottom";
+
+ // Create icon
+ if ( !this.icon ) {
+ this.icon = $( "<span>" );
+
+ this._addClass( this.icon, "ui-button-icon", "ui-icon" );
+
+ if ( !this.options.showLabel ) {
+ this._addClass( "ui-button-icon-only" );
}
- this.element.addClass( "ui-helper-hidden-accessible" );
+ } else if ( icon ) {
+
+ // If we are updating the icon remove the old icon class
+ this._removeClass( this.icon, null, this.options.icon );
+ }
+
+ // If we are updating the icon add the new icon class
+ if ( icon ) {
+ this._addClass( this.icon, null, value );
+ }
- checked = this.element.is( ":checked" );
- if ( checked ) {
- this.buttonElement.addClass( "ui-state-active" );
+ this._attachIcon( position );
+
+ // If the icon is on top or bottom we need to add the ui-widget-icon-block class and remove
+ // the iconSpace if there is one.
+ if ( displayBlock ) {
+ this._addClass( this.icon, null, "ui-widget-icon-block" );
+ if ( this.iconSpace ) {
+ this.iconSpace.remove();
}
- this.buttonElement.prop( "aria-pressed", checked );
} else {
- this.buttonElement = this.element;
- }
- },
- widget: function() {
- return this.buttonElement;
+ // Position is beginning or end so remove the ui-widget-icon-block class and add the
+ // space if it does not exist
+ if ( !this.iconSpace ) {
+ this.iconSpace = $( "<span> </span>" );
+ this._addClass( this.iconSpace, "ui-button-icon-space" );
+ }
+ this._removeClass( this.icon, null, "ui-wiget-icon-block" );
+ this._attachIconSpace( position );
+ }
},
_destroy: function() {
- this.element
- .removeClass( "ui-helper-hidden-accessible" );
- this.buttonElement
- .removeClass( baseClasses + " ui-state-active " + typeClasses )
- .removeAttr( "role aria-pressed" )
- .html( this.buttonElement.find( ".ui-button-text" ).html() );
+ this.element.removeAttr( "role" );
+ if ( this.icon ) {
+ this.icon.remove();
+ }
+ if ( this.iconSpace ) {
+ this.iconSpace.remove();
+ }
if ( !this.hasTitle ) {
- this.buttonElement.removeAttr( "title" );
+ this.element.removeAttr( "title" );
}
},
- _setOption: function( key, value ) {
- this._super( key, value );
- if ( key === "disabled" ) {
- this.widget().toggleClass( "ui-state-disabled", !!value );
- this.element.prop( "disabled", !!value );
- if ( value ) {
- if ( this.type === "checkbox" || this.type === "radio" ) {
- this.buttonElement.removeClass( "ui-state-focus" );
- } else {
- this.buttonElement.removeClass( "ui-state-focus ui-state-active" );
- }
- }
- return;
- }
- this._resetButton();
+ _attachIconSpace: function( iconPosition ) {
+ this.icon[ /^(?:end|bottom)/.test( iconPosition ) ? "before" : "after" ]( this.iconSpace );
},
- refresh: function() {
+ _attachIcon: function( iconPosition ) {
+ this.element[ /^(?:end|bottom)/.test( iconPosition ) ? "append" : "prepend" ]( this.icon );
+ },
- //See #8237 & #8828
- var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" );
+ _setOptions: function( options ) {
+ var newShowLabel = options.showLabel === undefined ?
+ this.options.showLabel :
+ options.showLabel,
+ newIcon = options.icon === undefined ? this.options.icon : options.icon;
- if ( isDisabled !== this.options.disabled ) {
- this._setOption( "disabled", isDisabled );
- }
- if ( this.type === "radio" ) {
- radioGroup( this.element[ 0 ] ).each( function() {
- if ( $( this ).is( ":checked" ) ) {
- $( this ).button( "widget" )
- .addClass( "ui-state-active" )
- .attr( "aria-pressed", "true" );
- } else {
- $( this ).button( "widget" )
- .removeClass( "ui-state-active" )
- .attr( "aria-pressed", "false" );
- }
- } );
- } else if ( this.type === "checkbox" ) {
- if ( this.element.is( ":checked" ) ) {
- this.buttonElement
- .addClass( "ui-state-active" )
- .attr( "aria-pressed", "true" );
- } else {
- this.buttonElement
- .removeClass( "ui-state-active" )
- .attr( "aria-pressed", "false" );
- }
+ if ( !newShowLabel && !newIcon ) {
+ options.showLabel = true;
}
+ this._super( options );
},
- _resetButton: function() {
- if ( this.type === "input" ) {
- if ( this.options.label ) {
- this.element.val( this.options.label );
+ _setOption: function( key, value ) {
+ if ( key === "icon" ) {
+ if ( value ) {
+ this._updateIcon( key, value );
+ } else if ( this.icon ) {
+ this.icon.remove();
+ if ( this.iconSpace ) {
+ this.iconSpace.remove();
+ }
}
- return;
}
- var buttonElement = this.buttonElement.removeClass( typeClasses ),
- buttonText = $( "<span></span>", this.document[ 0 ] )
- .addClass( "ui-button-text" )
- .html( this.options.label )
- .appendTo( buttonElement.empty() )
- .text(),
- icons = this.options.icons,
- multipleIcons = icons.primary && icons.secondary,
- buttonClasses = [];
-
- if ( icons.primary || icons.secondary ) {
- if ( this.options.text ) {
- buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
- }
- if ( icons.primary ) {
- buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
- }
+ if ( key === "iconPosition" ) {
+ this._updateIcon( key, value );
+ }
- if ( icons.secondary ) {
- buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
- }
+ // Make sure we can't end up with a button that has neither text nor icon
+ if ( key === "showLabel" ) {
+ this._toggleClass( this._classes( "ui-button-icon-only" ), null, !value );
+ this._updateTooltip();
+ }
- if ( !this.options.text ) {
- buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
+ if ( key === "label" ) {
+ if ( this.isInput ) {
+ this.element.val( value );
+ } else {
- if ( !this.hasTitle ) {
- buttonElement.attr( "title", $.trim( buttonText ) );
+ // If there is an icon, append it, else nothing then append the value
+ // this avoids removal of the icon when setting label text
+ this.element.html( value );
+ if ( this.icon ) {
+ this._attachIcon( this.options.iconPosition );
+ this._attachIconSpace( this.options.iconPosition );
}
}
- } else {
- buttonClasses.push( "ui-button-text-only" );
}
- buttonElement.addClass( buttonClasses.join( " " ) );
- }
-} );
-
-$.widget( "ui.buttonset", {
- version: "@VERSION",
- options: {
- items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
- },
- _create: function() {
- this.element.addClass( "ui-buttonset" );
- },
-
- _init: function() {
- this.refresh();
- },
+ this._super( key, value );
- _setOption: function( key, value ) {
if ( key === "disabled" ) {
- this.buttons.button( "option", key, value );
+ this._toggleClass( null, "ui-state-disabled", value );
+ this.element[ 0 ].disabled = value;
+ if ( value ) {
+ this.element.blur();
+ }
}
-
- this._super( key, value );
},
refresh: function() {
- var rtl = this.element.css( "direction" ) === "rtl",
- allButtons = this.element.find( this.options.items ),
- existingButtons = allButtons.filter( ":ui-button" );
-
- // Initialize new buttons
- allButtons.not( ":ui-button" ).button();
-
- // Refresh existing buttons
- existingButtons.button( "refresh" );
-
- this.buttons = allButtons
- .map( function() {
- return $( this ).button( "widget" )[ 0 ];
- } )
- .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
- .filter( ":first" )
- .addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
- .end()
- .filter( ":last" )
- .addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
- .end()
- .end();
- },
- _destroy: function() {
- this.element.removeClass( "ui-buttonset" );
- this.buttons
- .map( function() {
- return $( this ).button( "widget" )[ 0 ];
- } )
- .removeClass( "ui-corner-left ui-corner-right" )
- .end()
- .button( "destroy" );
+ // Make sure to only check disabled if its an element that supports this otherwise
+ // check for the disabled class to determine state
+ var isDisabled = this.element.is( "input, button" ) ?
+ this.element[ 0 ].disabled : this.element.hasClass( "ui-button-disabled" );
+
+ if ( isDisabled !== this.options.disabled ) {
+ this._setOptions( { disabled: isDisabled } );
+ }
+
+ this._updateTooltip();
}
} );
+// DEPRECATED
+if ( $.uiBackCompat !== false ) {
+
+ // Text and Icons options
+ $.widget( "ui.button", $.ui.button, {
+ options: {
+ text: true,
+ icons: {
+ primary: null,
+ secondary: null
+ }
+ },
+
+ _create: function() {
+ if ( this.options.showLabel && !this.options.text ) {
+ this.options.showLabel = this.options.text;
+ }
+ if ( !this.options.showLabel && this.options.text ) {
+ this.options.text = this.options.showLabel;
+ }
+ if ( !this.options.icon && ( this.options.icons.primary ||
+ this.options.icons.secondary ) ) {
+ if ( this.options.icons.primary ) {
+ this.options.icon = this.options.icons.primary;
+ } else {
+ this.options.icon = this.options.icons.secondary;
+ this.options.iconPosition = "end";
+ }
+ } else if ( this.options.icon ) {
+ this.options.icons.primary = this.options.icon;
+ }
+ this._super();
+ },
+
+ _setOption: function( key, value ) {
+ if ( key === "text" ) {
+ this._super( "showLabel", value );
+ return;
+ }
+ if ( key === "showLabel" ) {
+ this.options.text = value;
+ }
+ if ( key === "icon" ) {
+ this.options.icons.primary = value;
+ }
+ if ( key === "icons" ) {
+ if ( value.primary ) {
+ this._super( "icon", value.primary );
+ this._super( "iconPosition", "beginning" );
+ } else if ( value.secondary ) {
+ this._super( "icon", value.secondary );
+ this._super( "iconPosition", "end" );
+ }
+ }
+ this._superApply( arguments );
+ }
+ } );
+
+ $.fn.button = ( function( orig ) {
+ return function() {
+ if ( !this.length || ( this.length && this[ 0 ].tagName !== "INPUT" ) ||
+ ( this.length && this[ 0 ].tagName === "INPUT" && (
+ this.attr( "type" ) !== "checkbox" && this.attr( "type" ) !== "radio"
+ ) ) ) {
+ return orig.apply( this, arguments );
+ }
+ if ( !$.ui.checkboxradio ) {
+ $.error( "Checkboxradio widget missing" );
+ }
+ if ( arguments.length === 0 ) {
+ return this.checkboxradio( {
+ "icon": false
+ } );
+ }
+ return this.checkboxradio.apply( this, arguments );
+ };
+ } )( $.fn.button );
+
+ $.fn.buttonset = function() {
+ if ( !$.ui.controlgroup ) {
+ $.error( "Controlgroup widget missing" );
+ }
+ if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" && arguments[ 2 ] ) {
+ return this.controlgroup.apply( this,
+ [ arguments[ 0 ], "items.button", arguments[ 2 ] ] );
+ }
+ if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" ) {
+ return this.controlgroup.apply( this, [ arguments[ 0 ], "items.button" ] );
+ }
+ if ( typeof arguments[ 0 ] === "object" && arguments[ 0 ].items ) {
+ arguments[ 0 ].items = {
+ button: arguments[ 0 ].items
+ };
+ }
+ return this.controlgroup.apply( this, arguments );
+ };
+}
+
return $.ui.button;
} ) );
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 12:07:58 +0000