From a8e263926e2c2bd5787956c65d9ac126e0cce21c Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Thu, 3 Apr 2014 16:56:26 -0700 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (eaa1b7f06d) New changes: 468b1c8 Localisation updates from https://translatewiki.net. 3e2a5e1 Update OOjs to v1.0.9 eaa1b7f Add pressed state to option widgets and use instead of initializing items Change-Id: I6e93d9ab0e4a926c09c5e08e3db045cff99d2098 --- resources/oojs-ui/i18n/zh-hans.json | 2 +- resources/oojs-ui/oojs-ui-apex.css | 9 ++- resources/oojs-ui/oojs-ui.js | 118 +++++++++++++++++++++++++--- resources/oojs-ui/oojs-ui.svg.css | 4 +- 4 files changed, 118 insertions(+), 15 deletions(-) diff --git a/resources/oojs-ui/i18n/zh-hans.json b/resources/oojs-ui/i18n/zh-hans.json index e8041ca7d3..19d9c7e9b5 100644 --- a/resources/oojs-ui/i18n/zh-hans.json +++ b/resources/oojs-ui/i18n/zh-hans.json @@ -21,6 +21,6 @@ "ooui-dialog-action-close": "关闭", "ooui-outline-control-move-down": "下移项", "ooui-outline-control-move-up": "上移项", - "ooui-outline-control-remove": "移除项", + "ooui-outline-control-remove": "删除项", "ooui-toolbar-more": "更多" } diff --git a/resources/oojs-ui/oojs-ui-apex.css b/resources/oojs-ui/oojs-ui-apex.css index aa5d78fbfa..00cd433731 100644 --- a/resources/oojs-ui/oojs-ui-apex.css +++ b/resources/oojs-ui/oojs-ui-apex.css @@ -484,7 +484,11 @@ background-color: #e1f3ff; } -.oo-ui-optionWidget-selected { +.oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected { + background-color: #a7dcff; +} + +.oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed { background-color: #a7dcff; } @@ -536,6 +540,7 @@ } .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected, +.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted { background-color: transparent; } @@ -634,7 +639,7 @@ left: 4em; } -.oo-ui-outlineItemWidget.oo-ui-optionWidget-selected { +.oo-ui-selectWidget-depressed .oo-ui-outlineItemWidget.oo-ui-optionWidget-selected { text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); background-color: #a7dcff; } diff --git a/resources/oojs-ui/oojs-ui.js b/resources/oojs-ui/oojs-ui.js index 9a1e324ac4..1565cbbc99 100644 --- a/resources/oojs-ui/oojs-ui.js +++ b/resources/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (8986c46d35) + * OOjs UI v0.1.0-pre (eaa1b7f06d) * 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: Tue Apr 01 2014 19:33:39 GMT-0700 (PDT) + * Date: Thu Apr 03 2014 16:56:21 GMT-0700 (PDT) */ ( function ( OO ) { @@ -5819,6 +5819,7 @@ OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) { this.data = data; this.selected = false; this.highlighted = false; + this.pressed = false; // Initialization this.$element @@ -5849,6 +5850,8 @@ OO.ui.OptionWidget.static.selectable = true; OO.ui.OptionWidget.static.highlightable = true; +OO.ui.OptionWidget.static.pressable = true; + OO.ui.OptionWidget.static.scrollIntoViewOnSelect = false; /* Methods */ @@ -5873,6 +5876,16 @@ OO.ui.OptionWidget.prototype.isHighlightable = function () { return this.constructor.static.highlightable && !this.disabled; }; +/** + * Check if option can be pressed. + * + * @method + * @returns {boolean} Item is pressable + */ +OO.ui.OptionWidget.prototype.isPressable = function () { + return this.constructor.static.pressable && !this.disabled; +}; + /** * Check if option is selected. * @@ -5893,6 +5906,16 @@ OO.ui.OptionWidget.prototype.isHighlighted = function () { return this.highlighted; }; +/** + * Check if option is pressed. + * + * @method + * @returns {boolean} Item is pressed + */ +OO.ui.OptionWidget.prototype.isPressed = function () { + return this.pressed; +}; + /** * Set selected state. * @@ -5934,20 +5957,45 @@ OO.ui.OptionWidget.prototype.setHighlighted = function ( state ) { return this; }; +/** + * Set pressed state. + * + * @method + * @param {boolean} [state=false] Press option + * @chainable + */ +OO.ui.OptionWidget.prototype.setPressed = function ( state ) { + if ( !this.disabled && this.constructor.static.pressable ) { + this.pressed = !!state; + if ( this.pressed ) { + this.$element.addClass( 'oo-ui-optionWidget-pressed' ); + } else { + this.$element.removeClass( 'oo-ui-optionWidget-pressed' ); + } + } + return this; +}; + /** * Make the option's highlight flash. * + * While flashing, the visual style of the pressed state is removed if present. + * * @method * @param {Function} [done] Callback to execute when flash effect is complete. */ OO.ui.OptionWidget.prototype.flash = function ( done ) { var $this = this.$element; - if ( !this.disabled && this.constructor.static.highlightable ) { - $this.removeClass( 'oo-ui-optionWidget-highlighted' ); + if ( !this.disabled && this.constructor.static.pressable ) { + $this.removeClass( 'oo-ui-optionWidget-highlighted oo-ui-optionWidget-pressed' ); setTimeout( OO.ui.bind( function () { $this.addClass( 'oo-ui-optionWidget-highlighted' ); if ( done ) { + // Restore original classes + $this + .toggleClass( 'oo-ui-optionWidget-highlighted', this.highlighted ) + .toggleClass( 'oo-ui-optionWidget-pressed', this.pressed ); setTimeout( done, 100 ); } }, this ), 100 ); @@ -6000,7 +6048,7 @@ OO.ui.SelectWidget = function OoUiSelectWidget( config ) { } ); // Initialization - this.$element.addClass( 'oo-ui-selectWidget' ); + this.$element.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' ); if ( $.isArray( config.items ) ) { this.addItems( config.items ); } @@ -6022,6 +6070,11 @@ OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupWidget ); * @param {OO.ui.OptionWidget|null} item Highlighted item */ +/** + * @event press + * @param {OO.ui.OptionWidget|null} item Pressed item + */ + /** * @event select * @param {OO.ui.OptionWidget|null} item Selected item @@ -6055,10 +6108,10 @@ OO.ui.SelectWidget.prototype.onMouseDown = function ( e ) { var item; if ( !this.disabled && e.which === 1 ) { - this.pressed = true; + this.togglePressed( true ); item = this.getTargetItem( e ); if ( item && item.isSelectable() ) { - this.intializeSelection( item ); + this.pressItem( item ); this.selecting = item; this.$( this.$.context ).one( 'mouseup', OO.ui.bind( this.onMouseUp, this ) ); } @@ -6075,7 +6128,8 @@ OO.ui.SelectWidget.prototype.onMouseDown = function ( e ) { */ OO.ui.SelectWidget.prototype.onMouseUp = function ( e ) { var item; - this.pressed = false; + + this.togglePressed( false ); if ( !this.selecting ) { item = this.getTargetItem( e ); if ( item && item.isSelectable() ) { @@ -6083,9 +6137,11 @@ OO.ui.SelectWidget.prototype.onMouseUp = function ( e ) { } } if ( !this.disabled && e.which === 1 && this.selecting ) { + this.pressItem( null ); this.selectItem( this.selecting ); this.selecting = null; } + return false; }; @@ -6102,7 +6158,7 @@ OO.ui.SelectWidget.prototype.onMouseMove = function ( e ) { if ( !this.disabled && this.pressed ) { item = this.getTargetItem( e ); if ( item && item !== this.selecting && item.isSelectable() ) { - this.intializeSelection( item ); + this.pressItem( item ); this.selecting = item; } } @@ -6137,7 +6193,7 @@ OO.ui.SelectWidget.prototype.onMouseOver = function ( e ) { */ OO.ui.SelectWidget.prototype.onMouseLeave = function () { if ( !this.disabled ) { - this.highlightItem(); + this.highlightItem( null ); } return false; }; @@ -6209,6 +6265,22 @@ OO.ui.SelectWidget.prototype.getItemFromData = function ( data ) { return null; }; +/** + * Toggle pressed state. + * + * @param {boolean} pressed An option is being pressed + */ +OO.ui.SelectWidget.prototype.togglePressed = function ( pressed ) { + if ( pressed === undefined ) { + pressed = !this.pressed; + } + if ( pressed !== this.pressed ) { + this.$element.toggleClass( 'oo-ui-selectWidget-pressed', pressed ); + this.$element.toggleClass( 'oo-ui-selectWidget-depressed', !pressed ); + this.pressed = pressed; + } +}; + /** * Highlight an item. * @@ -6263,6 +6335,32 @@ OO.ui.SelectWidget.prototype.selectItem = function ( item ) { return this; }; +/** + * Press an item. + * + * @method + * @param {OO.ui.OptionWidget} [item] Item to press, omit to depress all + * @fires press + * @chainable + */ +OO.ui.SelectWidget.prototype.pressItem = function ( item ) { + var i, len, pressed, + changed = false; + + for ( i = 0, len = this.items.length; i < len; i++ ) { + pressed = this.items[i] === item; + if ( this.items[i].isPressed() !== pressed ) { + this.items[i].setPressed( pressed ); + changed = true; + } + } + if ( changed ) { + this.emit( 'press', item ); + } + + return this; +}; + /** * Setup selection and highlighting. * diff --git a/resources/oojs-ui/oojs-ui.svg.css b/resources/oojs-ui/oojs-ui.svg.css index 58bbad05d2..a7eecc1e57 100644 --- a/resources/oojs-ui/oojs-ui.svg.css +++ b/resources/oojs-ui/oojs-ui.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (8986c46d35) + * OOjs UI v0.1.0-pre (eaa1b7f06d) * 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: Tue Apr 01 2014 19:33:39 GMT-0700 (PDT) + * Date: Thu Apr 03 2014 16:56:21 GMT-0700 (PDT) */ /* Textures */ -- 2.20.1