Jforrester has uploaded a new change for review. https://gerrit.wikimedia.org/r/188577
Change subject: Update OOjs UI to v0.6.6 ...................................................................... Update OOjs UI to v0.6.6 Release notes: https://git.wikimedia.org/blob/oojs%2Fui.git/v0.6.6/History.md Change-Id: I8e0ea18c23df5fe0530cc841799830c4f0082eff --- M composer.json 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 5 files changed, 174 insertions(+), 111 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/77/188577/1 diff --git a/composer.json b/composer.json index 4d51a45..bae3b55 100644 --- a/composer.json +++ b/composer.json @@ -18,7 +18,7 @@ "require": { "cssjanus/cssjanus": "1.1.1", "leafo/lessphp": "0.5.0", - "oojs/oojs-ui": "0.6.5", + "oojs/oojs-ui": "0.6.6", "php": ">=5.3.3", "psr/log": "1.0.0", "wikimedia/cdb": "1.0.1", diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.css index e4143ce..3c297ed 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.6.5 + * OOjs UI v0.6.6 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-02-02T03:29:03Z + * Date: 2015-02-04T16:52:04Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -61,6 +61,9 @@ /* @noflip */ .oo-ui-ltr { direction: ltr; +} +.oo-ui-element-hidden { + display: none !important; } .oo-ui-buttonElement > .oo-ui-buttonElement-button { cursor: pointer; @@ -609,6 +612,26 @@ left: 0; top: 0; } +.oo-ui-menuLayout-top .oo-ui-menuLayout-content { + right: 0 !important; + bottom: 0 !important; + left: 0 !important; +} +.oo-ui-menuLayout-after .oo-ui-menuLayout-content { + bottom: 0 !important; + left: 0 !important; + top: 0 !important; +} +.oo-ui-menuLayout-bottom .oo-ui-menuLayout-content { + left: 0 !important; + top: 0 !important; + right: 0 !important; +} +.oo-ui-menuLayout-before .oo-ui-menuLayout-content { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; +} .oo-ui-panelLayout { position: relative; } @@ -624,9 +647,6 @@ } .oo-ui-panelLayout-padded { padding: 1.25em; -} -.oo-ui-stackLayout > .oo-ui-panelLayout { - display: none; } .oo-ui-stackLayout-continuous > .oo-ui-panelLayout { display: block; @@ -1268,13 +1288,13 @@ } .oo-ui-progressBarWidget { max-width: 50em; - border: solid 1px #0274ff; + border: solid 1px #cccccc; border-radius: 0.1em; overflow: hidden; } .oo-ui-progressBarWidget-bar { height: 1em; - background: #0274ff; + background: #dddddd; -webkit-transition: width 200ms, margin-left 200ms; -moz-transition: width 200ms, margin-left 200ms; -ms-transition: width 200ms, margin-left 200ms; @@ -1292,7 +1312,7 @@ border-left-width: 1px; } .oo-ui-progressBarWidget.oo-ui-widget-disabled { - opacity: 0.2; + opacity: 0.6; } .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js index 3ef200b..07f220d 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.6.5 + * OOjs UI v0.6.6 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-02-02T03:28:54Z + * Date: 2015-02-04T16:51:55Z */ /** * @class diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css index e99bb03..0d0267d 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.6.5 + * OOjs UI v0.6.6 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-02-02T03:29:03Z + * Date: 2015-02-04T16:52:04Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -61,6 +61,9 @@ /* @noflip */ .oo-ui-ltr { direction: ltr; +} +.oo-ui-element-hidden { + display: none !important; } .oo-ui-buttonElement > .oo-ui-buttonElement-button { cursor: pointer; @@ -609,6 +612,26 @@ left: 0; top: 0; } +.oo-ui-menuLayout-top .oo-ui-menuLayout-content { + right: 0 !important; + bottom: 0 !important; + left: 0 !important; +} +.oo-ui-menuLayout-after .oo-ui-menuLayout-content { + bottom: 0 !important; + left: 0 !important; + top: 0 !important; +} +.oo-ui-menuLayout-bottom .oo-ui-menuLayout-content { + left: 0 !important; + top: 0 !important; + right: 0 !important; +} +.oo-ui-menuLayout-before .oo-ui-menuLayout-content { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; +} .oo-ui-panelLayout { position: relative; } @@ -624,9 +647,6 @@ } .oo-ui-panelLayout-padded { padding: 1.25em; -} -.oo-ui-stackLayout > .oo-ui-panelLayout { - display: none; } .oo-ui-stackLayout-continuous > .oo-ui-panelLayout { display: block; @@ -1268,13 +1288,13 @@ } .oo-ui-progressBarWidget { max-width: 50em; - border: solid 1px #0274ff; + border: solid 1px #cccccc; border-radius: 0.1em; overflow: hidden; } .oo-ui-progressBarWidget-bar { height: 1em; - background: #0274ff; + background: #dddddd; -webkit-transition: width 200ms, margin-left 200ms; -moz-transition: width 200ms, margin-left 200ms; -ms-transition: width 200ms, margin-left 200ms; @@ -1292,7 +1312,7 @@ border-left-width: 1px; } .oo-ui-progressBarWidget.oo-ui-widget-disabled { - opacity: 0.2; + opacity: 0.6; } .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index 1c4adba..3cc067e 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.6.5 + * OOjs UI v0.6.6 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-02-02T03:28:54Z + * Date: 2015-02-04T16:51:55Z */ ( function ( OO ) { @@ -1445,7 +1445,7 @@ if ( show !== this.isVisible() ) { this.visible = show; - this.$element.toggle( show ); + this.$element.toggleClass( 'oo-ui-element-hidden', !this.visible ); this.emit( 'toggle', show ); } @@ -1929,9 +1929,12 @@ if ( this.isolated && !this.isLoaded() ) { // Hide the window using visibility instead of display until loading is complete // Can't use display: none; because that prevents the iframe from loading in Firefox - this.$element.css( 'visibility', show ? 'visible' : 'hidden' ); + this.$element + .css( 'visibility', show ? 'visible' : 'hidden' ); } else { - this.$element.toggle( show ).css( 'visibility', '' ); + this.$element + .toggleClass( 'oo-ui-element-hidden', !this.visible ) + .css( 'visibility', '' ); } this.emit( 'toggle', show ); } @@ -2120,8 +2123,7 @@ var win = this, deferred = $.Deferred(); - this.$element.show(); - this.visible = true; + this.toggle( true ); this.getSetupProcess( data ).execute().done( function () { // Force redraw by asking the browser to measure the elements' widths win.$element.addClass( 'oo-ui-window-setup' ).width(); @@ -2204,7 +2206,7 @@ // Force redraw by asking the browser to measure the elements' widths win.$element.removeClass( 'oo-ui-window-load oo-ui-window-setup' ).width(); win.$content.removeClass( 'oo-ui-window-content-setup' ).width(); - win.$element.hide(); + win.$element.addClass( 'oo-ui-element-hidden' ); win.visible = false; deferred.resolve(); } ); @@ -3742,6 +3744,9 @@ this.$tabIndexed = null; this.tabIndex = null; + // Events + this.connect( this, { disable: 'onDisable' } ); + // Initialization this.setTabIndex( config.tabIndex || 0 ); this.setTabIndexedElement( config.$tabIndexed || this.$element ); @@ -3762,12 +3767,17 @@ */ OO.ui.TabIndexedElement.prototype.setTabIndexedElement = function ( $tabIndexed ) { if ( this.$tabIndexed ) { - this.$tabIndexed.removeAttr( 'tabindex' ); + this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); } this.$tabIndexed = $tabIndexed; if ( this.tabIndex !== null ) { - this.$tabIndexed.attr( 'tabindex', this.tabIndex ); + this.$tabIndexed.attr( { + // Do not index over disabled elements + tabindex: this.isDisabled() ? -1 : this.tabIndex, + // ChromeVox and NVDA do not seem to inherit this from parent elements + 'aria-disabled': this.isDisabled().toString() + } ); } }; @@ -3783,15 +3793,36 @@ if ( this.tabIndex !== tabIndex ) { if ( this.$tabIndexed ) { if ( tabIndex !== null ) { - this.$tabIndexed.attr( 'tabindex', tabIndex ); + this.$tabIndexed.attr( { + // Do not index over disabled elements + tabindex: this.isDisabled() ? -1 : tabIndex, + // ChromeVox and NVDA do not seem to inherit this from parent elements + 'aria-disabled': this.isDisabled().toString() + } ); } else { - this.$tabIndexed.removeAttr( 'tabindex' ); + this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); } } this.tabIndex = tabIndex; } return this; +}; + +/** + * Handle disable events. + * + * @param {boolean} disabled Element is disabled + */ +OO.ui.TabIndexedElement.prototype.onDisable = function ( disabled ) { + if ( this.$tabIndexed && this.tabIndex !== null ) { + this.$tabIndexed.attr( { + // Do not index over disabled elements + tabindex: disabled ? -1 : this.tabIndex, + // ChromeVox and NVDA do not seem to inherit this from parent elements + 'aria-disabled': disabled.toString() + } ); + } }; /** @@ -4492,7 +4523,7 @@ // This means the item was dragged outside the widget this.$placeholder .css( 'left', 0 ) - .hide(); + .addClass( 'oo-ui-element-hidden' ); }; /** @@ -4556,20 +4587,20 @@ if ( this.sideInsertion ) { this.$placeholder .css( cssOutput ) - .show(); + .removeClass( 'oo-ui-element-hidden' ); } else { this.$placeholder .css( { left: 0, top: 0 } ) - .hide(); + .addClass( 'oo-ui-element-hidden' ); } } else { // This means the item was dragged outside the widget this.$placeholder .css( 'left', 0 ) - .hide(); + .addClass( 'oo-ui-element-hidden' ); } // Prevent default e.preventDefault(); @@ -4589,7 +4620,7 @@ OO.ui.DraggableGroupElement.prototype.unsetDragItem = function () { this.dragItem = null; this.itemDragOver = null; - this.$placeholder.hide(); + this.$placeholder.addClass( 'oo-ui-element-hidden' ); this.sideInsertion = ''; }; @@ -7189,14 +7220,14 @@ } this.retryButton.toggle( recoverable ); this.$errorsTitle.after( this.$errorItems ); - this.$errors.show().scrollTop( 0 ); + this.$errors.removeClass( 'oo-ui-widget-hidden' ).scrollTop( 0 ); }; /** * Hide errors. */ OO.ui.ProcessDialog.prototype.hideErrors = function () { - this.$errors.hide(); + this.$errors.addClass( 'oo-ui-widget-hidden' ); this.$errorItems.remove(); this.$errorItems = null; }; @@ -7714,11 +7745,9 @@ */ this.$content = this.$( '<div>' ); - // Events - this.$element.on( 'DOMNodeInsertedIntoDocument', this.onElementAttach.bind( this ) ); - // Initialization this.toggleMenu( this.showMenu ); + this.updateSizes(); this.$menu .addClass( 'oo-ui-menuLayout-menu' ) .css( this.menuPosition.sizeProperty, this.menuSize ); @@ -7737,39 +7766,23 @@ OO.ui.MenuLayout.static.menuPositions = { top: { sizeProperty: 'height', - positionProperty: 'top', className: 'oo-ui-menuLayout-top' }, after: { sizeProperty: 'width', - positionProperty: 'right', - rtlPositionProperty: 'left', className: 'oo-ui-menuLayout-after' }, bottom: { sizeProperty: 'height', - positionProperty: 'bottom', className: 'oo-ui-menuLayout-bottom' }, before: { sizeProperty: 'width', - positionProperty: 'left', - rtlPositionProperty: 'right', className: 'oo-ui-menuLayout-before' } }; /* Methods */ - -/** - * Handle DOM attachment events - */ -OO.ui.MenuLayout.prototype.onElementAttach = function () { - // getPositionProperty won't know about directionality until the layout is attached - if ( this.showMenu ) { - this.$content.css( this.getPositionProperty(), this.menuSize ); - } -}; /** * Toggle menu. @@ -7812,18 +7825,32 @@ /** * Update menu and content CSS based on current menu size and visibility + * + * This method is called internally when size or position is changed. */ OO.ui.MenuLayout.prototype.updateSizes = function () { if ( this.showMenu ) { this.$menu .css( this.menuPosition.sizeProperty, this.menuSize ) .css( 'overflow', '' ); - this.$content.css( this.getPositionProperty(), this.menuSize ); + // Set offsets on all sides. CSS resets all but one with + // 'important' rules so directionality flips are supported + this.$content.css( { + top: this.menuSize, + right: this.menuSize, + bottom: this.menuSize, + left: this.menuSize + } ); } else { this.$menu .css( this.menuPosition.sizeProperty, 0 ) .css( 'overflow', 'hidden' ); - this.$content.css( this.getPositionProperty(), 0 ); + this.$content.css( { + top: 0, + right: 0, + bottom: 0, + left: 0 + } ); } }; @@ -7844,15 +7871,13 @@ * @chainable */ OO.ui.MenuLayout.prototype.setMenuPosition = function ( position ) { - var positionProperty, positions = this.constructor.static.menuPositions; + var positions = this.constructor.static.menuPositions; if ( !positions[ position ] ) { throw new Error( 'Cannot set position; unsupported position value: ' + position ); } - positionProperty = this.getPositionProperty(); this.$menu.css( this.menuPosition.sizeProperty, '' ); - this.$content.css( positionProperty, '' ); this.$element.removeClass( this.menuPosition.className ); this.menuPosition = positions[ position ]; @@ -7870,19 +7895,6 @@ */ OO.ui.MenuLayout.prototype.getMenuPosition = function () { return this.menuPosition; -}; - -/** - * Get the menu position property. - * - * @return {string} Menu position CSS property - */ -OO.ui.MenuLayout.prototype.getPositionProperty = function () { - if ( this.menuPosition.rtlPositionProperty && this.$element.css( 'direction' ) === 'rtl' ) { - return this.menuPosition.rtlPositionProperty; - } else { - return this.menuPosition.positionProperty; - } }; /** @@ -8085,7 +8097,7 @@ if ( this.outlined ) { show = show === undefined ? !this.outlineVisible : !!show; this.outlineVisible = show; - this.gridLayout.layout( show ? [ 1, 2 ] : [ 0, 1 ], [ 1 ] ); + this.toggleMenu( show ); } return this; @@ -8574,6 +8586,9 @@ * @chainable */ OO.ui.StackLayout.prototype.addItems = function ( items, index ) { + // Update the visibility + this.updateHiddenState( items, this.currentItem ); + // Mixin method OO.ui.GroupElement.prototype.addItems.call( this, items, index ); @@ -8636,18 +8651,10 @@ * @fires set */ OO.ui.StackLayout.prototype.setItem = function ( item ) { - var i, len; - if ( item !== this.currentItem ) { - if ( !this.continuous ) { - for ( i = 0, len = this.items.length; i < len; i++ ) { - this.items[ i ].$element.css( 'display', '' ); - } - } + this.updateHiddenState( this.items, item ); + if ( $.inArray( item, this.items ) !== -1 ) { - if ( !this.continuous ) { - item.$element.css( 'display', 'block' ); - } this.currentItem = item; this.emit( 'set', item ); } else { @@ -8656,6 +8663,30 @@ } return this; +}; + +/** + * Update the visibility of all items in case of non-continuous view. + * + * Ensure all items are hidden except for the selected one. + * This method does nothing when the stack is continuous. + * + * @param {OO.ui.Layout[]} items Item list iterate over + * @param {OO.ui.Layout} [selectedItem] Selected item to show + */ +OO.ui.StackLayout.prototype.updateHiddenState = function ( items, selectedItem ) { + var i, len; + + if ( !this.continuous ) { + for ( i = 0, len = items.length; i < len; i++ ) { + if ( !selectedItem || selectedItem !== items[ i ] ) { + items[ i ].$element.addClass( 'oo-ui-element-hidden' ); + } + } + if ( selectedItem ) { + selectedItem.$element.removeClass( 'oo-ui-element-hidden' ); + } + } }; /** @@ -9815,8 +9846,11 @@ * @inheritdoc */ OO.ui.ButtonWidget.prototype.onMouseDown = function ( e ) { - // Remove the tab-index while the button is down to prevent the button from stealing focus - this.$button.removeAttr( 'tabindex' ); + if ( !this.isDisabled() ) { + // Remove the tab-index while the button is down to prevent the button from stealing focus + this.$button.removeAttr( 'tabindex' ); + } + return OO.ui.ButtonElement.prototype.onMouseDown.call( this, e ); }; @@ -9824,8 +9858,11 @@ * @inheritdoc */ OO.ui.ButtonWidget.prototype.onMouseUp = function ( e ) { - // Restore the tab-index after the button is up to restore the button's accessibility - this.$button.attr( 'tabindex', this.tabIndex ); + if ( !this.isDisabled() ) { + // Restore the tab-index after the button is up to restore the button's accessibility + this.$button.attr( 'tabindex', this.tabIndex ); + } + return OO.ui.ButtonElement.prototype.onMouseUp.call( this, e ); }; @@ -11011,14 +11048,13 @@ this.autosize = !!config.autosize; this.maxRows = config.maxRows; this.validate = null; - this.attached = false; // Clone for resizing if ( this.autosize ) { this.$clone = this.$input .clone() .insertAfter( this.$input ) - .hide(); + .addClass( 'oo-ui-element-hidden' ); } this.setValidation( config.validate ); @@ -11030,7 +11066,6 @@ blur: this.setValidityFlag.bind( this ) } ); this.$element.on( 'DOMNodeInsertedIntoDocument', this.onElementAttach.bind( this ) ); - this.$element.on( 'DOMNodeRemovedFromDocument', this.onElementDetach.bind( this ) ); this.$icon.on( 'mousedown', this.onIconMouseDown.bind( this ) ); this.$indicator.on( 'mousedown', this.onIndicatorMouseDown.bind( this ) ); this.on( 'labelChange', this.updatePosition.bind( this ) ); @@ -11136,20 +11171,10 @@ * @param {jQuery.Event} e Element attach event */ OO.ui.TextInputWidget.prototype.onElementAttach = function () { - this.attached = true; - // If we reattached elsewhere, the valCache is now invalid + // Any previously calculated size is now probably invalid if we reattached elsewhere this.valCache = null; this.adjustSize(); this.positionLabel(); -}; - -/** - * Handle element detach events. - * - * @param {jQuery.Event} e Element detach event - */ -OO.ui.TextInputWidget.prototype.onElementDetach = function () { - this.attached = false; }; /** @@ -11207,7 +11232,7 @@ OO.ui.TextInputWidget.prototype.adjustSize = function () { var scrollHeight, innerHeight, outerHeight, maxInnerHeight, measurementError, idealHeight; - if ( this.multiline && this.autosize && this.attached && this.$input.val() !== this.valCache ) { + if ( this.multiline && this.autosize && this.$input.val() !== this.valCache ) { this.$clone .val( this.$input.val() ) .attr( 'rows', '' ) @@ -12103,14 +12128,13 @@ .addClass( 'oo-ui-popupWidget-head' ) .append( this.$label, this.closeButton.$element ); if ( !config.head ) { - this.$head.hide(); + this.$head.addClass( 'oo-ui-element-hidden' ); } this.$popup .addClass( 'oo-ui-popupWidget-popup' ) .append( this.$head, this.$body ); this.$element - .hide() - .addClass( 'oo-ui-popupWidget' ) + .addClass( 'oo-ui-popupWidget oo-ui-element-hidden' ) .append( this.$popup, this.$anchor ); // Move content, which was added to #$element by OO.ui.Widget, to the body if ( config.$content instanceof jQuery ) { @@ -13116,9 +13140,8 @@ // Initialization this.$element - .hide() - .attr( 'role', 'menu' ) - .addClass( 'oo-ui-menuSelectWidget' ); + .addClass( 'oo-ui-menuSelectWidget oo-ui-element-hidden' ) + .attr( 'role', 'menu' ); }; /* Setup */ -- To view, visit https://gerrit.wikimedia.org/r/188577 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I8e0ea18c23df5fe0530cc841799830c4f0082eff Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Jforrester <jforres...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits