From 13a14c70c664372f542d33902c9266414930577d Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Mon, 28 Oct 2013 15:56:30 +0100 Subject: [PATCH] jquery.confirmable: New inline confirmation module $().confirmable() can be applied to any inline-block element. It will cause it to expand into "Are you sure? [Yes] [No]" question and buttons when clicked, where the buttons are clones of the original element: [Yes] will carry out the default action (or a different one, if specified), [No] will collapse the interface back. Possible uses include: * Confirmable "rollback" links * Confirmable "unwatch" links on watchlists * Confirmable "thank" links (Echo extension's ones) Added a demo with possible uses on history and watchlist pages. Included Hebrew messages courtesy of Moriel. Change-Id: I2f6e0bd4f6f0a84e1a0d7193cde076738f3cdd25 --- docs/uidesign/confirmable.html | 147 +++++++++++++++ languages/i18n/en.json | 3 + languages/i18n/he.json | 3 + languages/i18n/qqq.json | 3 + maintenance/jsduck/config.json | 1 + resources/Resources.php | 13 ++ resources/src/jquery/jquery.confirmable.css | 28 +++ resources/src/jquery/jquery.confirmable.js | 168 ++++++++++++++++++ .../jquery/jquery.confirmable.mediawiki.js | 13 ++ 9 files changed, 379 insertions(+) create mode 100644 docs/uidesign/confirmable.html create mode 100644 resources/src/jquery/jquery.confirmable.css create mode 100644 resources/src/jquery/jquery.confirmable.js create mode 100644 resources/src/jquery/jquery.confirmable.mediawiki.js diff --git a/docs/uidesign/confirmable.html b/docs/uidesign/confirmable.html new file mode 100644 index 0000000000..d03582143b --- /dev/null +++ b/docs/uidesign/confirmable.html @@ -0,0 +1,147 @@ + + + + + + + + + + + +

Introduction

+ +

The jquery.confirmable module provides a simple inline confirmation script for potentially destructive or uncancellable actions.

+ +

Possible uses include confirmable "rollback" links in histories, confirmable "unwatch" links on watchlists, or confirmable "thanks" links (provided by the Echo extension).

+ +

Shown below is a demo of how each of those could work on history and watchlist entries, in an LTR and RTL language. The enhanced links are highlighted in blue.

+ +

Examples

+ +

LTR (English)

+ +

Watchlist:

+ + + +

History:

+ + + + + +

RTL (Hebrew)

+ + +

Watchlist:

+ + + +

History:

+ + + + + + + + diff --git a/languages/i18n/en.json b/languages/i18n/en.json index 5fd5b6e115..11c6c605b7 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -267,6 +267,9 @@ "hidetoc": "hide", "collapsible-collapse": "Collapse", "collapsible-expand": "Expand", + "confirmable-confirm": "Are {{GENDER:$1|you}} sure?", + "confirmable-yes": "Yes", + "confirmable-no": "No", "thisisdeleted": "View or restore $1?", "viewdeleted": "View $1?", "restorelink": "{{PLURAL:$1|one deleted edit|$1 deleted edits}}", diff --git a/languages/i18n/he.json b/languages/i18n/he.json index a66a43a116..9d0769d8b7 100644 --- a/languages/i18n/he.json +++ b/languages/i18n/he.json @@ -283,6 +283,9 @@ "hidetoc": "הסתרה", "collapsible-collapse": "הסתרה", "collapsible-expand": "הצגה", + "confirmable-confirm": "האם {{GENDER:$1|ברצונך}} להמשיך?", + "confirmable-yes": "כן", + "confirmable-no": "לא", "thisisdeleted": "לשחזר או להציג $1?", "viewdeleted": "להציג $1?", "restorelink": "{{PLURAL:$1|גרסה מחוקה אחת|$1 גרסאות מחוקות}}", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index 6bdc2e9062..ed4e1b6dba 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -429,6 +429,9 @@ "hidetoc": "This is the link used to hide the table of contents\n\n{{Identical|Hide}}", "collapsible-collapse": "{{Doc-actionlink}}\nThis is the link used to collapse a collapsible element. (used as plaintext. No wikitext or html is parsed.)\n\nSee also:\n* {{msg-mw|Collapsible-expand}}\n{{Identical|Collapse}}", "collapsible-expand": "{{Doc-actionlink}}\nThis is the link used to expand a collapsible element (used as plaintext. No wikitext or html is parsed.)\n\nSee also:\n* {{msg-mw|Collapsible-collapse}}\n\nSee the following example:\n{{Identical|Expand}}", + "confirmable-confirm": "Question asking the user to confirm a potentially uncancellable action.\n\"Yes\" and \"No\" buttons are displayed beside it.\n\nSee also:\n* {{msg-mw|confirmable-yes}}\n* {{msg-mw|confirmable-no}}\n", + "confirmable-yes": "{{Doc-actionlink}}\nText of a button that will confirm triggering of a potentially uncancellable action.\n\nSee also:\n* {{msg-mw|confirmable-confirm}}\n* {{msg-mw|confirmable-no}}", + "confirmable-no": "{{Doc-actionlink}}\nText of a button that will cancel triggering of a potentially uncancellable action.\n\nSee also:\n* {{msg-mw|confirmable-confirm}}\n* {{msg-mw|confirmable-yes}}", "thisisdeleted": "Message shown on a deleted page when the user has the undelete right. Parameters:\n* $1 - a link to [[Special:Undelete]], with {{msg-mw|restorelink}} as the text\nSee also:\n* {{msg-mw|viewdeleted}}", "viewdeleted": "Message shown on a deleted page when the user does not have the undelete right (but has the deletedhistory right).\n\nParameters:\n* $1 - a link to [[Special:Undelete]], with {{msg-mw|restorelink}} as the text\nSee also:\n* {{msg-mw|thisisdeleted}}", "restorelink": "This text is always displayed in conjunction with the {{msg-mw|thisisdeleted}} message (View or restore $1?). The user will see\nView or restore {{PLURAL:$1|one deleted edit|$1 deleted edits}}? i.e ''View or restore one deleted edit?'' or\n''View or restore n deleted edits?''", diff --git a/maintenance/jsduck/config.json b/maintenance/jsduck/config.json index eed76b6f1c..e97f2923fb 100644 --- a/maintenance/jsduck/config.json +++ b/maintenance/jsduck/config.json @@ -26,6 +26,7 @@ "../../resources/src/jquery/jquery.checkboxShiftClick.js", "../../resources/src/jquery/jquery.client.js", "../../resources/src/jquery/jquery.colorUtil.js", + "../../resources/src/jquery/jquery.confirmable.js", "../../resources/src/jquery/jquery.footHovzer.js", "../../resources/src/jquery/jquery.getAttrs.js", "../../resources/src/jquery/jquery.hidpi.js", diff --git a/resources/Resources.php b/resources/Resources.php index a66faa6908..b588cf24a3 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -191,6 +191,19 @@ return array( 'jquery.colorUtil' => array( 'scripts' => 'resources/src/jquery/jquery.colorUtil.js', ), + 'jquery.confirmable' => array( + 'scripts' => array( + 'resources/src/jquery/jquery.confirmable.js', + 'resources/src/jquery/jquery.confirmable.mediawiki.js', + ), + 'messages' => array( + 'confirmable-confirm', + 'confirmable-yes', + 'confirmable-no', + ), + 'styles' => 'resources/src/jquery/jquery.confirmable.css', + 'dependencies' => 'mediawiki.jqueryMsg', + ), // Use mediawiki.cookie in new code, rather than jquery.cookie. 'jquery.cookie' => array( 'scripts' => 'resources/lib/jquery/jquery.cookie.js', diff --git a/resources/src/jquery/jquery.confirmable.css b/resources/src/jquery/jquery.confirmable.css new file mode 100644 index 0000000000..de690726f8 --- /dev/null +++ b/resources/src/jquery/jquery.confirmable.css @@ -0,0 +1,28 @@ +.jquery-confirmable-button { + /* Automatically flipped */ + margin-left: 1ex; +} + +.jquery-confirmable-wrapper { + /* Line breaks within the interface text are unpleasant */ + white-space: nowrap; + /* Hiding the original text when it slides to the left */ + overflow: hidden; +} + +.jquery-confirmable-wrapper, +.jquery-confirmable-element, +.jquery-confirmable-interface { + /* We need inline-block to be able to size the elements and calculate their dimensions */ + display: inline-block; + /* inline-block elements in this context align to baseline by default */ + vertical-align: bottom; +} + +.jquery-confirmable-element { + transition: margin 250ms cubic-bezier(0.2, 0.8, 0.2, 0.8); +} + +.jquery-confirmable-interface { + transition: width 250ms cubic-bezier(0.2, 0.8, 0.2, 0.8); +} diff --git a/resources/src/jquery/jquery.confirmable.js b/resources/src/jquery/jquery.confirmable.js new file mode 100644 index 0000000000..4b80d95323 --- /dev/null +++ b/resources/src/jquery/jquery.confirmable.js @@ -0,0 +1,168 @@ +/** + * jQuery confirmable plugin + * + * Released under the MIT License. + * + * @author Bartosz Dziewoński + * + * @class jQuery.plugin.confirmable + */ +( function ( $ ) { + var identity = function ( data ) { + return data; + }; + + /** + * Enable inline confirmation for given clickable element (like `` or `