r87685 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r87684‎ | r87685 | r87686 >
Date:14:51, 8 May 2011
Author:janpaul123
Status:ok
Tags:
Comment:
Added images, fixed RTL, fixed accessibility, fixed bug where a message other than the previewed message was sent
Modified paths:
  • /trunk/extensions/WikiLove/WikiLove.i18n.php (modified) (history)
  • /trunk/extensions/WikiLove/WikiLove.php (modified) (history)
  • /trunk/extensions/WikiLove/images/get-started-ltr.png (added) (history)
  • /trunk/extensions/WikiLove/images/get-started-rtl.png (added) (history)
  • /trunk/extensions/WikiLove/images/number.png (added) (history)
  • /trunk/extensions/WikiLove/images/select-bg-sprite.png (added) (history)
  • /trunk/extensions/WikiLove/images/select-sprite.png (added) (history)
  • /trunk/extensions/WikiLove/wikiLove.css (modified) (history)
  • /trunk/extensions/WikiLove/wikiLove.js (modified) (history)

Diff [purge]

Index: trunk/extensions/WikiLove/WikiLove.php
@@ -83,6 +83,10 @@
8484 'messages' => array(
8585 'wikilove-dialog-title',
8686 'wikilove-select-type',
 87+ 'wikilove-get-started-header',
 88+ 'wikilove-get-started-list-1',
 89+ 'wikilove-get-started-list-2',
 90+ 'wikilove-get-started-list-3',
8791 'wikilove-add-details',
8892 'wikilove-title',
8993 'wikilove-enter-message',
Index: trunk/extensions/WikiLove/wikiLove.css
@@ -58,39 +58,174 @@
5959 padding: 0;
6060 }
6161
62 -#wikiLoveDialog #wlSelectType ul li {
 62+#wikiLoveDialog #wlSelectType ul li,
 63+#wikiLoveDialog #wlSelectType a
 64+{
6365 display: block;
64 - background-color: #3060b0;
6566 width: 250px;
66 - padding: 10px 0;
67 -
68 - /* create a hand cursor, cross-browser hack: http://www.quirksmode.org/css/cursor.html */
69 - cursor: pointer;
70 - cursor: hand;
 67+ height: 66px;
 68+ padding: 0;
 69+ margin: 0;
 70+ position: relative;
 71+ text-decoration: none;
7172 }
7273
 74+#wikiLoveDialog #wlSelectType a:hover,
 75+#wikiLoveDialog #wlSelectType a:focus {
 76+ text-decoration:none;
 77+}
 78+
7379 /* IGNORED BY IE6 */
74 -#wikiLoveDialog #wlSelectType ul > li {
 80+#wikiLoveDialog #wlSelectType ul > li,
 81+#wikiLoveDialog #wlSelectType ul li > a {
7582 display: inline-block;
7683 }
7784
78 -#wikiLoveDialog #wlSelectType ul li:hover,
79 -#wikiLoveDialog #wlSelectType ul li:focus {
80 - background-color: #3366bb;
 85+#wikiLoveDialog #wlSelectType a .wlLeftCap,
 86+#wikiLoveDialog #wlSelectType a .wlRightCap {
 87+ padding: 0;
 88+ margin: 0;
 89+ width: 6px;
 90+ height: 66px;
 91+ position: absolute;
 92+ top: 0px;
8193 }
8294
83 -#wikiLoveDialog #wlSelectType ul li.selected {
84 - background-color: #e46020;
 95+#wikiLoveDialog #wlSelectType a .wlLeftCap,
 96+#wikiLoveDialog #wlSelectType a .wlRightCap,
 97+#wikiLoveDialog #wlSelectType a .wlIconBox {
 98+ /* @embed */
 99+ background-image: url(images/select-sprite.png);
 100+ background-repeat: no-repeat;
85101 }
86102
87 -#wikiLoveDialog #wlSelectType ul li span {
 103+#wikiLoveDialog #wlSelectType a .wlLeftCap {
 104+ /* @noflip */
 105+ left: 0px;
 106+ background-position: 0px 0px;
 107+}
 108+
 109+#wikiLoveDialog #wlSelectType a:hover .wlLeftCap,
 110+#wikiLoveDialog #wlSelectType a:focus .wlLeftCap {
 111+ background-position: -6px 0px;
 112+}
 113+
 114+#wikiLoveDialog #wlSelectType a.selected .wlLeftCap {
 115+ background-position: -12px 0px;
 116+}
 117+
 118+#wikiLoveDialog #wlSelectType a .wlRightCap {
 119+ /* @noflip */
 120+ right: 0px;
 121+ background-position: -18px 0px;
 122+}
 123+
 124+#wikiLoveDialog #wlSelectType a:hover .wlRightCap,
 125+#wikiLoveDialog #wlSelectType a:focus .wlRightCap {
 126+ background-position: -25px 0px;
 127+}
 128+
 129+#wikiLoveDialog #wlSelectType a.selected .wlRightCap {
 130+ background-position: -32px 0px;
 131+}
 132+
 133+#wikiLoveDialog #wlSelectType a .wlInside {
 134+ padding: 0;
 135+ margin: 0;
 136+ width: 238px;
 137+ height: 66px;
 138+ position: absolute;
 139+ top: 0px;
 140+ left: 6px;
 141+
 142+ /* @embed */
 143+ background-image: url(images/select-bg-sprite.png);
 144+ background-position: 0px 0px;
 145+ background-repeat: repeat-x;
 146+}
 147+
 148+#wikiLoveDialog #wlSelectType a:hover .wlInside,
 149+#wikiLoveDialog #wlSelectType a:focus .wlInside {
 150+ background-position: 0px -66px;
 151+}
 152+
 153+#wikiLoveDialog #wlSelectType a.selected .wlInside {
 154+ background-position: 0px -132px;
 155+}
 156+
 157+#wikiLoveDialog #wlSelectType a .wlIconBox {
 158+ padding: 0;
 159+ margin: 0;
 160+ width: 53px;
 161+ height: 53px;
 162+ position: absolute;
 163+ left: 0px;
 164+ top: 5px;
 165+ background-position: -42px 0px;
 166+}
 167+
 168+#wikiLoveDialog #wlSelectType a .wlIconBox img {
 169+ padding: 0;
 170+ margin: 0;
 171+ width: 53px;
 172+ height: 53px;
 173+ position: absolute:
 174+ top: 0px;
 175+ left: 0px;
 176+}
 177+
 178+#wikiLoveDialog #wlSelectType a:hover .wlIconBox,
 179+#wikiLoveDialog #wlSelectType a:focus .wlIconBox {
 180+ background-position: -97px 0px;
 181+}
 182+
 183+#wikiLoveDialog #wlSelectType a.selected .wlIconBox {
 184+ background-position: -152px 0px;
 185+}
 186+
 187+#wikiLoveDialog #wlSelectType a .wlLinkText {
 188+ padding: 0;
 189+ margin: 0;
 190+ width: 170px;
 191+ height: 53px;
 192+ position: absolute;
 193+ left: 64px;
 194+ top: 5px;
 195+ line-height: 53px;
88196 font-size: 1.2em;
89197 font-weight: bold;
90198 text-decoration: none;
91199 color: white;
92 - margin-left: 10px;
93200 }
94201
 202+#wikiLoveDialog #wlSelectType a .wlNoIcon .wlLinkText {
 203+ left: 3px;
 204+}
 205+
 206+/* dialog get started */
 207+#wikiLoveDialog #wlGetStarted {
 208+ float: right;
 209+ width: 380px;
 210+ margin-top: 40px;
 211+ padding-top: 4px;
 212+ padding-left: 70px;
 213+ font-size: 1.1em;
 214+
 215+ /* @embed */
 216+ background-image: url(images/get-started-ltr.png);
 217+ background-position: top left;
 218+ background-repeat: no-repeat;
 219+}
 220+
 221+#wikiLoveDialog #wlGetStarted h2 {
 222+ border: none;
 223+ font-weight: bold;
 224+}
 225+
 226+#wikiLoveDialog #wlGetStarted ol {
 227+ margin-left: 1.5em;
 228+}
 229+
95230 /* dialog add details */
96231 #wikiLoveDialog #wlAddDetails {
97232 float: right;
@@ -114,13 +249,8 @@
115250 color: #999;
116251 }
117252
118 -#wikiLoveDialog #wlAddDetails input,
119 -#wikiLoveDialog #wlAddDetails textarea,
120 -#wikiLoveDialog #wlAddDetails select {
121 - margin-top: 5px;
122 - margin-left: 15px;
123 - max-width: 460px;
124 - display: block;
 253+#wikiLoveDialog #wlAddDetails textarea {
 254+ resize: none;
125255 }
126256
127257 #wikiLoveDialog .wlSpinner {
@@ -144,6 +274,32 @@
145275 }
146276
147277 /* dialog misc */
 278+#wikiLoveDialog input,
 279+#wikiLoveDialog textarea,
 280+#wikiLoveDialog select {
 281+ margin: 5px 0px 5px 15px;
 282+ max-width: 460px;
 283+ display: block;
 284+}
 285+
148286 #wikiLoveDialog .submit {
149287 float: right;
150 -}
\ No newline at end of file
 288+}
 289+
 290+#wikiLoveDialog .wlNumber {
 291+ color: white;
 292+ float: left;
 293+ display: block;
 294+ width: 32px;
 295+ height: 32px;
 296+ line-height: 32px;
 297+ text-align: center;
 298+ margin-right: 5px;
 299+ font-size: 1.5em;
 300+ font-weight: bold;
 301+
 302+ /* @embed */
 303+ background-image: url(images/number.png);
 304+ background-position: center;
 305+ background-repeat: no-repeat;
 306+}
Index: trunk/extensions/WikiLove/wikiLove.js
@@ -19,7 +19,8 @@
2020 text: '{{subst:The Special Barnstarl|$1 ~~~~}}',
2121 template: 'The Special Barnstar'
2222 }
23 - }
 23+ },
 24+ icon: 'http://upload.wikimedia.org/wikipedia/commons/2/27/Original_Barnstar.png'
2425 },
2526 // default type, nice to leave this one in place when adding other types
2627 'makeyourown': {
@@ -34,6 +35,7 @@
3536 currentTypeId: null, // id of the currently selected type (e.g. 'barnstar' or 'makeyourown')
3637 currentSubtypeId: null, // id of the currently selected subtype (e.g. 'original' or 'special')
3738 currentTypeOrSubtype: null, // content of the current (sub)type (i.e. an object with title, descr, text, etc.)
 39+ previewData: null, // data of the currently previewed thing is set here
3840
3941 /*
4042 * Opens the dialog and builds it if necessary.
@@ -47,10 +49,24 @@
4850 // </ul>
4951 var $typeList = $( '<ul id="wlTypes"></ul>' );
5052 for( var typeId in $.wikiLove.types ) {
51 - $typeList.append(
52 - $( '<li tabindex="0"><span>' + $.wikiLove.types[typeId].descr + '</span></li>' )
53 - .data( 'typeId', typeId )
54 - );
 53+ $button = $( '<a href="#"></a>' );
 54+ $buttonInside = $( '<div class="wlInside"></div>' );
 55+
 56+ if( typeof $.wikiLove.types[typeId].icon == 'string' ) {
 57+ $buttonInside.append( '<div class="wlIconBox"><img src="'
 58+ + $.wikiLove.types[typeId].icon + '"/></div>' );
 59+ }
 60+ else {
 61+ $buttonInside.addClass( 'wlNoIcon' );
 62+ }
 63+
 64+ $buttonInside.append( '<div class="wlLinkText">' + $.wikiLove.types[typeId].descr + '</div>' );
 65+
 66+ $button.append( '<div class="wlLeftCap"></div>');
 67+ $button.append( $buttonInside );
 68+ $button.append( '<div class="wlRightCap"></div>');
 69+ $button.data( 'typeId', typeId );
 70+ $typeList.append( $( '<li></li>' ).append( $button ) );
5571 }
5672
5773 // Build the left menu for selecting a type:
@@ -59,8 +75,17 @@
6076 // <ul id="wlTypes">...</ul>
6177 // </div>
6278 var $selectType = $( '<div id="wlSelectType"></div>' )
 79+ .append( '<span class="wlNumber">1</span>' )
6380 .append( '<h3>' + mw.msg( 'wikilove-select-type' ) + '</h3>' )
6481 .append( $typeList );
 82+
 83+ var $getStarted = $( '<div id="wlGetStarted"></div>' )
 84+ .append( '<h2>' + mw.msg( 'wikilove-get-started-header' ) + '</h2>' )
 85+ .append( $( '<ol></ol>' )
 86+ .append( '<li>' + mw.msg( 'wikilove-get-started-list-1' ) + '</li>' )
 87+ .append( '<li>' + mw.msg( 'wikilove-get-started-list-2' ) + '</li>' )
 88+ .append( '<li>' + mw.msg( 'wikilove-get-started-list-3' ) + '</li>' )
 89+ );
6590
6691 // Build the right top section for selecting a subtype and entering a title (optional) and message
6792 // <div id="wlAddDetails">
@@ -80,18 +105,21 @@
81106 // <img class="wlSpinner" src="..."/> (spinner for the preview button)
82107 // </div>
83108 var $addDetails = $( '<div id="wlAddDetails"></div>' )
 109+ .append( '<span class="wlNumber">2</span>' )
84110 .append( '<h3>' + mw.msg( 'wikilove-add-details' ) + '</h3>' )
85111 .append( '<label for="wlSubtype" id="wlSubtypeLabel"></label>' )
86 - .append( '<select id="wlSubtype"></select>' )
87 - .append( '<label for="wlTitle" id="wlTitleLabel">' + mw.msg( 'wikilove-title' ) + '</label>' )
88 - .append( '<input type="text" class="text" id="wlTitle"/>' )
89 - .append( '<label for="wlMessage" id="wlMessageLabel">' + mw.msg( 'wikilove-enter-message' ) + '</label>' )
90 - .append( '<span class="wlOmitSig">' + mw.msg( 'wikilove-omit-sig' ) + '</span>' )
91 - .append( '<textarea id="wlMessage"></textarea>' )
92 - .append( '<input id="wlButtonPreview" class="submit" type="submit" value="'
93 - + mw.msg( 'wikilove-button-preview' ) + '"/>' )
94 - .append( '<img class="wlSpinner" src="' + mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' )
95 - + '/extensions/WikiLove/images/spinner.gif"/>' )
 112+ .append( $( '<form id="wlPreviewForm"></form>' )
 113+ .append( '<select id="wlSubtype"></select>' )
 114+ .append( '<label for="wlTitle" id="wlTitleLabel">' + mw.msg( 'wikilove-title' ) + '</label>' )
 115+ .append( '<input type="text" class="text" id="wlTitle"/>' )
 116+ .append( '<label for="wlMessage" id="wlMessageLabel">' + mw.msg( 'wikilove-enter-message' ) + '</label>' )
 117+ .append( '<span class="wlOmitSig">' + mw.msg( 'wikilove-omit-sig' ) + '</span>' )
 118+ .append( '<textarea id="wlMessage"></textarea>' )
 119+ .append( '<input id="wlButtonPreview" class="submit" type="submit" value="'
 120+ + mw.msg( 'wikilove-button-preview' ) + '"/>' )
 121+ .append( '<img class="wlSpinner" src="' + mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' )
 122+ + '/extensions/WikiLove/images/spinner.gif"/>' )
 123+ )
96124 .hide();
97125
98126 // Build the right bottom preview section
@@ -102,17 +130,21 @@
103131 // <img class="wlSpinner" src="..."/> (another spinner for the send button)
104132 // </div>
105133 var $preview = $( '<div id="wlPreview"></div>' )
 134+ .append( '<span class="wlNumber">3</span>' )
106135 .append( '<h3>' + mw.msg( 'wikilove-preview' ) + '</h3>' )
107136 .append( '<div id="wlPreviewArea"></div>' )
108 - .append( '<input id="wlButtonSend" class="submit" type="submit" value="'
109 - + mw.msg( 'wikilove-button-send' ) + '"/>' )
110 - .append( '<img class="wlSpinner" src="' + mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' )
111 - + '/extensions/WikiLove/images/spinner.gif"/>' )
 137+ .append( $( '<form id="wlSendForm"></form>' )
 138+ .append( '<input id="wlButtonSend" class="submit" type="submit" value="'
 139+ + mw.msg( 'wikilove-button-send' ) + '"/>' )
 140+ .append( '<img class="wlSpinner" src="' + mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' )
 141+ + '/extensions/WikiLove/images/spinner.gif"/>' )
 142+ )
112143 .hide();
113144
114145 // Build a modal, hidden dialog with the 3 different sections
115146 $.wikiLove.$dialog = $( '<div id="wikiLoveDialog"></div>' )
116147 .append( $selectType )
 148+ .append( $getStarted )
117149 .append( $addDetails )
118150 .append( $preview )
119151 .dialog({
@@ -123,10 +155,10 @@
124156 resizable: false
125157 });
126158
127 - $( '#wlTypes li' ).click( $.wikiLove.clickType );
 159+ $( '#wlTypes a' ).click( $.wikiLove.clickType );
128160 $( '#wlSubtype' ).change( $.wikiLove.changeSubtype );
129 - $( '#wlButtonPreview' ).click( $.wikiLove.clickPreview );
130 - $( '#wlButtonSend' ).click( $.wikiLove.clickSend );
 161+ $( '#wlPreviewForm' ).submit( $.wikiLove.submitPreview );
 162+ $( '#wlSendForm' ).click( $.wikiLove.submitSend );
131163 }
132164
133165 $.wikiLove.$dialog.dialog( 'open' );
@@ -138,13 +170,14 @@
139171 */
140172 clickType: function( e ) {
141173 e.preventDefault();
 174+ $( '#wlGetStarted' ).hide(); // always hide the get started section
142175
143176 var newTypeId = $( this ).data( 'typeId' );
144177 if( $.wikiLove.currentTypeId != newTypeId ) { // only do stuff when a different type is selected
145178 $.wikiLove.currentTypeId = newTypeId;
146179 $.wikiLove.currentSubtypeId = null; // reset the subtype id
147180
148 - $( '#wlTypes li' ).removeClass( 'selected' );
 181+ $( '#wlTypes a' ).removeClass( 'selected' );
149182 $( this ).addClass( 'selected' ); // highlight the new type in the menu
150183
151184 if( typeof $.wikiLove.types[$.wikiLove.currentTypeId].subtypes == 'object' ) {
@@ -176,6 +209,7 @@
177210
178211 $( '#wlAddDetails' ).show();
179212 $( '#wlPreview' ).hide();
 213+ $.wikiLove.previewData = null;
180214 }
181215 return false;
182216 },
@@ -192,6 +226,7 @@
193227 .subtypes[$.wikiLove.currentSubtypeId];
194228 $.wikiLove.updateAllDetails();
195229 $( '#wlPreview' ).hide();
 230+ $.wikiLove.previewData = null;
196231 }
197232 },
198233
@@ -215,10 +250,19 @@
216251 /*
217252 * Handler for clicking the preview button. Builds data for AJAX request.
218253 */
219 - clickPreview: function() {
 254+ submitPreview: function( e ) {
 255+ e.preventDefault();
220256 var title = '==' + $( '#wlTitle' ).val() + "==\n";
221257 var msg = $.wikiLove.currentTypeOrSubtype.text.replace( '$1', $( '#wlMessage' ).val() );
222258 $.wikiLove.doPreview( title + msg );
 259+ $.wikiLove.previewData = {
 260+ 'title': title,
 261+ 'msg': msg,
 262+ 'type': $.wikiLove.currentTypeId
 263+ + ($.wikiLove.currentSubtypeId != null ? '-' + $.wikiLove.currentSubtypeId : ''),
 264+ 'template': $.wikiLove.currentTypeOrSubtype.template
 265+ };
 266+ return false;
223267 },
224268
225269 /*
@@ -257,12 +301,11 @@
258302 * The type sent for statistics is 'typeId-subtypeId' when using subtypes,
259303 * or simply 'typeId' otherwise.
260304 */
261 - clickSend: function() {
262 - var title = $( '#wlTitle' ).val();
263 - var msg = $.wikiLove.currentTypeOrSubtype.text.replace( '$1', $( '#wlMessage' ).val() );
264 - $.wikiLove.doSend( title, msg, $.wikiLove.currentTypeId
265 - + ($.wikiLove.currentSubtypeId == null ? '-' + $.wikiLove.currentSubtypeId : ''),
266 - $.wikiLove.currentTypeOrSubtype.template);
 305+ submitSend: function( e ) {
 306+ e.preventDefault();
 307+ $.wikiLove.doSend( $.wikiLove.previewData.title, $.wikiLove.previewData.msg,
 308+ $.wikiLove.previewData.type, $.wikiLove.previewData.template);
 309+ return false;
267310 },
268311
269312 /*
Index: trunk/extensions/WikiLove/images/get-started-ltr.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/extensions/WikiLove/images/get-started-ltr.png
___________________________________________________________________
Added: svn:mime-type
270313 + image/png
Index: trunk/extensions/WikiLove/images/get-started-rtl.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/extensions/WikiLove/images/get-started-rtl.png
___________________________________________________________________
Added: svn:mime-type
271314 + image/png
Index: trunk/extensions/WikiLove/images/select-sprite.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/extensions/WikiLove/images/select-sprite.png
___________________________________________________________________
Added: svn:mime-type
272315 + image/png
Index: trunk/extensions/WikiLove/images/number.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/extensions/WikiLove/images/number.png
___________________________________________________________________
Added: svn:mime-type
273316 + image/png
Index: trunk/extensions/WikiLove/images/select-bg-sprite.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/extensions/WikiLove/images/select-bg-sprite.png
___________________________________________________________________
Added: svn:mime-type
274317 + image/png
Index: trunk/extensions/WikiLove/WikiLove.i18n.php
@@ -19,6 +19,10 @@
2020 'tooltip-ca-wikilove' => 'Post a message for this user showing your appreciation',
2121 'wikilove-dialog-title' => 'WikiLove',
2222 'wikilove-select-type' => 'Select Type',
 23+ 'wikilove-get-started-header' => "Let's get started!",
 24+ 'wikilove-get-started-list-1' => 'Select the type of WikiLove you wish to send',
 25+ 'wikilove-get-started-list-2' => 'Add details to your WikiLove',
 26+ 'wikilove-get-started-list-3' => 'Send your WikiLove!',
2327 'wikilove-add-details' => 'Add Details',
2428 'wikilove-title' => 'Title:',
2529 'wikilove-enter-message' => 'Enter a message:',

Status & tagging log