/*!
- * OOjs UI v0.1.0-pre (a290673bbd)
+ * OOjs UI v0.1.0-pre (7788dc6700)
* 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: Wed Feb 12 2014 13:52:08 GMT-0800 (PST)
+ * Date: Thu Feb 13 2014 13:56:07 GMT-0800 (PST)
*/
( function () {
// Properties
this.$ = config.$ || OO.ui.Element.getJQuery( document );
this.$element = this.$( this.$.context.createElement( this.getTagName() ) );
+ this.elementGroup = null;
// Initialization
if ( Array.isArray( config.classes ) ) {
return OO.ui.Element.getClosestScrollableContainer( this.$element[0] );
};
+/**
+ * Get group element is in.
+ *
+ * @returns {OO.ui.GroupElement|null} Group element, null if none
+ */
+OO.ui.Element.prototype.getElementGroup = function () {
+ return this.elementGroup;
+};
+
+/**
+ * Set group element is in.
+ *
+ * @param {OO.ui.GroupElement|null} group Group element, null if none
+ * @chainable
+ */
+OO.ui.Element.prototype.setElementGroup = function ( group ) {
+ this.elementGroup = group;
+ return this;
+};
+
/**
* Scroll element into view
*
OO.EventEmitter.call( this );
// Properties
- this.disabled = config.disabled;
+ this.disabled = null;
+ this.wasDisabled = null;
// Initialization
this.$element.addClass( 'oo-ui-widget' );
- this.setDisabled( this.disabled );
+ this.setDisabled( !!config.disabled );
};
/* Inheritance */
OO.mixinClass( OO.ui.Widget, OO.EventEmitter );
+/* Events */
+
+/**
+ * @event disable
+ * @param {boolean} disabled Widget is disabled
+ */
+
/* Methods */
/**
return this.disabled;
};
+/**
+ * Update the disabled state, in case of changes in parent widget.
+ *
+ * @method
+ * @chainable
+ */
+OO.ui.Widget.prototype.updateDisabled = function () {
+ this.setDisabled( this.disabled );
+ return this;
+};
+
/**
* Set the disabled state of the widget.
*
* This should probably change the widgets's appearance and prevent it from being used.
*
* @method
- * @param {boolean} disabled Disable button
+ * @param {boolean} disabled Disable widget
* @chainable
*/
OO.ui.Widget.prototype.setDisabled = function ( disabled ) {
+ var isDisabled;
+
this.disabled = !!disabled;
- if ( this.disabled ) {
- this.$element.addClass( 'oo-ui-widget-disabled' );
- } else {
- this.$element.removeClass( 'oo-ui-widget-disabled' );
+ isDisabled = this.isDisabled();
+ if ( isDisabled !== this.wasDisabled ) {
+ this.$element.toggleClass( 'oo-ui-widget-disabled', isDisabled );
+ this.emit( 'disable', isDisabled );
}
+ this.wasDisabled = isDisabled;
return this;
};
/**
}
item.connect( this, events );
}
+ item.setElementGroup( this );
$items = $items.add( item.$element );
}
if ( this.aggregate ) {
item.disconnect( this );
}
+ item.setElementGroup( null );
this.items.splice( index, 1 );
item.$element.detach();
this.$items = this.$items.not( item.$element );
item.disconnect( this );
}
}
+ item.setElementGroup( null );
this.items = [];
this.$items.detach();
this.$items = this.$( [] );
OO.ui.PopupTool.prototype.onUpdateState = function () {
this.setActive( false );
};
+/**
+ * Group widget.
+ *
+ * Use together with OO.ui.ItemWidget to make disabled state inheritable.
+ *
+ * @class
+ * @abstract
+ * @extends OO.ui.GroupElement
+ *
+ * @constructor
+ * @param {jQuery} $group Container node, assigned to #$group
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.GroupWidget = function OoUiGroupWidget( $element, config ) {
+ // Parent constructor
+ OO.ui.GroupElement.call( this, $element, config );
+};
+
+/* Inheritance */
+
+OO.inheritClass( OO.ui.GroupWidget, OO.ui.GroupElement );
+
+/* Methods */
+
+/**
+ * Set the disabled state of the widget.
+ *
+ * This will also update the disabled state of child widgets.
+ *
+ * @method
+ * @param {boolean} disabled Disable widget
+ * @chainable
+ */
+OO.ui.GroupWidget.prototype.setDisabled = function ( disabled ) {
+ var i, len;
+
+ // Parent method
+ OO.ui.Widget.prototype.setDisabled.call( this, disabled );
+
+ // During construction, #setDisabled is called before the OO.ui.GroupElement constructor
+ if ( this.items ) {
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ this.items[i].updateDisabled();
+ }
+ }
+
+ return this;
+};
+/**
+ * Item widget.
+ *
+ * Use together with OO.ui.GroupWidget to make disabled state inheritable.
+ *
+ * @class
+ * @abstract
+ *
+ * @constructor
+ */
+OO.ui.ItemWidget = function OoUiItemWidget() {
+ //
+};
+
+/* Methods */
+
+/**
+ * Check if widget is disabled.
+ *
+ * Checks parent if present, making disabled state inheritable.
+ *
+ * @returns {boolean} Widget is disabled
+ */
+OO.ui.ItemWidget.prototype.isDisabled = function () {
+ return this.disabled ||
+ ( this.elementGroup instanceof OO.ui.Widget && this.elementGroup.isDisabled() );
+};
+
+/**
+ * Set group element is in.
+ *
+ * @param {OO.ui.GroupElement|null} group Group element, null if none
+ * @chainable
+ */
+OO.ui.ItemWidget.prototype.setElementGroup = function ( group ) {
+ // Parent method
+ OO.ui.Element.prototype.setElementGroup.call( this, group );
+
+ // Initialize item disabled states
+ this.updateDisabled();
+
+ return this;
+};
/**
* Container for multiple related buttons.
*
OO.ui.Widget.call( this, config );
// Mixin constructors
+ OO.ui.ItemWidget.call( this );
OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
OO.inheritClass( OO.ui.OptionWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.OptionWidget, OO.ui.ItemWidget );
OO.mixinClass( OO.ui.OptionWidget, OO.ui.IconedElement );
OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabeledElement );
OO.mixinClass( OO.ui.OptionWidget, OO.ui.IndicatedElement );
OO.ui.Widget.call( this, config );
// Mixin constructors
- OO.ui.GroupElement.call( this, this.$element, config );
+ OO.ui.GroupWidget.call( this, this.$element, config );
// Properties
this.pressed = false;
OO.inheritClass( OO.ui.SelectWidget, OO.ui.Widget );
+// Need to mixin base class as well
OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupElement );
+OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupWidget );
+
/* Events */
/**
/*!
- * OOjs UI v0.1.0-pre-svg (a290673bbd)
+ * OOjs UI v0.1.0-pre-svg (7788dc6700)
* 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: Wed Feb 12 2014 13:52:08 GMT-0800 (PST)
+ * Date: Thu Feb 13 2014 13:56:07 GMT-0800 (PST)
*/
/*csslint vendor-prefix:false */
.oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator {
margin-right: -0.75em;
}
+.oo-ui-buttonedElement.oo-ui-widget-disabled .oo-ui-buttonedElement-button {
+ cursor: default;
+}
.oo-ui-buttonedElement-frameless {
display: inline-block;
border-radius: 0.3em;
vertical-align: top;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
- box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
text-align: center;
/* Animation */
.oo-ui-buttonGroupWidget {
display: inline-block;
border-radius: 0.3em;
- box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
}
.oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button {
border-radius: 0;
margin-bottom: -1px;
margin-left: -1px;
- box-shadow: none;
}
.oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:first-child .oo-ui-buttonedElement-button {
display: inline-block;
font-size: 1em;
font-family: sans-serif;
- background-color: #f7f7f7;
+ background-color: #fff;
border: solid 1px #ccc;
box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
padding: 0.5em;
resize: none;
/* Animation */
- -webkit-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
- -moz-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
- -o-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
- transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
+ -webkit-transition: border-color 200ms, box-shadow 200ms;
+ -moz-transition: border-color 200ms, box-shadow 200ms;
+ -o-transition: border-color 200ms, box-shadow 200ms;
+ transition: border-color 200ms, box-shadow 200ms;
}
.oo-ui-textInputWidget-pending input,
outline: none;
border-color: #a7dcff;
box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
- background-color: #fff;
}
.oo-ui-textInputWidget input[readonly],
.oo-ui-widget-disabled.oo-ui-textInputWidget textarea,
.oo-ui-widget-disabled.oo-ui-textInputWidget textarea:focus {
color: #ccc;
+ border-color: #ddd;
text-shadow: 0 1px 1px #fff;
}
.oo-ui-buttonSelectWidget {
display: inline-block;
border-radius: 0.3em;
- box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
}
.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button {
border-radius: 0;
margin-left: -1px;
- box-shadow: none;
}
.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button {
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
opacity: 0.5;
+ cursor: default;
}
.oo-ui-toggleSwitchWidget-grip {
left: 0;
border-radius: 1em;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
- cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
}
/* Icons */
-.oo-ui-icon-add-item {
- /* @embed */
- background-image: url(images/icons/add-item.png);
-}
-
-.oo-ui-icon-advanced {
- /* @embed */
- background-image: url(images/icons/advanced.png);
-}
-
-.oo-ui-icon-alert {
- /* @embed */
- background-image: url(images/icons/alert.png);
-}
-
-.oo-ui-icon-check {
- /* @embed */
- background-image: url(images/icons/check.png);
-}
-
-.oo-ui-icon-clear {
- /* @embed */
- background-image: url(images/icons/clear.png);
-}
-
-.oo-ui-icon-close {
- /* @embed */
- background-image: url(images/icons/close.png);
-}
-
-.oo-ui-icon-code {
- /* @embed */
- background-image: url(images/icons/code.png);
-}
-
-.oo-ui-icon-collapse {
- /* @embed */
- background-image: url(images/icons/collapse.png);
-}
-
-.oo-ui-icon-comment {
- /* @embed */
- background-image: url(images/icons/comment.png);
-}
-
-.oo-ui-icon-expand {
- /* @embed */
- background-image: url(images/icons/expand.png);
-}
-
-.oo-ui-icon-help {
- /* @embed */
- background-image: url(images/icons/help.png);
-}
-
-.oo-ui-icon-link {
- /* @embed */
- background-image: url(images/icons/link.png);
-}
-
-.oo-ui-icon-menu {
- /* @embed */
- background-image: url(images/icons/menu.png);
-}
-
-.oo-ui-icon-next {
- /* @embed */
- background-image: url(images/icons/move-ltr.png);
-}
-
-.oo-ui-icon-picture {
- /* @embed */
- background-image: url(images/icons/picture.png);
-}
-
-.oo-ui-icon-previous {
- /* @embed */
- background-image: url(images/icons/move-rtl.png);
-}
-
-.oo-ui-icon-redo {
- /* @embed */
- background-image: url(images/icons/arched-arrow-ltr.png);
-}
-
-.oo-ui-icon-remove {
- /* @embed */
- background-image: url(images/icons/remove.png);
-}
-
-.oo-ui-icon-search {
- /* @embed */
- background-image: url(images/icons/search.png);
-}
-
-.oo-ui-icon-settings {
- /* @embed */
- background-image: url(images/icons/settings.png);
-}
-
-.oo-ui-icon-tag {
- /* @embed */
- background-image: url(images/icons/tag.png);
-}
-
-.oo-ui-icon-undo {
- /* @embed */
- background-image: url(images/icons/arched-arrow-rtl.png);
-}
-
-.oo-ui-icon-window {
- /* @embed */
- background-image: url(images/icons/window.png);
-}
-
-/* Indicators */
-
-.oo-ui-indicator-down {
- /* @embed */
- background-image: url(images/indicators/down.png);
-}
-
-.oo-ui-indicator-required {
- /* @embed */
- background-image: url(images/indicators/required.png);
-}
-
-.oo-ui-indicator-up {
- /* @embed */
- background-image: url(images/indicators/up.png);
-}
-/* Icons */
-
.oo-ui-icon-add-item {
/* @embed */
background-image: url(images/icons/add-item.svg);