aboutsummaryrefslogtreecommitdiffstats
path: root/ui/widgets
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2015-01-07 21:51:38 -0500
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-08 14:02:35 -0400
commit16abde399daa07e11f3b972ab675d59374cf08be (patch)
treedf9f2ef654f5357ad1e7e1eac3ad6f79194b33f1 /ui/widgets
parent9f7f0a427966741a460e91336947698879f8ad77 (diff)
downloadjquery-ui-16abde399daa07e11f3b972ab675d59374cf08be.tar.gz
jquery-ui-16abde399daa07e11f3b972ab675d59374cf08be.zip
Spinner: Updates for new button widget and classes option
Diffstat (limited to 'ui/widgets')
-rw-r--r--ui/widgets/button.js3
-rw-r--r--ui/widgets/checkboxradio.js265
-rw-r--r--ui/widgets/spinner.js12
3 files changed, 273 insertions, 7 deletions
diff --git a/ui/widgets/button.js b/ui/widgets/button.js
index 34a2afa40..2e6cc1f3c 100644
--- a/ui/widgets/button.js
+++ b/ui/widgets/button.js
@@ -12,8 +12,7 @@
//>>description: Enhances a form with themeable buttons.
//>>docs: http://api.jqueryui.com/button/
//>>demos: http://jqueryui.com/button/
-//>>css.structure: ../themes/base/core.css
-//>>css.structure: ../themes/base/button.css
+//>>css.structure: ../themes/base/core.css, ../themes/base/button.css
//>>css.theme: ../themes/base/theme.css
( function( factory ) {
diff --git a/ui/widgets/checkboxradio.js b/ui/widgets/checkboxradio.js
new file mode 100644
index 000000000..781274b9b
--- /dev/null
+++ b/ui/widgets/checkboxradio.js
@@ -0,0 +1,265 @@
+/*!
+ * jQuery UI Checkboxradio @VERSION
+ * http://jqueryui.com
+ *
+ * Copyright 2014 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/checkboxradio/
+ */
+( function( factory ) {
+ if ( typeof define === "function" && define.amd ) {
+
+ // AMD. Register as an anonymous module.
+ define( [
+ "jquery",
+ "../escape-selector",
+ "../form-reset-mixin",
+ "../labels",
+ "../widget"
+ ], factory );
+ } else {
+
+ // Browser globals
+ factory( jQuery );
+ }
+}( function( $ ) {
+
+$.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
+ version: "@VERSION",
+ options: {
+ disabled: null,
+ label: null,
+ icon: true,
+ classes: {
+ "ui-checkboxradio-label": "ui-corner-all",
+ "ui-checkboxradio-icon": "ui-corner-all"
+ }
+ },
+
+ _getCreateOptions: function() {
+ var disabled, labels,
+ that = this,
+ options = this._super() || {};
+
+ // We read the type here, because it makes more sense to throw a element type error first,
+ // rather then the error for lack of a label. Often if its the wrong type, it
+ // won't have a label (e.g. calling on a div, btn, etc)
+ this._readType();
+
+ labels = this.element.labels();
+
+ // Todo: For now we will use the last label we need to check about the best
+ // way to handle multiple labels with some accessability experts
+ this.label = $( labels[ labels.length - 1 ] );
+ if ( !this.label.length ) {
+ $.error( "No label found for checkboxradio widget" );
+ }
+
+ this.originalLabel = "";
+
+ // We need to get the label text but this may also need to make sure it does not contain the
+ // input itself.
+ this.label.contents().not( this.element ).each( function() {
+
+ // The label contents could be text html or a mix we concat each element to get a string
+ // representation of the label without the input as part of it.
+ that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML;
+ } );
+
+ // Set the label option if we found label text
+ if ( this.originalLabel ) {
+ options.label = this.originalLabel;
+ }
+
+ disabled = this.element[ 0 ].disabled;
+ if ( disabled != null ) {
+ options.disabled = disabled;
+ }
+ return options;
+ },
+
+ _create: function() {
+ var checked = this.element[ 0 ].checked;
+
+ this._bindFormResetHandler();
+
+ // this.form is set by the form-reset-mixin
+ this.formParent = this.form.length ? this.form : $( "body" );
+
+ if ( this.options.disabled == null ) {
+ this.options.disabled = this.element[ 0 ].disabled || false;
+ }
+
+ this._setOption( "disabled", this.options.disabled );
+ this._addClass( "ui-checkboxradio", "ui-helper-hidden-accessible" );
+ this._addClass( this.label, "ui-checkboxradio-label", "ui-button ui-widget" );
+
+ if ( this.type === "radio" ) {
+ this._addClass( this.label, "ui-checkboxradio-radio-label" );
+ }
+
+ if ( this.options.label && this.options.label !== this.originalLabel ) {
+ this._updateLabel();
+ } else if ( this.originalLabel ) {
+ this.options.label = this.originalLabel;
+ }
+
+ this._enhance();
+
+ if ( checked ) {
+ this._addClass( this.label, "ui-checkboxradio-checked", "ui-state-active" );
+ this._addClass( this.icon, null, "ui-state-hover" );
+ }
+
+ this._on( {
+ "change": "_toggleClasses",
+ "focus": function() {
+ this._addClass( this.label, null, "ui-state-focus ui-visual-focus" );
+ },
+ "blur": function() {
+ this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" );
+ }
+ } );
+ },
+
+ _readType: function() {
+ var nodeName = this.element[ 0 ].nodeName.toLowerCase();
+ this.type = this.element[ 0 ].type;
+ if ( nodeName !== "input" || !/radio|checkbox/.test( this.type ) ) {
+ $.error( "Can't create checkboxradio on element.nodeName=" + nodeName +
+ " and element.type=" + this.type );
+ }
+ },
+
+ // Support jQuery Mobile enhanced option
+ _enhance: function() {
+ this._updateIcon( this.element[ 0 ].checked );
+ },
+
+ widget: function() {
+ return this.label;
+ },
+
+ _getRadioGroup: function() {
+ var name = this.element[ 0 ].name,
+ that = this,
+ radios = $( [] );
+
+ if ( name ) {
+ name = $.ui.escapeSelector( name );
+ radios = this.formParent.find( "[name='" + $.ui.escapeSelector( name ) + "']" ).filter( function() {
+ var form = $( this ).form();
+ return ( form.length ? form : $( "body" ) )[ 0 ] === that.formParent[ 0 ];
+ } );
+ }
+ return radios.not( this.element );
+ },
+
+ _toggleClasses: function() {
+ var checked = this.element[ 0 ].checked;
+ this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
+
+ if ( this.options.icon && this.type === "checkbox" ) {
+
+ // We add ui-state-highlight to change the icon color
+ this._toggleClass( this.icon, null, "ui-icon-check ui-state-highlight", checked )
+ ._toggleClass( this.icon, null, "ui-icon-blank", !checked );
+ }
+ if ( this.type === "radio" ) {
+ this._getRadioGroup()
+ .each( function() {
+ var instance = $( this ).checkboxradio( "instance" );
+
+ if ( instance ) {
+ instance._removeClass( instance.label,
+ "ui-checkboxradio-checked", "ui-state-active" );
+ }
+ } );
+ }
+ },
+
+ _destroy: function() {
+ this._unbindFormResetHandler();
+
+ if ( this.icon ) {
+ this.icon.remove();
+ this.iconSpace.remove();
+ }
+ },
+
+ _setOption: function( key, value ) {
+
+ // We don't alow the value to be set to nothing
+ if ( key === "label" && !value ) {
+ return;
+ }
+
+ this._super( key, value );
+
+ if ( key === "disabled" ) {
+ this._toggleClass( this.label, null, "ui-state-disabled", value );
+ this.element[ 0 ].disabled = value;
+
+ // Don't refresh if disabled
+ return;
+ }
+ this.refresh();
+ },
+
+ _updateIcon: function( checked ) {
+ var toAdd = "ui-icon ui-icon-background ";
+
+ if ( this.options.icon ) {
+ if ( !this.icon ) {
+ this.icon = $( "<span>" );
+ this.iconSpace = $( "<span> </span>" );
+ this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" );
+ }
+
+ if ( this.type === "checkbox" ) {
+ toAdd += checked ? "ui-icon-check" : "ui-icon-blank";
+ this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" );
+ } else {
+ toAdd += "ui-icon-blank";
+ }
+ this._addClass( this.icon, "ui-checkboxradio-icon", toAdd );
+ if ( !checked ) {
+ this._removeClass( this.icon, null, "ui-icon-check" );
+ }
+ this.icon.prependTo( this.label ).after( this.iconSpace );
+ } else if ( this.icon !== undefined ) {
+ this.icon.remove();
+ this.iconSpace.remove();
+ delete this.icon;
+ }
+ },
+
+ _updateLabel: function() {
+
+ // Remove the contents of the label ( minus the icon, icon space, and input )
+ this.label.contents().not( this.element.add( this.icon ).add( this.iconSpace ) ).remove();
+ this.label.append( this.options.label );
+ },
+
+ refresh: function() {
+ var checked = this.element[ 0 ].checked,
+ isDisabled = this.element[ 0 ].disabled;
+
+ this._updateIcon( checked );
+ this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
+ if ( this.options.label !== null ) {
+ this._updateLabel();
+ }
+
+ if ( isDisabled !== this.options.disabled ) {
+ this._setOptions( { "disabled": isDisabled } );
+ }
+ }
+
+} ] );
+
+return $.ui.checkboxradio;
+
+} ) );
diff --git a/ui/widgets/spinner.js b/ui/widgets/spinner.js
index f79b2baed..3a0b6deef 100644
--- a/ui/widgets/spinner.js
+++ b/ui/widgets/spinner.js
@@ -250,17 +250,19 @@ $.widget( "ui.spinner", {
// Button bindings
this.buttons = this.uiSpinner.children( "a" )
.attr( "tabIndex", -1 )
- .button();
+ .button( {
+ classes: {
+ "ui-button": ""
+ }
+ } );
// TODO: Right now button does not support classes this is already updated in button PR
this._removeClass( this.buttons, "ui-corner-all" );
this._addClass( this.buttons.first(), "ui-spinner-button ui-spinner-up" );
this._addClass( this.buttons.last(), "ui-spinner-button ui-spinner-down" );
- this._addClass( this.buttons.first().find( ".ui-button-text span" ), null,
- "ui-icon " + this.options.icons.up );
- this._addClass( this.buttons.last().find( ".ui-button-text span" ), null,
- "ui-icon " + this.options.icons.down );
+ this.buttons.first().button( "option", "icon", this.options.icons.up );
+ this.buttons.last().button( "option", "icon", this.options.icons.down );
// IE 6 doesn't understand height: 50% for the buttons
// unless the wrapper has an explicit height