From 5c0fecfe55418b85e1ddbd5b1255d0353eb774de Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Fri, 21 Nov 2014 14:32:42 -0800 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (8f8896196f) MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit New changes: 56587a8 [BREAKING CHANGE] Rename InputWidget#sanitizeValue → #cleanUpValue 4253739 Implement radio button widgets Change-Id: If10927a4e595de9b6d0ad45182470e84f335683c --- resources/lib/oojs-ui/oojs-ui-apex.css | 25 ++- resources/lib/oojs-ui/oojs-ui-apex.js | 4 +- resources/lib/oojs-ui/oojs-ui-apex.svg.css | 25 ++- resources/lib/oojs-ui/oojs-ui-mediawiki.css | 25 ++- resources/lib/oojs-ui/oojs-ui-mediawiki.js | 4 +- .../lib/oojs-ui/oojs-ui-mediawiki.svg.css | 25 ++- resources/lib/oojs-ui/oojs-ui.js | 154 +++++++++++++++++- 7 files changed, 243 insertions(+), 19 deletions(-) diff --git a/resources/lib/oojs-ui/oojs-ui-apex.css b/resources/lib/oojs-ui/oojs-ui-apex.css index eb46d197ab..0b168c246d 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 9da52ac015..150c0f2eca 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 d677c6cbf1..2ccec1393a 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 81bd5dd55b..4d1437641e 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 3986dcffed..d119fc7c12 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 60ab55d873..efd997a33d 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 9b2c13f4ca..30e5e4e4cf 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 @@ OO.ui.InputWidget.prototype.setRTL = function ( isRTL ) { * @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 @@ OO.ui.InputWidget.prototype.setValue = function ( value ) { }; /** - * 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 ) { @@ -9462,6 +9462,74 @@ OO.ui.CheckboxInputWidget.prototype.onEdit = function () { } }; +/** + * 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.$( '' ); +}; + +/** + * @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' ); +}; + /** * Input widget with a text field. * @@ -10240,6 +10308,55 @@ OO.ui.ButtonOptionWidget.prototype.setSelected = function ( 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; +}; + /** * Item of an OO.ui.MenuSelectWidget. * @@ -11476,6 +11593,29 @@ OO.ui.ButtonSelectWidget = function OoUiButtonSelectWidget( config ) { 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. * -- 2.20.1