http://www.mediawiki.org/wiki/Special:Code/MediaWiki/87685
Revision: 87685
Author: janpaul123
Date: 2011-05-08 14:51:09 +0000 (Sun, 08 May 2011)
Log Message:
-----------
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
trunk/extensions/WikiLove/WikiLove.php
trunk/extensions/WikiLove/wikiLove.css
trunk/extensions/WikiLove/wikiLove.js
Added Paths:
-----------
trunk/extensions/WikiLove/images/get-started-ltr.png
trunk/extensions/WikiLove/images/get-started-rtl.png
trunk/extensions/WikiLove/images/number.png
trunk/extensions/WikiLove/images/select-bg-sprite.png
trunk/extensions/WikiLove/images/select-sprite.png
Modified: trunk/extensions/WikiLove/WikiLove.i18n.php
===================================================================
--- trunk/extensions/WikiLove/WikiLove.i18n.php 2011-05-08 13:22:42 UTC (rev
87684)
+++ trunk/extensions/WikiLove/WikiLove.i18n.php 2011-05-08 14:51:09 UTC (rev
87685)
@@ -19,6 +19,10 @@
'tooltip-ca-wikilove' => 'Post a message for this user showing your
appreciation',
'wikilove-dialog-title' => 'WikiLove',
'wikilove-select-type' => 'Select Type',
+ 'wikilove-get-started-header' => "Let's get started!",
+ 'wikilove-get-started-list-1' => 'Select the type of WikiLove you wish
to send',
+ 'wikilove-get-started-list-2' => 'Add details to your WikiLove',
+ 'wikilove-get-started-list-3' => 'Send your WikiLove!',
'wikilove-add-details' => 'Add Details',
'wikilove-title' => 'Title:',
'wikilove-enter-message' => 'Enter a message:',
Modified: trunk/extensions/WikiLove/WikiLove.php
===================================================================
--- trunk/extensions/WikiLove/WikiLove.php 2011-05-08 13:22:42 UTC (rev
87684)
+++ trunk/extensions/WikiLove/WikiLove.php 2011-05-08 14:51:09 UTC (rev
87685)
@@ -83,6 +83,10 @@
'messages' => array(
'wikilove-dialog-title',
'wikilove-select-type',
+ 'wikilove-get-started-header',
+ 'wikilove-get-started-list-1',
+ 'wikilove-get-started-list-2',
+ 'wikilove-get-started-list-3',
'wikilove-add-details',
'wikilove-title',
'wikilove-enter-message',
Added: trunk/extensions/WikiLove/images/get-started-ltr.png
===================================================================
(Binary files differ)
Property changes on: trunk/extensions/WikiLove/images/get-started-ltr.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Added: trunk/extensions/WikiLove/images/get-started-rtl.png
===================================================================
(Binary files differ)
Property changes on: trunk/extensions/WikiLove/images/get-started-rtl.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Added: trunk/extensions/WikiLove/images/number.png
===================================================================
(Binary files differ)
Property changes on: trunk/extensions/WikiLove/images/number.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Added: trunk/extensions/WikiLove/images/select-bg-sprite.png
===================================================================
(Binary files differ)
Property changes on: trunk/extensions/WikiLove/images/select-bg-sprite.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Added: trunk/extensions/WikiLove/images/select-sprite.png
===================================================================
(Binary files differ)
Property changes on: trunk/extensions/WikiLove/images/select-sprite.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Modified: trunk/extensions/WikiLove/wikiLove.css
===================================================================
--- trunk/extensions/WikiLove/wikiLove.css 2011-05-08 13:22:42 UTC (rev
87684)
+++ trunk/extensions/WikiLove/wikiLove.css 2011-05-08 14:51:09 UTC (rev
87685)
@@ -58,39 +58,174 @@
padding: 0;
}
-#wikiLoveDialog #wlSelectType ul li {
+#wikiLoveDialog #wlSelectType ul li,
+#wikiLoveDialog #wlSelectType a
+{
display: block;
- background-color: #3060b0;
width: 250px;
- padding: 10px 0;
-
- /* create a hand cursor, cross-browser hack:
http://www.quirksmode.org/css/cursor.html */
- cursor: pointer;
- cursor: hand;
+ height: 66px;
+ padding: 0;
+ margin: 0;
+ position: relative;
+ text-decoration: none;
}
+#wikiLoveDialog #wlSelectType a:hover,
+#wikiLoveDialog #wlSelectType a:focus {
+ text-decoration:none;
+}
+
/* IGNORED BY IE6 */
-#wikiLoveDialog #wlSelectType ul > li {
+#wikiLoveDialog #wlSelectType ul > li,
+#wikiLoveDialog #wlSelectType ul li > a {
display: inline-block;
}
-#wikiLoveDialog #wlSelectType ul li:hover,
-#wikiLoveDialog #wlSelectType ul li:focus {
- background-color: #3366bb;
+#wikiLoveDialog #wlSelectType a .wlLeftCap,
+#wikiLoveDialog #wlSelectType a .wlRightCap {
+ padding: 0;
+ margin: 0;
+ width: 6px;
+ height: 66px;
+ position: absolute;
+ top: 0px;
}
-#wikiLoveDialog #wlSelectType ul li.selected {
- background-color: #e46020;
+#wikiLoveDialog #wlSelectType a .wlLeftCap,
+#wikiLoveDialog #wlSelectType a .wlRightCap,
+#wikiLoveDialog #wlSelectType a .wlIconBox {
+ /* @embed */
+ background-image: url(images/select-sprite.png);
+ background-repeat: no-repeat;
}
-#wikiLoveDialog #wlSelectType ul li span {
+#wikiLoveDialog #wlSelectType a .wlLeftCap {
+ /* @noflip */
+ left: 0px;
+ background-position: 0px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a:hover .wlLeftCap,
+#wikiLoveDialog #wlSelectType a:focus .wlLeftCap {
+ background-position: -6px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a.selected .wlLeftCap {
+ background-position: -12px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a .wlRightCap {
+ /* @noflip */
+ right: 0px;
+ background-position: -18px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a:hover .wlRightCap,
+#wikiLoveDialog #wlSelectType a:focus .wlRightCap {
+ background-position: -25px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a.selected .wlRightCap {
+ background-position: -32px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a .wlInside {
+ padding: 0;
+ margin: 0;
+ width: 238px;
+ height: 66px;
+ position: absolute;
+ top: 0px;
+ left: 6px;
+
+ /* @embed */
+ background-image: url(images/select-bg-sprite.png);
+ background-position: 0px 0px;
+ background-repeat: repeat-x;
+}
+
+#wikiLoveDialog #wlSelectType a:hover .wlInside,
+#wikiLoveDialog #wlSelectType a:focus .wlInside {
+ background-position: 0px -66px;
+}
+
+#wikiLoveDialog #wlSelectType a.selected .wlInside {
+ background-position: 0px -132px;
+}
+
+#wikiLoveDialog #wlSelectType a .wlIconBox {
+ padding: 0;
+ margin: 0;
+ width: 53px;
+ height: 53px;
+ position: absolute;
+ left: 0px;
+ top: 5px;
+ background-position: -42px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a .wlIconBox img {
+ padding: 0;
+ margin: 0;
+ width: 53px;
+ height: 53px;
+ position: absolute:
+ top: 0px;
+ left: 0px;
+}
+
+#wikiLoveDialog #wlSelectType a:hover .wlIconBox,
+#wikiLoveDialog #wlSelectType a:focus .wlIconBox {
+ background-position: -97px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a.selected .wlIconBox {
+ background-position: -152px 0px;
+}
+
+#wikiLoveDialog #wlSelectType a .wlLinkText {
+ padding: 0;
+ margin: 0;
+ width: 170px;
+ height: 53px;
+ position: absolute;
+ left: 64px;
+ top: 5px;
+ line-height: 53px;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
color: white;
- margin-left: 10px;
}
+#wikiLoveDialog #wlSelectType a .wlNoIcon .wlLinkText {
+ left: 3px;
+}
+
+/* dialog get started */
+#wikiLoveDialog #wlGetStarted {
+ float: right;
+ width: 380px;
+ margin-top: 40px;
+ padding-top: 4px;
+ padding-left: 70px;
+ font-size: 1.1em;
+
+ /* @embed */
+ background-image: url(images/get-started-ltr.png);
+ background-position: top left;
+ background-repeat: no-repeat;
+}
+
+#wikiLoveDialog #wlGetStarted h2 {
+ border: none;
+ font-weight: bold;
+}
+
+#wikiLoveDialog #wlGetStarted ol {
+ margin-left: 1.5em;
+}
+
/* dialog add details */
#wikiLoveDialog #wlAddDetails {
float: right;
@@ -114,13 +249,8 @@
color: #999;
}
-#wikiLoveDialog #wlAddDetails input,
-#wikiLoveDialog #wlAddDetails textarea,
-#wikiLoveDialog #wlAddDetails select {
- margin-top: 5px;
- margin-left: 15px;
- max-width: 460px;
- display: block;
+#wikiLoveDialog #wlAddDetails textarea {
+ resize: none;
}
#wikiLoveDialog .wlSpinner {
@@ -144,6 +274,32 @@
}
/* dialog misc */
+#wikiLoveDialog input,
+#wikiLoveDialog textarea,
+#wikiLoveDialog select {
+ margin: 5px 0px 5px 15px;
+ max-width: 460px;
+ display: block;
+}
+
#wikiLoveDialog .submit {
float: right;
-}
\ No newline at end of file
+}
+
+#wikiLoveDialog .wlNumber {
+ color: white;
+ float: left;
+ display: block;
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ margin-right: 5px;
+ font-size: 1.5em;
+ font-weight: bold;
+
+ /* @embed */
+ background-image: url(images/number.png);
+ background-position: center;
+ background-repeat: no-repeat;
+}
Modified: trunk/extensions/WikiLove/wikiLove.js
===================================================================
--- trunk/extensions/WikiLove/wikiLove.js 2011-05-08 13:22:42 UTC (rev
87684)
+++ trunk/extensions/WikiLove/wikiLove.js 2011-05-08 14:51:09 UTC (rev
87685)
@@ -19,7 +19,8 @@
text: '{{subst:The Special Barnstarl|$1
~~~~}}',
template: 'The Special Barnstar'
}
- }
+ },
+ icon:
'http://upload.wikimedia.org/wikipedia/commons/2/27/Original_Barnstar.png'
},
// default type, nice to leave this one in place when adding
other types
'makeyourown': {
@@ -34,6 +35,7 @@
currentTypeId: null, // id of the currently selected type (e.g.
'barnstar' or 'makeyourown')
currentSubtypeId: null, // id of the currently selected subtype (e.g.
'original' or 'special')
currentTypeOrSubtype: null, // content of the current (sub)type (i.e.
an object with title, descr, text, etc.)
+ previewData: null, // data of the currently previewed thing is set here
/*
* Opens the dialog and builds it if necessary.
@@ -47,10 +49,24 @@
// </ul>
var $typeList = $( '<ul id="wlTypes"></ul>' );
for( var typeId in $.wikiLove.types ) {
- $typeList.append(
- $( '<li tabindex="0"><span>' +
$.wikiLove.types[typeId].descr + '</span></li>' )
- .data( 'typeId', typeId )
- );
+ $button = $( '<a href="#"></a>' );
+ $buttonInside = $( '<div
class="wlInside"></div>' );
+
+ if( typeof $.wikiLove.types[typeId].icon ==
'string' ) {
+ $buttonInside.append( '<div
class="wlIconBox"><img src="'
+ + $.wikiLove.types[typeId].icon
+ '"/></div>' );
+ }
+ else {
+ $buttonInside.addClass( 'wlNoIcon' );
+ }
+
+ $buttonInside.append( '<div
class="wlLinkText">' + $.wikiLove.types[typeId].descr + '</div>' );
+
+ $button.append( '<div
class="wlLeftCap"></div>');
+ $button.append( $buttonInside );
+ $button.append( '<div
class="wlRightCap"></div>');
+ $button.data( 'typeId', typeId );
+ $typeList.append( $( '<li></li>' ).append(
$button ) );
}
// Build the left menu for selecting a type:
@@ -59,8 +75,17 @@
// <ul id="wlTypes">...</ul>
// </div>
var $selectType = $( '<div id="wlSelectType"></div>' )
+ .append( '<span class="wlNumber">1</span>' )
.append( '<h3>' + mw.msg(
'wikilove-select-type' ) + '</h3>' )
.append( $typeList );
+
+ var $getStarted = $( '<div id="wlGetStarted"></div>' )
+ .append( '<h2>' + mw.msg(
'wikilove-get-started-header' ) + '</h2>' )
+ .append( $( '<ol></ol>' )
+ .append( '<li>' + mw.msg(
'wikilove-get-started-list-1' ) + '</li>' )
+ .append( '<li>' + mw.msg(
'wikilove-get-started-list-2' ) + '</li>' )
+ .append( '<li>' + mw.msg(
'wikilove-get-started-list-3' ) + '</li>' )
+ );
// Build the right top section for selecting a subtype
and entering a title (optional) and message
// <div id="wlAddDetails">
@@ -80,18 +105,21 @@
// <img class="wlSpinner" src="..."/>
(spinner for the preview button)
// </div>
var $addDetails = $( '<div id="wlAddDetails"></div>' )
+ .append( '<span class="wlNumber">2</span>' )
.append( '<h3>' + mw.msg(
'wikilove-add-details' ) + '</h3>' )
.append( '<label for="wlSubtype"
id="wlSubtypeLabel"></label>' )
- .append( '<select id="wlSubtype"></select>' )
- .append( '<label for="wlTitle"
id="wlTitleLabel">' + mw.msg( 'wikilove-title' ) + '</label>' )
- .append( '<input type="text" class="text"
id="wlTitle"/>' )
- .append( '<label for="wlMessage"
id="wlMessageLabel">' + mw.msg( 'wikilove-enter-message' ) + '</label>' )
- .append( '<span class="wlOmitSig">' + mw.msg(
'wikilove-omit-sig' ) + '</span>' )
- .append( '<textarea id="wlMessage"></textarea>'
)
- .append( '<input id="wlButtonPreview"
class="submit" type="submit" value="'
- + mw.msg( 'wikilove-button-preview' ) +
'"/>' )
- .append( '<img class="wlSpinner" src="' +
mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' )
- +
'/extensions/WikiLove/images/spinner.gif"/>' )
+ .append( $( '<form id="wlPreviewForm"></form>' )
+ .append( '<select
id="wlSubtype"></select>' )
+ .append( '<label for="wlTitle"
id="wlTitleLabel">' + mw.msg( 'wikilove-title' ) + '</label>' )
+ .append( '<input type="text"
class="text" id="wlTitle"/>' )
+ .append( '<label for="wlMessage"
id="wlMessageLabel">' + mw.msg( 'wikilove-enter-message' ) + '</label>' )
+ .append( '<span class="wlOmitSig">' +
mw.msg( 'wikilove-omit-sig' ) + '</span>' )
+ .append( '<textarea
id="wlMessage"></textarea>' )
+ .append( '<input id="wlButtonPreview"
class="submit" type="submit" value="'
+ + mw.msg(
'wikilove-button-preview' ) + '"/>' )
+ .append( '<img class="wlSpinner" src="'
+ mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' )
+ +
'/extensions/WikiLove/images/spinner.gif"/>' )
+ )
.hide();
// Build the right bottom preview section
@@ -102,17 +130,21 @@
// <img class="wlSpinner" src="..."/>
(another spinner for the send button)
// </div>
var $preview = $( '<div id="wlPreview"></div>' )
+ .append( '<span class="wlNumber">3</span>' )
.append( '<h3>' + mw.msg( 'wikilove-preview' )
+ '</h3>' )
.append( '<div id="wlPreviewArea"></div>' )
- .append( '<input id="wlButtonSend"
class="submit" type="submit" value="'
- + mw.msg( 'wikilove-button-send' ) +
'"/>' )
- .append( '<img class="wlSpinner" src="' +
mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' )
- +
'/extensions/WikiLove/images/spinner.gif"/>' )
+ .append( $( '<form id="wlSendForm"></form>' )
+ .append( '<input id="wlButtonSend"
class="submit" type="submit" value="'
+ + mw.msg(
'wikilove-button-send' ) + '"/>' )
+ .append( '<img class="wlSpinner" src="'
+ mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' )
+ +
'/extensions/WikiLove/images/spinner.gif"/>' )
+ )
.hide();
// Build a modal, hidden dialog with the 3 different
sections
$.wikiLove.$dialog = $( '<div
id="wikiLoveDialog"></div>' )
.append( $selectType )
+ .append( $getStarted )
.append( $addDetails )
.append( $preview )
.dialog({
@@ -123,10 +155,10 @@
resizable: false
});
- $( '#wlTypes li' ).click( $.wikiLove.clickType );
+ $( '#wlTypes a' ).click( $.wikiLove.clickType );
$( '#wlSubtype' ).change( $.wikiLove.changeSubtype );
- $( '#wlButtonPreview' ).click( $.wikiLove.clickPreview
);
- $( '#wlButtonSend' ).click( $.wikiLove.clickSend );
+ $( '#wlPreviewForm' ).submit( $.wikiLove.submitPreview
);
+ $( '#wlSendForm' ).click( $.wikiLove.submitSend );
}
$.wikiLove.$dialog.dialog( 'open' );
@@ -138,13 +170,14 @@
*/
clickType: function( e ) {
e.preventDefault();
+ $( '#wlGetStarted' ).hide(); // always hide the get started
section
var newTypeId = $( this ).data( 'typeId' );
if( $.wikiLove.currentTypeId != newTypeId ) { // only do stuff
when a different type is selected
$.wikiLove.currentTypeId = newTypeId;
$.wikiLove.currentSubtypeId = null; // reset the
subtype id
- $( '#wlTypes li' ).removeClass( 'selected' );
+ $( '#wlTypes a' ).removeClass( 'selected' );
$( this ).addClass( 'selected' ); // highlight the new
type in the menu
if( typeof
$.wikiLove.types[$.wikiLove.currentTypeId].subtypes == 'object' ) {
@@ -176,6 +209,7 @@
$( '#wlAddDetails' ).show();
$( '#wlPreview' ).hide();
+ $.wikiLove.previewData = null;
}
return false;
},
@@ -192,6 +226,7 @@
.subtypes[$.wikiLove.currentSubtypeId];
$.wikiLove.updateAllDetails();
$( '#wlPreview' ).hide();
+ $.wikiLove.previewData = null;
}
},
@@ -215,10 +250,19 @@
/*
* Handler for clicking the preview button. Builds data for AJAX
request.
*/
- clickPreview: function() {
+ submitPreview: function( e ) {
+ e.preventDefault();
var title = '==' + $( '#wlTitle' ).val() + "==\n";
var msg = $.wikiLove.currentTypeOrSubtype.text.replace( '$1',
$( '#wlMessage' ).val() );
$.wikiLove.doPreview( title + msg );
+ $.wikiLove.previewData = {
+ 'title': title,
+ 'msg': msg,
+ 'type': $.wikiLove.currentTypeId
+ + ($.wikiLove.currentSubtypeId != null ? '-' +
$.wikiLove.currentSubtypeId : ''),
+ 'template': $.wikiLove.currentTypeOrSubtype.template
+ };
+ return false;
},
/*
@@ -257,12 +301,11 @@
* The type sent for statistics is 'typeId-subtypeId' when using
subtypes,
* or simply 'typeId' otherwise.
*/
- clickSend: function() {
- var title = $( '#wlTitle' ).val();
- var msg = $.wikiLove.currentTypeOrSubtype.text.replace( '$1',
$( '#wlMessage' ).val() );
- $.wikiLove.doSend( title, msg, $.wikiLove.currentTypeId
- + ($.wikiLove.currentSubtypeId == null ? '-' +
$.wikiLove.currentSubtypeId : ''),
- $.wikiLove.currentTypeOrSubtype.template);
+ submitSend: function( e ) {
+ e.preventDefault();
+ $.wikiLove.doSend( $.wikiLove.previewData.title,
$.wikiLove.previewData.msg,
+ $.wikiLove.previewData.type,
$.wikiLove.previewData.template);
+ return false;
},
/*
_______________________________________________
MediaWiki-CVS mailing list
MediaWiki-CVS@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
