diff options
author | Yaco <franco@reevo.org> | 2020-06-04 11:01:00 -0300 |
---|---|---|
committer | Yaco <franco@reevo.org> | 2020-06-04 11:01:00 -0300 |
commit | fc7369835258467bf97eb64f184b93691f9a9fd5 (patch) | |
tree | daabd60089d2dd76d9f5fb416b005fbe159c799d /www/wiki/docs/uidesign/confirmable.html |
first commit
Diffstat (limited to 'www/wiki/docs/uidesign/confirmable.html')
-rw-r--r-- | www/wiki/docs/uidesign/confirmable.html | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/www/wiki/docs/uidesign/confirmable.html b/www/wiki/docs/uidesign/confirmable.html new file mode 100644 index 00000000..d0358214 --- /dev/null +++ b/www/wiki/docs/uidesign/confirmable.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<head> + <meta charset="utf-8"> + <!-- + The jquery.confirmable module uses some additional modules and files + for internationalization support. These are omitted here for simplicity. + --> + <script type="text/javascript" src="../../resources/lib/jquery/jquery.js"></script> + <link rel="stylesheet" href="../../resources/src/jquery/jquery.confirmable.css"> + <script type="text/javascript" src="../../resources/src/jquery/jquery.confirmable.js"></script> + <style> + body { + font: small sans-serif; + } + .mw-rollback-link a, + .mw-unwatch-link a, + .mw-thanks-thank-link a { + background: #ccf; + } + </style> +</head> +<body> + <h2>Introduction</h2> + + <p>The jquery.confirmable module provides a simple inline confirmation script for potentially destructive or uncancellable actions.</p> + + <p>Possible uses include confirmable "rollback" links in histories, confirmable "unwatch" links on watchlists, or confirmable "thanks" links (provided by the Echo extension).</p> + + <p>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.</p> + + <h2>Examples</h2> + + <h3>LTR (English)</h3> + + <p>Watchlist:</p> + + <ul lang="en" dir="ltr"> + <li class="mw-line-even mw-changeslist-line-not-watched"> + (<a href="#">diff</a> | <a href="#">hist</a>) + <span class="mw-changeslist-separator">. .</span> + <span class="mw-title"><a href="#" class="mw-changeslist-title">Example page</a></span>; <span class="mw-changeslist-date">13:38</span> + <span class="mw-changeslist-separator">. .</span> + <span class="mw-plusminus-neg">(-130)</span> + <span class="mw-changeslist-separator">. .</span> + <a href="#" class="mw-userlink">Example user</a> + <span class="mw-usertoollinks">(<a href="#">Talk</a> | <a href="#">contribs</a> | <a href="#">block</a>)</span> + <span class="comment">(example edit)</span> + <span class="mw-rollback-link">[<a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">rollback</a>]</span> + (<span class="mw-unwatch-link"><a href="#">unwatch</a></span>) + </li> + </ul> + + <p>History:</p> + + <ul lang="en" dir="ltr"> + <li> + <span class="mw-history-histlinks">(cur | <a href="#">prev</a>)</span> + <input type="radio" style="visibility: hidden;" /><input type="radio" checked /> + <a href="#" class="mw-changeslist-date">13:38, 28 October 2013</a> + <span class='history-user'> + <a href="#" class="mw-userlink">Example user</a> + <span class="mw-usertoollinks">(<a href="#">Talk</a> | <a href="#">contribs</a> | <a href="#">block</a>)</span> + </span> + <span class="mw-changeslist-separator">. .</span> + <span class="history-size">(1,654 bytes)</span> + <span class="mw-plusminus-neg">(-130)</span> + <span class="mw-changeslist-separator">. .</span> + <span class="comment">(example edit)</span> + (<span class="mw-rollback-link"><a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">rollback 1 edit</a></span> | <span class="mw-history-undo"><a href="#">undo</a></span> | <span class="mw-thanks-thank-link"><a href="#">thank</a></span>) + </li> + </ul> + + <script type="text/javascript"> + $( 'ul[lang="en"] .mw-rollback-link a' ) + .confirmable({ i18n: { confirm: 'Are you sure you want to rollback?' } }); + $( 'ul[lang="en"] .mw-unwatch-link a' ) + .confirmable({ handler: function(){ alert('Unwatched!') } }); + $( 'ul[lang="en"] .mw-thanks-thank-link a' ) + .confirmable({ handler: function(){ alert('Thanked!') } }); + </script> + + <h3>RTL (Hebrew)</h3> + <!-- All of the Hebrew text below has been basically pulled out of my hat. --> + + <p>Watchlist:</p> + + <ul lang="he" dir="rtl"> + <li class="mw-line-even mw-changeslist-line-not-watched"> + (<a href="#">הבדל</a> | <a href="#">היסטוריה</a>) + <span class="mw-changeslist-separator">. .</span> + <span class="mw-title"><a href="#" class="mw-changeslist-title">דף דוגמה</a></span>; <span class="mw-changeslist-date">13:38</span> + <span class="mw-changeslist-separator">. .</span> + <span class="mw-plusminus-neg">(-57)</span> + <span class="mw-changeslist-separator">. .</span> + <a href="#" class="mw-userlink">דוגמא אדם</a> + <span class="mw-usertoollinks">(<a href="#">שיחה</a> | <a href="#">תרומות</a> | <a href="#">חסימה</a>)</span> + <span class="comment">(עריכה לדוגמה)</span> + <span class="mw-rollback-link">[<a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">שחזור</a>]</span> + (<span class="mw-unwatch-link"><a href="#">הפסקת מעקב</a></span>) + </li> + </ul> + + <p>History:</p> + + <ul lang="he" dir="rtl"> + <li> + <span class="mw-history-histlinks">(נוכחית | <a href="#">קודמת</a>)</span> + <input type="radio" style="visibility: hidden;" /><input type="radio" checked /> + <a href="#" class="mw-changeslist-date">23:41, 12 במאי 2012</a> + <span class='history-user'> + <a href="#" class="mw-userlink">דוגמא אדם</a> + <span class="mw-usertoollinks">(<a href="#">שיחה</a> | <a href="#">תרומות</a> | <a href="#">חסימה</a>)</span> + </span> + <span class="mw-changeslist-separator">. .</span> + <span class="history-size">(1,762 בתים)</span> + <span class="mw-plusminus-neg">(-57)</span> + <span class="mw-changeslist-separator">. .</span> + <span class="comment">(עריכה לדוגמה)</span> + (<span class="mw-rollback-link"><a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">שחזור עריכה אחת</a></span> | <span class="mw-history-undo"><a href="#">ביטול</a></span> | <span class="mw-thanks-thank-link"><a href="#">תודה</a></span>) + </li> + </ul> + + <script type="text/javascript"> + var hebrewI18n = { + confirm: 'האם ברצונך להמשיך?', + yes: 'כן', + no: 'לא', + } + + $( 'ul[lang="he"] .mw-rollback-link a' ) + .confirmable({ i18n: $.extend( {}, hebrewI18n, { confirm: 'האם ברצונך לשחזר?' } ) }); + $( 'ul[lang="he"] .mw-unwatch-link a' ) + .confirmable({ i18n: hebrewI18n, handler: function(){ alert('Unwatched!') } }); + $( 'ul[lang="he"] .mw-thanks-thank-link a' ) + .confirmable({ i18n: hebrewI18n, handler: function(){ alert('Thanked!') } }); + </script> + <style type="text/css"> + /* This is normally handled by CSSJanus. */ + ul[dir=rtl] .jquery-confirmable-button { + margin-left: 0; + margin-right: 1ex; + } + </style> +</body> +</html> + |