From b5c68dcf421d852057e5ba8f7a803475a64f6af7 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Tue, 2 Dec 2014 11:04:30 -0800 Subject: [PATCH] Update OOjs UI to v0.2.4 Release notes: https://git.wikimedia.org/blob/oojs%2Fui.git/v0.2.4/History.md Change-Id: Ic1afd83022ad8e6eee0ca89d94f6df23ba938684 --- resources/lib/oojs-ui/i18n/ca.json | 2 + resources/lib/oojs-ui/i18n/hr.json | 2 + resources/lib/oojs-ui/oojs-ui-apex.css | 4 +- resources/lib/oojs-ui/oojs-ui-apex.js | 4 +- resources/lib/oojs-ui/oojs-ui-apex.svg.css | 4 +- resources/lib/oojs-ui/oojs-ui-mediawiki.css | 4 +- resources/lib/oojs-ui/oojs-ui-mediawiki.js | 4 +- .../lib/oojs-ui/oojs-ui-mediawiki.svg.css | 4 +- resources/lib/oojs-ui/oojs-ui.js | 112 ++++++++++++++---- 9 files changed, 107 insertions(+), 33 deletions(-) diff --git a/resources/lib/oojs-ui/i18n/ca.json b/resources/lib/oojs-ui/i18n/ca.json index c3e80feaee..f1c6ea3865 100644 --- a/resources/lib/oojs-ui/i18n/ca.json +++ b/resources/lib/oojs-ui/i18n/ca.json @@ -15,6 +15,8 @@ "ooui-outline-control-move-down": "Baixa element", "ooui-outline-control-move-up": "Puja element", "ooui-toolbar-more": "Més", + "ooui-toolgroup-expand": "Més", + "ooui-toolgroup-collapse": "Menys", "ooui-dialog-process-dismiss": "Descarta", "ooui-dialog-process-retry": "Torneu-ho a provar" } diff --git a/resources/lib/oojs-ui/i18n/hr.json b/resources/lib/oojs-ui/i18n/hr.json index c3724cfa85..911889846a 100644 --- a/resources/lib/oojs-ui/i18n/hr.json +++ b/resources/lib/oojs-ui/i18n/hr.json @@ -11,6 +11,8 @@ "ooui-outline-control-move-up": "Premjesti stavku gore", "ooui-outline-control-remove": "Ukloni", "ooui-toolbar-more": "Više", + "ooui-toolgroup-expand": "Više", + "ooui-toolgroup-collapse": "Manje", "ooui-dialog-message-accept": "U redu", "ooui-dialog-message-reject": "Odustani", "ooui-dialog-process-error": "Nešto je pošlo po zlu", diff --git a/resources/lib/oojs-ui/oojs-ui-apex.css b/resources/lib/oojs-ui/oojs-ui-apex.css index 10999330c9..275607957b 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.2.3 + * OOjs UI v0.2.4 * 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-26T23:37:12Z + * Date: 2014-12-02T18:45:30Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; diff --git a/resources/lib/oojs-ui/oojs-ui-apex.js b/resources/lib/oojs-ui/oojs-ui-apex.js index ad755574da..bf7e39feda 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.2.3 + * OOjs UI v0.2.4 * 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-26T23:37:00Z + * Date: 2014-12-02T18:45:19Z */ /* Instantiation */ diff --git a/resources/lib/oojs-ui/oojs-ui-apex.svg.css b/resources/lib/oojs-ui/oojs-ui-apex.svg.css index aa2dfb4065..7d4acb511c 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.2.3 + * OOjs UI v0.2.4 * 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-26T23:37:12Z + * Date: 2014-12-02T18:45:30Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.css index d8d365387f..e3609918a5 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.2.3 + * OOjs UI v0.2.4 * 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-26T23:37:12Z + * Date: 2014-12-02T18:45:30Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js index 89338d65bc..875dab4d5e 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.2.3 + * OOjs UI v0.2.4 * 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-26T23:37:00Z + * Date: 2014-12-02T18:45:19Z */ /** * @class diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css index d8aedd3f14..644eadc80b 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.2.3 + * OOjs UI v0.2.4 * 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-26T23:37:12Z + * Date: 2014-12-02T18:45:30Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index d42139e892..120943498a 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.2.3 + * OOjs UI v0.2.4 * 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-26T23:37:00Z + * Date: 2014-12-02T18:45:19Z */ ( function ( OO ) { @@ -1751,25 +1751,46 @@ OO.ui.Window.prototype.getSize = function () { }; /** - * Get the height of the dialog contents. + * Disable transitions on window's frame for the duration of the callback function, then enable them + * back. * - * @return {number} Content height + * @private + * @param {Function} callback Function to call while transitions are disabled */ -OO.ui.Window.prototype.getContentHeight = function () { +OO.ui.Window.prototype.withoutSizeTransitions = function ( callback ) { // Temporarily resize the frame so getBodyHeight() can use scrollHeight measurements. // Disable transitions first, otherwise we'll get values from when the window was animating. - var bodyHeight, oldHeight, oldTransition, + var oldTransition, styleObj = this.$frame[0].style; oldTransition = styleObj.transition || styleObj.OTransition || styleObj.MsTransition || styleObj.MozTransition || styleObj.WebkitTransition; styleObj.transition = styleObj.OTransition = styleObj.MsTransition = styleObj.MozTransition = styleObj.WebkitTransition = 'none'; - oldHeight = styleObj.height; - styleObj.height = '1px'; - bodyHeight = this.getBodyHeight(); - styleObj.height = oldHeight; + callback(); + // Force reflow to make sure the style changes done inside callback really are not transitioned + this.$frame.height(); styleObj.transition = styleObj.OTransition = styleObj.MsTransition = styleObj.MozTransition = styleObj.WebkitTransition = oldTransition; +}; + +/** + * Get the height of the dialog contents. + * + * @return {number} Content height + */ +OO.ui.Window.prototype.getContentHeight = function () { + var bodyHeight, + win = this, + styleObj = this.$frame[0].style; + + // Temporarily resize the frame so getBodyHeight() can use scrollHeight measurements. + // Disable transitions first, otherwise we'll get values from when the window was animating. + this.withoutSizeTransitions( function () { + var oldHeight = styleObj.height; + styleObj.height = '1px'; + bodyHeight = win.getBodyHeight(); + styleObj.height = oldHeight; + } ); return Math.round( // Add buffer for border @@ -1965,17 +1986,31 @@ OO.ui.Window.prototype.setSize = function ( size ) { * @chainable */ OO.ui.Window.prototype.setDimensions = function ( dim ) { - // Apply width before height so height is not based on wrapping content using the wrong width + var height, + win = this, + styleObj = this.$frame[0].style; + + // Calculate the height we need to set using the correct width + if ( dim.height === undefined ) { + this.withoutSizeTransitions( function () { + var oldWidth = styleObj.width; + win.$frame.css( 'width', dim.width || '' ); + height = win.getContentHeight(); + styleObj.width = oldWidth; + } ); + } else { + height = dim.height; + } + this.$frame.css( { width: dim.width || '', minWidth: dim.minWidth || '', - maxWidth: dim.maxWidth || '' - } ); - this.$frame.css( { - height: ( dim.height !== undefined ? dim.height : this.getContentHeight() ) || '', + maxWidth: dim.maxWidth || '', + height: height || '', minHeight: dim.minHeight || '', maxHeight: dim.maxHeight || '' } ); + return this; }; @@ -5924,6 +5959,20 @@ OO.ui.MessageDialog.static.actions = [ /* Methods */ +/** + * @inheritdoc + */ +OO.ui.MessageDialog.prototype.setManager = function ( manager ) { + OO.ui.MessageDialog.super.prototype.setManager.call( this, manager ); + + // Events + this.manager.connect( this, { + resize: 'onResize' + } ); + + return this; +}; + /** * @inheritdoc */ @@ -5932,6 +5981,18 @@ OO.ui.MessageDialog.prototype.onActionResize = function ( action ) { return OO.ui.MessageDialog.super.prototype.onActionResize.call( this, action ); }; +/** + * Handle window resized events. + */ +OO.ui.MessageDialog.prototype.onResize = function () { + var dialog = this; + dialog.fitActions(); + // Wait for CSS transition to finish and do it again :( + setTimeout( function () { + dialog.fitActions(); + }, 300 ); +}; + /** * Toggle action layout between vertical and horizontal. * @@ -6093,10 +6154,11 @@ OO.ui.MessageDialog.prototype.attachActions = function () { special.primary.toggleFramed( false ); } - this.manager.updateWindowSize( this ); - this.fitActions(); - - this.$body.css( 'bottom', this.$foot.outerHeight( true ) ); + if ( !this.isOpening() ) { + // If the dialog is currently opening, this will be called automatically soon. + // This also calls #fitActions. + this.manager.updateWindowSize( this ); + } }; /** @@ -6106,6 +6168,7 @@ OO.ui.MessageDialog.prototype.attachActions = function () { */ OO.ui.MessageDialog.prototype.fitActions = function () { var i, len, action, + previous = this.verticalActionLayout, actions = this.actions.get(); // Detect clipping @@ -6117,6 +6180,12 @@ OO.ui.MessageDialog.prototype.fitActions = function () { break; } } + + if ( this.verticalActionLayout !== previous ) { + this.$body.css( 'bottom', this.$foot.outerHeight( true ) ); + // We changed the layout, window height might need to be updated. + this.manager.updateWindowSize( this ); + } }; /** @@ -9874,12 +9943,13 @@ OO.ui.TextInputWidget.prototype.setReadOnly = function ( state ) { OO.ui.TextInputWidget.prototype.adjustSize = function () { var $clone, scrollHeight, innerHeight, outerHeight, maxInnerHeight, measurementError, idealHeight; - if ( this.multiline && this.autosize ) { + if ( this.multiline && this.autosize && this.$input.val() !== this.valCache ) { $clone = this.$input.clone() .val( this.$input.val() ) // Set inline height property to 0 to measure scroll height - .css( { height: 0 } ) + .css( 'height', 0 ) .insertAfter( this.$input ); + this.valCache = this.$input.val(); scrollHeight = $clone[0].scrollHeight; // Remove inline height property to measure natural heights $clone.css( 'height', '' ); -- 2.20.1