| Index: trunk/extensions/ArticleAssessmentPilot/test.html |
| — | — | @@ -1,33 +0,0 @@ |
| 2 | | -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| 3 | | - "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 4 | | - |
| 5 | | -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| 6 | | -<head> |
| 7 | | - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| 8 | | - <script type="text/javascript" charset="utf-8"> |
| 9 | | - var wgScriptPath = ""; |
| 10 | | - </script> |
| 11 | | - <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> |
| 12 | | - <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> |
| 13 | | - <script src="js/jquery.stars.js" type="text/javascript" charset="utf-8"></script> |
| 14 | | - <script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script> |
| 15 | | - <script src="js/jquery.tipsy.js" type="text/javascript" charset="utf-8"></script> |
| 16 | | - |
| 17 | | - <script src="js/ArticleAssessment.js" type="text/javascript" charset="utf-8"></script> |
| 18 | | - <style type="text/css" media="screen"> |
| 19 | | - body,html{ background: #fff; } |
| 20 | | - </style> |
| 21 | | - <title>ArticleAssessment JS Test</title> |
| 22 | | - <link rel="stylesheet" href="css/ArticleAssessment.css" type="text/css" media="screen" title="CSS" charset="utf-8" /> |
| 23 | | -</head> |
| 24 | | - |
| 25 | | -<body> |
| 26 | | -<div class="article-assessment-wrapper"> |
| 27 | | - <div id="catlinks"> |
| 28 | | - |
| 29 | | - </div> |
| 30 | | -</div> |
| 31 | | - |
| 32 | | - |
| 33 | | -</body> |
| 34 | | -</html> |
| Index: trunk/extensions/ArticleAssessmentPilot/css/ArticleAssessment.css |
| — | — | @@ -28,8 +28,9 @@ |
| 29 | 29 | .article-assessment-wrapper .ui-stars-star a { |
| 30 | 30 | background-position: 0 0px; |
| 31 | 31 | } |
| | 32 | + |
| 32 | 33 | .article-assessment-wrapper .ui-stars-star-on a { |
| 33 | | - background-position: 0 -42px; |
| | 34 | + background-position: 0 -21px; |
| 34 | 35 | } |
| 35 | 36 | .article-assessment-wrapper .ui-stars-star-rated a { |
| 36 | 37 | background-position: 0 -42px; |
| Index: trunk/extensions/ArticleAssessmentPilot/js/ArticleAssessment.js |
| — | — | @@ -84,7 +84,7 @@ |
| 85 | 85 | if ( ! wgUserName ) { |
| 86 | 86 | config.userID = cookieSettings.uid; |
| 87 | 87 | } |
| 88 | | - // setup our markup |
| | 88 | + // setup our markup using the template varibales in settings |
| 89 | 89 | var $output = $( settings.structureHTML |
| 90 | 90 | .replace( /\{INSTRUCTIONS\}/g, mw.usability.getMsg('articleassessment-pleaserate') ) |
| 91 | 91 | .replace( /\{FEEDBACK\}/g, mw.usability.getMsg('articleassessment-featurefeedback') |
| — | — | @@ -109,8 +109,9 @@ |
| 110 | 110 | .replace( /\{COUNT\}/g, mw.usability.getMsg( 'articleassessment-noratings', [0, 0] ) ) ) |
| 111 | 111 | ); |
| 112 | 112 | } |
| | 113 | + // store our settings and configuration for later |
| 113 | 114 | $output.find( '#article-assessment' ).data( 'articleAssessment-context', { 'settings': settings, 'config': config } ); |
| 114 | | - // hook up the ratings show/hide |
| | 115 | + // bind the ratings show/hide handlers |
| 115 | 116 | $output |
| 116 | 117 | .find( '.article-assessment-show-ratings a' ) |
| 117 | 118 | .click( function() { |
| — | — | @@ -159,9 +160,13 @@ |
| 160 | 161 | .stars( { |
| 161 | 162 | inputType: 'select', |
| 162 | 163 | callback: function( value, link ) { |
| 163 | | - // remove any stale classes |
| | 164 | + // remove any stale or rated classes |
| 164 | 165 | value.$stars.each( function() { |
| 165 | | - $( this ).removeClass( 'ui-stars-star-stale' ); |
| | 166 | + $( this ) |
| | 167 | + .removeClass( 'ui-stars-star-stale' ) |
| | 168 | + .removeClass( 'ui-stars-star-rated' ); |
| | 169 | + // enable our submit button if it's still disabled |
| | 170 | + $( '#article-assessment input:disabled' ).removeAttr( "disabled" ); |
| 166 | 171 | } ); |
| 167 | 172 | } |
| 168 | 173 | } ); |
| — | — | @@ -174,19 +179,24 @@ |
| 175 | 180 | .tipsy( { gravity : 'se', opacity: '0.9', } ) ); |
| 176 | 181 | } ); |
| 177 | 182 | // bind submit event to the form |
| 178 | | - $( '#article-assessment' ).submit( function() { $.ArticleAssessment.fn.submitRating(); return false; } ); |
| | 183 | + $( '#article-assessment' ) |
| | 184 | + .submit( function() { $.ArticleAssessment.fn.submitRating(); return false; } ); |
| 179 | 185 | // prevent the submit button for being active until all ratings are filled out |
| 180 | | - |
| | 186 | + $( '#article-assessment input[type=submit]' ) |
| | 187 | + .attr( 'disabled', 'disabled' ); |
| 181 | 188 | }, |
| | 189 | + // Request the ratings data for the current article |
| 182 | 190 | 'getRatingData': function() { |
| | 191 | + var config = $( '#article-assessment' ).data( 'articleAssessment-context' ).config; |
| 183 | 192 | var request = $.ajax( { |
| 184 | 193 | url: wgScriptPath + '/api.php', |
| 185 | 194 | data: { |
| 186 | 195 | 'action': 'query', |
| 187 | 196 | 'list': 'articleassessment', |
| 188 | | - 'aarevid': wgCurRevisionId, |
| 189 | | - 'aapageid': wgArticleId, |
| | 197 | + 'aarevid': config.revID, |
| | 198 | + 'aapageid': config.pageID, |
| 190 | 199 | 'aauserrating': 1, |
| | 200 | + 'aauserid': config.userID, |
| 191 | 201 | 'format': 'json' |
| 192 | 202 | }, |
| 193 | 203 | dataType: 'json', |
| — | — | @@ -205,31 +215,32 @@ |
| 206 | 216 | for( rating in data.query.articleassessment[0].ratings) { |
| 207 | 217 | var rating = data.query.articleassessment[0].ratings[rating], |
| 208 | 218 | $rating = $( '#' + rating.ratingdesc ), |
| 209 | | - label = mw.usability.getMsg( 'articleassessment-noratings', [rating.total, rating.count] ); |
| | 219 | + count = rating.count, |
| | 220 | + total = rating.total / count, |
| | 221 | + label = mw.usability.getMsg( 'articleassessment-noratings', [total, count] ); |
| 210 | 222 | $rating |
| 211 | 223 | .find( '.article-assessment-rating-field-value' ) |
| 212 | | - .text( rating.total ) |
| | 224 | + .text( total ) |
| 213 | 225 | .end() |
| 214 | 226 | .find( '.article-assessment-rating-count' ) |
| 215 | 227 | .text( label ); |
| 216 | 228 | if( rating.userrating ) { |
| 217 | 229 | var $rateControl = $( '#' + rating.ratingdesc.replace( 'rating', 'rate' ) + ' .rating-field' ); |
| 218 | | - $rateControl.children( '.ui-stars-star' ).eq( rating.userrating - 1 ).click(); |
| | 230 | + $rateControl.stars( 'select', rating.userrating ); |
| 219 | 231 | } |
| 220 | 232 | } |
| 221 | 233 | // if the rating is stale, add the stale class |
| 222 | | - if( true /* replace with conditional based on returned results of past user ratings */ ) { |
| | 234 | + if( data.query.articleassessment ) { |
| 223 | 235 | // add the stale star class to each on star |
| 224 | 236 | $( '.ui-stars-star-on' ) |
| 225 | 237 | .addClass( 'ui-stars-star-stale' ); |
| 226 | 238 | // add the stale message |
| 227 | | - $( '.article-assessment-submit' ) |
| 228 | | - .append( settings.staleMSG.replace( /\{MSG\}/g, mw.usability.getMsg( 'articleassessment-stalemessage-revisioncount' ) |
| 229 | | - .replace( /'''([^']*)'''/g, '<strong>$1</strong >' ) |
| 230 | | - .replace( /''([^']*)''/, '<em>$1</em>' ) ) ); |
| | 239 | + var msg = mw.usability.getMsg( 'articleassessment-stalemessage-revisioncount' ) |
| | 240 | + .replace( /'''([^']*)'''/g, '<strong>$1</strong>' ) |
| | 241 | + .replace( /''([^']*)''/g, '<em>$1</em>' ); |
| | 242 | + $.ArticleAssessment.fn.flashNotice( msg, { 'class': 'article-assessment-stale-msg' } ); |
| 231 | 243 | } |
| 232 | 244 | } |
| 233 | | - |
| 234 | 245 | // initialize the ratings |
| 235 | 246 | $( '.article-assessment-rating-field-value' ).each( function() { |
| 236 | 247 | $( this ) |
| — | — | @@ -241,6 +252,11 @@ |
| 242 | 253 | 'submitRating': function() { |
| 243 | 254 | var config = $( '#article-assessment' ).data( 'articleAssessment-context' ).config; |
| 244 | 255 | // clear out the stale message |
| | 256 | + $.ArticleAssessment.fn.flashNotice( ); |
| | 257 | + |
| | 258 | + //lock the star inputs |
| | 259 | + |
| | 260 | + // get our results for submitting |
| 245 | 261 | var results = {}; |
| 246 | 262 | $( '.rating-field input' ).each( function() { |
| 247 | 263 | // expects the hidden inputs to have names like 'rating[field-name]' which we use to |
| — | — | @@ -263,12 +279,38 @@ |
| 264 | 280 | }, |
| 265 | 281 | dataType: 'json', |
| 266 | 282 | success: function( data ) { |
| 267 | | - console.log(data); |
| | 283 | + // set the stars to rated status |
| | 284 | + $j('.ui-stars-star-on').addClass('ui-stars-star-rated'); |
| | 285 | + // unlock the stars |
| | 286 | + |
| | 287 | + // update the results |
| | 288 | + |
| | 289 | + // show the results |
| | 290 | + $( '#article-assessment .article-assessment-show-ratings a' ).click(); |
| 268 | 291 | } |
| 269 | 292 | } ); |
| 270 | 293 | }, |
| | 294 | + // places a message on the interface |
| 271 | 295 | 'flashNotice': function( text, options ) { |
| 272 | | - |
| | 296 | + if ( arguments.length == 0 ) { |
| | 297 | + // clear existing messages, but don't add a new one |
| | 298 | + $( '#article-assessment .article-assessment-flash' ).remove(); |
| | 299 | + } else { |
| | 300 | + // clear and add a new message |
| | 301 | + $( '#article-assessment .article-assessment-flash' ).remove(); |
| | 302 | + var className = options['class']; |
| | 303 | + // create our new message |
| | 304 | + $msg = $( '<span />' ) |
| | 305 | + .addClass( 'article-assessment-flash' ) |
| | 306 | + .html( text ); |
| | 307 | + // if the class option was passed, add it |
| | 308 | + if( options['class'] ) { |
| | 309 | + $msg.addClass( options['class'] ); |
| | 310 | + } |
| | 311 | + // place our new message on the page |
| | 312 | + $( '#article-assessment .article-assessment-submit' ) |
| | 313 | + .append( $msg ); |
| | 314 | + } |
| 273 | 315 | } |
| 274 | 316 | } |
| 275 | 317 | }; |
| Index: trunk/extensions/ArticleAssessmentPilot/js/jquery.stars.js |
| — | — | @@ -1,12 +1,11 @@ |
| 2 | 2 | /*! |
| 3 | 3 | * jQuery Stars v1 |
| 4 | | - * adapted by Adam Miller (acm6603@gmail.com) 2010 |
| | 4 | + * adapted by Adam Miller (acm6603@gmail.com) |
| 5 | 5 | * |
| 6 | 6 | * Adapted from jQuery UI Stars v3.0.1 |
| 7 | 7 | * Marek "Orkan" Zajac (orkans@gmail.com) |
| 8 | 8 | * http://plugins.jquery.com/project/Star_Rating_widget |
| 9 | 9 | * |
| 10 | | - * TODO: Non of the API functions are working right now. Need to rewrite more of this so they will |
| 11 | 10 | */ |
| 12 | 11 | (function($) { |
| 13 | 12 | $.stars = { |
| — | — | @@ -34,13 +33,6 @@ |
| 35 | 34 | cancelHoverClass: 'ui-stars-cancel-hover', |
| 36 | 35 | cancelDisabledClass: 'ui-stars-cancel-disabled' |
| 37 | 36 | }, |
| 38 | | - init: function( element, options ) { |
| 39 | | - var context = $.extend( {}, { |
| 40 | | - element: $( element ), |
| 41 | | - options: $.extend( {}, this.defaults, options ) |
| 42 | | - }, this ); |
| 43 | | - this.create.call( context ); |
| 44 | | - }, |
| 45 | 37 | create: function( ) { |
| 46 | 38 | var self = this, o = this.options, starId = 0; |
| 47 | 39 | this.element.data('former.stars', this.element.html()); |
| — | — | @@ -270,36 +262,43 @@ |
| 271 | 263 | } |
| 272 | 264 | } |
| 273 | 265 | $.fn.stars = function ( ) { |
| 274 | | - var args = arguments; |
| | 266 | + // convert the arguments to an array |
| | 267 | + var args = Array.prototype.slice.call(arguments); |
| 275 | 268 | |
| 276 | | - // var context = $( this ).data( 'stars-context' ); |
| 277 | | - // if ( typeof context == 'undefined' || context == null ) { |
| 278 | | - // context = { |
| 279 | | - // options: { |
| 280 | | - // } |
| 281 | | - // }; |
| 282 | | - // } |
| 283 | | - // // // Handle various calling styles |
| 284 | | - // if ( args.length > 0 ) { |
| 285 | | - // if ( typeof args[0] == 'object' ) { |
| 286 | | - // // Apply set of properties |
| 287 | | - // // for ( var key in args[0] ) { |
| 288 | | - // // $.suggestions.configure( context, key, args[0][key] ); |
| 289 | | - // // } |
| 290 | | - // return $( this ).each( function() { |
| 291 | | - // $.stars.init( this, args[0] ); |
| 292 | | - // } ); |
| 293 | | - // } else if ( typeof args[0] == 'string' ) { |
| 294 | | - // // call the function |
| 295 | | - // var funcName = args[0]; |
| 296 | | - // delete args[0]; |
| 297 | | - // return $( this ).each( function() { |
| 298 | | - // $.stars[funcName]( args ); |
| 299 | | - // } ); |
| 300 | | - // } |
| 301 | | - // } |
| 302 | | - return $( this ).each( function() { |
| 303 | | - $.stars.init( this, args[0] ); |
| | 269 | + // default value to return -- overwritten by api calls |
| | 270 | + var out = $( this ); |
| | 271 | + |
| | 272 | + $( this ).each( function() { |
| | 273 | + // get the context if it's already been initialized |
| | 274 | + var context = $( this ).data( 'stars-context' ); |
| | 275 | + if ( typeof context == 'undefined' || context == null ) { |
| | 276 | + // setup the context if it hasn't been yet |
| | 277 | + context = $.extend( {}, { |
| | 278 | + element: $( this ), |
| | 279 | + options: $.stars.defaults |
| | 280 | + }, $.stars ); |
| | 281 | + } |
| | 282 | + // Handle various calling styles |
| | 283 | + if ( args.length > 0 ) { |
| | 284 | + if ( typeof args[0] == 'object' ) { |
| | 285 | + // merge the passed options into defaults |
| | 286 | + context.options = $.extend( {}, context.options, args[0] ); |
| | 287 | + // initialize |
| | 288 | + $.stars.create.call( context ); |
| | 289 | + } else if ( typeof args[0] == 'string' ) { |
| | 290 | + // API call |
| | 291 | + var funcName = args.shift(); |
| | 292 | + // call the function, and if it returns something, store the output in our return var |
| | 293 | + out = $.stars[funcName].call( context, args[0] ) || out; |
| | 294 | + } |
| | 295 | + } else { |
| | 296 | + // initialize with the defaults |
| | 297 | + $.stars.create.call( context ); |
| | 298 | + } |
| | 299 | + // save our context, bay-bee |
| | 300 | + $( this ).data( 'stars-context', context ); |
| 304 | 301 | } ); |
| | 302 | + |
| | 303 | + return out; |
| 305 | 304 | }; |
| 306 | 305 | } )( jQuery ); |