From d50f6c0e22b980703dc96a4c2937419ec9b02436 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Wed, 18 Feb 2015 17:36:58 -0800 Subject: [PATCH] Update OOjs UI to v0.8.0 Release notes: https://git.wikimedia.org/blob/oojs%2Fui.git/v0.8.0/History.md Change-Id: If14d382beae3f42d2ffb3a43ee0c3e2a488a5fa1 --- composer.json | 2 +- resources/Resources.php | 2 +- resources/lib/oojs-ui/oojs-ui-mediawiki.css | 417 ++++++-- resources/lib/oojs-ui/oojs-ui-mediawiki.js | 6 +- ...i.svg.css => oojs-ui-mediawiki.vector.css} | 44 +- resources/lib/oojs-ui/oojs-ui.js | 890 ++++++++++++------ 6 files changed, 972 insertions(+), 389 deletions(-) rename resources/lib/oojs-ui/{oojs-ui-mediawiki.svg.css => oojs-ui-mediawiki.vector.css} (98%) diff --git a/composer.json b/composer.json index ff9289887f..75aed40070 100644 --- a/composer.json +++ b/composer.json @@ -18,7 +18,7 @@ "require": { "cssjanus/cssjanus": "1.1.1", "leafo/lessphp": "0.5.0", - "oojs/oojs-ui": "0.7.0", + "oojs/oojs-ui": "0.8.0", "php": ">=5.3.3", "psr/log": "1.0.0", "wikimedia/cdb": "1.0.1", diff --git a/resources/Resources.php b/resources/Resources.php index 233485c345..e25a523a9b 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1667,7 +1667,7 @@ return array( 'oojs-ui.styles' => array( 'position' => 'top', 'skinStyles' => array( - 'default' => 'resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css', + 'default' => 'resources/lib/oojs-ui/oojs-ui-mediawiki.vector.css', ), 'targets' => array( 'desktop', 'mobile' ), ), diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.css index cf051b4feb..cc8fdf51e0 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.7.0 + * OOjs UI v0.8.0 * 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-02-12T00:04:52Z + * Date: 2015-02-19T01:33:21Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -76,9 +76,7 @@ -ms-user-select: none; user-select: none; } -.oo-ui-buttonElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { - display: none; -} +.oo-ui-buttonElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, .oo-ui-buttonElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { display: none; } @@ -133,16 +131,16 @@ width: 1.9em; height: 1.9em; } -.oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, -.oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { - opacity: 0.2; -} -.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.2); outline: none; } +.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator { + margin-right: 0; +} .oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { margin-left: 0.25em; + margin-right: 0.25em; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #757575; @@ -189,6 +187,10 @@ .oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button { color: #cccccc; } +.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, +.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { + opacity: 0.2; +} .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { margin: 0.1em 0; padding: 0.2em 0.8em; @@ -942,7 +944,10 @@ background-image: none; } .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconElement-icon { - background-image: /* @embed */ url(themes/mediawiki/images/icons/check.png); + background-image: url("themes/mediawiki/images/icons/check.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/check.png"); } .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { background-color: #eeeeee; @@ -1442,6 +1447,10 @@ .oo-ui-inputWidget:last-child { margin-right: 0; } +.oo-ui-buttonInputWidget { + display: inline-block; + vertical-align: middle; +} .oo-ui-checkboxInputWidget { position: relative; line-height: 1.6em; @@ -1481,7 +1490,10 @@ height: 1.6em; background-color: white; border: 1px solid #777777; - background-image: /* @embed */ url(themes/mediawiki/images/icons/check-constructive.png); + background-image: url("themes/mediawiki/images/icons/check-constructive.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check-constructive.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check-constructive.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/check-constructive.png"); background-repeat: no-repeat; background-position: center center; background-origin: border-box; @@ -1507,7 +1519,10 @@ border-color: #eeeeee; } .oo-ui-checkboxInputWidget input[type="checkbox"]:disabled:checked + span::before { - background-image: /* @embed */ url(themes/mediawiki/images/icons/check-invert.png); + background-image: url("themes/mediawiki/images/icons/check-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/check-invert.png"); } .oo-ui-dropdownInputWidget { position: relative; @@ -1585,7 +1600,10 @@ height: 1.6em; background: white; border: 1px solid #777777; - background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-constructive.png); + background-image: url("themes/mediawiki/images/icons/circle-constructive.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle-constructive.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle-constructive.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/circle-constructive.png"); background-repeat: no-repeat; background-position: center center; background-origin: border-box; @@ -1611,7 +1629,10 @@ border-color: #eeeeee; } .oo-ui-radioInputWidget input[type="radio"]:disabled:checked + span::before { - background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-invert.png); + background-image: url("themes/mediawiki/images/icons/circle-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/circle-invert.png"); } .oo-ui-textInputWidget { position: relative; @@ -1632,7 +1653,13 @@ box-sizing: border-box; } .oo-ui-textInputWidget > .oo-ui-iconElement-icon, -.oo-ui-textInputWidget > .oo-ui-indicatorElement-indicator { +.oo-ui-textInputWidget > .oo-ui-indicatorElement-indicator, +.oo-ui-textInputWidget > .oo-ui-labelElement-label { + display: none; +} +.oo-ui-textInputWidget.oo-ui-iconElement > .oo-ui-iconElement-icon, +.oo-ui-textInputWidget.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator { + display: block; position: absolute; top: 0; height: 100%; @@ -1644,6 +1671,9 @@ -ms-user-select: none; user-select: none; } +.oo-ui-textInputWidget.oo-ui-labelElement > .oo-ui-labelElement-label { + display: block; +} .oo-ui-textInputWidget > .oo-ui-iconElement-icon { left: 0; } @@ -1739,10 +1769,10 @@ color: #888888; } .oo-ui-textInputWidget-labelPosition-after.oo-ui-indicatorElement > .oo-ui-labelElement-label { - padding-right: 2.4em; + margin-right: 2em; } .oo-ui-textInputWidget-labelPosition-before.oo-ui-iconElement > .oo-ui-labelElement-label { - padding-left: 2.9em; + margin-left: 2.5em; } .oo-ui-menuSelectWidget { position: absolute; @@ -2212,7 +2242,6 @@ right: 0; } .oo-ui-processDialog-errors { - display: none; position: absolute; top: 0; left: 0; @@ -2418,248 +2447,458 @@ } .oo-ui-icon-add { - background-image: /* @embed */ url(themes/mediawiki/images/icons/add.png); + background-image: url("themes/mediawiki/images/icons/add.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/add.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/add.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/add.png"); } .oo-ui-image-constructive .oo-ui-icon-add, .oo-ui-image-constructive.oo-ui-icon-add { - background-image: /* @embed */ url(themes/mediawiki/images/icons/add-constructive.png); + background-image: url("themes/mediawiki/images/icons/add-constructive.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/add-constructive.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/add-constructive.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/add-constructive.png"); } .oo-ui-image-invert .oo-ui-icon-add, .oo-ui-image-invert.oo-ui-icon-add { - background-image: /* @embed */ url(themes/mediawiki/images/icons/add-invert.png); + background-image: url("themes/mediawiki/images/icons/add-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/add-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/add-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/add-invert.png"); } .oo-ui-icon-advanced { - background-image: /* @embed */ url(themes/mediawiki/images/icons/advanced.png); + background-image: url("themes/mediawiki/images/icons/advanced.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/advanced.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/advanced.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/advanced.png"); } .oo-ui-image-invert .oo-ui-icon-advanced, .oo-ui-image-invert.oo-ui-icon-advanced { - background-image: /* @embed */ url(themes/mediawiki/images/icons/advanced-invert.png); + background-image: url("themes/mediawiki/images/icons/advanced-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/advanced-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/advanced-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/advanced-invert.png"); } .oo-ui-icon-alert { - background-image: /* @embed */ url(themes/mediawiki/images/icons/alert.png); + background-image: url("themes/mediawiki/images/icons/alert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/alert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/alert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/alert.png"); } .oo-ui-image-invert .oo-ui-icon-alert, .oo-ui-image-invert.oo-ui-icon-alert { - background-image: /* @embed */ url(themes/mediawiki/images/icons/alert-invert.png); + background-image: url("themes/mediawiki/images/icons/alert-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/alert-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/alert-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/alert-invert.png"); } .oo-ui-icon-check { - background-image: /* @embed */ url(themes/mediawiki/images/icons/check.png); + background-image: url("themes/mediawiki/images/icons/check.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/check.png"); } .oo-ui-image-constructive .oo-ui-icon-check, .oo-ui-image-constructive.oo-ui-icon-check { - background-image: /* @embed */ url(themes/mediawiki/images/icons/check-constructive.png); + background-image: url("themes/mediawiki/images/icons/check-constructive.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check-constructive.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check-constructive.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/check-constructive.png"); } .oo-ui-image-invert .oo-ui-icon-check, .oo-ui-image-invert.oo-ui-icon-check { - background-image: /* @embed */ url(themes/mediawiki/images/icons/check-invert.png); + background-image: url("themes/mediawiki/images/icons/check-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/check-invert.png"); } .oo-ui-icon-clear { - background-image: /* @embed */ url(themes/mediawiki/images/icons/clear.png); + background-image: url("themes/mediawiki/images/icons/clear.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/clear.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/clear.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/clear.png"); } .oo-ui-image-invert .oo-ui-icon-clear, .oo-ui-image-invert.oo-ui-icon-clear { - background-image: /* @embed */ url(themes/mediawiki/images/icons/clear-invert.png); + background-image: url("themes/mediawiki/images/icons/clear-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/clear-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/clear-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/clear-invert.png"); } .oo-ui-icon-close { - background-image: /* @embed */ url(themes/mediawiki/images/icons/close.png); + background-image: url("themes/mediawiki/images/icons/close.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/close.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/close.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/close.png"); } .oo-ui-image-invert .oo-ui-icon-close, .oo-ui-image-invert.oo-ui-icon-close { - background-image: /* @embed */ url(themes/mediawiki/images/icons/close-invert.png); + background-image: url("themes/mediawiki/images/icons/close-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/close-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/close-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/close-invert.png"); } .oo-ui-icon-code { - background-image: /* @embed */ url(themes/mediawiki/images/icons/code.png); + background-image: url("themes/mediawiki/images/icons/code.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/code.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/code.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/code.png"); } .oo-ui-image-invert .oo-ui-icon-code, .oo-ui-image-invert.oo-ui-icon-code { - background-image: /* @embed */ url(themes/mediawiki/images/icons/code-invert.png); + background-image: url("themes/mediawiki/images/icons/code-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/code-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/code-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/code-invert.png"); } .oo-ui-icon-collapse { - background-image: /* @embed */ url(themes/mediawiki/images/icons/collapse.png); + background-image: url("themes/mediawiki/images/icons/collapse.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/collapse.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/collapse.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/collapse.png"); } .oo-ui-image-invert .oo-ui-icon-collapse, .oo-ui-image-invert.oo-ui-icon-collapse { - background-image: /* @embed */ url(themes/mediawiki/images/icons/collapse-invert.png); + background-image: url("themes/mediawiki/images/icons/collapse-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/collapse-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/collapse-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/collapse-invert.png"); } .oo-ui-icon-comment { - background-image: /* @embed */ url(themes/mediawiki/images/icons/comment.png); + background-image: url("themes/mediawiki/images/icons/comment.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/comment.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/comment.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/comment.png"); } .oo-ui-image-invert .oo-ui-icon-comment, .oo-ui-image-invert.oo-ui-icon-comment { - background-image: /* @embed */ url(themes/mediawiki/images/icons/comment-invert.png); + background-image: url("themes/mediawiki/images/icons/comment-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/comment-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/comment-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/comment-invert.png"); } .oo-ui-icon-expand { - background-image: /* @embed */ url(themes/mediawiki/images/icons/expand.png); + background-image: url("themes/mediawiki/images/icons/expand.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/expand.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/expand.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/expand.png"); } .oo-ui-image-invert .oo-ui-icon-expand, .oo-ui-image-invert.oo-ui-icon-expand { - background-image: /* @embed */ url(themes/mediawiki/images/icons/expand-invert.png); + background-image: url("themes/mediawiki/images/icons/expand-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/expand-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/expand-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/expand-invert.png"); } .oo-ui-icon-help { - background-image: /* @embed */ url(themes/mediawiki/images/icons/help.png); + background-image: url("themes/mediawiki/images/icons/help.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/help.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/help.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/help.png"); } .oo-ui-image-invert .oo-ui-icon-help, .oo-ui-image-invert.oo-ui-icon-help { - background-image: /* @embed */ url(themes/mediawiki/images/icons/help-invert.png); + background-image: url("themes/mediawiki/images/icons/help-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/help-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/help-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/help-invert.png"); } .oo-ui-icon-info { - background-image: /* @embed */ url(themes/mediawiki/images/icons/info.png); + background-image: url("themes/mediawiki/images/icons/info.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/info.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/info.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/info.png"); } .oo-ui-image-invert .oo-ui-icon-info, .oo-ui-image-invert.oo-ui-icon-info { - background-image: /* @embed */ url(themes/mediawiki/images/icons/info-invert.png); + background-image: url("themes/mediawiki/images/icons/info-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/info-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/info-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/info-invert.png"); } .oo-ui-icon-link { - background-image: /* @embed */ url(themes/mediawiki/images/icons/link.png); + background-image: url("themes/mediawiki/images/icons/link.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/link.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/link.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/link.png"); } .oo-ui-image-invert .oo-ui-icon-link, .oo-ui-image-invert.oo-ui-icon-link { - background-image: /* @embed */ url(themes/mediawiki/images/icons/link-invert.png); + background-image: url("themes/mediawiki/images/icons/link-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/link-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/link-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/link-invert.png"); } .oo-ui-icon-lock { - background-image: /* @embed */ url(themes/mediawiki/images/icons/lock.png); + background-image: url("themes/mediawiki/images/icons/lock.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/lock.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/lock.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/lock.png"); } .oo-ui-image-invert .oo-ui-icon-lock, .oo-ui-image-invert.oo-ui-icon-lock { - background-image: /* @embed */ url(themes/mediawiki/images/icons/lock-invert.png); + background-image: url("themes/mediawiki/images/icons/lock-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/lock-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/lock-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/lock-invert.png"); } .oo-ui-icon-menu { - background-image: /* @embed */ url(themes/mediawiki/images/icons/menu.png); + background-image: url("themes/mediawiki/images/icons/menu.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/menu.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/menu.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/menu.png"); } .oo-ui-image-invert .oo-ui-icon-menu, .oo-ui-image-invert.oo-ui-icon-menu { - background-image: /* @embed */ url(themes/mediawiki/images/icons/menu-invert.png); + background-image: url("themes/mediawiki/images/icons/menu-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/menu-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/menu-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/menu-invert.png"); } .oo-ui-icon-next { - background-image: /* @embed */ url(themes/mediawiki/images/icons/move-ltr.png); + background-image: url("themes/mediawiki/images/icons/move-ltr.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/move-ltr.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/move-ltr.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/move-ltr.png"); } .oo-ui-image-invert .oo-ui-icon-next, .oo-ui-image-invert.oo-ui-icon-next { - background-image: /* @embed */ url(themes/mediawiki/images/icons/move-ltr-invert.png); + background-image: url("themes/mediawiki/images/icons/move-ltr-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/move-ltr-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/move-ltr-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/move-ltr-invert.png"); } .oo-ui-icon-picture { - background-image: /* @embed */ url(themes/mediawiki/images/icons/picture.png); + background-image: url("themes/mediawiki/images/icons/picture.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/picture.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/picture.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/picture.png"); } .oo-ui-image-invert .oo-ui-icon-picture, .oo-ui-image-invert.oo-ui-icon-picture { - background-image: /* @embed */ url(themes/mediawiki/images/icons/picture-invert.png); + background-image: url("themes/mediawiki/images/icons/picture-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/picture-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/picture-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/picture-invert.png"); } .oo-ui-icon-previous { - background-image: /* @embed */ url(themes/mediawiki/images/icons/move-rtl.png); + background-image: url("themes/mediawiki/images/icons/move-rtl.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/move-rtl.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/move-rtl.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/move-rtl.png"); } .oo-ui-image-invert .oo-ui-icon-previous, .oo-ui-image-invert.oo-ui-icon-previous { - background-image: /* @embed */ url(themes/mediawiki/images/icons/move-rtl-invert.png); + background-image: url("themes/mediawiki/images/icons/move-rtl-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/move-rtl-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/move-rtl-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/move-rtl-invert.png"); } .oo-ui-icon-circle { - background-image: /* @embed */ url(themes/mediawiki/images/icons/circle.png); + background-image: url("themes/mediawiki/images/icons/circle.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/circle.png"); } .oo-ui-image-constructive .oo-ui-icon-circle, .oo-ui-image-constructive.oo-ui-icon-circle { - background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-constructive.png); + background-image: url("themes/mediawiki/images/icons/circle-constructive.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle-constructive.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle-constructive.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/circle-constructive.png"); } .oo-ui-image-invert .oo-ui-icon-circle, .oo-ui-image-invert.oo-ui-icon-circle { - background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-invert.png); + background-image: url("themes/mediawiki/images/icons/circle-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/circle-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/circle-invert.png"); } .oo-ui-icon-redo { - background-image: /* @embed */ url(themes/mediawiki/images/icons/arched-arrow-ltr.png); + background-image: url("themes/mediawiki/images/icons/arched-arrow-ltr.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/arched-arrow-ltr.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/arched-arrow-ltr.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/arched-arrow-ltr.png"); } .oo-ui-image-invert .oo-ui-icon-redo, .oo-ui-image-invert.oo-ui-icon-redo { - background-image: /* @embed */ url(themes/mediawiki/images/icons/arched-arrow-ltr-invert.png); + background-image: url("themes/mediawiki/images/icons/arched-arrow-ltr-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/arched-arrow-ltr-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/arched-arrow-ltr-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/arched-arrow-ltr-invert.png"); } .oo-ui-icon-remove { - background-image: /* @embed */ url(themes/mediawiki/images/icons/remove.png); + background-image: url("themes/mediawiki/images/icons/remove.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/remove.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/remove.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/remove.png"); } .oo-ui-image-destructive .oo-ui-icon-remove, .oo-ui-image-destructive.oo-ui-icon-remove { - background-image: /* @embed */ url(themes/mediawiki/images/icons/remove-destructive.png); + background-image: url("themes/mediawiki/images/icons/remove-destructive.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/remove-destructive.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/remove-destructive.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/remove-destructive.png"); } .oo-ui-image-invert .oo-ui-icon-remove, .oo-ui-image-invert.oo-ui-icon-remove { - background-image: /* @embed */ url(themes/mediawiki/images/icons/remove-invert.png); + background-image: url("themes/mediawiki/images/icons/remove-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/remove-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/remove-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/remove-invert.png"); } .oo-ui-icon-search { - background-image: /* @embed */ url(themes/mediawiki/images/icons/search.png); + background-image: url("themes/mediawiki/images/icons/search.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/search.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/search.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/search.png"); } .oo-ui-image-invert .oo-ui-icon-search, .oo-ui-image-invert.oo-ui-icon-search { - background-image: /* @embed */ url(themes/mediawiki/images/icons/search-invert.png); + background-image: url("themes/mediawiki/images/icons/search-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/search-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/search-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/search-invert.png"); } .oo-ui-icon-settings { - background-image: /* @embed */ url(themes/mediawiki/images/icons/settings.png); + background-image: url("themes/mediawiki/images/icons/settings.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/settings.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/settings.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/settings.png"); } .oo-ui-image-invert .oo-ui-icon-settings, .oo-ui-image-invert.oo-ui-icon-settings { - background-image: /* @embed */ url(themes/mediawiki/images/icons/settings-invert.png); + background-image: url("themes/mediawiki/images/icons/settings-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/settings-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/settings-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/settings-invert.png"); } .oo-ui-icon-tag { - background-image: /* @embed */ url(themes/mediawiki/images/icons/tag.png); + background-image: url("themes/mediawiki/images/icons/tag.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/tag.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/tag.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/tag.png"); } .oo-ui-image-invert .oo-ui-icon-tag, .oo-ui-image-invert.oo-ui-icon-tag { - background-image: /* @embed */ url(themes/mediawiki/images/icons/tag-invert.png); + background-image: url("themes/mediawiki/images/icons/tag-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/tag-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/tag-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/tag-invert.png"); } .oo-ui-icon-undo { - background-image: /* @embed */ url(themes/mediawiki/images/icons/arched-arrow-rtl.png); + background-image: url("themes/mediawiki/images/icons/arched-arrow-rtl.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/arched-arrow-rtl.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/arched-arrow-rtl.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/arched-arrow-rtl.png"); } .oo-ui-image-invert .oo-ui-icon-undo, .oo-ui-image-invert.oo-ui-icon-undo { - background-image: /* @embed */ url(themes/mediawiki/images/icons/arched-arrow-rtl-invert.png); + background-image: url("themes/mediawiki/images/icons/arched-arrow-rtl-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/arched-arrow-rtl-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/arched-arrow-rtl-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/arched-arrow-rtl-invert.png"); } .oo-ui-icon-window { - background-image: /* @embed */ url(themes/mediawiki/images/icons/window.png); + background-image: url("themes/mediawiki/images/icons/window.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/window.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/window.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/window.png"); } .oo-ui-image-invert .oo-ui-icon-window, .oo-ui-image-invert.oo-ui-icon-window { - background-image: /* @embed */ url(themes/mediawiki/images/icons/window-invert.png); + background-image: url("themes/mediawiki/images/icons/window-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/window-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/window-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/window-invert.png"); } .oo-ui-indicator-alert { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/alert.png); + background-image: url("themes/mediawiki/images/indicators/alert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/alert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/alert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/alert.png"); } .oo-ui-image-invert .oo-ui-indicator-alert, .oo-ui-image-invert.oo-ui-indicator-alert { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/alert-invert.png); + background-image: url("themes/mediawiki/images/indicators/alert-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/alert-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/alert-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/alert-invert.png"); } .oo-ui-indicator-up { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/arrow-up.png); + background-image: url("themes/mediawiki/images/indicators/arrow-up.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-up.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-up.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/arrow-up.png"); } .oo-ui-image-invert .oo-ui-indicator-up, .oo-ui-image-invert.oo-ui-indicator-up { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/arrow-up-invert.png); + background-image: url("themes/mediawiki/images/indicators/arrow-up-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-up-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-up-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/arrow-up-invert.png"); } .oo-ui-indicator-down { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/arrow-down.png); + background-image: url("themes/mediawiki/images/indicators/arrow-down.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-down.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-down.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/arrow-down.png"); } .oo-ui-image-invert .oo-ui-indicator-down, .oo-ui-image-invert.oo-ui-indicator-down { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/arrow-down-invert.png); + background-image: url("themes/mediawiki/images/indicators/arrow-down-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-down-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-down-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/arrow-down-invert.png"); } .oo-ui-indicator-next { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/arrow-ltr.png); + background-image: url("themes/mediawiki/images/indicators/arrow-ltr.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-ltr.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-ltr.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/arrow-ltr.png"); } .oo-ui-image-invert .oo-ui-indicator-next, .oo-ui-image-invert.oo-ui-indicator-next { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/arrow-ltr-invert.png); + background-image: url("themes/mediawiki/images/indicators/arrow-ltr-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-ltr-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-ltr-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/arrow-ltr-invert.png"); } .oo-ui-indicator-previous { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/arrow-rtl.png); + background-image: url("themes/mediawiki/images/indicators/arrow-rtl.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-rtl.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-rtl.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/arrow-rtl.png"); } .oo-ui-image-invert .oo-ui-indicator-previous, .oo-ui-image-invert.oo-ui-indicator-previous { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/arrow-rtl-invert.png); + background-image: url("themes/mediawiki/images/indicators/arrow-rtl-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-rtl-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/arrow-rtl-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/arrow-rtl-invert.png"); } .oo-ui-indicator-required { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/required.png); + background-image: url("themes/mediawiki/images/indicators/required.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/required.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/required.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/required.png"); } .oo-ui-image-invert .oo-ui-indicator-required, .oo-ui-image-invert.oo-ui-indicator-required { - background-image: /* @embed */ url(themes/mediawiki/images/indicators/required-invert.png); + background-image: url("themes/mediawiki/images/indicators/required-invert.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/required-invert.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/indicators/required-invert.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/indicators/required-invert.png"); } .oo-ui-texture-pending { - background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); + background-image: url("themes/mediawiki/images/textures/pending.gif"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/textures/pending.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/textures/pending.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/textures/pending.gif"); } .oo-ui-texture-transparency { - background-image: /* @embed */ url(themes/mediawiki/images/textures/transparency.png); + background-image: url("themes/mediawiki/images/textures/transparency.png"); + background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/textures/transparency.svg"); + background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/textures/transparency.svg"); + background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/textures/transparency.png"); } diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js index 42e305312f..3be2d1b045 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.js +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.7.0 + * OOjs UI v0.8.0 * 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-02-12T00:04:43Z + * Date: 2015-02-19T01:33:11Z */ /** * @class @@ -41,7 +41,7 @@ OO.ui.MediaWikiTheme.prototype.getElementClasses = function ( element ) { classes = OO.ui.MediaWikiTheme.super.prototype.getElementClasses.call( this, element ); if ( element.supports( [ 'isFramed', 'isDisabled', 'hasFlag' ] ) ) { - if ( !element.isDisabled() && element.isFramed() && element.hasFlag( 'primary' ) ) { + if ( element.isFramed() && ( element.isDisabled() || element.hasFlag( 'primary' ) ) ) { variants.invert = true; } else { variants.progressive = element.hasFlag( 'progressive' ); diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.vector.css similarity index 98% rename from resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css rename to resources/lib/oojs-ui/oojs-ui-mediawiki.vector.css index 0d16099e02..453811c299 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.vector.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.7.0 + * OOjs UI v0.8.0 * 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-02-12T00:04:52Z + * Date: 2015-02-19T01:33:21Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -76,9 +76,7 @@ -ms-user-select: none; user-select: none; } -.oo-ui-buttonElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { - display: none; -} +.oo-ui-buttonElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, .oo-ui-buttonElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { display: none; } @@ -133,16 +131,16 @@ width: 1.9em; height: 1.9em; } -.oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, -.oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { - opacity: 0.2; -} -.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.2); outline: none; } +.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator { + margin-right: 0; +} .oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { margin-left: 0.25em; + margin-right: 0.25em; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #757575; @@ -189,6 +187,10 @@ .oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button { color: #cccccc; } +.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, +.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { + opacity: 0.2; +} .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { margin: 0.1em 0; padding: 0.2em 0.8em; @@ -1442,6 +1444,10 @@ .oo-ui-inputWidget:last-child { margin-right: 0; } +.oo-ui-buttonInputWidget { + display: inline-block; + vertical-align: middle; +} .oo-ui-checkboxInputWidget { position: relative; line-height: 1.6em; @@ -1632,7 +1638,13 @@ box-sizing: border-box; } .oo-ui-textInputWidget > .oo-ui-iconElement-icon, -.oo-ui-textInputWidget > .oo-ui-indicatorElement-indicator { +.oo-ui-textInputWidget > .oo-ui-indicatorElement-indicator, +.oo-ui-textInputWidget > .oo-ui-labelElement-label { + display: none; +} +.oo-ui-textInputWidget.oo-ui-iconElement > .oo-ui-iconElement-icon, +.oo-ui-textInputWidget.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator { + display: block; position: absolute; top: 0; height: 100%; @@ -1644,6 +1656,9 @@ -ms-user-select: none; user-select: none; } +.oo-ui-textInputWidget.oo-ui-labelElement > .oo-ui-labelElement-label { + display: block; +} .oo-ui-textInputWidget > .oo-ui-iconElement-icon { left: 0; } @@ -1739,10 +1754,10 @@ color: #888888; } .oo-ui-textInputWidget-labelPosition-after.oo-ui-indicatorElement > .oo-ui-labelElement-label { - padding-right: 2.4em; + margin-right: 2em; } .oo-ui-textInputWidget-labelPosition-before.oo-ui-iconElement > .oo-ui-labelElement-label { - padding-left: 2.9em; + margin-left: 2.5em; } .oo-ui-menuSelectWidget { position: absolute; @@ -2212,7 +2227,6 @@ right: 0; } .oo-ui-processDialog-errors { - display: none; position: absolute; top: 0; left: 0; @@ -2658,7 +2672,7 @@ background-image: /* @embed */ url(themes/mediawiki/images/indicators/required-invert.svg); } .oo-ui-texture-pending { - background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); + background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.svg); } .oo-ui-texture-transparency { background-image: /* @embed */ url(themes/mediawiki/images/textures/transparency.svg); diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index f85202e0e4..0ad88fe19f 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.7.0 + * OOjs UI v0.8.0 * 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-02-12T00:04:43Z + * Date: 2015-02-19T01:33:11Z */ ( function ( OO ) { @@ -305,7 +305,68 @@ OO.ui.PendingElement.prototype.popPending = function () { }; /** - * List of actions. + * ActionSets manage the behavior of the {@link OO.ui.ActionWidget Action widgets} that comprise them. + * Actions can be made available for specific contexts (modes) and circumstances + * (abilities). Please see the [OOjs UI documentation on MediaWiki][1] for more information. + * + * @example + * // Example: An action set used in a process dialog + * function ProcessDialog( config ) { + * ProcessDialog.super.call( this, config ); + * } + * OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog ); + * ProcessDialog.static.title = 'An action set in a process dialog'; + * // An action set that uses modes ('edit' and 'help' mode, in this example). + * ProcessDialog.static.actions = [ + * { action: 'continue', modes: 'edit', label: 'Continue', flags: [ 'primary', 'constructive' ] }, + * { action: 'help', modes: 'edit', label: 'Help' }, + * { modes: 'edit', label: 'Cancel', flags: 'safe' }, + * { action: 'back', modes: 'help', label: 'Back', flags: 'safe' } + * ]; + * + * ProcessDialog.prototype.initialize = function () { + * ProcessDialog.super.prototype.initialize.apply( this, arguments ); + * this.panel1 = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); + * this.panel1.$element.append( '

This dialog uses an action set (continue, help, cancel, back) configured with modes. This is edit mode. Click \'help\' to see help mode.

' ); + * this.panel2 = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); + * this.panel2.$element.append( '

This is help mode. Only the \'back\' action widget is configured to be visible here. Click \'back\' to return to \'edit\' mode

' ); + * this.stackLayout= new OO.ui.StackLayout( { + * items: [ this.panel1, this.panel2 ] + * }); + * this.$body.append( this.stackLayout.$element ); + * }; + * ProcessDialog.prototype.getSetupProcess = function ( data ) { + * return ProcessDialog.super.prototype.getSetupProcess.call( this, data ) + * .next( function () { + * this.actions.setMode('edit'); + * }, this ); + * }; + * ProcessDialog.prototype.getActionProcess = function ( action ) { + * if ( action === 'help' ) { + * this.actions.setMode( 'help' ); + * this.stackLayout.setItem( this.panel2 ); + * } else if ( action === 'back' ) { + * this.actions.setMode( 'edit' ); + * this.stackLayout.setItem( this.panel1 ); + * } else if ( action === 'continue' ) { + * var dialog = this; + * return new OO.ui.Process( function () { + * dialog.close(); + * } ); + * } + * return ProcessDialog.super.prototype.getActionProcess.call( this, action ); + * }; + * ProcessDialog.prototype.getBodyHeight = function () { + * return this.panel1.$element.outerHeight( true ); + * }; + * var windowManager = new OO.ui.WindowManager(); + * $( 'body' ).append( windowManager.$element ); + * var processDialog = new ProcessDialog({ + * size: 'medium'}); + * windowManager.addWindows( [ processDialog ] ); + * windowManager.openWindow( processDialog ); + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows/Process_Dialogs#Action_sets * * @abstract * @class @@ -343,7 +404,11 @@ OO.mixinClass( OO.ui.ActionSet, OO.EventEmitter ); /* Static Properties */ /** - * Symbolic name of dialog. + * Symbolic name of the flags used to identify special actions. Special actions are displayed in the + * header of a {@link OO.ui.ProcessDialog process dialog}. + * See the [OOjs UI documentation on MediaWiki][2] for more information and examples. + * + * [2]:https://www.mediawiki.org/wiki/OOjs_UI/Windows/Process_Dialogs * * @abstract * @static @@ -383,6 +448,7 @@ OO.ui.ActionSet.static.specialFlags = [ 'safe', 'primary' ]; /** * Handle action change events. * + * @private * @fires change */ OO.ui.ActionSet.prototype.onActionChange = function () { @@ -713,7 +779,9 @@ OO.ui.ActionSet.prototype.organize = function () { }; /** - * DOM element abstraction. + * Each Element represents a rendering in the DOM—a button or an icon, for example, or anything + * that is visible to a user. Unlike {@link OO.ui.Widget widgets}, plain elements usually do not have events + * connected to them and can't be interacted with. * * @abstract * @class @@ -739,7 +807,7 @@ OO.ui.Element = function OoUiElement( config ) { this.updateThemeClassesPending = false; // Initialization - if ( $.isArray( config.classes ) ) { + if ( Array.isArray( config.classes ) ) { this.$element.addClass( config.classes.join( ' ' ) ); } if ( config.id ) { @@ -1201,7 +1269,7 @@ OO.ui.Element.prototype.supports = function ( methods ) { var i, len, support = 0; - methods = $.isArray( methods ) ? methods : [ methods ]; + methods = Array.isArray( methods ) ? methods : [ methods ]; for ( i = 0, len = methods.length; i < len; i++ ) { if ( $.isFunction( this[ methods[ i ] ] ) ) { support++; @@ -1338,7 +1406,9 @@ OO.inheritClass( OO.ui.Layout, OO.ui.Element ); OO.mixinClass( OO.ui.Layout, OO.EventEmitter ); /** - * User interface control. + * Widgets are compositions of one or more OOjs UI elements that users can both view + * and interact with. All widgets can be configured and modified via a standard API, + * and their state can change dynamically according to a model. * * @abstract * @class @@ -1461,39 +1531,44 @@ OO.ui.Widget.prototype.updateDisabled = function () { }; /** - * Encapsulation of an user interface. - * - * Use together with OO.ui.WindowManager. + * A window is a container for elements that are in a child frame. They are used with + * a window manager (OO.ui.WindowManager), which is used to open and close the window and control + * its presentation. The size of a window is specified using a symbolic name (e.g., ‘small’, ‘medium’, + * ‘large’), which is interpreted by the window manager. If the requested size is not recognized, + * the window manager will choose a sensible fallback. * - * @abstract - * @class - * @extends OO.ui.Element - * @mixins OO.EventEmitter + * The lifecycle of a window has three primary stages (opening, opened, and closing) in which + * different processes are executed: * - * When a window is opened, the setup and ready processes are executed. Similarly, the hold and - * teardown processes are executed when the window is closed. + * **opening**: The opening stage begins when the window manager's {@link OO.ui.WindowManager#openWindow + * openWindow} or the window's {@link #open open} methods are used, and the window manager begins to open + * the window. * - * - {@link OO.ui.WindowManager#openWindow} or {@link #open} methods are used to start opening - * - Window manager begins opening window * - {@link #getSetupProcess} method is called and its result executed * - {@link #getReadyProcess} method is called and its result executed - * - Window is now open * - * - {@link OO.ui.WindowManager#closeWindow} or {@link #close} methods are used to start closing - * - Window manager begins closing window + * **opened**: The window is now open + * + * **closing**: The closing stage begins when the window manager's + * {@link OO.ui.WindowManager#closeWindow closeWindow} + * or the window's {@link #close} methods are used, and the window manager begins to close the window. + * * - {@link #getHoldProcess} method is called and its result executed - * - {@link #getTeardownProcess} method is called and its result executed - * - Window is now closed + * - {@link #getTeardownProcess} method is called and its result executed. The window is now closed + * + * Each of the window's processes (setup, ready, hold, and teardown) can be extended in subclasses + * by overriding the window's #getSetupProcess, #getReadyProcess, #getHoldProcess and #getTeardownProcess + * methods. Note that each {@link OO.ui.Process process} is executed in series, so asynchronous + * processing can complete. Always assume window processes are executed asynchronously. * - * Each process (setup, ready, hold and teardown) can be extended in subclasses by overriding - * {@link #getSetupProcess}, {@link #getReadyProcess}, {@link #getHoldProcess} and - * {@link #getTeardownProcess} respectively. Each process is executed in series, so asynchronous - * processing can complete. Always assume window processes are executed asynchronously. See - * OO.ui.Process for more details about how to work with processes. Some events, as well as the - * #open and #close methods, provide promises which are resolved when the window enters a new state. + * For more information, please see the [OOjs UI documentation on MediaWiki] [1]. * - * Sizing of windows is specified using symbolic names which are interpreted by the window manager. - * If the requested size is not recognized, the window manager will choose a sensible fallback. + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows + * + * @abstract + * @class + * @extends OO.ui.Element + * @mixins OO.EventEmitter * * @constructor * @param {Object} [config] Configuration options @@ -2069,25 +2144,38 @@ OO.ui.Window.prototype.teardown = function ( data ) { }; /** - * Base class for all dialogs. - * - * Logic: - * - Manage the window (open and close, etc.). - * - Store the internal name and display title. - * - A stack to track one or more pending actions. - * - Manage a set of actions that can be performed. - * - Configure and create action widgets. - * - * User interface: - * - Close the dialog with Escape key. - * - Visually lock the dialog while an action is in - * progress (aka "pending"). - * - * Subclass responsibilities: - * - Display the title somewhere. - * - Add content to the dialog. - * - Provide a UI to close the dialog. - * - Display the action widgets somewhere. + * The Dialog class serves as the base class for the other types of dialogs. + * Unless extended to include controls, the rendered dialog box is a simple window + * that users can close by hitting the ‘Esc’ key. Dialog windows are used with OO.ui.WindowManager, + * which opens, closes, and controls the presentation of the window. See the + * [OOjs UI documentation on MediaWiki] [1] for more information. + * + * @example + * // A simple dialog window. + * function MyDialog( config ) { + * MyDialog.super.call( this, config ); + * } + * OO.inheritClass( MyDialog, OO.ui.Dialog ); + * MyDialog.prototype.initialize = function () { + * MyDialog.super.prototype.initialize.call( this ); + * this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } ); + * this.content.$element.append( '

A simple dialog window. Press \'Esc\' to close.

' ); + * this.$body.append( this.content.$element ); + * }; + * MyDialog.prototype.getBodyHeight = function () { + * return this.content.$element.outerHeight( true ); + * }; + * var myDialog = new MyDialog( { + * size: 'medium' + * } ); + * // Create and append a window manager, which opens and closes the window. + * var windowManager = new OO.ui.WindowManager(); + * $( 'body' ).append( windowManager.$element ); + * windowManager.addWindows( [ myDialog ] ); + * // Open the window! + * windowManager.openWindow( myDialog ); + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows/Dialogs * * @abstract * @class @@ -2347,43 +2435,54 @@ OO.ui.Dialog.prototype.executeAction = function ( action ) { }; /** - * Collection of windows. + * Window managers are used to open and close {@link OO.ui.Window windows} and control their presentation. + * Managed windows are mutually exclusive. If a new window is opened while a current window is opening + * or is opened, the current window will be closed and any ongoing {@link OO.ui.Process process} will be cancelled. Windows + * themselves are persistent and—rather than being torn down when closed—can be repopulated with the + * pertinent data and reused. + * + * Over the lifecycle of a window, the window manager makes available three promises: `opening`, + * `opened`, and `closing`, which represent the primary stages of the cycle: + * + * **Opening**: the opening stage begins when the window manager’s #openWindow or a window’s + * {@link OO.ui.Window#open open} method is used, and the window manager begins to open the window. + * + * - an `opening` event is emitted with an `opening` promise + * - the #getSetupDelay method is called and the returned value is used to time a pause in execution before + * the window’s {@link OO.ui.Window#getSetupProcess getSetupProcess} method is called on the + * window and its result executed + * - a `setup` progress notification is emitted from the `opening` promise + * - the #getReadyDelay method is called the returned value is used to time a pause in execution before + * the window’s {@link OO.ui.Window#getReadyProcess getReadyProcess} method is called on the + * window and its result executed + * - a `ready` progress notification is emitted from the `opening` promise + * - the `opening` promise is resolved with an `opened` promise + * + * **Opened**: the window is now open. + * + * **Closing**: the closing stage begins when the window manager's #closeWindow or the + * window's {@link OO.ui.Window#close close} methods is used, and the window manager begins + * to close the window. + * + * - the `opened` promise is resolved with `closing` promise and a `closing` event is emitted + * - the #getHoldDelay method is called and the returned value is used to time a pause in execution before + * the window's {@link OO.ui.Window#getHoldProcess getHoldProces} method is called on the + * window and its result executed + * - a `hold` progress notification is emitted from the `closing` promise + * - the #getTeardownDelay() method is called and the returned value is used to time a pause in execution before + * the window's {@link OO.ui.Window#getTeardownProcess getTeardownProcess} method is called on the + * window and its result executed + * - a `teardown` progress notification is emitted from the `closing` promise + * - the `closing` promise is resolved. The window is now closed + * + * See the [OOjs UI documentation on MediaWiki][1] for more information. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows/Window_managers * * @class * @extends OO.ui.Element * @mixins OO.EventEmitter * - * Managed windows are mutually exclusive. If a window is opened while there is a current window - * already opening or opened, the current window will be closed without data. Empty closing data - * should always result in the window being closed without causing constructive or destructive - * action. - * - * As a window is opened and closed, it passes through several stages and the manager emits several - * corresponding events. - * - * - {@link #openWindow} or {@link OO.ui.Window#open} methods are used to start opening - * - {@link #event-opening} is emitted with `opening` promise - * - {@link #getSetupDelay} is called the returned value is used to time a pause in execution - * - {@link OO.ui.Window#getSetupProcess} method is called on the window and its result executed - * - `setup` progress notification is emitted from opening promise - * - {@link #getReadyDelay} is called the returned value is used to time a pause in execution - * - {@link OO.ui.Window#getReadyProcess} method is called on the window and its result executed - * - `ready` progress notification is emitted from opening promise - * - `opening` promise is resolved with `opened` promise - * - Window is now open - * - * - {@link #closeWindow} or {@link OO.ui.Window#close} methods are used to start closing - * - `opened` promise is resolved with `closing` promise - * - {@link #event-closing} is emitted with `closing` promise - * - {@link #getHoldDelay} is called the returned value is used to time a pause in execution - * - {@link OO.ui.Window#getHoldProcess} method is called on the window and its result executed - * - `hold` progress notification is emitted from opening promise - * - {@link #getTeardownDelay} is called the returned value is used to time a pause in execution - * - {@link OO.ui.Window#getTeardownProcess} method is called on the window and its result executed - * - `teardown` progress notification is emitted from opening promise - * - Closing promise is resolved - * - Window is now closed - * * @constructor * @param {Object} [config] Configuration options * @cfg {OO.Factory} [factory] Window factory to use for automatic instantiation @@ -2806,7 +2905,7 @@ OO.ui.WindowManager.prototype.closeWindow = function ( win, data ) { OO.ui.WindowManager.prototype.addWindows = function ( windows ) { var i, len, win, name, list; - if ( $.isArray( windows ) ) { + if ( Array.isArray( windows ) ) { // Convert to map of windows by looking up symbolic names from static configuration list = {}; for ( i = 0, len = windows.length; i < len; i++ ) { @@ -3105,7 +3204,7 @@ OO.ui.Process.prototype.execute = function () { // Use rejected promise for error return $.Deferred().reject( [ result ] ).promise(); } - if ( $.isArray( result ) && result.length && result[ 0 ] instanceof OO.ui.Error ) { + if ( Array.isArray( result ) && result.length && result[ 0 ] instanceof OO.ui.Error ) { // Use rejected promise for list of errors return $.Deferred().reject( result ).promise(); } @@ -3275,7 +3374,7 @@ OO.ui.ToolFactory.prototype.extract = function ( collection, used ) { } } } - } else if ( $.isArray( collection ) ) { + } else if ( Array.isArray( collection ) ) { for ( i = 0, len = collection.length; i < len; i++ ) { item = collection[ i ]; // Allow plain strings as shorthand for named tools @@ -3410,12 +3509,12 @@ OO.ui.Theme.prototype.updateElementClasses = function ( element ) { * @constructor * @param {Object} [config] Configuration options * @cfg {jQuery} [$tabIndexed] tabIndexed node, assigned to #$tabIndexed, omit to use #$element - * @cfg {number|Function} [tabIndex=0] Tab index value. Use 0 to use default ordering, use -1 to - * prevent tab focusing. (default: 0) + * @cfg {number|null} [tabIndex=0] Tab index value. Use 0 to use default ordering, use -1 to + * prevent tab focusing, use null to suppress the `tabindex` attribute. */ OO.ui.TabIndexedElement = function OoUiTabIndexedElement( config ) { // Configuration initialization - config = config || {}; + config = $.extend( { tabIndex: 0 }, config ); // Properties this.$tabIndexed = null; @@ -3425,7 +3524,7 @@ OO.ui.TabIndexedElement = function OoUiTabIndexedElement( config ) { this.connect( this, { disable: 'onDisable' } ); // Initialization - this.setTabIndex( config.tabIndex || 0 ); + this.setTabIndex( config.tabIndex ); this.setTabIndexedElement( config.$tabIndexed || this.$element ); }; @@ -3436,87 +3535,86 @@ OO.initClass( OO.ui.TabIndexedElement ); /* Methods */ /** - * Set the element with 'tabindex' attribute. + * Set the element with `tabindex` attribute. * * If an element is already set, it will be cleaned up before setting up the new element. * * @param {jQuery} $tabIndexed Element to set tab index on + * @chainable */ OO.ui.TabIndexedElement.prototype.setTabIndexedElement = function ( $tabIndexed ) { - if ( this.$tabIndexed ) { - this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); - } - + var tabIndex = this.tabIndex; + // Remove attributes from old $tabIndexed + this.setTabIndex( null ); + // Force update of new $tabIndexed this.$tabIndexed = $tabIndexed; - if ( this.tabIndex !== null ) { - this.$tabIndexed.attr( { - // Do not index over disabled elements - tabindex: this.isDisabled() ? -1 : this.tabIndex, - // ChromeVox and NVDA do not seem to inherit this from parent elements - 'aria-disabled': this.isDisabled().toString() - } ); - } + this.tabIndex = tabIndex; + return this.updateTabIndex(); }; /** * Set tab index value. * - * @param {number|null} tabIndex Tab index value or null for no tabIndex + * @param {number|null} tabIndex Tab index value or null for no tab index * @chainable */ OO.ui.TabIndexedElement.prototype.setTabIndex = function ( tabIndex ) { tabIndex = typeof tabIndex === 'number' ? tabIndex : null; if ( this.tabIndex !== tabIndex ) { - if ( this.$tabIndexed ) { - if ( tabIndex !== null ) { - this.$tabIndexed.attr( { - // Do not index over disabled elements - tabindex: this.isDisabled() ? -1 : tabIndex, - // ChromeVox and NVDA do not seem to inherit this from parent elements - 'aria-disabled': this.isDisabled().toString() - } ); - } else { - this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); - } - } this.tabIndex = tabIndex; + this.updateTabIndex(); } return this; }; /** - * Handle disable events. + * Update the `tabindex` attribute, in case of changes to tab index or + * disabled state. * - * @param {boolean} disabled Element is disabled + * @chainable */ -OO.ui.TabIndexedElement.prototype.onDisable = function ( disabled ) { - if ( this.$tabIndexed && this.tabIndex !== null ) { - this.$tabIndexed.attr( { +OO.ui.TabIndexedElement.prototype.updateTabIndex = function () { + if ( this.$tabIndexed ) { + if ( this.tabIndex !== null ) { // Do not index over disabled elements - tabindex: disabled ? -1 : this.tabIndex, - // ChromeVox and NVDA do not seem to inherit this from parent elements - 'aria-disabled': disabled.toString() - } ); + this.$tabIndexed.attr( { + tabindex: this.isDisabled() ? -1 : this.tabIndex, + // ChromeVox and NVDA do not seem to inherit this from parent elements + 'aria-disabled': this.isDisabled().toString() + } ); + } else { + this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); + } } + return this; +}; + +/** + * Handle disable events. + * + * @param {boolean} disabled Element is disabled + */ +OO.ui.TabIndexedElement.prototype.onDisable = function () { + this.updateTabIndex(); }; /** * Get tab index value. * - * @return {number} Tab index value + * @return {number|null} Tab index value */ OO.ui.TabIndexedElement.prototype.getTabIndex = function () { return this.tabIndex; }; /** - * Element with a button. - * - * Buttons are used for controls which can be clicked. They can be configured to use tab indexing - * and access keys for accessibility purposes. + * ButtonElement is often mixed into other classes to generate a button, which is a clickable + * interface element that can be configured with access keys for accessibility. + * See the [OOjs UI documentation on MediaWiki] [1] for examples. * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches#Buttons * @abstract * @class * @@ -3606,6 +3704,7 @@ OO.ui.ButtonElement.prototype.setButtonElement = function ( $button ) { /** * Handles mouse down events. * + * @protected * @param {jQuery.Event} e Mouse down event */ OO.ui.ButtonElement.prototype.onMouseDown = function ( e ) { @@ -3625,6 +3724,7 @@ OO.ui.ButtonElement.prototype.onMouseDown = function ( e ) { /** * Handles mouse up events. * + * @protected * @param {jQuery.Event} e Mouse up event */ OO.ui.ButtonElement.prototype.onMouseUp = function ( e ) { @@ -3639,6 +3739,7 @@ OO.ui.ButtonElement.prototype.onMouseUp = function ( e ) { /** * Handles mouse click events. * + * @protected * @param {jQuery.Event} e Mouse click event * @fires click */ @@ -3652,6 +3753,7 @@ OO.ui.ButtonElement.prototype.onClick = function ( e ) { /** * Handles key down events. * + * @protected * @param {jQuery.Event} e Key down event */ OO.ui.ButtonElement.prototype.onKeyDown = function ( e ) { @@ -3667,6 +3769,7 @@ OO.ui.ButtonElement.prototype.onKeyDown = function ( e ) { /** * Handles key up events. * + * @protected * @param {jQuery.Event} e Key up event */ OO.ui.ButtonElement.prototype.onKeyUp = function ( e ) { @@ -3681,6 +3784,7 @@ OO.ui.ButtonElement.prototype.onKeyUp = function ( e ) { /** * Handles key press events. * + * @protected * @param {jQuery.Event} e Key press event * @fires click */ @@ -3754,7 +3858,12 @@ OO.ui.ButtonElement.prototype.setActive = function ( value ) { }; /** - * Element containing a sequence of child elements. + * Any OOjs UI widget that contains other widgets (such as {@link OO.ui.ButtonWidget buttons} or + * {@link OO.ui.OptionWidget options}) mixes in GroupElement. Adding, removing, and clearing + * items from the group is done through the interface the class provides. + * For more information, please see the [OOjs UI documentation on MediaWiki] [1]. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Elements/Groups * * @abstract * @class @@ -4028,8 +4137,10 @@ OO.ui.GroupElement.prototype.clearItems = function () { }; /** - * A mixin for an element that can be dragged and dropped. - * Use in conjunction with DragGroupWidget + * DraggableElement is a mixin class used to create elements that can be clicked + * and dragged by a mouse to a new position within a group. This class must be used + * in conjunction with OO.ui.DraggableGroupElement, which provides a container for + * the draggable elements. * * @abstract * @class @@ -4151,8 +4262,9 @@ OO.ui.DraggableElement.prototype.getIndex = function () { }; /** - * Element containing a sequence of child elements that can be dragged - * and dropped. + * DraggableGroupElement is a mixin class used to create a group element to + * contain draggable elements, which are items that can be clicked and dragged by a mouse. + * The class is used with OO.ui.DraggableElement. * * @abstract * @class @@ -4193,7 +4305,7 @@ OO.ui.DraggableGroupElement = function OoUiDraggableGroupElement( config ) { } ); // Initialize - if ( $.isArray( config.items ) ) { + if ( Array.isArray( config.items ) ) { this.addItems( config.items ); } this.$placeholder = $( '
' ) @@ -4394,12 +4506,13 @@ OO.ui.DraggableGroupElement.prototype.isDragging = function () { }; /** - * Element containing an icon. + * IconElement is often mixed into other classes to generate an icon. + * Icons are graphics, about the size of normal text. They are used to aid the user + * in locating a control or to convey information in a space-efficient way. See the + * [OOjs UI documentation on MediaWiki] [1] for a list of icons + * included in the library. * - * Icons are graphics, about the size of normal text. They can be used to aid the user in locating - * a control or convey information in a more space efficient way. Icons should rarely be used - * without labels; such as in a toolbar where space is at a premium or within a context where the - * meaning is very clear to the user. + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Icons * * @abstract * @class @@ -4434,31 +4547,31 @@ OO.initClass( OO.ui.IconElement ); /* Static Properties */ /** - * Icon. + * The symbolic name of the icon (e.g., ‘remove’ or ‘menu’), or a map of symbolic names. A map is used + * for i18n purposes and contains a `default` icon name and additional names keyed by + * language code. The `default` name is used when no icon is keyed by the user's language. * - * Value should be the unique portion of an icon CSS class name, such as 'up' for 'oo-ui-icon-up'. + * Example of an i18n map: * - * For i18n purposes, this property can be an object containing a `default` icon name property and - * additional icon names keyed by language code. - * - * Example of i18n icon definition: * { default: 'bold-a', en: 'bold-b', de: 'bold-f' } * + * Note: the static property will be overridden if the #icon configuration is used. + * * @static * @inheritable - * @property {Object|string} Symbolic icon name, or map of icon names keyed by language ID; - * use the 'default' key to specify the icon to be used when there is no icon in the user's - * language + * @property {Object|string} */ OO.ui.IconElement.static.icon = null; /** - * Icon title. + * The icon title, displayed when users move the mouse over the icon. The value can be text, a + * function that returns title text, or `null` for no title. + * + * The static property will be overridden if the #iconTitle configuration is used. * * @static * @inheritable - * @property {string|Function|null} Icon title text, a function that returns text or null for no - * icon title + * @property {string|Function|null} */ OO.ui.IconElement.static.iconTitle = null; @@ -4561,12 +4674,18 @@ OO.ui.IconElement.prototype.getIconTitle = function () { }; /** - * Element containing an indicator. + * IndicatorElement is often mixed into other classes to generate an indicator. + * Indicators are small graphics that are generally used in two ways: + * + * - To draw attention to the status of an item. For example, an indicator might be + * used to show that an item in a list has errors that need to be resolved. + * - To clarify the function of a control that acts in an exceptional way (a button + * that opens a menu instead of performing an action directly, for example). + * + * For a list of indicators included in the library, please see the + * [OOjs UI documentation on MediaWiki] [1]. * - * Indicators are graphics, smaller than normal text. They can be used to describe unique status or - * behavior. Indicators should only be used in exceptional cases; such as a button that opens a menu - * instead of performing an action directly, or an item in a list which has errors that need to be - * resolved. + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Indicators * * @abstract * @class @@ -4876,6 +4995,8 @@ OO.ui.LookupElement = function OoUiLookupElement( config ) { // Properties this.$overlay = config.$overlay || this.$element; this.lookupMenu = new OO.ui.TextInputMenuSelectWidget( this, { + widget: this, + input: this, $container: config.$container } ); this.lookupCache = {}; @@ -5214,10 +5335,22 @@ OO.ui.PopupElement.prototype.getPopup = function () { }; /** - * Element with named flags that can be added, removed, listed and checked. + * The FlaggedElement class is an attribute mixin, meaning that it is used to add + * additional functionality to an element created by another class. The class provides + * a ‘flags’ property assigned the name (or an array of names) of styling flags, + * which are used to customize the look and feel of a widget to better describe its + * importance and functionality. * - * A flag, when set, adds a CSS class on the `$element` by combining `oo-ui-flaggedElement-` with - * the flag name. Flags are primarily useful for styling. + * The library currently contains the following styling flags for general use: + * + * - **progressive**: Progressive styling is applied to convey that the widget will move the user forward in a process. + * - **destructive**: Destructive styling is applied to convey that the widget will remove something. + * - **constructive**: Constructive styling is applied to convey that the widget will create something. + * + * {@link OO.ui.ActionWidget ActionWidgets}, which are a special kind of button that execute an action, use these flags: **primary** and **safe**. + * Please see the [OOjs UI documentation on MediaWiki] [1] for more information. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Elements/Flagged * * @abstract * @class @@ -5340,7 +5473,7 @@ OO.ui.FlaggedElement.prototype.setFlags = function ( flags ) { this.flags[ flags ] = true; add.push( className ); } - } else if ( $.isArray( flags ) ) { + } else if ( Array.isArray( flags ) ) { for ( i = 0, len = flags.length; i < len; i++ ) { flag = flags[ i ]; className = classPrefix + flag; @@ -6871,7 +7004,7 @@ OO.ui.ProcessDialog.prototype.initialize = function () { .addClass( 'oo-ui-processDialog-errors-title' ) .text( OO.ui.msg( 'ooui-dialog-process-error' ) ); this.$errors - .addClass( 'oo-ui-processDialog-errors' ) + .addClass( 'oo-ui-processDialog-errors oo-ui-element-hidden' ) .append( this.$errorsTitle, this.dismissButton.$element, this.retryButton.$element ); this.$content .addClass( 'oo-ui-processDialog-content' ) @@ -6973,31 +7106,38 @@ OO.ui.ProcessDialog.prototype.showErrors = function ( errors ) { } this.retryButton.toggle( recoverable ); this.$errorsTitle.after( this.$errorItems ); - this.$errors.removeClass( 'oo-ui-widget-hidden' ).scrollTop( 0 ); + this.$errors.removeClass( 'oo-ui-element-hidden' ).scrollTop( 0 ); }; /** * Hide errors. */ OO.ui.ProcessDialog.prototype.hideErrors = function () { - this.$errors.addClass( 'oo-ui-widget-hidden' ); + this.$errors.addClass( 'oo-ui-element-hidden' ); this.$errorItems.remove(); this.$errorItems = null; }; /** - * Layout made of a field and optional label. + * FieldLayouts are used with OO.ui.FieldsetLayout. Each FieldLayout requires a field-widget, + * which is a widget that is specified by reference before any optional configuration settings. + * + * Field layouts can be configured with help text and/or labels. Labels are aligned in one of four ways: * - * 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 user 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 + * - **left**: The label is placed before the field-widget and aligned with the left margin. + * A left-alignment is used for forms with many fields. + * - **right**: The label is placed before the field-widget and aligned to the right margin. + * A right-alignment is used for long but familiar forms which users tab through, + * verifying the current field with a quick glance at the label. + * - **top**: The label is placed above the field-widget. A top-alignment is used for brief forms + * that users fill out from top to bottom. + * - **inline**: The label is placed after the field-widget and aligned to the left. + An inline-alignment is best used with checkboxes or radio buttons. * + * Help text is accessed via a help icon that appears in the upper right corner of the rendered field layout. + * Please see the [OOjs UI documentation on MediaWiki] [1] for examples and more information. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Layouts/Fields_and_Fieldsets * @class * @extends OO.ui.Layout * @mixins OO.ui.LabelElement @@ -7014,9 +7154,6 @@ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) { // Configuration initialization config = $.extend( { align: 'left' }, config ); - // Properties (must be set before parent constructor, which calls #getTagName) - this.fieldWidget = fieldWidget; - // Parent constructor OO.ui.FieldLayout.super.call( this, config ); @@ -7024,6 +7161,7 @@ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) { OO.ui.LabelElement.call( this, config ); // Properties + this.fieldWidget = fieldWidget; this.$field = $( '
' ); this.$body = $( '<' + ( hasInputWidget ? 'label' : 'div' ) + '>' ); this.align = null; @@ -7149,10 +7287,6 @@ OO.ui.ActionFieldLayout = function OoUiActionFieldLayout( fieldWidget, buttonWid // Configuration initialization config = $.extend( { align: 'left' }, config ); - // Properties (must be set before parent constructor, which calls #getTagName) - this.fieldWidget = fieldWidget; - this.buttonWidget = buttonWidget; - // Parent constructor OO.ui.ActionFieldLayout.super.call( this, fieldWidget, config ); @@ -7160,14 +7294,14 @@ OO.ui.ActionFieldLayout = function OoUiActionFieldLayout( fieldWidget, buttonWid OO.ui.LabelElement.call( this, config ); // Properties + this.fieldWidget = fieldWidget; + this.buttonWidget = buttonWidget; this.$button = $( '
' ) .addClass( 'oo-ui-actionFieldLayout-button' ) .append( this.buttonWidget.$element ); - this.$input = $( '
' ) .addClass( 'oo-ui-actionFieldLayout-input' ) .append( this.fieldWidget.$element ); - this.$field .addClass( 'oo-ui-actionFieldLayout' ) .append( this.$input, this.$button ); @@ -7225,7 +7359,7 @@ OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) { this.$element .addClass( 'oo-ui-fieldsetLayout' ) .prepend( this.$help, this.$icon, this.$label, this.$group ); - if ( $.isArray( config.items ) ) { + if ( Array.isArray( config.items ) ) { this.addItems( config.items ); } }; @@ -8283,7 +8417,7 @@ OO.ui.StackLayout = function OoUiStackLayout( config ) { if ( this.continuous ) { this.$element.addClass( 'oo-ui-stackLayout-continuous' ); } - if ( $.isArray( config.items ) ) { + if ( Array.isArray( config.items ) ) { this.addItems( config.items ); } }; @@ -9459,9 +9593,28 @@ OO.ui.ToggleWidget.prototype.setValue = function ( value ) { }; /** - * Group widget for multiple related buttons. - * - * Use together with OO.ui.ButtonWidget. + * A ButtonGroupWidget groups related buttons and is used together with OO.ui.ButtonWidget and + * its subclasses. Each button in a group is addressed by a unique reference. Buttons can be added, + * removed, and cleared from the group. + * + * @example + * // Example: A ButtonGroupWidget with two buttons + * var button1 = new OO.ui.PopupButtonWidget( { + * label : 'Select a category', + * icon : 'menu', + * popup : { + * $content: $( '

List of categories...

' ), + * padded: true, + * align: 'left' + * } + * } ); + * var button2 = new OO.ui.ButtonWidget( { + * label : 'Add item' + * }); + * var buttonGroup = new OO.ui.ButtonGroupWidget( { + * items: [button1, button2] + * } ); + * $('body').append(buttonGroup.$element); * * @class * @extends OO.ui.Widget @@ -9483,7 +9636,7 @@ OO.ui.ButtonGroupWidget = function OoUiButtonGroupWidget( config ) { // Initialization this.$element.addClass( 'oo-ui-buttonGroupWidget' ); - if ( $.isArray( config.items ) ) { + if ( Array.isArray( config.items ) ) { this.addItems( config.items ); } }; @@ -9496,9 +9649,20 @@ OO.mixinClass( OO.ui.ButtonGroupWidget, OO.ui.GroupElement ); /** * ButtonWidget is a generic widget for buttons. A wide variety of looks, * feels, and functionality can be customized via the class’s configuration options - * and methods. Please see the OOjs UI documentation on MediaWiki for more information + * and methods. Please see the [OOjs UI documentation on MediaWiki] [1] for more information * and examples. * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches + * + * @example + * // A button widget + * var button = new OO.ui.ButtonWidget( { + * label : 'Button with Icon', + * icon : 'remove', + * iconTitle : 'Remove' + * } ); + * $( 'body' ).append( button.$element ); + * * NOTE: HTML form buttons should use the OO.ui.ButtonInputWidget class. * * @class @@ -9513,13 +9677,14 @@ OO.mixinClass( OO.ui.ButtonGroupWidget, OO.ui.GroupElement ); * * @constructor * @param {Object} [config] Configuration options - * @cfg {string} [href] Hyperlink to visit when clicked - * @cfg {string} [target] Target to open hyperlink in - * @cfg {boolean} [nofollow] Search engine traversal hint (default: true) + * @cfg {string} [href] Hyperlink to visit when the button is clicked. + * @cfg {string} [target] The frame or window in which to open the hyperlink. + * @cfg {boolean} [noFollow] Search engine traversal hint (default: true) */ OO.ui.ButtonWidget = function OoUiButtonWidget( config ) { // Configuration initialization - config = config || {}; + // FIXME: The `nofollow` alias is deprecated and will be removed (T89767) + config = $.extend( { noFollow: config && config.nofollow }, config ); // Parent constructor OO.ui.ButtonWidget.super.call( this, config ); @@ -9536,7 +9701,7 @@ OO.ui.ButtonWidget = function OoUiButtonWidget( config ) { // Properties this.href = null; this.target = null; - this.nofollow = false; + this.noFollow = false; this.isHyperlink = false; // Initialization @@ -9546,7 +9711,7 @@ OO.ui.ButtonWidget = function OoUiButtonWidget( config ) { .append( this.$button ); this.setHref( config.href ); this.setTarget( config.target ); - this.setNoFollow( config.nofollow ); + this.setNoFollow( config.noFollow ); }; /* Setup */ @@ -9632,7 +9797,7 @@ OO.ui.ButtonWidget.prototype.getTarget = function () { * @return {boolean} Whether search engines should avoid traversing this hyperlink */ OO.ui.ButtonWidget.prototype.getNoFollow = function () { - return this.nofollow; + return this.noFollow; }; /** @@ -9680,14 +9845,14 @@ OO.ui.ButtonWidget.prototype.setTarget = function ( target ) { /** * Set search engine traversal hint. * - * @param {boolean} nofollow True if search engines should avoid traversing this hyperlink + * @param {boolean} noFollow True if search engines should avoid traversing this hyperlink */ -OO.ui.ButtonWidget.prototype.setNoFollow = function ( nofollow ) { - nofollow = typeof nofollow === 'boolean' ? nofollow : true; +OO.ui.ButtonWidget.prototype.setNoFollow = function ( noFollow ) { + noFollow = typeof noFollow === 'boolean' ? noFollow : true; - if ( nofollow !== this.nofollow ) { - this.nofollow = nofollow; - if ( nofollow ) { + if ( noFollow !== this.noFollow ) { + this.noFollow = noFollow; + if ( noFollow ) { this.$button.attr( 'rel', 'nofollow' ); } else { this.$button.removeAttr( 'rel' ); @@ -9698,7 +9863,12 @@ OO.ui.ButtonWidget.prototype.setNoFollow = function ( nofollow ) { }; /** - * Button widget that executes an action and is managed by an OO.ui.ActionSet. + * An ActionWidget is a {@link OO.ui.ButtonWidget button widget} that executes an action. + * Action widgets are used with OO.ui.ActionSet, which manages the behavior and availability + * of the actions. Please see the [OOjs UI documentation on MediaWiki] [1] for more information + * and examples. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows/Process_Dialogs#Action_sets * * @class * @extends OO.ui.ButtonWidget @@ -9951,12 +10121,37 @@ OO.ui.ToggleButtonWidget.prototype.setValue = function ( value ) { }; /** - * Dropdown menu of options. + * DropdownWidgets are not menus themselves, rather they contain a menu of options created with + * OO.ui.MenuOptionWidget. The DropdownWidget takes care of opening and displaying the menu so that + * users can interact with it. * - * Dropdown menus provide a control for accessing a menu and compose a menu within the widget, which - * can be accessed using the #getMenu method. + * @example + * // Example: A DropdownWidget with a menu that contains three options + * var dropDown=new OO.ui.DropdownWidget( { + * label: 'Dropdown menu: Select a menu option', + * menu: { + * items: [ + * new OO.ui.MenuOptionWidget( { + * data: 'a', + * label: 'First' + * } ), + * new OO.ui.MenuOptionWidget( { + * data: 'b', + * label: 'Second' + * } ), + * new OO.ui.MenuOptionWidget( { + * data: 'c', + * label: 'Third' + * } ) + * ] + * } + * } ); * - * Use with OO.ui.MenuOptionWidget. + * $('body').append(dropDown.$element); + * + * For more information, please see the [OOjs UI documentation on MediaWiki] [1]. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Menu_selects_and_options * * @class * @extends OO.ui.Widget @@ -10029,6 +10224,7 @@ OO.ui.DropdownWidget.prototype.getMenu = function () { /** * Handles menu select events. * + * @private * @param {OO.ui.MenuOptionWidget} item Selected menu item */ OO.ui.DropdownWidget.prototype.onMenuSelect = function ( item ) { @@ -10051,15 +10247,12 @@ OO.ui.DropdownWidget.prototype.onMenuSelect = function ( item ) { /** * Handle mouse click events. * + * @private * @param {jQuery.Event} e Mouse click event */ OO.ui.DropdownWidget.prototype.onClick = function ( e ) { if ( !this.isDisabled() && e.which === 1 ) { - if ( this.menu.isVisible() ) { - this.menu.toggle( false ); - } else { - this.menu.toggle( true ); - } + this.menu.toggle(); } return false; }; @@ -10067,23 +10260,34 @@ OO.ui.DropdownWidget.prototype.onClick = function ( e ) { /** * Handle key press events. * + * @private * @param {jQuery.Event} e Key press event */ OO.ui.DropdownWidget.prototype.onKeyPress = function ( e ) { if ( !this.isDisabled() && ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) ) { - if ( this.menu.isVisible() ) { - this.menu.toggle( false ); - } else { - this.menu.toggle( true ); - } + this.menu.toggle(); } return false; }; /** - * Icon widget. + * IconWidget is a generic widget for {@link OO.ui.IconElement icons}. In general, IconWidgets should be used with OO.ui.LabelWidget, + * which creates a label that identifies the icon’s function. See the [OOjs UI documentation on MediaWiki] [1] + * for a list of icons included in the library. * - * See OO.ui.IconElement for more information. + * @example + * // An icon widget with a label + * var myIcon = new OO.ui.IconWidget({ + * icon: 'help', + * iconTitle: 'Help' + * }); + * // Create a label. + * var iconLabel = new OO.ui.LabelWidget({ + * label: 'Help' + * }); + * $('body').append(myIcon.$element, iconLabel.$element); + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Icons * * @class * @extends OO.ui.Widget @@ -10157,7 +10361,12 @@ OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.TitledElement ); OO.ui.IndicatorWidget.static.tagName = 'span'; /** - * Base class for input widgets. + * InputWidget is the base class for all input widgets, which + * include {@link OO.ui.TextInputWidget text inputs}, {@link OO.ui.CheckboxInputWidget checkbox inputs}, + * {@link OO.ui.RadioInputWidget radio inputs}, and {@link OO.ui.ButtonInputWidget button inputs}. + * See the [OOjs UI documentation on MediaWiki] [1] for more information and examples. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Inputs * * @abstract * @class @@ -10351,7 +10560,22 @@ OO.ui.InputWidget.prototype.blur = function () { }; /** - * A button that is an input widget. Intended to be used within a OO.ui.FormLayout. + * ButtonInputWidget is used to submit HTML forms and is intended to be used within + * a OO.ui.FormLayout. If you do not need the button to work with HTML forms, you probably + * want to use OO.ui.ButtonWidget instead. Button input widgets can be rendered as either an + * HTML `