Jforrester has uploaded a new change for review. https://gerrit.wikimedia.org/r/175138
Change subject: Update OOjs UI to v0.1.0-pre (8f8896196f) ...................................................................... Update OOjs UI to v0.1.0-pre (8f8896196f) New changes: 56587a8 [BREAKING CHANGE] Rename InputWidget#sanitizeValue → #cleanUpValue 4253739 Implement radio button widgets Change-Id: If10927a4e595de9b6d0ad45182470e84f335683c --- M resources/lib/oojs-ui/oojs-ui-apex.css M resources/lib/oojs-ui/oojs-ui-apex.js M resources/lib/oojs-ui/oojs-ui-apex.svg.css M resources/lib/oojs-ui/oojs-ui-mediawiki.css M resources/lib/oojs-ui/oojs-ui-mediawiki.js M resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css M resources/lib/oojs-ui/oojs-ui.js 7 files changed, 243 insertions(+), 19 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/38/175138/1 diff --git a/resources/lib/oojs-ui/oojs-ui-apex.css b/resources/lib/oojs-ui/oojs-ui-apex.css index eb46d19..0b168c2 100644 --- a/resources/lib/oojs-ui/oojs-ui-apex.css +++ b/resources/lib/oojs-ui/oojs-ui-apex.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (23565e7519) + * OOjs UI v0.1.0-pre (8f8896196f) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-11-21T22:18:30Z + * Date: 2014-11-21T22:32:38Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -970,6 +970,9 @@ border-bottom-right-radius: 0.3em; border-top-right-radius: 0.3em; } +.oo-ui-radioSelectWidget { + padding: 0.75em 0 0.5em 0; +} .oo-ui-buttonOptionWidget { display: inline-block; padding: 0; @@ -997,6 +1000,24 @@ .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted { background-color: transparent; } +.oo-ui-radioOptionWidget { + cursor: default; + padding: 0; + background-color: transparent; +} +.oo-ui-radioOptionWidget .oo-ui-radioInputWidget, +.oo-ui-radioOptionWidget .oo-ui-labelElement-label { + display: inline-block; + vertical-align: middle; +} +.oo-ui-radioOptionWidget.oo-ui-optionWidget-selected, +.oo-ui-radioOptionWidget.oo-ui-optionWidget-pressed, +.oo-ui-radioOptionWidget.oo-ui-optionWidget-highlighted { + background-color: transparent; +} +.oo-ui-radioOptionWidget > .oo-ui-labelElement-label { + padding: 0 0.5em; +} .oo-ui-labelWidget { display: inline-block; padding: 0.5em 0; diff --git a/resources/lib/oojs-ui/oojs-ui-apex.js b/resources/lib/oojs-ui/oojs-ui-apex.js index 9da52ac..150c0f2 100644 --- a/resources/lib/oojs-ui/oojs-ui-apex.js +++ b/resources/lib/oojs-ui/oojs-ui-apex.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (23565e7519) + * OOjs UI v0.1.0-pre (8f8896196f) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-11-21T22:18:20Z + * Date: 2014-11-21T22:32:28Z */ /* Instantiation */ diff --git a/resources/lib/oojs-ui/oojs-ui-apex.svg.css b/resources/lib/oojs-ui/oojs-ui-apex.svg.css index d677c6c..2ccec13 100644 --- a/resources/lib/oojs-ui/oojs-ui-apex.svg.css +++ b/resources/lib/oojs-ui/oojs-ui-apex.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (23565e7519) + * OOjs UI v0.1.0-pre (8f8896196f) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-11-21T22:18:30Z + * Date: 2014-11-21T22:32:38Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -970,6 +970,9 @@ border-bottom-right-radius: 0.3em; border-top-right-radius: 0.3em; } +.oo-ui-radioSelectWidget { + padding: 0.75em 0 0.5em 0; +} .oo-ui-buttonOptionWidget { display: inline-block; padding: 0; @@ -997,6 +1000,24 @@ .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted { background-color: transparent; } +.oo-ui-radioOptionWidget { + cursor: default; + padding: 0; + background-color: transparent; +} +.oo-ui-radioOptionWidget .oo-ui-radioInputWidget, +.oo-ui-radioOptionWidget .oo-ui-labelElement-label { + display: inline-block; + vertical-align: middle; +} +.oo-ui-radioOptionWidget.oo-ui-optionWidget-selected, +.oo-ui-radioOptionWidget.oo-ui-optionWidget-pressed, +.oo-ui-radioOptionWidget.oo-ui-optionWidget-highlighted { + background-color: transparent; +} +.oo-ui-radioOptionWidget > .oo-ui-labelElement-label { + padding: 0 0.5em; +} .oo-ui-labelWidget { display: inline-block; padding: 0.5em 0; diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.css index 81bd5dd..4d14376 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (23565e7519) + * OOjs UI v0.1.0-pre (8f8896196f) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-11-21T22:18:30Z + * Date: 2014-11-21T22:32:38Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -879,6 +879,9 @@ border-bottom-right-radius: 0.3em; border-top-right-radius: 0.3em; } +.oo-ui-radioSelectWidget { + padding: 0.75em 0 0.5em 0; +} .oo-ui-buttonOptionWidget { display: inline-block; padding: 0; @@ -906,6 +909,24 @@ .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted { background-color: transparent; } +.oo-ui-radioOptionWidget { + cursor: default; + padding: 0; + background-color: transparent; +} +.oo-ui-radioOptionWidget .oo-ui-radioInputWidget, +.oo-ui-radioOptionWidget .oo-ui-labelElement-label { + display: inline-block; + vertical-align: middle; +} +.oo-ui-radioOptionWidget.oo-ui-optionWidget-selected, +.oo-ui-radioOptionWidget.oo-ui-optionWidget-pressed, +.oo-ui-radioOptionWidget.oo-ui-optionWidget-highlighted { + background-color: transparent; +} +.oo-ui-radioOptionWidget > .oo-ui-labelElement-label { + padding: 0 0.5em; +} .oo-ui-labelWidget { display: inline-block; } diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js index 3986dcf..d119fc7 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.js +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (23565e7519) + * OOjs UI v0.1.0-pre (8f8896196f) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-11-21T22:18:20Z + * Date: 2014-11-21T22:32:28Z */ /** * @class diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css index 60ab55d..efd997a 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (23565e7519) + * OOjs UI v0.1.0-pre (8f8896196f) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-11-21T22:18:30Z + * Date: 2014-11-21T22:32:38Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -879,6 +879,9 @@ border-bottom-right-radius: 0.3em; border-top-right-radius: 0.3em; } +.oo-ui-radioSelectWidget { + padding: 0.75em 0 0.5em 0; +} .oo-ui-buttonOptionWidget { display: inline-block; padding: 0; @@ -906,6 +909,24 @@ .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted { background-color: transparent; } +.oo-ui-radioOptionWidget { + cursor: default; + padding: 0; + background-color: transparent; +} +.oo-ui-radioOptionWidget .oo-ui-radioInputWidget, +.oo-ui-radioOptionWidget .oo-ui-labelElement-label { + display: inline-block; + vertical-align: middle; +} +.oo-ui-radioOptionWidget.oo-ui-optionWidget-selected, +.oo-ui-radioOptionWidget.oo-ui-optionWidget-pressed, +.oo-ui-radioOptionWidget.oo-ui-optionWidget-highlighted { + background-color: transparent; +} +.oo-ui-radioOptionWidget > .oo-ui-labelElement-label { + padding: 0 0.5em; +} .oo-ui-labelWidget { display: inline-block; } diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index 9b2c13f..30e5e4e 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (23565e7519) + * OOjs UI v0.1.0-pre (8f8896196f) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-11-21T22:18:20Z + * Date: 2014-11-21T22:32:28Z */ ( function ( OO ) { @@ -9163,12 +9163,12 @@ * @chainable */ OO.ui.InputWidget.prototype.setValue = function ( value ) { - value = this.sanitizeValue( value ); + value = this.cleanUpValue( value ); if ( this.value !== value ) { this.value = value; this.emit( 'change', this.value ); } - // Update the DOM if it has changed. Note that with sanitizeValue, it + // Update the DOM if it has changed. Note that with cleanUpValue, it // is possible for the DOM value to change without this.value changing. if ( this.$input.val() !== this.value ) { this.$input.val( this.value ); @@ -9177,15 +9177,15 @@ }; /** - * Sanitize incoming value. + * Clean up incoming value. * * Ensures value is a string, and converts undefined and null to empty string. * * @private * @param {string} value Original value - * @return {string} Sanitized value + * @return {string} Cleaned up value */ -OO.ui.InputWidget.prototype.sanitizeValue = function ( value ) { +OO.ui.InputWidget.prototype.cleanUpValue = function ( value ) { if ( value === undefined || value === null ) { return ''; } else if ( this.inputFilter ) { @@ -9460,6 +9460,74 @@ widget.setValue( widget.$input.prop( 'checked' ) ); } ); } +}; + +/** + * Radio input widget. + * + * Radio buttons only make sense as a set, and you probably want to use the OO.ui.RadioSelectWidget + * class instead of using this class directly. + * + * This class doesn't make it possible to learn whether the radio button is selected ("pressed"). + * + * @class + * @extends OO.ui.InputWidget + * + * @constructor + * @param {Object} [config] Configuration options + * @param {boolean} [config.selected=false] Whether the radio button is initially selected + */ +OO.ui.RadioInputWidget = function OoUiRadioInputWidget( config ) { + // Parent constructor + OO.ui.RadioInputWidget.super.call( this, config ); + + // Initialization + this.$element.addClass( 'oo-ui-radioInputWidget' ); + this.setSelected( config.selected !== undefined ? config.selected : false ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.RadioInputWidget, OO.ui.InputWidget ); + +/* Methods */ + +/** + * Get input element. + * + * @private + * @return {jQuery} Input element + */ +OO.ui.RadioInputWidget.prototype.getInputElement = function () { + return this.$( '<input type="radio" />' ); +}; + +/** + * @inheritdoc + */ +OO.ui.RadioInputWidget.prototype.onEdit = function () { + // RadioInputWidget doesn't track its state. +}; + +/** + * Set selection state of this radio button. + * + * @param {boolean} state Whether the button is selected + * @chainable + */ +OO.ui.RadioInputWidget.prototype.setSelected = function ( state ) { + // RadioInputWidget doesn't track its state. + this.$input.prop( 'checked', state ); + return this; +}; + +/** + * Check if this radio button is selected. + * + * @return {boolean} Radio is selected + */ +OO.ui.RadioInputWidget.prototype.isSelected = function () { + return this.$input.prop( 'checked' ); }; /** @@ -10236,6 +10304,55 @@ if ( this.constructor.static.selectable ) { this.setActive( state ); } + + return this; +}; + +/** + * Option widget that looks like a radio button. + * + * Use together with OO.ui.RadioSelectWidget. + * + * @class + * @extends OO.ui.OptionWidget + * @mixins OO.ui.ButtonElement + * + * @constructor + * @param {Mixed} data Option data + * @param {Object} [config] Configuration options + */ +OO.ui.RadioOptionWidget = function OoUiRadioOptionWidget( data, config ) { + // Parent constructor + OO.ui.RadioOptionWidget.super.call( this, data, config ); + + // Properties + this.radio = new OO.ui.RadioInputWidget( { value: data } ); + + // Initialization + this.$element + .addClass( 'oo-ui-radioOptionWidget' ) + .prepend( this.radio.$element ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.RadioOptionWidget, OO.ui.OptionWidget ); + +/* Static Properties */ + +OO.ui.RadioOptionWidget.static.highlightable = false; + +OO.ui.RadioOptionWidget.static.pressable = false; + +/* Methods */ + +/** + * @inheritdoc + */ +OO.ui.RadioOptionWidget.prototype.setSelected = function ( state ) { + OO.ui.RadioOptionWidget.super.prototype.setSelected.call( this, state ); + + this.radio.setSelected( state ); return this; }; @@ -11477,6 +11594,29 @@ OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget ); /** + * Select widget containing radio button options. + * + * Use together with OO.ui.RadioOptionWidget. + * + * @class + * @extends OO.ui.SelectWidget + * + * @constructor + * @param {Object} [config] Configuration options + */ +OO.ui.RadioSelectWidget = function OoUiRadioSelectWidget( config ) { + // Parent constructor + OO.ui.RadioSelectWidget.super.call( this, config ); + + // Initialization + this.$element.addClass( 'oo-ui-radioSelectWidget' ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.RadioSelectWidget, OO.ui.SelectWidget ); + +/** * Overlaid menu of options. * * Menus are clipped to the visible viewport. They do not provide a control for opening or closing -- To view, visit https://gerrit.wikimedia.org/r/175138 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: If10927a4e595de9b6d0ad45182470e84f335683c Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Jforrester <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
