Fix reverting a vote without reload

Before it would not work to vote up and immediately vote down again
without reloading the page inbetween. Also added some TODO for cleanin
up the JavaScript into a more reusable widget.
Refactored the code a little to use a constructor for CodeNY and moving
towards a widget architecture.

Change-Id: Ia45adec001f32daf42e076381e933a9ec2cffabf
This commit is contained in:
Daniel A. R. Werner 2015-03-05 04:36:05 +01:00 committed by Jack Phoenix
parent aa2b8ddb35
commit 1dcdc71935

105
Vote.js
View file

@ -1,18 +1,21 @@
/** /**
* JavaScript functions for Vote extension * JavaScript functions for Vote extension.
*
* TODO: Should refactor this into a jQuery widget. The widget should get a PageID in its
* constructor so it can work on any page for any page and with multiple instances per page.
*
* @constructor
* *
* @file
* @ingroup Extensions
* @author Jack Phoenix <jack@countervandalism.net> * @author Jack Phoenix <jack@countervandalism.net>
* @date 21 September 2014 * @author Daniel A. R. Werner < daniel.a.r.werner@gmail.com >
*/ */
var VoteNY = { var VoteNY = function VoteNY() {
MaxRating: 5, this.MaxRating = 5;
clearRatingTimer: null, this.clearRatingTimer = null;
voted_new: [], this.voted_new = [];
id: 0, this.id = 0;
last_id: 0, this.last_id = 0;
imagePath: mw.config.get( 'wgExtensionAssetsPath' ) + '/VoteNY/images/', this.imagePath = mw.config.get( 'wgExtensionAssetsPath' ) + '/VoteNY/images/';
/** /**
* Called when voting through the green square voting box * Called when voting through the green square voting box
@ -20,16 +23,15 @@ var VoteNY = {
* @param TheVote * @param TheVote
* @param PageID Integer: internal ID number of the current article * @param PageID Integer: internal ID number of the current article
*/ */
clickVote: function( TheVote, PageID ) { this.clickVote = function( TheVote, PageID ) {
sajax_request_type = 'POST'; sajax_request_type = 'POST';
sajax_do_call( 'wfVoteClick', [ TheVote, PageID ], function( request ) { sajax_do_call( 'wfVoteClick', [ TheVote, PageID ], function( request ) {
document.getElementById( 'votebox' ).style.cursor = 'default';
document.getElementById( 'PollVotes' ).innerHTML = request.responseText; document.getElementById( 'PollVotes' ).innerHTML = request.responseText;
document.getElementById( 'Answer' ).innerHTML = document.getElementById( 'Answer' ).innerHTML =
'<a href="javascript:void(0);" class="vote-unvote-link">' + '<a href="javascript:void(0);" class="vote-unvote-link">' +
mediaWiki.msg( 'voteny-unvote-link' ) + '</a>'; mediaWiki.msg( 'voteny-unvote-link' ) + '</a>';
} ); } );
}, };
/** /**
* Called when removing your vote through the green square voting box * Called when removing your vote through the green square voting box
@ -37,16 +39,15 @@ var VoteNY = {
* @param PageID Integer: internal ID number of the current article * @param PageID Integer: internal ID number of the current article
* @param mk Mixed: random token * @param mk Mixed: random token
*/ */
unVote: function( PageID ) { this.unVote = function( PageID ) {
sajax_request_type = 'POST'; sajax_request_type = 'POST';
sajax_do_call( 'wfVoteDelete', [ PageID ], function( request ) { sajax_do_call( 'wfVoteDelete', [ PageID ], function( request ) {
document.getElementById( 'votebox' ).style.cursor = 'pointer';
document.getElementById( 'PollVotes' ).innerHTML = request.responseText; document.getElementById( 'PollVotes' ).innerHTML = request.responseText;
document.getElementById( 'Answer' ).innerHTML = document.getElementById( 'Answer' ).innerHTML =
'<a href="javascript:void(0);" class="vote-vote-link">' + '<a href="javascript:void(0);" class="vote-vote-link">' +
mediaWiki.msg( 'voteny-link' ) + '</a>'; mediaWiki.msg( 'voteny-link' ) + '</a>';
} ); } );
}, };
/** /**
* Called when adding a vote after a user has clicked the yellow voting stars * Called when adding a vote after a user has clicked the yellow voting stars
@ -55,8 +56,8 @@ var VoteNY = {
* @param id Integer: ID of the current rating star * @param id Integer: ID of the current rating star
* @param action Integer: controls which AJAX function will be called * @param action Integer: controls which AJAX function will be called
*/ */
clickVoteStars: function( TheVote, PageID, id, action ) { this.clickVoteStars = function( TheVote, PageID, id, action ) {
VoteNY.voted_new[id] = TheVote; this.voted_new[id] = TheVote;
var rsfun; var rsfun;
if( action == 3 ) { if( action == 3 ) {
rsfun = 'wfVoteStars'; rsfun = 'wfVoteStars';
@ -68,7 +69,7 @@ var VoteNY = {
var resultElement = document.getElementById( 'rating_' + id ); var resultElement = document.getElementById( 'rating_' + id );
sajax_request_type = 'POST'; sajax_request_type = 'POST';
sajax_do_call( rsfun, [ TheVote, PageID ], resultElement ); sajax_do_call( rsfun, [ TheVote, PageID ], resultElement );
}, };
/** /**
* Called when removing your vote through the yellow voting stars * Called when removing your vote through the yellow voting stars
@ -76,24 +77,24 @@ var VoteNY = {
* @param PageID Integer: internal ID number of the current article * @param PageID Integer: internal ID number of the current article
* @param id Integer: ID of the current rating star * @param id Integer: ID of the current rating star
*/ */
unVoteStars: function( PageID, id ) { this.unVoteStars = function( PageID, id ) {
var resultElement = document.getElementById( 'rating_' + id ); var resultElement = document.getElementById( 'rating_' + id );
sajax_request_type = 'POST'; sajax_request_type = 'POST';
sajax_do_call( 'wfVoteStarsDelete', [ PageID ], resultElement ); sajax_do_call( 'wfVoteStarsDelete', [ PageID ], resultElement );
}, };
startClearRating: function( id, rating, voted ) { this.startClearRating = function( id, rating, voted ) {
VoteNY.clearRatingTimer = setTimeout( function() { this.clearRatingTimer = setTimeout( function() {
VoteNY.clearRating( id, 0, rating, voted ); this.clearRating( id, 0, rating, voted );
}, 200 ); }, 200 );
}, };
clearRating: function( id, num, prev_rating, voted ) { this.clearRating = function( id, num, prev_rating, voted ) {
if( VoteNY.voted_new[id] ) { if( this.voted_new[id] ) {
voted = VoteNY.voted_new[id]; voted = this.voted_new[id];
} }
for( var x = 1; x <= VoteNY.MaxRating; x++ ) { for( var x = 1; x <= this.MaxRating; x++ ) {
var star_on, old_rating; var star_on, old_rating;
if( voted ) { if( voted ) {
star_on = 'voted'; star_on = 'voted';
@ -104,39 +105,43 @@ var VoteNY = {
} }
var ratingElement = document.getElementById( 'rating_' + id + '_' + x ); var ratingElement = document.getElementById( 'rating_' + id + '_' + x );
if( !num && old_rating >= x ) { if( !num && old_rating >= x ) {
ratingElement.src = VoteNY.imagePath + 'star_' + star_on + '.gif'; ratingElement.src = this.imagePath + 'star_' + star_on + '.gif';
} else { } else {
ratingElement.src = VoteNY.imagePath + 'star_off.gif'; ratingElement.src = this.imagePath + 'star_off.gif';
} }
} }
}, };
updateRating: function( id, num, prev_rating ) { this.updateRating = function( id, num, prev_rating ) {
if( VoteNY.clearRatingTimer && VoteNY.last_id == id ) { if( this.clearRatingTimer && this.last_id == id ) {
clearTimeout( VoteNY.clearRatingTimer ); clearTimeout( this.clearRatingTimer );
} }
VoteNY.clearRating( id, num, prev_rating ); this.clearRating( id, num, prev_rating );
for( var x = 1; x <= num; x++ ) { for( var x = 1; x <= num; x++ ) {
document.getElementById( 'rating_' + id + '_' + x ).src = VoteNY.imagePath + 'star_voted.gif'; document.getElementById( 'rating_' + id + '_' + x ).src = this.imagePath + 'star_voted.gif';
} }
VoteNY.last_id = id; this.last_id = id;
} };
}; };
// TODO:Mmake event handlers part of a widget as described in the VoteNY's TODO and reduce this
// code to instantiating such a widget for the current wiki page if required.
jQuery( document ).ready( function() { jQuery( document ).ready( function() {
// Green voting box var vote = new VoteNY();
jQuery( '#votebox, a.vote-vote-link' ).click( function() {
VoteNY.clickVote( 1, mw.config.get( 'wgArticleId' ) );
} );
jQuery( 'a.vote-unvote-link' ).click( function() { // Green voting box's link
VoteNY.unVote( mw.config.get( 'wgArticleId' ) ); jQuery( '.vote-action' ).on( 'click', '> a', function( event ) {
if( jQuery( this ).hasClass( 'vote-unvote-link' ) ) {
vote.unVote( mw.config.get( 'wgArticleId' ) );
} else {
vote.clickVote( 1, mw.config.get( 'wgArticleId' ) );
}
} ); } );
// Rating stars // Rating stars
jQuery( 'img.vote-rating-star' ).click( function() { jQuery( 'img.vote-rating-star' ).click( function() {
var that = jQuery( this ); var that = jQuery( this );
VoteNY.clickVoteStars( vote.clickVoteStars(
that.data( 'vote-the-vote' ), that.data( 'vote-the-vote' ),
mw.config.get( 'wgArticleId' ), mw.config.get( 'wgArticleId' ),
that.data( 'vote-id' ), that.data( 'vote-id' ),
@ -144,14 +149,14 @@ jQuery( document ).ready( function() {
); );
} ).mouseover( function() { } ).mouseover( function() {
var that = jQuery( this ); var that = jQuery( this );
VoteNY.updateRating( vote.updateRating(
that.data( 'vote-id' ), that.data( 'vote-id' ),
that.data( 'vote-the-vote' ), that.data( 'vote-the-vote' ),
that.data( 'vote-rating' ) that.data( 'vote-rating' )
); );
} ).mouseout( function() { } ).mouseout( function() {
var that = jQuery( this ); var that = jQuery( this );
VoteNY.startClearRating( vote.startClearRating(
that.data( 'vote-id' ), that.data( 'vote-id' ),
that.data( 'vote-rating' ), that.data( 'vote-rating' ),
that.data( 'vote-voted' ) that.data( 'vote-voted' )
@ -160,7 +165,7 @@ jQuery( document ).ready( function() {
// Remove vote (rating stars) // Remove vote (rating stars)
jQuery( 'a.vote-remove-stars-link' ).click( function() { jQuery( 'a.vote-remove-stars-link' ).click( function() {
VoteNY.unVoteStars( vote.unVoteStars(
mw.config.get( 'wgArticleId' ), mw.config.get( 'wgArticleId' ),
jQuery( this ).data( 'vote-id' ) jQuery( this ).data( 'vote-id' )
); );