confirmable.html 6.4 KB

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