docs/uidesign/confirmable.html

   1 <!DOCTYPE html>
   2 <html lang="en" dir="ltr">
   3 <head>
   4         <meta charset="utf-8">
   5         <!--
   6         The jquery.confirmable module uses some additional modules and files
   7         for internationalization support. These are omitted here for simplicity.
   8         -->
   9         <script type="text/javascript" src="../../resources/lib/jquery/jquery.js"></script>
  10         <link rel="stylesheet" href="../../resources/src/jquery/jquery.confirmable.css">
  11         <script type="text/javascript" src="../../resources/src/jquery/jquery.confirmable.js"></script>
  12         <style>
  13         body {
  14                 font: small sans-serif;
  15         }
  16         .mw-rollback-link a,
  17         .mw-unwatch-link a,
  18         .mw-thanks-thank-link a {
  19                 background: #ccf;
  20         }
  21         </style>
  22 </head>
  23 <body>
  24         <h2>Introduction</h2>
  25
  26         <p>The jquery.confirmable module provides a simple inline confirmation script for potentially destructive or uncancellable actions.</p>
  27
  28         <p>Possible uses include confirmable "rollback" links in histories, confirmable "unwatch" links on watchlists, or confirmable "thanks" links (provided by the Echo extension).</p>
  29
  30         <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>
  31
  32         <h2>Examples</h2>
  33
  34         <h3>LTR (English)</h3>
  35
  36         <p>Watchlist:</p>
  37
  38         <ul lang="en" dir="ltr">
  39                 <li class="mw-line-even mw-changeslist-line-not-watched">
  40                         (<a href="#">diff</a> | <a href="#">hist</a>)
  41                         <span class="mw-changeslist-separator">. .</span>
  42                         <span class="mw-title"><a href="#" class="mw-changeslist-title">Example page</a></span>; <span class="mw-changeslist-date">13:38</span>
  43                         <span class="mw-changeslist-separator">. .</span>
  44                         <span class="mw-plusminus-neg">(-130)</span>
  45                         <span class="mw-changeslist-separator">. .</span>
  46                         <a href="#" class="mw-userlink">Example user</a>
  47                         <span class="mw-usertoollinks">(<a href="#">Talk</a> | <a href="#">contribs</a> | <a href="#">block</a>)</span>
  48                         <span class="comment">(example edit)</span>
  49                         <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>
  50                         (<span class="mw-unwatch-link"><a href="#">unwatch</a></span>)
  51                 </li>
  52         </ul>
  53
  54         <p>History:</p>
  55
  56         <ul lang="en" dir="ltr">
  57                 <li>
  58                         <span class="mw-history-histlinks">(cur | <a href="#">prev</a>)</span>
  59                         <input type="radio" style="visibility: hidden;" /><input type="radio" checked />
  60                         <a href="#" class="mw-changeslist-date">13:38, 28 October 2013</a>
  61                         <span class='history-user'>
  62                                 <a href="#" class="mw-userlink">Example user</a>
  63                                 <span class="mw-usertoollinks">(<a href="#">Talk</a> | <a href="#">contribs</a> | <a href="#">block</a>)</span>
  64                         </span>
  65                         <span class="mw-changeslist-separator">. .</span>
  66                         <span class="history-size">(1,654 bytes)</span>
  67                         <span class="mw-plusminus-neg">(-130)</span>
  68                         <span class="mw-changeslist-separator">. .</span>
  69                         <span class="comment">(example edit)</span>
  70                         (<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>)
  71                 </li>
  72         </ul>
  73
  74         <script type="text/javascript">
  75                 $( 'ul[lang="en"] .mw-rollback-link a' )
  76                         .confirmable({ i18n: { confirm: 'Are you sure you want to rollback?' } });
  77                 $( 'ul[lang="en"] .mw-unwatch-link a' )
  78                         .confirmable({ handler: function(){ alert('Unwatched!') } });
  79                 $( 'ul[lang="en"] .mw-thanks-thank-link a' )
  80                         .confirmable({ handler: function(){ alert('Thanked!') } });
  81         </script>
  82
  83         <h3>RTL (Hebrew)</h3>
  84         <!-- All of the Hebrew text below has been basically pulled out of my hat. -->
  85
  86         <p>Watchlist:</p>
  87
  88         <ul lang="he" dir="rtl">
  89                 <li class="mw-line-even mw-changeslist-line-not-watched">
  90                         (<a href="#">הבדל</a> | <a href="#">היסטוריה</a>)
  91                         <span class="mw-changeslist-separator">. .</span>
  92                         <span class="mw-title"><a href="#" class="mw-changeslist-title">דף דוגמה</a></span>; <span class="mw-changeslist-date">13:38</span>
  93                         <span class="mw-changeslist-separator">. .</span>
  94                         <span class="mw-plusminus-neg">(-57)</span>
  95                         <span class="mw-changeslist-separator">. .</span>
  96                         <a href="#" class="mw-userlink">דוגמא אדם</a>
  97                         <span class="mw-usertoollinks">(<a href="#">שיחה</a> | <a href="#">תרומות</a> | <a href="#">חסימה</a>)</span>
  98                         <span class="comment">(עריכה לדוגמה)</span>
  99                         <span class="mw-rollback-link">[<a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">שחזור</a>]</span>
 100                         (<span class="mw-unwatch-link"><a href="#">הפסקת מעקב</a></span>)
 101                 </li>
 102         </ul>
 103
 104         <p>History:</p>
 105
 106         <ul lang="he" dir="rtl">
 107                 <li>
 108                         <span class="mw-history-histlinks">(נוכחית | <a href="#">קודמת</a>)</span>
 109                         <input type="radio" style="visibility: hidden;" /><input type="radio" checked />
 110                         <a href="#" class="mw-changeslist-date">23:41, 12 במאי 2012</a>
 111                         <span class='history-user'>
 112                                 <a href="#" class="mw-userlink">דוגמא אדם</a>
 113                                 <span class="mw-usertoollinks">(<a href="#">שיחה</a> | <a href="#">תרומות</a> | <a href="#">חסימה</a>)</span>
 114                         </span>
 115                         <span class="mw-changeslist-separator">. .</span>
 116                         <span class="history-size">(1,762 בתים)</span>
 117                         <span class="mw-plusminus-neg">(-57)</span>
 118                         <span class="mw-changeslist-separator">. .</span>
 119                         <span class="comment">(עריכה לדוגמה)</span>
 120                         (<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>)
 121                 </li>
 122         </ul>
 123
 124         <script type="text/javascript">
 125                 var hebrewI18n = {
 126                         confirm: 'האם ברצונך להמשיך?',
 127                         yes: 'כן',
 128                         no: 'לא',
 129                 }
 130
 131                 $( 'ul[lang="he"] .mw-rollback-link a' )
 132                         .confirmable({ i18n: $.extend( {}, hebrewI18n, { confirm: 'האם ברצונך לשחזר?' } ) });
 133                 $( 'ul[lang="he"] .mw-unwatch-link a' )
 134                         .confirmable({ i18n: hebrewI18n, handler: function(){ alert('Unwatched!') } });
 135                 $( 'ul[lang="he"] .mw-thanks-thank-link a' )
 136                         .confirmable({ i18n: hebrewI18n, handler: function(){ alert('Thanked!') } });
 137         </script>
 138         <style type="text/css">
 139                 /* This is normally handled by CSSJanus. */
 140                 ul[dir=rtl] .jquery-confirmable-button {
 141                         margin-left: 0;
 142                         margin-right: 1ex;
 143                 }
 144         </style>
 145 </body>
 146 </html>
 147