1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
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>
|
