"ext-iconv": "*",
"leafo/lessphp": "0.5.0",
"liuggio/statsd-php-client": "1.0.12",
- "oojs/oojs-ui": "0.11.1",
+ "oojs/oojs-ui": "0.11.2",
"php": ">=5.3.3",
"psr/log": "1.0.0",
"wikimedia/cdb": "1.0.1",
--- /dev/null
+{
+ "@metadata": {
+ "authors": [
+ "George Animal"
+ ]
+ },
+ "ooui-toolgroup-expand": "Bêhtir",
+ "ooui-toolgroup-collapse": "Kêmtir",
+ "ooui-dialog-message-accept": "Baş e",
+ "ooui-dialog-message-reject": "Betal bike",
+ "ooui-dialog-process-retry": "Dîsa hewl bide",
+ "ooui-dialog-process-continue": "Bidomîne"
+}
/*!
- * OOjs UI v0.11.1
+ * OOjs UI v0.11.2
* 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-05-05T00:40:57Z
+ * Date: 2015-05-11T17:24:34Z
*/
@-webkit-keyframes oo-ui-progressBarWidget-slide {
from {
margin-left: 1.25em;
}
.oo-ui-toolGroupTool > .oo-ui-popupToolGroup {
+ border: 0;
+ border-radius: 0;
margin: 0;
}
+.oo-ui-toolGroupTool > .oo-ui-toolGroup {
+ border-right: none;
+}
.oo-ui-toolGroupTool > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle {
- height: 1.875em;
+ height: 2.5em;
padding: 0.3125em;
}
.oo-ui-toolGroupTool > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
- height: 1.875em;
+ height: 2.5em;
width: 1.875em;
- opacity: 0.8;
}
.oo-ui-toolGroupTool > .oo-ui-popupToolGroup.oo-ui-labelElement > .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
line-height: 2.1em;
.oo-ui-toolGroup {
display: inline-block;
vertical-align: middle;
- margin: 0.375em;
+ border-radius: 0;
+ border-right: 1px solid #dddddd;
}
.oo-ui-toolGroup-empty {
display: none;
.oo-ui-toolbar-narrow .oo-ui-toolGroup + .oo-ui-toolGroup {
margin-left: 0;
}
+.oo-ui-toolGroup .oo-ui-toolGroup .oo-ui-widget-enabled {
+ border-right: none !important;
+}
.oo-ui-toolGroup.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
color: #000000;
}
-.oo-ui-toolGroup.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-accel {
- color: #888888;
-}
.oo-ui-barToolGroup > .oo-ui-iconElement-icon,
.oo-ui-barToolGroup > .oo-ui-labelElement-label {
display: none;
}
.oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
height: 1.875em;
- padding: 0.3125em;
+ padding: 0.625em;
}
.oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-iconElement-icon {
height: 1.875em;
width: 1.875em;
- opacity: 0.8;
}
.oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
line-height: 2.1em;
+ padding: 0 0.4em;
+}
+.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+ background-color: #eeeeee;
}
.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-tool-active.oo-ui-widget-enabled {
+ border-color: rgba(0, 0, 0, 0.2);
+ box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
+ background-color: #e5e5e5;
+}
+.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-tool-active.oo-ui-widget-enabled:hover {
background-color: #eeeeee;
}
+.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
+ border-left-color: rgba(0, 0, 0, 0.1);
+}
.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link .oo-ui-iconElement-icon {
opacity: 0.2;
}
-.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link .oo-ui-iconElement-icon {
- opacity: 0.8;
+.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
+ opacity: 0.7;
}
.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled:hover > .oo-ui-tool-link .oo-ui-iconElement-icon {
- opacity: 1;
+ opacity: 0.9;
+}
+.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled:active {
+ background-color: #e7e7e7;
}
.oo-ui-barToolGroup.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-iconElement-icon {
opacity: 0.2;
}
.oo-ui-popupToolGroup {
position: relative;
- height: 2.5em;
- min-width: 2.5em;
+ height: 3.125em;
+ min-width: 2em;
}
.oo-ui-popupToolGroup-handle {
display: block;
margin-left: 2.5em;
}
.oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
- margin-right: 2.25em;
+ margin-right: 2em;
}
.oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
margin-right: 1.75em;
}
+.oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle:hover {
+ background-color: #eeeeee;
+}
+.oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle:active {
+ background-color: #e5e5e5;
+}
+.oo-ui-popupToolGroup-handle {
+ padding: 0.3125em;
+ height: 2.5em;
+}
.oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
width: 0.9375em;
- height: 0.9375em;
- margin: 0.78125em;
+ height: 1.625em;
+ margin: 0.78125em 0.5em;
top: 0;
right: 0;
+ opacity: 0.3;
}
.oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
right: -0.3125em;
}
.oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
width: 1.875em;
- height: 1.875em;
- margin: 0.3125em;
+ height: 2.6em;
+ margin: 0.25em;
top: 0;
left: 0.3125em;
+ opacity: 0.7;
}
.oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
left: 0;
margin: 0 0.6em;
font-weight: bold;
}
+.oo-ui-popupToolGroup-active.oo-ui-widget-enabled {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
+ background-color: #eeeeee;
+}
.oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
- top: 2.5em;
- background-color: white;
+ top: 3.125em;
+ margin: 0 -1px;
+ border: 1px solid #cccccc;
+ background-color: #ffffff;
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
+ min-width: 16em;
}
.oo-ui-popupToolGroup .oo-ui-tool-link {
- padding: 0.3125em 0 0.3125em 0.3125em;
+ padding: 0.4em 0.625em;
+ box-sizing: border-box;
}
.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
- height: 1.875em;
+ height: 2.5em;
width: 1.875em;
min-width: 1.875em;
}
.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
line-height: 2em;
}
+.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
+ color: #888888;
+}
.oo-ui-listToolGroup .oo-ui-tool {
display: block;
-webkit-box-sizing: border-box;
.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link {
cursor: default;
}
-.oo-ui-listToolGroup .oo-ui-tool {
- padding: 0 0.9375em 0 0.3125em;
+.oo-ui-listToolGroup.oo-ui-popupToolGroup-active {
+ border-color: rgba(0, 0, 0, 0.2);
}
.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
+ border-color: rgba(0, 0, 0, 0.2);
background-color: #eeeeee;
}
-.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled,
+.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:active {
+ background-color: #e7e7e7;
+}
+.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconElement-icon {
+ opacity: 0.9;
+}
+.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
+ border-color: rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
+ background-color: #e5e5e5;
+}
+.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
+ border-top-color: rgba(0, 0, 0, 0.1);
+}
.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
- background-color: #d0d0d0;
+ border-color: rgba(0, 0, 0, 0.2);
+ background-color: #eeeeee;
}
.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
color: #cccccc;
.oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
opacity: 0.2;
}
-.oo-ui-listToolGroup .oo-ui-toolGroup-tools {
- padding: 0.3125em 0 0.3125em 0;
- border: 1px solid #aaaaaa;
- border-radius: 0.25em;
- box-shadow: inset 0 -0.25em 0 0 rgba(0, 0, 0, 0.2), 0 0.125em 0 0 rgba(0, 0, 0, 0.1);
-}
-.oo-ui-menuToolGroup {
- border: 1px solid #cccccc;
- border-radius: 0.125em;
-}
.oo-ui-menuToolGroup .oo-ui-tool {
display: block;
}
.oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
min-width: 8.125em;
}
-.oo-ui-menuToolGroup .oo-ui-toolGroup-tools {
- margin-left: -1px;
- padding: 0.3125em 0 0.3125em 0;
- border: 1px solid #aaaaaa;
- border-radius: 0.25em;
- border-top-left-radius: 0;
- box-shadow: inset 0 -0.25em 0 0 rgba(0, 0, 0, 0.2), 0 0.125em 0 0 rgba(0, 0, 0, 0.1);
-}
-.oo-ui-menuToolGroup.oo-ui-widget-enabled:hover {
- border-color: #aaaaaa;
-}
-.oo-ui-menuToolGroup.oo-ui-popupToolGroup-active {
- border-color: #aaaaaa;
-}
-.oo-ui-menuToolGroup .oo-ui-tool {
- padding: 0 1.25em 0 0.3125em;
-}
.oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
background-image: none;
}
}
.oo-ui-menuToolGroup.oo-ui-widget-disabled {
color: #cccccc;
- border-color: #cccccc;
}
.oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
.oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
}
.oo-ui-toolbar-bar {
line-height: 1em;
+ position: relative;
}
.oo-ui-toolbar-actions {
float: right;
}
+.oo-ui-toolbar-actions .oo-ui-toolbar {
+ display: inline-block;
+}
.oo-ui-toolbar-tools {
display: inline;
white-space: nowrap;
pointer-events: none;
}
.oo-ui-toolbar-bar {
- border-bottom: 2px solid rgba(0, 0, 0, 0.15);
- background: #ffffff;
+ border-bottom: 1px solid #cccccc;
+ background-color: #ffffff;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ font-weight: 500;
+ color: #555555;
}
.oo-ui-toolbar-bar .oo-ui-toolbar-bar {
border: none;
background: none;
}
-.oo-ui-toolbar-shadow {
- display: none;
-}
-.oo-ui-selectWidget {
- border-radius: 2px;
-}
-.oo-ui-selectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
- border-radius: 0;
- margin-left: -1px;
+.oo-ui-toolbar-actions > .oo-ui-buttonElement {
+ margin-top: 0.25em;
+ margin-bottom: 0.25em;
}
-.oo-ui-selectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
- border-bottom-left-radius: 2px;
- border-top-left-radius: 2px;
- margin-left: 0;
+.oo-ui-toolbar-actions > .oo-ui-toolbar,
+.oo-ui-toolbar-actions > .oo-ui-buttonElement:last-child {
+ margin-right: 0.5em;
}
-.oo-ui-selectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
- border-bottom-right-radius: 2px;
- border-top-right-radius: 2px;
+.oo-ui-toolbar-shadow {
+ background-image: /* @embed */ url(themes/mediawiki/images/toolbar-shadow.png);
+ bottom: -9px;
+ height: 9px;
+ opacity: 0.5;
}
.oo-ui-optionWidget {
position: relative;
display: block;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
- background-color: #999999;
- color: #ffffff;
+ background-color: #d8e6fe;
+ color: rgba(0, 0, 0, 0.8);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected .oo-ui-iconElement-icon {
display: none;
background-color: #eeeeee;
color: black;
}
+.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
+ background-color: #d8e6fe;
+}
.oo-ui-menuSectionOptionWidget {
cursor: default;
padding: 0.33em 0.75em;
color: #666666;
font-weight: bold;
}
-.oo-ui-tabOptionWidget:hover {
+.oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: rgba(255, 255, 255, 0.3);
}
-.oo-ui-tabOptionWidget:active {
+.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 {
/*!
- * OOjs UI v0.11.1
+ * OOjs UI v0.11.2
* 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-05-05T00:40:50Z
+ * Date: 2015-05-11T17:24:27Z
*/
/**
* @class
/*!
- * OOjs UI v0.11.1
+ * OOjs UI v0.11.2
* 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-05-05T00:40:50Z
+ * Date: 2015-05-11T17:24:27Z
*/
( function ( OO ) {
*/
OO.ui.ButtonElement.prototype.onClick = function ( e ) {
if ( !this.isDisabled() && e.which === 1 ) {
- this.emit( 'click' );
+ if ( this.emit( 'click' ) ) {
+ return false;
+ }
}
- return false;
};
/**
*/
OO.ui.ButtonElement.prototype.onKeyPress = function ( e ) {
if ( !this.isDisabled() && ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) ) {
- this.emit( 'click' );
- return false;
+ if ( this.emit( 'click' ) ) {
+ return false;
+ }
}
};
};
/**
- * Select and highlight the first selectable item in the menu.
+ * Highlight the first selectable item in the menu.
*
* @private
* @chainable
*/
OO.ui.LookupElement.prototype.initializeLookupMenuSelection = function () {
if ( !this.lookupMenu.getSelectedItem() ) {
- this.lookupMenu.selectItem( this.lookupMenu.getFirstSelectableItem() );
+ this.lookupMenu.highlightItem( this.lookupMenu.getFirstSelectableItem() );
}
- this.lookupMenu.highlightItem( this.lookupMenu.getSelectedItem() );
};
/**
/**
* Collection of tool groups.
*
- * @example
- * // Basic OOjs UI toolbar example
+ * The following is a minimal example using several tools and tool groups.
*
+ * @example
* // Create the toolbar
* var toolFactory = new OO.ui.ToolFactory();
* var toolGroupFactory = new OO.ui.ToolGroupFactory();
* // Create a class inheriting from OO.ui.Tool
* function PictureTool() {
* PictureTool.super.apply( this, arguments );
+ * }
+ * OO.inheritClass( PictureTool, OO.ui.Tool );
+ * // Each tool must have a 'name' (used as an internal identifier, see later) and at least one
+ * // of 'icon' and 'title' (displayed icon and text).
+ * PictureTool.static.name = 'picture';
+ * PictureTool.static.icon = 'picture';
+ * PictureTool.static.title = 'Insert picture';
+ * // Defines the action that will happen when this tool is selected (clicked).
+ * PictureTool.prototype.onSelect = function () {
+ * $area.text( 'Picture tool clicked!' );
+ * // Never display this tool as "active" (selected).
+ * this.setActive( false );
* };
+ * // Make this tool available in our toolFactory and thus our toolbar
+ * toolFactory.register( PictureTool );
+ *
+ * // Register two more tools, nothing interesting here
+ * function SettingsTool() {
+ * SettingsTool.super.apply( this, arguments );
+ * }
+ * OO.inheritClass( SettingsTool, OO.ui.Tool );
+ * SettingsTool.static.name = 'settings';
+ * SettingsTool.static.icon = 'settings';
+ * SettingsTool.static.title = 'Change settings';
+ * SettingsTool.prototype.onSelect = function () {
+ * $area.text( 'Settings tool clicked!' );
+ * this.setActive( false );
+ * };
+ * toolFactory.register( SettingsTool );
+ *
+ * // Register two more tools, nothing interesting here
+ * function StuffTool() {
+ * StuffTool.super.apply( this, arguments );
+ * }
+ * OO.inheritClass( StuffTool, OO.ui.Tool );
+ * StuffTool.static.name = 'stuff';
+ * StuffTool.static.icon = 'ellipsis';
+ * StuffTool.static.title = 'More stuff';
+ * StuffTool.prototype.onSelect = function () {
+ * $area.text( 'More stuff tool clicked!' );
+ * this.setActive( false );
+ * };
+ * toolFactory.register( StuffTool );
+ *
+ * // This is a PopupTool. Rather than having a custom 'onSelect' action, it will display a
+ * // little popup window (a PopupWidget).
+ * function HelpTool( toolGroup, config ) {
+ * OO.ui.PopupTool.call( this, toolGroup, $.extend( { popup: {
+ * padded: true,
+ * label: 'Help',
+ * head: true
+ * } }, config ) );
+ * this.popup.$body.append( '<p>I am helpful!</p>' );
+ * }
+ * OO.inheritClass( HelpTool, OO.ui.PopupTool );
+ * HelpTool.static.name = 'help';
+ * HelpTool.static.icon = 'help';
+ * HelpTool.static.title = 'Help';
+ * toolFactory.register( HelpTool );
+ *
+ * // Finally define which tools and in what order appear in the toolbar. Each tool may only be
+ * // used once (but not all defined tools must be used).
+ * toolbar.setup( [
+ * {
+ * // 'bar' tool groups display tools' icons only, side-by-side.
+ * type: 'bar',
+ * include: [ 'picture', 'help' ]
+ * },
+ * {
+ * // 'list' tool groups display both the titles and icons, in a dropdown list.
+ * type: 'list',
+ * indicator: 'down',
+ * label: 'More',
+ * include: [ 'settings', 'stuff' ]
+ * }
+ * // Note how the tools themselves are toolgroup-agnostic - the same tool can be displayed
+ * // either in a 'list' or a 'bar'. There is a 'menu' tool group too, not showcased here,
+ * // since it's more complicated to use. (See the next example snippet on this page.)
+ * ] );
+ *
+ * // Create some UI around the toolbar and place it in the document
+ * var frame = new OO.ui.PanelLayout( {
+ * expanded: false,
+ * framed: true
+ * } );
+ * var contentFrame = new OO.ui.PanelLayout( {
+ * expanded: false,
+ * padded: true
+ * } );
+ * frame.$element.append(
+ * toolbar.$element,
+ * contentFrame.$element.append( $area )
+ * );
+ * $( 'body' ).append( frame.$element );
+ *
+ * // Here is where the toolbar is actually built. This must be done after inserting it into the
+ * // document.
+ * toolbar.initialize();
+ *
+ * The following example extends the previous one to illustrate 'menu' tool groups and the usage of
+ * 'updateState' event.
+ *
+ * @example
+ * // Create the toolbar
+ * var toolFactory = new OO.ui.ToolFactory();
+ * var toolGroupFactory = new OO.ui.ToolGroupFactory();
+ * var toolbar = new OO.ui.Toolbar( toolFactory, toolGroupFactory );
+ *
+ * // We will be placing status text in this element when tools are used
+ * var $area = $( '<p>' ).text( 'Toolbar example' );
+ *
+ * // Define the tools that we're going to place in our toolbar
+ *
+ * // Create a class inheriting from OO.ui.Tool
+ * function PictureTool() {
+ * PictureTool.super.apply( this, arguments );
+ * }
* OO.inheritClass( PictureTool, OO.ui.Tool );
* // Each tool must have a 'name' (used as an internal identifier, see later) and at least one
* // of 'icon' and 'title' (displayed icon and text).
* // Defines the action that will happen when this tool is selected (clicked).
* PictureTool.prototype.onSelect = function () {
* $area.text( 'Picture tool clicked!' );
+ * // Never display this tool as "active" (selected).
* this.setActive( false );
* };
* // The toolbar can be synchronized with the state of some external stuff, like a text
* // editor's editing area, highlighting the tools (e.g. a 'bold' tool would be shown as active
* // when the text cursor was inside bolded text). Here we simply disable this feature.
* PictureTool.prototype.onUpdateState = function () {
- * this.setActive( false );
* };
* // Make this tool available in our toolFactory and thus our toolbar
* toolFactory.register( PictureTool );
* // Register two more tools, nothing interesting here
* function SettingsTool() {
* SettingsTool.super.apply( this, arguments );
- * };
+ * this.reallyActive = false;
+ * }
* OO.inheritClass( SettingsTool, OO.ui.Tool );
* SettingsTool.static.name = 'settings';
* SettingsTool.static.icon = 'settings';
* SettingsTool.static.title = 'Change settings';
* SettingsTool.prototype.onSelect = function () {
* $area.text( 'Settings tool clicked!' );
- * this.setActive( false );
+ * // Toggle the active state on each click
+ * this.reallyActive = !this.reallyActive;
+ * this.setActive( this.reallyActive );
+ * // To update the menu label
+ * this.toolbar.emit( 'updateState' );
* };
* SettingsTool.prototype.onUpdateState = function () {
- * this.setActive( false );
* };
* toolFactory.register( SettingsTool );
*
* // Register two more tools, nothing interesting here
* function StuffTool() {
* StuffTool.super.apply( this, arguments );
- * };
+ * this.reallyActive = false;
+ * }
* OO.inheritClass( StuffTool, OO.ui.Tool );
* StuffTool.static.name = 'stuff';
* StuffTool.static.icon = 'ellipsis';
* StuffTool.static.title = 'More stuff';
* StuffTool.prototype.onSelect = function () {
* $area.text( 'More stuff tool clicked!' );
- * this.setActive( false );
+ * // Toggle the active state on each click
+ * this.reallyActive = !this.reallyActive;
+ * this.setActive( this.reallyActive );
+ * // To update the menu label
+ * this.toolbar.emit( 'updateState' );
* };
* StuffTool.prototype.onUpdateState = function () {
- * this.setActive( false );
* };
* toolFactory.register( StuffTool );
*
* head: true
* } }, config ) );
* this.popup.$body.append( '<p>I am helpful!</p>' );
- * };
+ * }
* OO.inheritClass( HelpTool, OO.ui.PopupTool );
* HelpTool.static.name = 'help';
* HelpTool.static.icon = 'help';
* include: [ 'picture', 'help' ]
* },
* {
- * // 'list' tool groups display both the titles and icons, in a dropdown list.
- * type: 'list',
+ * // 'menu' tool groups display both the titles and icons, in a dropdown menu.
+ * // Menu label indicates which items are selected.
+ * type: 'menu',
* indicator: 'down',
- * label: 'More',
* include: [ 'settings', 'stuff' ]
* }
- * // Note how the tools themselves are toolgroup-agnostic - the same tool can be displayed
- * // either in a 'list' or a 'bar'. There is a 'menu' tool group too, not showcased here.
* ] );
*
* // Create some UI around the toolbar and place it in the document
* @fires submit
*/
OO.ui.FormLayout.prototype.onFormSubmit = function () {
- this.emit( 'submit' );
- return false;
+ if ( this.emit( 'submit' ) ) {
+ return false;
+ }
};
/**
OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.ClippableElement );
OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.TabIndexedElement );
-/* Static Properties */
-
/* Methods */
/**
/* Static Properties */
-OO.ui.ListToolGroup.static.accelTooltips = true;
-
OO.ui.ListToolGroup.static.name = 'list';
/* Methods */
/* Static Properties */
-OO.ui.MenuToolGroup.static.accelTooltips = true;
-
OO.ui.MenuToolGroup.static.name = 'menu';
/* Methods */
return OO.ui.ButtonElement.prototype.onMouseUp.call( this, e );
};
-/**
- * @inheritdoc
- */
-OO.ui.ButtonWidget.prototype.onClick = function ( e ) {
- var ret = OO.ui.ButtonElement.prototype.onClick.call( this, e );
- if ( this.href ) {
- return true;
- }
- return ret;
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.ButtonWidget.prototype.onKeyPress = function ( e ) {
- var ret = OO.ui.ButtonElement.prototype.onKeyPress.call( this, e );
- if ( this.href ) {
- return true;
- }
- return ret;
-};
-
/**
* Get hyperlink location.
*
// Events
this.$input.on( {
keypress: this.onKeyPress.bind( this ),
- blur: this.setValidityFlag.bind( this )
+ blur: this.onBlur.bind( this )
} );
this.$input.one( {
focus: this.onElementAttach.bind( this )
}
if ( config.required ) {
this.$input.attr( 'required', 'required' );
+ this.$input.attr( 'aria-required', 'true' );
}
if ( this.label || config.autosize ) {
this.installParentChangeDetector();
}
};
+/**
+ * Handle blur events.
+ *
+ * @private
+ * @param {jQuery.Event} e Blur event
+ */
+OO.ui.TextInputWidget.prototype.onBlur = function () {
+ this.setValidityFlag();
+};
+
/**
* Handle element attach events.
*
/**
* Sets the 'invalid' flag appropriately.
+ *
+ * @param {boolean} [isValid] Optionally override validation result
*/
-OO.ui.TextInputWidget.prototype.setValidityFlag = function () {
- var widget = this;
- this.isValid().done( function ( valid ) {
- if ( !valid ) {
- widget.$input.attr( 'aria-invalid', 'true' );
- } else {
- widget.$input.removeAttr( 'aria-invalid' );
- }
- widget.setFlags( { invalid: !valid } );
- } );
+OO.ui.TextInputWidget.prototype.setValidityFlag = function ( isValid ) {
+ var widget = this,
+ setFlag = function ( valid ) {
+ if ( !valid ) {
+ widget.$input.attr( 'aria-invalid', 'true' );
+ } else {
+ widget.$input.removeAttr( 'aria-invalid' );
+ }
+ widget.setFlags( { invalid: !valid } );
+ };
+
+ if ( isValid !== undefined ) {
+ setFlag( isValid );
+ } else {
+ this.isValid().done( setFlag );
+ }
};
/**
this.anchor = null;
this.width = config.width !== undefined ? config.width : 320;
this.height = config.height !== undefined ? config.height : null;
- // Validate alignment and transform deprecated values
- if ( [ 'left', 'right', 'force-left', 'force-right', 'backwards', 'forwards', 'center' ].indexOf( config.align ) > -1 ) {
- this.align = { left: 'force-right', right: 'force-left' }[ config.align ] || config.align;
- } else {
- this.align = 'center';
- }
+ this.setAlignment( config.align );
this.closeButton = new OO.ui.ButtonWidget( { framed: false, icon: 'close' } );
this.onMouseDownHandler = this.onMouseDown.bind( this );
this.onDocumentKeyDownHandler = this.onDocumentKeyDown.bind( this );
return this;
};
+/**
+ * Set popup alignment
+ * @param {string} align Alignment of the popup, `center`, `force-left`, `force-right`,
+ * `backwards` or `forwards`.
+ */
+OO.ui.PopupWidget.prototype.setAlignment = function ( align ) {
+ // Validate alignment and transform deprecated values
+ if ( [ 'left', 'right', 'force-left', 'force-right', 'backwards', 'forwards', 'center' ].indexOf( align ) > -1 ) {
+ this.align = { left: 'force-right', right: 'force-left' }[ align ] || align;
+ } else {
+ this.align = 'center';
+ }
+};
+
+/**
+ * Get popup alignment
+ * @return {string} align Alignment of the popup, `center`, `force-left`, `force-right`,
+ * `backwards` or `forwards`.
+ */
+OO.ui.PopupWidget.prototype.getAlignment = function () {
+ return this.align;
+};
+
/**
* Progress bars visually display the status of an operation, such as a download,
* and can be either determinate or indeterminate:
*
* [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options
*
+ * @abstract
* @class
* @extends OO.ui.Widget
* @mixins OO.ui.GroupElement
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #FFFFFF }</style>
- <g id="arched-arrow-ltr">
- <path id="arrow" d="M19.925 14.937l-2.391-6.901-1.48 2.329c-.964-.845-2.699-1.85-5.513-1.823-4.887.046-6.524 4.244-6.524 4.244s2.753-2.639 6.925-1.949c1.729.286 3.007 1.206 3.675 1.791l-1.474 2.319 6.782-.01z"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-487 489 24 24" enable-background="new -487 489 24 24" xml:space="preserve"><style>* { fill: #FFFFFF }</style>\r
+<path d="M-472.8,494.7l6.3,5.7l-6.3,5.7v-3.8h-1.3c-3.2,0-6.3,1.3-7.6,3.8c0-4.7,2.8-7.6,7.9-7.6h0.9V494.7z"/>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <g id="arched-arrow-ltr">
- <path id="arrow" d="M19.925 14.937l-2.391-6.901-1.48 2.329c-.964-.845-2.699-1.85-5.513-1.823-4.887.046-6.524 4.244-6.524 4.244s2.753-2.639 6.925-1.949c1.729.286 3.007 1.206 3.675 1.791l-1.474 2.319 6.782-.01z"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-487 489 24 24" enable-background="new -487 489 24 24" xml:space="preserve">\r
+<path d="M-472.8,494.7l6.3,5.7l-6.3,5.7v-3.8h-1.3c-3.2,0-6.3,1.3-7.6,3.8c0-4.7,2.8-7.6,7.9-7.6h0.9V494.7z"/>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #FFFFFF }</style>
- <g id="arched-arrow-rtl">
- <path id="arrow" d="M13.401 8.542c-2.814-.027-4.549.978-5.513 1.823l-1.48-2.329-2.391 6.901 6.782.009-1.474-2.319c.668-.584 1.945-1.504 3.675-1.791 4.172-.69 6.925 1.949 6.925 1.949s-1.637-4.197-6.524-4.243z"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-487 489 24 24" enable-background="new -487 489 24 24" xml:space="preserve"><style>* { fill: #FFFFFF }</style>\r
+<path d="M-476.3,494.7l-6.3,5.7l6.3,5.7v-3.8h1.3c3.2,0,6.3,1.3,7.6,3.8c0-4.7-2.8-7.6-7.9-7.6h-0.9V494.7z"/>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <g id="arched-arrow-rtl">
- <path id="arrow" d="M13.401 8.542c-2.814-.027-4.549.978-5.513 1.823l-1.48-2.329-2.391 6.901 6.782.009-1.474-2.319c.668-.584 1.945-1.504 3.675-1.791 4.172-.69 6.925 1.949 6.925 1.949s-1.637-4.197-6.524-4.243z"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-487 489 24 24" enable-background="new -487 489 24 24" xml:space="preserve">\r
+<path d="M-476.3,494.7l-6.3,5.7l6.3,5.7v-3.8h1.3c3.2,0,6.3,1.3,7.6,3.8c0-4.7-2.8-7.6-7.9-7.6h-0.9V494.7z"/>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #FFFFFF }</style>
- <g>
- <path d="M15.8 3.6c-2.1 0-3.6 1.9-5.1 3.3.2 0 .5-.1.8-.1.5 0 1 .1 1.5.3.8-.8 1.6-1.7 2.8-1.7.6 0 1.3.3 1.8.7 1 1 1 2.6 0 3.6l-2.6 2.6c-.4.4-1.2.7-1.8.7-1.4 0-2.1-.9-2.6-2l-1.3 1.3c.8 1.5 2 2.6 3.8 2.6 1.2 0 2.3-.5 3-1.3l2.6-2.6c.9-.9 1.5-2 1.5-3.3-.2-2.2-2.2-4.1-4.4-4.1zm-4.3 12.1l-.9.9c-.4.4-1.2.7-1.8.7-.6 0-1.3-.3-1.8-.7-1-1-1-2.7 0-3.6l2.6-2.6c.4-.4 1.2-.7 1.8-.7 1.4 0 2.1 1 2.6 2l1.3-1.3c-.8-1.5-2-2.6-3.8-2.6-1.2 0-2.3.5-3 1.3l-2.6 2.6c-1.7 1.7-1.7 4.4 0 6 1.6 1.6 4.4 1.7 5.9 0l1.9-1.9c-.3.1-.6.1-.9.1-.5 0-.9 0-1.3-.2z"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-487 489 24 24" enable-background="new -487 489 24 24" xml:space="preserve"><style>* { fill: #FFFFFF }</style>\r
+<g>\r
+ <path d="M-471.2,493.6c-2.1,0-3.6,1.9-5.1,3.3c0.2,0,0.5-0.1,0.8-0.1c0.5,0,1,0.1,1.5,0.3c0.8-0.8,1.6-1.7,2.8-1.7\r
+ c0.6,0,1.3,0.3,1.8,0.7c1,1,1,2.6,0,3.6l-2.6,2.6c-0.4,0.4-1.2,0.7-1.8,0.7c-1.4,0-2.1-0.9-2.6-2l-1.3,1.3c0.8,1.5,2,2.6,3.8,2.6\r
+ c1.2,0,2.3-0.5,3-1.3l2.6-2.6c0.9-0.9,1.5-2,1.5-3.3C-467,495.5-469,493.6-471.2,493.6z M-475.5,505.7l-0.9,0.9\r
+ c-0.4,0.4-1.2,0.7-1.8,0.7c-0.6,0-1.3-0.3-1.8-0.7c-1-1-1-2.7,0-3.6l2.6-2.6c0.4-0.4,1.2-0.7,1.8-0.7c1.4,0,2.1,1,2.6,2l1.3-1.3\r
+ c-0.8-1.5-2-2.6-3.8-2.6c-1.2,0-2.3,0.5-3,1.3l-2.6,2.6c-1.7,1.7-1.7,4.4,0,6c1.6,1.6,4.4,1.7,5.9,0l1.9-1.9\r
+ c-0.3,0.1-0.6,0.1-0.9,0.1C-474.7,505.9-475.1,505.9-475.5,505.7z"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <g>
- <path d="M15.8 3.6c-2.1 0-3.6 1.9-5.1 3.3.2 0 .5-.1.8-.1.5 0 1 .1 1.5.3.8-.8 1.6-1.7 2.8-1.7.6 0 1.3.3 1.8.7 1 1 1 2.6 0 3.6l-2.6 2.6c-.4.4-1.2.7-1.8.7-1.4 0-2.1-.9-2.6-2l-1.3 1.3c.8 1.5 2 2.6 3.8 2.6 1.2 0 2.3-.5 3-1.3l2.6-2.6c.9-.9 1.5-2 1.5-3.3-.2-2.2-2.2-4.1-4.4-4.1zm-4.3 12.1l-.9.9c-.4.4-1.2.7-1.8.7-.6 0-1.3-.3-1.8-.7-1-1-1-2.7 0-3.6l2.6-2.6c.4-.4 1.2-.7 1.8-.7 1.4 0 2.1 1 2.6 2l1.3-1.3c-.8-1.5-2-2.6-3.8-2.6-1.2 0-2.3.5-3 1.3l-2.6 2.6c-1.7 1.7-1.7 4.4 0 6 1.6 1.6 4.4 1.7 5.9 0l1.9-1.9c-.3.1-.6.1-.9.1-.5 0-.9 0-1.3-.2z"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-487 489 24 24" enable-background="new -487 489 24 24" xml:space="preserve">\r
+<g>\r
+ <path d="M-471.2,493.6c-2.1,0-3.6,1.9-5.1,3.3c0.2,0,0.5-0.1,0.8-0.1c0.5,0,1,0.1,1.5,0.3c0.8-0.8,1.6-1.7,2.8-1.7\r
+ c0.6,0,1.3,0.3,1.8,0.7c1,1,1,2.6,0,3.6l-2.6,2.6c-0.4,0.4-1.2,0.7-1.8,0.7c-1.4,0-2.1-0.9-2.6-2l-1.3,1.3c0.8,1.5,2,2.6,3.8,2.6\r
+ c1.2,0,2.3-0.5,3-1.3l2.6-2.6c0.9-0.9,1.5-2,1.5-3.3C-467,495.5-469,493.6-471.2,493.6z M-475.5,505.7l-0.9,0.9\r
+ c-0.4,0.4-1.2,0.7-1.8,0.7c-0.6,0-1.3-0.3-1.8-0.7c-1-1-1-2.7,0-3.6l2.6-2.6c0.4-0.4,1.2-0.7,1.8-0.7c1.4,0,2.1,1,2.6,2l1.3-1.3\r
+ c-0.8-1.5-2-2.6-3.8-2.6c-1.2,0-2.3,0.5-3,1.3l-2.6,2.6c-1.7,1.7-1.7,4.4,0,6c1.6,1.6,4.4,1.7,5.9,0l1.9-1.9\r
+ c-0.3,0.1-0.6,0.1-0.9,0.1C-474.7,505.9-475.1,505.9-475.5,505.7z"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #FFFFFF }</style>
- <g id="menu">
- <path id="lines" d="M6 15h12c.553 0 1 .447 1 1v1c0 .553-.447 1-1 1h-12c-.553 0-1-.447-1-1v-1c0-.553.447-1 1-1zm-1-4v1c0 .553.447 1 1 1h12c.553 0 1-.447 1-1v-1c0-.553-.447-1-1-1h-12c-.553 0-1 .447-1 1zm0-5v1c0 .553.447 1 1 1h12c.553 0 1-.447 1-1v-1c0-.553-.447-1-1-1h-12c-.553 0-1 .447-1 1z"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-487 489 24 24" enable-background="new -487 489 24 24" xml:space="preserve"><style>* { fill: #FFFFFF }</style>\r
+<g id="menu">\r
+ <path id="lines" d="M-481,505h12c0.6,0,1,0.4,1,1v1c0,0.6-0.4,1-1,1h-12c-0.6,0-1-0.4-1-1v-1C-482,505.4-481.6,505-481,505z\r
+ M-482,501v1c0,0.6,0.4,1,1,1h12c0.6,0,1-0.4,1-1v-1c0-0.6-0.4-1-1-1h-12C-481.6,500-482,500.4-482,501z M-482,496v1\r
+ c0,0.6,0.4,1,1,1h12c0.6,0,1-0.4,1-1v-1c0-0.6-0.4-1-1-1h-12C-481.6,495-482,495.4-482,496z"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <g id="menu">
- <path id="lines" d="M6 15h12c.553 0 1 .447 1 1v1c0 .553-.447 1-1 1h-12c-.553 0-1-.447-1-1v-1c0-.553.447-1 1-1zm-1-4v1c0 .553.447 1 1 1h12c.553 0 1-.447 1-1v-1c0-.553-.447-1-1-1h-12c-.553 0-1 .447-1 1zm0-5v1c0 .553.447 1 1 1h12c.553 0 1-.447 1-1v-1c0-.553-.447-1-1-1h-12c-.553 0-1 .447-1 1z"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-487 489 24 24" enable-background="new -487 489 24 24" xml:space="preserve">\r
+<g id="menu">\r
+ <path id="lines" d="M-481,505h12c0.6,0,1,0.4,1,1v1c0,0.6-0.4,1-1,1h-12c-0.6,0-1-0.4-1-1v-1C-482,505.4-481.6,505-481,505z\r
+ M-482,501v1c0,0.6,0.4,1,1,1h12c0.6,0,1-0.4,1-1v-1c0-0.6-0.4-1-1-1h-12C-481.6,500-482,500.4-482,501z M-482,496v1\r
+ c0,0.6,0.4,1,1,1h12c0.6,0,1-0.4,1-1v-1c0-0.6-0.4-1-1-1h-12C-481.6,495-482,495.4-482,496z"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><style>* { fill: #FFFFFF }</style>
- <g id="down">
- <path id="arrow" d="M11 4l-.463-.467c-.45-.446-1.186-.445-1.637 0l-2.897 2.89-2.915-2.898c-.45-.446-1.176-.43-1.626.017L1 4l5.003 5v-.01V9L11 4"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"><style>* { fill: #FFFFFF }</style>\r
+<g id="down">\r
+ <path id="arrow" d="M883.3,341H116.7L500,724.3l0,0l0,0L883.3,341"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
- <g id="down">
- <path id="arrow" d="M11 4l-.463-.467c-.45-.446-1.186-.445-1.637 0l-2.897 2.89-2.915-2.898c-.45-.446-1.176-.43-1.626.017L1 4l5.003 5v-.01V9L11 4"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">\r
+<g id="down">\r
+ <path id="arrow" d="M883.3,341H116.7L500,724.3l0,0l0,0L883.3,341"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><style>* { fill: #FFFFFF }</style>
- <g id="ltr">
- <path id="arrow" d="M4 1l-.47.463c-.444.45-.444 1.186 0 1.637L6.423 6l-2.9 2.91c-.444.45-.43 1.177.02 1.627L4 11l5-5h-.01H9L4 1"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-493 495 12 12" enable-background="new -493 495 12 12" xml:space="preserve"><style>* { fill: #FFFFFF }</style>\r
+<g id="ltr">\r
+ <path id="arrow" d="M-489,496v10l5-5h0h0L-489,496"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
- <g id="ltr">
- <path id="arrow" d="M4 1l-.47.463c-.444.45-.444 1.186 0 1.637L6.423 6l-2.9 2.91c-.444.45-.43 1.177.02 1.627L4 11l5-5h-.01H9L4 1"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-493 495 12 12" enable-background="new -493 495 12 12" xml:space="preserve">\r
+<g id="ltr">\r
+ <path id="arrow" d="M-489,496v10l5-5h0h0L-489,496"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><style>* { fill: #FFFFFF }</style>
- <g id="rtl">
- <path id="arrow" d="M8 11l.47-.463c.444-.45.444-1.186 0-1.637L5.576 6l2.9-2.91c.444-.45.43-1.177-.02-1.627L8 1 3 6h.01H3l5 5"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-493 495 12 12" enable-background="new -493 495 12 12" xml:space="preserve"><style>* { fill: #FFFFFF }</style>\r
+<g id="rtl">\r
+ <path id="arrow" d="M-485,506v-10l-5,5h0h0L-485,506"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
- <g id="rtl">
- <path id="arrow" d="M8 11l.47-.463c.444-.45.444-1.186 0-1.637L5.576 6l2.9-2.91c.444-.45.43-1.177-.02-1.627L8 1 3 6h.01H3l5 5"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-493 495 12 12" enable-background="new -493 495 12 12" xml:space="preserve">\r
+<g id="rtl">\r
+ <path id="arrow" d="M-485,506v-10l-5,5h0h0L-485,506"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><style>* { fill: #FFFFFF }</style>
- <g id="up">
- <path id="arrow" d="M1 8l.463.47c.45.444 1.186.444 1.637 0L6 5.567l2.91 2.91c.45.444 1.177.43 1.627-.02L11 8 6 2.99V3v-.01L1 8"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-493 495 12 12" enable-background="new -493 495 12 12" xml:space="preserve"><style>* { fill: #FFFFFF }</style>\r
+<g id="up">\r
+ <path id="arrow" d="M-492,503h10l-5-5v0v0L-492,503"/>\r
+</g>\r
+</svg>\r
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
- <g id="up">
- <path id="arrow" d="M1 8l.463.47c.45.444 1.186.444 1.637 0L6 5.567l2.91 2.91c.45.444 1.177.43 1.627-.02L11 8 6 2.99V3v-.01L1 8"/>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ viewBox="-493 495 12 12" enable-background="new -493 495 12 12" xml:space="preserve">\r
+<g id="up">\r
+ <path id="arrow" d="M-492,503h10l-5-5v0v0L-492,503"/>\r
+</g>\r
+</svg>\r