From 2b28b46a9ca3db60b70240cb7817e8fc8e4426c9 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Fri, 14 Feb 2014 17:59:15 -0800 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (424b40373e) 554683c Allow whitespace labels 3a9a4c1 Invert dependencies for OutlineItemWidget and PageLayout 51f7972 Fix occurrences of @mixin to be @mixins 424b403 FieldLayout, styling improvements and standardization Change-Id: Iee8653d41c85d8f3a927e9a32587cdc3f42e0412 --- resources/oojs-ui/oojs-ui.js | 418 +++++++++++++++++------------- resources/oojs-ui/oojs-ui.svg.css | 112 ++++++-- 2 files changed, 332 insertions(+), 198 deletions(-) diff --git a/resources/oojs-ui/oojs-ui.js b/resources/oojs-ui/oojs-ui.js index 7412270060..63ecf98ee4 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 (7d3223b8f4) + * OOjs UI v0.1.0-pre (424b40373e) * 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: Thu Feb 13 2014 18:36:08 GMT-0800 (PST) + * Date: Fri Feb 14 2014 17:57:32 GMT-0800 (PST) */ ( function () { @@ -179,7 +179,7 @@ OO.ui.Element = function OoUiElement( config ) { this.elementGroup = null; // Initialization - if ( Array.isArray( config.classes ) ) { + if ( $.isArray( config.classes ) ) { this.$element.addClass( config.classes.join( ' ' ) ); } if ( config.$content ) { @@ -1628,7 +1628,7 @@ OO.ui.Dialog.prototype.close = function ( data ) { * @class * @abstract * @extends OO.ui.Element - * @mixin OO.EventEmitter + * @mixins OO.EventEmitter * * @constructor * @param {Object} [config] Configuration options @@ -1658,7 +1658,7 @@ OO.mixinClass( OO.ui.Layout, OO.EventEmitter ); * @class * @abstract * @extends OO.ui.Element - * @mixin OO.EventEmitter + * @mixins OO.EventEmitter * * @constructor * @param {Object} [config] Configuration options @@ -1824,8 +1824,12 @@ OO.ui.ButtonedElement.prototype.setActive = function ( value ) { * * @constructor * @param {jQuery} $clippable Nodes to clip, assigned to #$clippable + * @param {Object} [config] Configuration options */ -OO.ui.ClippableElement = function OoUiClippableElement( $clippable ) { +OO.ui.ClippableElement = function OoUiClippableElement( $clippable, config ) { + // Configuration initialization + config = config || {}; + // Properties this.$clippable = $clippable; this.clipping = false; @@ -2012,7 +2016,7 @@ OO.ui.FlaggableElement.prototype.setFlags = function ( flags ) { var i, len, flag, classPrefix = 'oo-ui-flaggableElement-'; - if ( Array.isArray( flags ) ) { + if ( $.isArray( flags ) ) { for ( i = 0, len = flags.length; i < len; i++ ) { flag = flags[i]; // Set @@ -2021,7 +2025,7 @@ OO.ui.FlaggableElement.prototype.setFlags = function ( flags ) { } } else if ( OO.isPlainObject( flags ) ) { for ( flag in flags ) { - if ( flags[flags] ) { + if ( flags[flag] ) { // Set this.flags[flag] = true; this.$element.addClass( classPrefix + flag ); @@ -2085,7 +2089,7 @@ OO.ui.GroupElement.prototype.addItems = function ( items, index ) { item = items[i]; // Check if item exists then remove it first, effectively "moving" it - currentIndex = this.items.indexOf( item ); + currentIndex = $.inArray( item, this.items ); if ( currentIndex >= 0 ) { this.removeItems( [ item ] ); // Adjust index to compensate for removal @@ -2136,7 +2140,7 @@ OO.ui.GroupElement.prototype.removeItems = function ( items ) { // Remove specific items for ( i = 0, len = items.length; i < len; i++ ) { item = items[i]; - index = this.items.indexOf( item ); + index = $.inArray( item, this.items ); if ( index !== -1 ) { if ( this.aggregate ) { item.disconnect( this ); @@ -2419,6 +2423,9 @@ OO.ui.LabeledElement.static.label = null; /** * Set the label. * + * An empty string will result in the label being hidden. A string containing only whitespace will + * be converted to a single   + * * @method * @param {jQuery|string|Function|null} label Label nodes; text; a function that retuns nodes or * text; or null for no label @@ -2428,8 +2435,13 @@ OO.ui.LabeledElement.prototype.setLabel = function ( label ) { var empty = false; this.label = label = OO.ui.resolveMsg( label ) || null; - if ( typeof label === 'string' && label.trim() ) { - this.$label.text( label ); + if ( typeof label === 'string' && label.length ) { + if ( label.match( /^\s*$/ ) ) { + // Convert whitespace only string to a single non-breaking space + this.$label.html( ' ' ); + } else { + this.$label.text( label ); + } } else if ( label instanceof jQuery ) { this.$label.empty().append( label ); } else { @@ -2847,20 +2859,20 @@ OO.ui.Tool.prototype.destroy = function () { * * @constructor * @param {OO.Factory} toolFactory Factory for creating tools - * @param {Object} [options] Configuration options + * @param {Object} [config] Configuration options * @cfg {boolean} [actions] Add an actions section opposite to the tools * @cfg {boolean} [shadow] Add a shadow below the toolbar */ -OO.ui.Toolbar = function OoUiToolbar( toolFactory, options ) { +OO.ui.Toolbar = function OoUiToolbar( toolFactory, config ) { // Configuration initialization - options = options || {}; + config = config || {}; // Parent constructor - OO.ui.Element.call( this, options ); + OO.ui.Element.call( this, config ); // Mixin constructors OO.EventEmitter.call( this ); - OO.ui.GroupElement.call( this, this.$( '
' ) ); + OO.ui.GroupElement.call( this, this.$( '
' ), config ); // Properties this.toolFactory = toolFactory; @@ -2878,12 +2890,12 @@ OO.ui.Toolbar = function OoUiToolbar( toolFactory, options ) { // Initialization this.$group.addClass( 'oo-ui-toolbar-tools' ); this.$bar.addClass( 'oo-ui-toolbar-bar' ).append( this.$group ); - if ( options.actions ) { + if ( config.actions ) { this.$actions.addClass( 'oo-ui-toolbar-actions' ); this.$bar.append( this.$actions ); } this.$bar.append( '
' ); - if ( options.shadow ) { + if ( config.shadow ) { this.$bar.append( '
' ); } this.$element.addClass( 'oo-ui-toolbar' ).append( this.$bar ); @@ -3115,7 +3127,7 @@ OO.ui.ToolFactory.prototype.extract = function ( collection, used ) { } } } - } else if ( Array.isArray( collection ) ) { + } else if ( $.isArray( collection ) ) { for ( i = 0, len = collection.length; i < len; i++ ) { item = collection[i]; // Allow plain strings as shorthand for named tools @@ -3182,7 +3194,7 @@ OO.ui.ToolGroup = function OoUiToolGroup( toolbar, config ) { OO.ui.Widget.call( this, config ); // Mixin constructors - OO.ui.GroupElement.call( this, this.$( '
' ) ); + OO.ui.GroupElement.call( this, this.$( '
' ), config ); // Properties this.toolbar = toolbar; @@ -3443,13 +3455,18 @@ OO.ui.ToolGroup.prototype.destroy = function () { /** * Layout made of a fieldset and optional legend. * + * Just add OO.ui.FieldLayout items. + * * @class * @extends OO.ui.Layout * @mixins OO.ui.LabeledElement + * @mixins OO.ui.IconedElement + * @mixins OO.ui.GroupElement * * @constructor * @param {Object} [config] Configuration options * @cfg {string} [icon] Symbolic icon name + * @cfg {OO.ui.FieldLayout[]} [items] Items to add */ OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) { // Config initialization @@ -3459,18 +3476,16 @@ OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) { OO.ui.Layout.call( this, config ); // Mixin constructors + OO.ui.IconedElement.call( this, this.$( '
' ), config ); OO.ui.LabeledElement.call( this, this.$( '' ), config ); + OO.ui.GroupElement.call( this, this.$( '
' ), config ); // Initialization - if ( config.icon ) { - this.$element.addClass( 'oo-ui-fieldsetLayout-decorated' ); - this.$label.addClass( 'oo-ui-icon-' + config.icon ); - } - this.$element.addClass( 'oo-ui-fieldsetLayout' ); - if ( config.icon || config.label ) { - this.$element - .addClass( 'oo-ui-fieldsetLayout-labeled' ) - .append( this.$label ); + this.$element + .addClass( 'oo-ui-fieldsetLayout' ) + .append( this.$icon, this.$label, this.$group ); + if ( $.isArray( config.items ) ) { + this.addItems( config.items ); } }; @@ -3478,11 +3493,119 @@ OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) { OO.inheritClass( OO.ui.FieldsetLayout, OO.ui.Layout ); +OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.IconedElement ); OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.LabeledElement ); +OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.GroupElement ); /* Static Properties */ OO.ui.FieldsetLayout.static.tagName = 'fieldset'; +/** + * Layout made of a field and optional label. + * + * @class + * @extends OO.ui.Layout + * @mixins OO.ui.LabeledElement + * + * Available label alignment modes include: + * - 'left': Label is before the field and aligned away from it, best for when the user will be + * scanning for a specific label in a form with many fields + * - 'right': Label is before the field and aligned toward it, best for forms the user is very + * familiar with and will tab through field checking quickly to verify which field they are in + * - 'top': Label is before the field and above it, best for when the use will need to fill out all + * fields from top to bottom in a form with few fields + * - 'inline': Label is after the field and aligned toward it, best for small boolean fields like + * checkboxes or radio buttons + * + * @constructor + * @param {OO.ui.Widget} field Field widget + * @param {Object} [config] Configuration options + * @cfg {string} [align='left'] Alignment mode, either 'left', 'right', 'top' or 'inline' + */ +OO.ui.FieldLayout = function OoUiFieldLayout( field, config ) { + // Config initialization + config = $.extend( { 'align': 'left' }, config ); + + // Parent constructor + OO.ui.Layout.call( this, config ); + + // Mixin constructors + OO.ui.LabeledElement.call( this, this.$( '