Wikimania branch

.jshintrc

@@ -0,0 +1,33 @@
+{
+	// Enforcing
+	"bitwise": true,
+	"eqeqeq": true,
+	"esversion": 3,
+	"freeze": true,
+	"futurehostile": true,
+	"latedef": "nofunc",
+	"noarg": true,
+	"nonew": true,
+	"strict": false,
+	"undef": true,
+	"unused": true,
+
+	// Relaxing
+	"laxbreak": true,
+	"multistr": true,
+
+	// Environment
+	"browser": true,
+
+	"globals": {
+		"require": false,
+		"module": false,
+		"mediaWiki": true,
+		"JSON": true,
+		"OO": true,
+		"mwPerformance": true,
+		"jQuery": false,
+		"QUnit": false,
+		"sinon": false
+	}
+}

public_html/js/index.js

@@ -1,121 +1,164 @@
-$( document ).ready( function () {
-	/** Listeners */
-	$( 'body' ).tooltip( {
-		selector: '[data-toggle="tooltip"]'
-	} );
-	$( '.records' ).on( 'click', '.js-save-state', function () {
-		saveState( $( this ).data( 'id' ), $( this ).data( 'status' ) );
-	} );
-	$( '.records' ).on( 'click', '.js-compare-button', function () {
-		// pass the dataset of the element as an object to toggleComparePane
-		toggleComparePane.call(this, this.dataset);
-	});
-	$( '.js-load-more' ).on( 'click', loadMoreResults );
-
-	/**
-	 * Save a review
-	 * @param id int ID of the record
-	 * @param val string Save value 'fixed' or 'false'
-	 */
-	function saveState( id, val ) {
-		var buttonId, unusedButtonId, buttonClass, unusedButtonClass;
+(function( $, document, window ) {
+	'use strict';
 
-		if ( val === 'fixed' ) {
-			buttonId = '#success' + id;
-			unusedButtonId = '#danger' + id;
-			buttonClass = 'success';
-			unusedButtonClass = 'danger';
-		} else if ( val.toString() === 'false' ) { // needs toString() as jQuery's .data will assume 'false' to be boolean
-			buttonId = '#danger' + id;
-			unusedButtonId = '#success' + id;
-			unusedButtonClass = 'success';
-			buttonClass = 'danger';
-		}
-		$( buttonId ).removeClass( 'btn-' + buttonClass ).addClass( 'btn-' + buttonClass + '-clicked' ).blur();
-		$( unusedButtonId ).removeClass( 'btn-' + unusedButtonClass ).addClass( 'btn-secondary' ).prop( 'disabled', 'disabled' ).blur();
+	$( document ).ready( function () {
+		/** Listeners */
+		$( 'body' ).tooltip( {
+			selector: '[data-toggle="tooltip"]'
+		} );
+		$( '.records' ).on( 'click', '.js-save-state', function () {
+			var status = $( this ).data( 'status' ),
+				id = $( this ).data( 'id' );
 
-		$.ajax( {
-			url: 'review/add',
-			data: {
-				id: id,
-				val: val
-			},
-			dataType: 'json'
-		} ).done( function ( ret ) {
-			if ( ret.user ) {
-				$reviewerNode = $( '.status-div-reviewer-' + id );
-				$reviewerNode.find( '.reviewer-link' ).prop( 'href', ret.userpage ).text( ret.user );
-				$reviewerNode.find( '.reviewer-timestamp' ).text( ret.timestamp );
-				$reviewerNode.fadeIn( 'slow' );
-			} else if ( ret.error === 'Unauthorized' ) {
-				alert( 'You need to be logged in to be able to review.' );
-				$( buttonId ).addClass( 'btn-' + buttonClass ).removeClass( 'btn-' + buttonClass + '-clicked' ).blur();
-				$( unusedButtonId ).removeClass( 'btn-secondary' ).prop( 'disabled', false ).addClass( 'btn-' + unusedButtonClass );
+			// undo review if they click on the button with the same status as the record
+			if ( status === $( '.record-' + id ).data( 'status' ) ) {
+				undoReview( id, status );
 			} else {
-				alert( 'There was an error in connecting to database.' );
-				$( buttonId ).addClass( 'btn-' + buttonClass ).removeClass( 'btn-' + buttonClass + '-clicked' ).blur();
-				$( unusedButtonId ).removeClass( 'btn-secondary' ).prop( 'disabled', false ).addClass( 'btn-' + unusedButtonClass );
+				saveState( id, status );
 			}
 		} );
-	}
-
-	/**
-	 * Load more results to the page when 'Load More' is clicked
-	 */
-	function loadMoreResults() {
-		$( '#btn-load-more' ).text( '' ).addClass( 'btn-loading' );
-		var lastId = $( '.ithenticate-id:last' ).text();
-		$.ajax( {
-			url: 'loadmore',
-			data: {
-				lastId: lastId,
-				filter: $( 'input[name=filter]:checked' ).val()
-			}
-		} ).done( function ( ret ) {
-			$( '#btn-load-more' ).text( 'Load More' ).removeClass( 'btn-loading' );
-			$newRecords = $( ret ).find( '.record-container' );
-			$( '.record-container' ).append( $newRecords.html() );
+		$( '.records' ).on( 'click', '.js-compare-button', function () {
+			// pass the dataset of the element as an object to toggleComparePane
+			toggleComparePane.call(this, this.dataset);
 		} );
-	}
+		$( '.js-load-more' ).on( 'click', loadMoreResults );
+
+		/**
+		 * Save a review
+		 * @param id int ID of the record
+		 * @param val string Save value 'fixed' or 'false'
+		 */
+		function saveState( id, val ) {
+			// update styles before AJAX to make it seem more responsive
+			setReviewState( id, val );
+
+			$.ajax( {
+				url: 'review/add',
+				data: {
+					id: id,
+					val: val
+				},
+				dataType: 'json'
+			} ).done( function ( ret ) {
+				if ( ret.user ) {
+					var $reviewerNode = $( '.status-div-reviewer-' + id );
+					$reviewerNode.find( '.reviewer-link' ).prop( 'href', ret.userpage ).text( ret.user );
+					$reviewerNode.find( '.reviewer-timestamp' ).text( ret.timestamp );
+					$reviewerNode.fadeIn( 'slow' );
+				} else if ( ret.error === 'Unauthorized' ) {
+					window.alert( 'You need to be logged in to be able to review.' );
+					// go back to initial state
+					setReviewState( id, 'open' );
+				} else {
+					window.alert( 'There was an error in connecting to database.' );
+					setReviewState( id, 'open' );
+				}
+
+				document.activeElement.blur(); // remove focus from button
+			} );
+		}
+
+		/**
+		 * Undo a review
+		 * @param id int ID of the record
+		 * @param oldStatus string current review state of the record
+		 */
+		function undoReview( id, oldStatus ) {
+			// update styles before AJAX to make it seem more responsive
+			setReviewState( id, 'open' );
 
-	/**
-	 * Open the compare pane and do an AJAX request to Copyvios to fetch comparison data
-	 * @oaram object params a hash of the necessary params, should include:
-	 *   integer id Ithenticate ID of record
-	 *   integer index Index of the link in the copyvios list for the record
-	 *   string copyvio Copyvio URL
-	 *   integer diffid Oldid of diff
-	 */
-	function toggleComparePane(params) {
-		var compareDiv = '#comp' + params.id + '-' + params.index;
-		$( compareDiv ).slideToggle( 500 );
-		if ( !$( compareDiv ).hasClass( 'copyvios-fetched' ) ) {
 			$.ajax( {
-				type: 'GET',
-				url: 'https://tools.wmflabs.org/copyvios/api.json',
+				url: 'review/undo',
 				data: {
-					oldid: params.diffid,
-					url: params.copyvio,
-					action: 'compare',
-					project: 'wikipedia',
-					lang: 'en',
-					format: 'json',
-					detail: 'true'
+					id: id
 				},
-				dataType: 'json',
-				jsonpCallback: 'callback'
+				dataType: 'json'
 			} ).done( function ( ret ) {
-				console.log( 'XHR Success' );
-				if ( ret.detail ) {
-					// Add a class to the compare panel once we fetch the details to avoid making repetitive API requests
-					$( compareDiv ).find( '.compare-pane-left' ).html( ret.detail.article );
-					$( compareDiv ).find( '.compare-pane-right' ).html( ret.detail.source );
+				if ( ret.user ) {
+					var $reviewerNode = $( '.status-div-reviewer-' + id );
+					$reviewerNode.fadeOut( 'slow' );
 				} else {
-					$( compareDiv ).find( '.compare-pane-left' ).html( '<span class="text-danger">Error! API returned no data.</span>' );
-					$( compareDiv ).find( '.compare-pane-right' ).html( '<span class="text-danger">Error! API returned no data.</span>' );
+					window.alert( 'There was an error in connecting to database.' );
+					setReviewState( id, oldStatus ); // revert back to old state
 				}
-				$( compareDiv ).addClass( 'copyvios-fetched' );
+
+				document.activeElement.blur(); // remove focus from button
 			} );
 		}
-	}
-} );
+
+		/**
+		 * Set the CSS class of the record in view, which updates the appearance of the review buttons
+		 * @param id int ID of the record
+		 * @param state string record state, must be 'open', 'fixed' or 'false'
+		 */
+		function setReviewState( id, state ) {
+			$( '.record-' + id )
+				.removeClass( 'record-status-open' )
+				.removeClass( 'record-status-false' )
+				.removeClass( 'record-status-fixed' )
+				.addClass( 'record-status-' + state )
+				.data( 'status', state );
+		}
+
+		/**
+		 * Load more results to the page when 'Load More' is clicked
+		 */
+		function loadMoreResults() {
+			$( '#btn-load-more' ).text( '' ).addClass( 'btn-loading' );
+			var lastId = $( '.ithenticate-id:last' ).text();
+			$.ajax( {
+				url: 'loadmore',
+				data: {
+					lastId: lastId,
+					filter: $( 'input[name=filter]:checked' ).val()
+				}
+			} ).done( function ( ret ) {
+				$( '#btn-load-more' ).text( 'Load More' ).removeClass( 'btn-loading' );
+				var $newRecords = $( ret ).find( '.record-container' );
+				$( '.record-container' ).append( $newRecords.html() );
+			} );
+		}
+
+		/**
+		 * Open the compare pane and do an AJAX request to Copyvios to fetch comparison data
+		 * @oaram object params a hash of the necessary params, should include:
+		 *   integer id Ithenticate ID of record
+		 *   integer index Index of the link in the copyvios list for the record
+		 *   string copyvio Copyvio URL
+		 *   integer diffid Oldid of diff
+		 */
+		function toggleComparePane(params) {
+			var compareDiv = '#comp' + params.id + '-' + params.index;
+
+			$( compareDiv ).slideToggle( 500 );
+			if ( !$( compareDiv ).hasClass( 'copyvios-fetched' ) ) {
+				$.ajax( {
+					type: 'GET',
+					url: 'https://tools.wmflabs.org/copyvios/api.json',
+					data: {
+						oldid: params.diffid,
+						url: params.copyvio,
+						action: 'compare',
+						project: 'wikipedia',
+						lang: 'en',
+						format: 'json',
+						detail: 'true'
+					},
+					dataType: 'json',
+					jsonpCallback: 'callback'
+				} ).always( function ( ret ) { // use always to handle 500s, etc.
+					if ( ret.detail ) { // ret.detail means we had success
+						// Add a class to the compare panel once we fetch the details to avoid making repetitive API requests
+						$( compareDiv ).find( '.compare-pane-left-body' ).html( ret.detail.article );
+						$( compareDiv ).find( '.compare-pane-right-body' ).html( ret.detail.source );
+					} else {
+						// use API-provided error message, otherwise a blanket unknown error message as it could be unrelated to the API
+						var errorMessage = ret.error && ret.error.info ? ret.error.info : 'An unknown error occurred.';
+						$( compareDiv ).find( '.compare-pane-body' ).html( '<span class="text-danger">' + errorMessage + '</span>' );
+					}
+					$( compareDiv ).addClass( 'copyvios-fetched' );
+				} );
+			}
+		}
+	} );
+} )( jQuery, document, window );

public_html/templates/base.html

@@ -80,7 +80,7 @@ <h1>CopyPatrol</h1>
 
 	<section class="filters container-fluid">
 		<form>
-			<fieldset class="form-group filters-fieldset">
+			<fieldset class="form-group filters-fieldset text-center">
 				{% for type, description in filterTypes %}
 					<span class="radio-inline">
 						<label>