"ext-xml": "*",
"liuggio/statsd-php-client": "1.0.18",
"mediawiki/at-ease": "1.1.0",
- "oojs/oojs-ui": "0.21.1",
+ "oojs/oojs-ui": "0.21.2",
"oyejorge/less.php": "1.7.0.14",
"php": ">=5.5.9",
"psr/log": "1.0.2",
"Milicevic01",
"Nikola Smolenski",
"Милан Јелисавчић",
- "Zoranzoki21"
+ "Zoranzoki21",
+ "Obsuser"
]
},
- "ooui-outline-control-move-down": "Премести ставку на доле",
- "ooui-outline-control-move-up": "Премести ставку на горе",
+ "ooui-outline-control-move-down": "Премести ставку надоле",
+ "ooui-outline-control-move-up": "Премести ставку нагоре",
"ooui-outline-control-remove": "Уклони ставку",
"ooui-toolbar-more": "Више",
"ooui-toolgroup-expand": "Више",
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
*/
( function ( OO ) {
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
*/
.oo-ui-element-hidden {
display: none !important;
margin-right: 0;
}
.oo-ui-progressBarWidget {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
max-width: 50em;
background-color: #fff;
border: 1px solid #ccc;
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
*/
.oo-ui-element-hidden {
display: none !important;
opacity: 0.51;
}
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
- min-height: 2.5em;
border-radius: 2px;
- padding: 0.625em 0.9375em 0.546875em;
+ padding-left: 0.9375em;
+ padding-right: 0.9375em;
}
.oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button {
+ padding-top: 2.34375em;
+ padding-bottom: 0;
padding-left: 2.03125em;
}
.oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
left: 0.46875em;
}
.oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
+ padding-top: 2.34375em;
padding-right: 2.03125em;
+ padding-bottom: 0;
}
.oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
right: 1.015625em;
.oo-ui-buttonElement-framed.oo-ui-indicatorElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
padding-right: 2.5em;
}
+.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button {
+ padding-top: 0.625em;
+ padding-bottom: 0.546875em;
+}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background-color: #c8ccd1;
color: #fff;
outline: 0;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
- color: #d33;
+ color: #d73333;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
background-color: #fff;
.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
opacity: 0.51;
}
-.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-labelElement-label {
+.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label {
color: #72777d;
text-shadow: 0 1px 1px #fff;
}
}
.oo-ui-textInputWidget.oo-ui-iconElement .oo-ui-iconElement-icon {
left: 0.46875em;
+}
+.oo-ui-textInputWidget.oo-ui-iconElement textarea + .oo-ui-iconElement-icon {
max-height: 2.5em;
}
.oo-ui-textInputWidget.oo-ui-indicatorElement input,
margin-right: 0;
}
.oo-ui-progressBarWidget {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
max-width: 50em;
background-color: #fff;
border: 1px solid #a2a9b1;
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
*/
( function ( OO ) {
// Properties
this.$ = $;
+ this.elementId = null;
this.visible = true;
this.data = config.data;
this.$element = config.$element ||
this.$element.addClass( config.classes.join( ' ' ) );
}
if ( config.id ) {
- this.$element.attr( 'id', config.id );
+ this.setElementId( config.id );
}
if ( config.text ) {
this.$element.text( config.text );
return this;
};
+/**
+ * Set the element has an 'id' attribute.
+ *
+ * @param {string} id
+ * @chainable
+ */
+OO.ui.Element.prototype.setElementId = function ( id ) {
+ this.elementId = id;
+ this.$element.attr( 'id', id );
+ return this;
+};
+
+/**
+ * Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing,
+ * and return its value.
+ *
+ * @return {string}
+ */
+OO.ui.Element.prototype.getElementId = function () {
+ if ( this.elementId === null ) {
+ this.setElementId( OO.ui.generateElementId() );
+ }
+ return this.elementId;
+};
+
/**
* Check if element supports one or more methods.
*
* @cfg {jQuery} [$overlay] Render the popup into a separate layer. This configuration is useful in cases where
* the expanded popup is larger than its containing `<div>`. The specified overlay layer is usually on top of the
* containing `<div>` and has a larger area. By default, the popup uses relative positioning.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
*/
OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) {
// Parent constructor
this.$element
.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' )
.attr( 'role', 'listbox' );
+ this.setFocusOwner( this.$element );
if ( Array.isArray( config.items ) ) {
this.addItems( config.items );
}
}
if ( event.target !== this.$element[ 0 ] ) {
- this.$element.focus();
+ this.$focusOwner.focus();
}
};
}
}
if ( changed ) {
+ if ( item ) {
+ this.$focusOwner.attr( 'aria-activedescendant', item.getElementId() );
+ } else {
+ this.$focusOwner.removeAttr( 'aria-activedescendant' );
+ }
this.emit( 'highlight', item );
}
}
}
if ( changed ) {
+ if ( item && !item.constructor.static.highlightable ) {
+ if ( item ) {
+ this.$focusOwner.attr( 'aria-activedescendant', item.getElementId() );
+ } else {
+ this.$focusOwner.removeAttr( 'aria-activedescendant' );
+ }
+ }
this.emit( 'select', item );
}
return this;
};
+/**
+ * Set the DOM element which has focus while the user is interacting with this SelectWidget.
+ *
+ * Currently this is just used to set `aria-activedescendant` on it.
+ *
+ * @protected
+ * @param {jQuery} $focusOwner
+ */
+OO.ui.SelectWidget.prototype.setFocusOwner = function ( $focusOwner ) {
+ this.$focusOwner = $focusOwner;
+};
+
/**
* DecoratedOptionWidgets are {@link OO.ui.OptionWidget options} that can be configured
* with an {@link OO.ui.mixin.IconElement icon} and/or {@link OO.ui.mixin.IndicatorElement indicator}.
OO.ui.MenuOptionWidget.parent.call( this, config );
// Initialization
- this.$element
- .attr( 'role', 'menuitem' )
- .addClass( 'oo-ui-menuOptionWidget' );
+ this.$element.addClass( 'oo-ui-menuOptionWidget' );
};
/* Setup */
this.highlightOnFilter = !!config.highlightOnFilter;
// Initialization
- this.$element
- .addClass( 'oo-ui-menuSelectWidget' )
- .attr( 'role', 'menu' );
+ this.$element.addClass( 'oo-ui-menuSelectWidget' );
+ if ( config.widget ) {
+ this.setFocusOwner( config.widget.$tabIndexed );
+ }
// Initially hidden - using #toggle may cause errors if subclasses override toggle with methods
// that reference properties not initialized at that time of parent class construction
this.toggleClipping( true );
if ( this.getSelectedItem() ) {
+ this.$focusOwner.attr( 'aria-activedescendant', this.getSelectedItem().getElementId() );
this.getSelectedItem().scrollElementIntoView( { duration: 0 } );
}
this.getElementDocument().addEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );
}
} else {
+ this.$focusOwner.removeAttr( 'aria-activedescendant' );
this.unbindKeyDownListener();
this.unbindKeyPressListener();
this.getElementDocument().removeEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );
* @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful in cases where
* the expanded menu is larger than its containing `<div>`. The specified overlay layer is usually on top of the
* containing `<div>` and has a larger area. By default, the menu uses relative positioning.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
*/
OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {
// Configuration initialization
// Initialization
this.$handle
.addClass( 'oo-ui-dropdownWidget-handle' )
+ .attr( {
+ role: 'combobox',
+ 'aria-owns': this.menu.getElementId(),
+ 'aria-autocomplete': 'list'
+ } )
.append( this.$icon, this.$label, this.$indicator );
this.$element
.addClass( 'oo-ui-dropdownWidget' )
* @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful in cases where
* the expanded menu is larger than its containing `<div>`. The specified overlay layer is usually on top of the
* containing `<div>` and has a larger area. By default, the menu uses relative positioning.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
*/
OO.ui.ComboBoxInputWidget = function OoUiComboBoxInputWidget( config ) {
// Configuration initialization
// Initialization
this.$input.attr( {
role: 'combobox',
+ 'aria-owns': this.menu.getElementId(),
'aria-autocomplete': 'list'
} );
// Do not override options set via config.menu.items
* in the upper-right corner of the rendered field; clicking it will display the text in a popup.
* For important messages, you are advised to use `notices`, as they are always shown.
* @cfg {jQuery} [$overlay] Passed to OO.ui.PopupButtonWidget for help popup, if `help` is given.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
*
* @throws {Error} An error is thrown if no widget is specified
*/
* in the upper-right corner of the rendered field; clicking it will display the text in a popup.
* For important messages, you are advised to use `notices`, as they are always shown.
* @cfg {jQuery} [$overlay] Passed to OO.ui.PopupButtonWidget for help popup, if `help` is given.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
*/
OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) {
// Configuration initialization
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
*/
( function ( OO ) {
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
*/
.oo-ui-popupTool .oo-ui-popupWidget-popup,
.oo-ui-popupTool .oo-ui-popupWidget-anchor {
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
*/
.oo-ui-tool.oo-ui-widget-enabled {
-webkit-transition: background-color 100ms;
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
*/
( function ( OO ) {
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
*/
.oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ).oo-ui-widget {
cursor: move;
}
.oo-ui-tabOptionWidget {
display: inline-block;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
vertical-align: bottom;
- padding: 0.5em 1em;
margin: 0.5em 0 0 0.75em;
- border: 1px solid transparent;
- border-bottom: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 1px 0 1px;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
+ padding: 0.5em 1em;
}
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
- padding-right: 1.5em;
-}
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- opacity: 0.5;
-}
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-pressed {
- background-color: transparent;
+.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
+ background-color: #fff;
+ border-color: #ddd;
}
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: rgba(255, 255, 255, 0.2);
background-color: #fff;
border-color: #ddd;
}
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
+.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
background-color: #fff;
- border-color: #ddd;
}
.oo-ui-tagMultiselectWidget {
display: inline-block;
max-width: 50em;
}
.oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
display: table-cell;
height: 100%;
}
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
- height: 100%;
-}
.oo-ui-numberInputWidget-field {
display: table;
table-layout: fixed;
border-bottom-left-radius: 0;
border-left-width: 0;
}
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
border-radius: 0;
}
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
*/
.oo-ui-draggableElement {
padding: 1.0546875em 0.9375em 0.9375em;
}
.oo-ui-tabOptionWidget {
display: inline-block;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
vertical-align: bottom;
color: #222;
- margin: 0.5em 0 0 0.75em;
- border: 1px solid transparent;
- border-bottom: 0;
+ margin: 0.46875em 0 0 0.46875em;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 1px 0 1px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
- padding: 0.35em 1em;
+ padding: 0.625em 1.015625em 0.546875em;
font-weight: bold;
+ line-height: 1;
-webkit-transition: background-color 100ms, color 100ms;
-moz-transition: background-color 100ms, color 100ms;
transition: background-color 100ms, color 100ms;
}
+.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
+ background-color: #fff;
+ color: #000;
+}
+.oo-ui-tabOptionWidget .oo-ui-labelElement-label {
+ line-height: 1.172em;
+}
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
background-color: rgba(255, 255, 255, 0.8);
}
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
- padding-right: 1.5em;
-}
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- opacity: 0.5;
-}
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
+.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
background-color: #fff;
- color: #000;
}
.oo-ui-tagMultiselectWidget {
display: inline-block;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
-.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle .oo-ui-tagItemWidget.oo-ui-widget-enabled {
+.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: #fff;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
overflow: hidden;
cursor: text;
}
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid {
- border-color: #d33;
-}
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid:hover {
- border-color: #d33;
-}
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid:focus {
- border-color: #d33;
- box-shadow: inset 0 0 0 1px #d33;
-}
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: #f8f9fa;
color: #222;
box-shadow: inset 0 0 0 1px #36c;
outline: 0;
}
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
+ border-color: #d33;
+}
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
+ border-color: #d33;
+}
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
+ border-color: #d33;
+ box-shadow: inset 0 0 0 1px #d33;
+}
.oo-ui-tagItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
display: block;
position: absolute;
overflow-y: auto;
}
.oo-ui-searchWidget-query {
- height: 4em;
- padding: 0 1em;
- border-bottom: 1px solid #a2a9b1;
+ height: 4.375em;
+ padding: 0 1.25em;
+ border-bottom: 1px solid #c8ccd1;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.oo-ui-searchWidget-query .oo-ui-textInputWidget {
- margin: 0.75em 0;
+ margin: 0.9375em 0;
}
.oo-ui-searchWidget-results {
- top: 4em;
- padding: 1em;
+ top: 4.375em;
+ padding: 1.25em;
line-height: 0;
}
.oo-ui-numberInputWidget {
max-width: 50em;
}
.oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
display: table-cell;
height: 100%;
}
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
- height: 100%;
-}
.oo-ui-numberInputWidget-field {
display: table;
table-layout: fixed;
padding-left: 0;
padding-right: 0;
}
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
border-radius: 0;
}
.oo-ui-numberInputWidget-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
*/
( function ( OO ) {
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning
+ * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
* @cfg {jQuery} [$container=this.$element] The container element. The lookup menu is rendered beneath the specified element.
* @cfg {boolean} [allowSuggestionsWhenEmpty=false] Request and display a lookup menu when the text input is empty.
* By default, the lookup menu is not generated and displayed until the user begins to type.
} );
// Initialization
+ this.$input.attr( {
+ role: 'combobox',
+ 'aria-owns': this.lookupMenu.getElementId(),
+ 'aria-autocomplete': 'list'
+ } );
this.$element.addClass( 'oo-ui-lookupElement' );
this.lookupMenu.$element.addClass( 'oo-ui-lookupElement-menu' );
this.$overlay.append( this.lookupMenu.$element );
* its containing `<div>`. The specified overlay layer is usually on top of
* the containing `<div>` and has a larger area. By default, the menu uses
* relative positioning.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
*/
OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config ) {
var $tabFocus;
this.$input.prop( 'disabled', this.isDisabled() );
this.$input.attr( {
role: 'combobox',
+ 'aria-owns': this.menu.getElementId(),
'aria-autocomplete': 'list'
} );
}
* @mixins OO.ui.mixin.PopupElement
*
* @param {Object} config Configuration object
- * @cfg {jQuery} [$overlay] An overlay for the popup
+ * @cfg {jQuery} [$overlay] An overlay for the popup.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
* @cfg {Object} [popup] Configuration options for the popup
* @cfg {OO.ui.InputWidget} [popupInput] An input widget inside the popup that will be
* focused when the popup is opened and will be used as replacement for the
}
// Events
+ this.on( 'resize', this.popup.updateDimensions.bind( this.popup ) );
this.popup.connect( this, { toggle: 'onPopupToggle' } );
this.$tabIndexed
.on( 'focus', this.focus.bind( this ) );
* @constructor
* @param {Object} [config] Configuration object
* @cfg {Object} [menu] Configuration object for the menu widget
- * @cfg {jQuery} [$overlay] An overlay for the menu
+ * @cfg {jQuery} [$overlay] An overlay for the menu.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
* @cfg {Object[]} [options=[]] Array of menu options in the format `{ data: …, label: … }`
*/
OO.ui.MenuTagMultiselectWidget = function OoUiMenuTagMultiselectWidget( config ) {
* $( 'body' ).append( numberInput.$element );
*
* @class
- * @extends OO.ui.Widget
+ * @extends OO.ui.TextInputWidget
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {Object} [input] Configuration options to pass to the {@link OO.ui.TextInputWidget text input widget}.
* @cfg {Object} [minusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget decrementing button widget}.
* @cfg {Object} [plusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget incrementing button widget}.
- * @cfg {boolean} [isInteger=false] Whether the field accepts only integer values.
+ * @cfg {boolean} [allowInteger=false] Whether the field accepts only integer values.
* @cfg {number} [min=-Infinity] Minimum allowed value
* @cfg {number} [max=Infinity] Maximum allowed value
* @cfg {number} [step=1] Delta when using the buttons or up/down arrow keys
* @cfg {boolean} [showButtons=true] Whether to show the plus and minus buttons.
*/
OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
+ var $field = $( '<div>' )
+ .addClass( 'oo-ui-numberInputWidget-field' );
+
// Configuration initialization
config = $.extend( {
isInteger: false,
showButtons: true
}, config );
+ // For backward compatibility
+ $.extend( config, config.input );
+ this.input = this;
+
// Parent constructor
- OO.ui.NumberInputWidget.parent.call( this, config );
+ OO.ui.NumberInputWidget.parent.call( this, $.extend( config, {
+ type: 'number'
+ } ) );
- // Properties
- this.input = new OO.ui.TextInputWidget( $.extend(
- {
- disabled: this.isDisabled(),
- type: 'number'
- },
- config.input
- ) );
if ( config.showButtons ) {
this.minusButton = new OO.ui.ButtonWidget( $.extend(
{
}
// Events
- this.input.connect( this, {
- change: this.emit.bind( this, 'change' ),
- enter: this.emit.bind( this, 'enter' )
- } );
- this.input.$input.on( {
+ this.$input.on( {
keydown: this.onKeyDown.bind( this ),
'wheel mousewheel DOMMouseScroll': this.onWheel.bind( this )
} );
} );
}
- // Initialization
- this.setIsInteger( !!config.isInteger );
- this.setRange( config.min, config.max );
- this.setStep( config.step, config.pageStep );
-
- this.$field = $( '<div>' ).addClass( 'oo-ui-numberInputWidget-field' )
- .append( this.input.$element );
- this.$element.addClass( 'oo-ui-numberInputWidget' ).append( this.$field );
+ // Build the field
+ $field.append( this.$input );
if ( config.showButtons ) {
- this.$field
+ $field
.prepend( this.minusButton.$element )
.append( this.plusButton.$element );
- this.$element.addClass( 'oo-ui-numberInputWidget-buttoned' );
}
- this.input.setValidation( this.validateNumber.bind( this ) );
-};
-
-/* Setup */
-OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.Widget );
+ // Initialization
+ this.setAllowInteger( config.isInteger || config.allowInteger );
+ this.setRange( config.min, config.max );
+ this.setStep( config.step, config.pageStep );
+ // Set the validation method after we set isInteger and range
+ // so that it doesn't immediately call setValidityFlag
+ this.setValidation( this.validateNumber.bind( this ) );
-/* Events */
+ this.$element
+ .addClass( 'oo-ui-numberInputWidget' )
+ .toggleClass( 'oo-ui-numberInputWidget-buttoned', config.showButtons )
+ .append( $field );
+};
-/**
- * A `change` event is emitted when the value of the input changes.
- *
- * @event change
- */
+/* Setup */
-/**
- * An `enter` event is emitted when the user presses 'enter' inside the text box.
- *
- * @event enter
- */
+OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.TextInputWidget );
/* Methods */
*
* @param {boolean} flag
*/
-OO.ui.NumberInputWidget.prototype.setIsInteger = function ( flag ) {
+OO.ui.NumberInputWidget.prototype.setAllowInteger = function ( flag ) {
this.isInteger = !!flag;
- this.input.setValidityFlag();
+ this.setValidityFlag();
};
+// Backward compatibility
+OO.ui.NumberInputWidget.prototype.setIsInteger = OO.ui.NumberInputWidget.prototype.setAllowInteger;
/**
* Get whether only integers are allowed
*
* @return {boolean} Flag value
*/
-OO.ui.NumberInputWidget.prototype.getIsInteger = function () {
+OO.ui.NumberInputWidget.prototype.getAllowInteger = function () {
return this.isInteger;
};
+// Backward compatibility
+OO.ui.NumberInputWidget.prototype.getIsInteger = OO.ui.NumberInputWidget.prototype.getAllowInteger;
/**
* Set the range of allowed values
}
this.min = min;
this.max = max;
- this.input.setValidityFlag();
+ this.setValidityFlag();
};
/**
return [ this.step, this.pageStep ];
};
-/**
- * Get the current value of the widget
- *
- * @return {string}
- */
-OO.ui.NumberInputWidget.prototype.getValue = function () {
- return this.input.getValue();
-};
-
/**
* Get the current value of the widget as a number
*
* @return {number} May be NaN, or an invalid number
*/
OO.ui.NumberInputWidget.prototype.getNumericValue = function () {
- return +this.input.getValue();
-};
-
-/**
- * Set the value of the widget
- *
- * @param {string} value Invalid values are allowed
- */
-OO.ui.NumberInputWidget.prototype.setValue = function ( value ) {
- this.input.setValue( value );
+ return +this.getValue();
};
/**
this.setValue( n );
}
};
-
/**
* Validate input
*
*/
OO.ui.NumberInputWidget.prototype.validateNumber = function ( value ) {
var n = +value;
+ if ( value === '' ) {
+ return !this.isRequired();
+ }
+
if ( isNaN( n ) || !isFinite( n ) ) {
return false;
}
OO.ui.NumberInputWidget.prototype.onWheel = function ( event ) {
var delta = 0;
- if ( !this.isDisabled() && this.input.$input.is( ':focus' ) ) {
+ if ( !this.isDisabled() && this.$input.is( ':focus' ) ) {
// Standard 'wheel' event
if ( event.originalEvent.deltaMode !== undefined ) {
this.sawWheelEvent = true;
// Parent method
OO.ui.NumberInputWidget.parent.prototype.setDisabled.call( this, disabled );
- if ( this.input ) {
- this.input.setDisabled( this.isDisabled() );
- }
if ( this.minusButton ) {
this.minusButton.setDisabled( this.isDisabled() );
}
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
*/
.oo-ui-actionWidget.oo-ui-pendingElement-pending {
background-image: /* @embed */ url(themes/apex/images/textures/pending.gif);
left: 0;
right: 0;
bottom: 0;
- z-index: 2;
+ z-index: 4;
overflow-x: hidden;
overflow-y: auto;
}
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
*/
.oo-ui-window {
background: transparent;
left: 0;
right: 0;
bottom: 0;
- z-index: 2;
+ z-index: 4;
overflow-x: hidden;
overflow-y: auto;
}
/*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
*/
( function ( OO ) {
this.manager = null;
this.size = config.size || this.constructor.static.size;
this.$frame = $( '<div>' );
+ /**
+ * Overlay element to use for the `$overlay` configuration option of widgets that support it.
+ * Things put inside of it are overlaid on top of the window and are not bound to its dimensions.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
+ *
+ * MyDialog.prototype.initialize = function () {
+ * ...
+ * var popupButton = new OO.ui.PopupButtonWidget( {
+ * $overlay: this.$overlay,
+ * label: 'Popup button',
+ * popup: {
+ * $content: $( '<p>Popup contents.</p><p>Popup contents.</p><p>Popup contents.</p>' ),
+ * padded: true
+ * }
+ * } );
+ * ...
+ * };
+ *
+ * @property {jQuery}
+ */
this.$overlay = $( '<div>' );
this.$content = $( '<div>' );
* @inheritdoc
*/
OO.ui.Dialog.prototype.initialize = function () {
- var titleId;
-
// Parent method
OO.ui.Dialog.parent.prototype.initialize.call( this );
- titleId = OO.ui.generateElementId();
-
// Properties
- this.title = new OO.ui.LabelWidget( {
- id: titleId
- } );
+ this.title = new OO.ui.LabelWidget();
// Initialization
this.$content.addClass( 'oo-ui-dialog-content' );
- this.$element.attr( 'aria-labelledby', titleId );
+ this.$element.attr( 'aria-labelledby', this.title.getElementId() );
this.setPendingElement( this.$head );
};