resources/mediawiki/mediawiki.feedback.js

   1 /**
   2  * mediawiki.Feedback
   3  *
   4  * @author Ryan Kaldari, 2010
   5  * @author Neil Kandalgaonkar, 2010-11
   6  * @since 1.19
   7  *
   8  * This is a way of getting simple feedback from users. It's useful
   9  * for testing new features -- users can give you feedback without
  10  * the difficulty of opening a whole new talk page. For this reason,
  11  * it also tends to collect a wider range of both positive and negative
  12  * comments. However you do need to tend to the feedback page. It will
  13  * get long relatively quickly, and you often get multiple messages
  14  * reporting the same issue.
  15  *
  16  * It takes the form of thing on your page which, when clicked, opens a small
  17  * dialog box. Submitting that dialog box appends its contents to a
  18  * wiki page that you specify, as a new section.
  19  *
  20  * Not compatible with LiquidThreads.
  21  *
  22  * Minimal example in how to use it:
  23  *
  24  *    var feedback = new mw.Feedback();
  25  *    $( '#myButton' ).click( function () { feedback.launch(); } );
  26  *
  27  * You can also launch the feedback form with a prefilled subject and body.
  28  * See the docs for the launch() method.
  29  */
  30 ( function ( mw, $ ) {
  31         /**
  32          * Thingy for collecting user feedback on a wiki page
  33          * @param {Array} options -- optional, all properties optional.
  34          *  api: {mw.Api} if omitted, will just create a standard API
  35          *  title: {mw.Title} the title of the page where you collect feedback. Defaults to "Feedback".
  36          *  dialogTitleMessageKey: {String} message key for the title of the dialog box
  37          *  bugsLink: {mw.Uri|String} url where bugs can be posted
  38          *  bugsListLink: {mw.Uri|String} url where bugs can be listed
  39          */
  40         mw.Feedback = function ( options ) {
  41                 if ( options === undefined ) {
  42                         options = {};
  43                 }
  44
  45                 if ( options.api === undefined ) {
  46                         options.api = new mw.Api();
  47                 }
  48
  49                 if ( options.title === undefined ) {
  50                         options.title = new mw.Title( 'Feedback' );
  51                 }
  52
  53                 if ( options.dialogTitleMessageKey === undefined ) {
  54                         options.dialogTitleMessageKey = 'feedback-submit';
  55                 }
  56
  57                 if ( options.bugsLink === undefined ) {
  58                         options.bugsLink = '//bugzilla.wikimedia.org/enter_bug.cgi';
  59                 }
  60
  61                 if ( options.bugsListLink === undefined ) {
  62                         options.bugsListLink = '//bugzilla.wikimedia.org/query.cgi';
  63                 }
  64
  65                 $.extend( this, options );
  66                 this.setup();
  67         };
  68
  69         mw.Feedback.prototype = {
  70                 setup: function () {
  71                         var fb = this;
  72
  73                         var $feedbackPageLink = $( '<a>' )
  74                                 .attr( { 'href': fb.title.getUrl(), 'target': '_blank' } )
  75                                 .css( { 'white-space': 'nowrap' } );
  76
  77                         var $bugNoteLink = $( '<a>' ).attr( { 'href': '#' } ).click( function () {
  78                                 fb.displayBugs();
  79                         } );
  80
  81                         var $bugsListLink = $( '<a>' ).attr( { 'href': fb.bugsListLink, 'target': '_blank' } );
  82
  83                         // TODO: Use a stylesheet instead of these inline styles
  84                         this.$dialog =
  85                                 $( '<div style="position: relative;"></div>' ).append(
  86                                         $( '<div class="feedback-mode feedback-form"></div>' ).append(
  87                                                 $( '<small>' ).append(
  88                                                         $( '<p>' ).msg(
  89                                                                 'feedback-bugornote',
  90                                                                 $bugNoteLink,
  91                                                                 fb.title.getNameText(),
  92                                                                 $feedbackPageLink.clone()
  93                                                         )
  94                                                 ),
  95                                                 $( '<div style="margin-top: 1em;"></div>' ).append(
  96                                                         mw.msg( 'feedback-subject' ),
  97                                                         $( '<br>' ),
  98                                                         $( '<input type="text" class="feedback-subject" name="subject" maxlength="60" style="width: 99%;"/>' )
  99                                                 ),
 100                                                 $( '<div style="margin-top: 0.4em;"></div>' ).append(
 101                                                         mw.msg( 'feedback-message' ),
 102                                                         $( '<br>' ),
 103                                                         $( '<textarea name="message" class="feedback-message" style="width: 99%;" rows="5" cols="60"></textarea>' )
 104                                                 )
 105                                         ),
 106                                         $( '<div class="feedback-mode feedback-bugs"></div>' ).append(
 107                                                 $( '<p>' ).msg( 'feedback-bugcheck', $bugsListLink )
 108                                         ),
 109                                         $( '<div class="feedback-mode feedback-submitting" style="text-align: center; margin: 3em 0;"></div>' ).append(
 110                                                 mw.msg( 'feedback-adding' ),
 111                                                 $( '<br/>' ),
 112                                                 $( '<span class="feedback-spinner"></span>' )
 113                                         ),
 114                                         $( '<div class="feedback-mode feedback-thanks" style="text-align: center; margin:1em"></div>' ).msg(
 115                                                 'feedback-thanks', fb.title.getNameText(), $feedbackPageLink.clone()
 116                                         ),
 117                                         $( '<div class="feedback-mode feedback-error" style="position: relative;"></div>' ).append(
 118                                                 $( '<div class="feedback-error-msg style="color: #990000; margin-top: 0.4em;"></div>' )
 119                                         )
 120                                 );
 121
 122                                 // undo some damage from dialog css
 123                                 this.$dialog.find( 'a' ).css( {
 124                                         color: '#0645ad'
 125                                 } );
 126
 127                                 this.$dialog.dialog({
 128                                         width: 500,
 129                                         autoOpen: false,
 130                                         title: mw.msg( this.dialogTitleMessageKey ),
 131                                         modal: true,
 132                                         buttons: fb.buttons
 133                                 });
 134
 135                         this.subjectInput = this.$dialog.find( 'input.feedback-subject' ).get(0);
 136                         this.messageInput = this.$dialog.find( 'textarea.feedback-message' ).get(0);
 137
 138                 },
 139
 140                 display: function ( s ) {
 141                         this.$dialog.dialog( { buttons:{} } ); // hide the buttons
 142                         this.$dialog.find( '.feedback-mode' ).hide(); // hide everything
 143                         this.$dialog.find( '.feedback-' + s ).show(); // show the desired div
 144                 },
 145
 146                 displaySubmitting: function () {
 147                         this.display( 'submitting' );
 148                 },
 149
 150                 displayBugs: function () {
 151                         var fb = this;
 152                         this.display( 'bugs' );
 153                         var bugsButtons = {};
 154                         bugsButtons[ mw.msg( 'feedback-bugnew' ) ] = function () {
 155                                 window.open( fb.bugsLink, '_blank' );
 156                         };
 157                         bugsButtons[ mw.msg( 'feedback-cancel' ) ] = function () {
 158                                 fb.cancel();
 159                         };
 160                         this.$dialog.dialog( {
 161                                 buttons: bugsButtons
 162                         } );
 163                 },
 164
 165                 displayThanks: function () {
 166                         var fb = this;
 167                         this.display( 'thanks' );
 168                         var closeButton = {};
 169                         closeButton[ mw.msg( 'feedback-close' ) ] = function () {
 170                                 fb.$dialog.dialog( 'close' );
 171                         };
 172                         this.$dialog.dialog( {
 173                                 buttons: closeButton
 174                         } );
 175                 },
 176
 177                 /**
 178                  * Display the feedback form
 179                  * @param {Object} optional prefilled contents for the feedback form. Object with properties:
 180                  *  subject: {String}
 181                  *      message: {String}
 182                  */
 183                 displayForm: function ( contents ) {
 184                         var fb = this;
 185                         this.subjectInput.value = ( contents && contents.subject ) ? contents.subject : '';
 186                         this.messageInput.value = ( contents && contents.message ) ? contents.message : '';
 187
 188                         this.display( 'form' );
 189
 190                         // Set up buttons for dialog box. We have to do it the hard way since the json keys are localized
 191                         var formButtons = {};
 192                         formButtons[ mw.msg( 'feedback-submit' ) ] = function () {
 193                                 fb.submit();
 194                         };
 195                         formButtons[ mw.msg( 'feedback-cancel' ) ] = function () {
 196                                 fb.cancel();
 197                         };
 198                         this.$dialog.dialog( { buttons: formButtons } ); // put the buttons back
 199                 },
 200
 201                 displayError: function ( message ) {
 202                         var fb = this;
 203                         this.display( 'error' );
 204                         this.$dialog.find( '.feedback-error-msg' ).msg( message );
 205                         var closeButton = {};
 206                         closeButton[ mw.msg( 'feedback-close' ) ] = function () {
 207                                 fb.$dialog.dialog( 'close' );
 208                         };
 209                         this.$dialog.dialog( { buttons: closeButton } );
 210                 },
 211
 212                 cancel: function () {
 213                         this.$dialog.dialog( 'close' );
 214                 },
 215
 216                 submit: function () {
 217                         var subject, message,
 218                                 fb = this;
 219
 220                         function ok( result ) {
 221                                 if ( result.edit !== undefined ) {
 222                                         if ( result.edit.result === 'Success' ) {
 223                                                 fb.displayThanks();
 224                                         } else {
 225                                                 // unknown API result
 226                                                 fb.displayError( 'feedback-error1' );
 227                                         }
 228                                 } else {
 229                                         // edit failed
 230                                         fb.displayError( 'feedback-error2' );
 231                                 }
 232                         }
 233
 234                         function err( code, info ) {
 235                                 // ajax request failed
 236                                 fb.displayError( 'feedback-error3' );
 237                         }
 238
 239                         // Get the values to submit.
 240                         subject = this.subjectInput.value;
 241
 242                         // We used to include "mw.html.escape( navigator.userAgent )" but there are legal issues
 243                         // with posting this without their explicit consent
 244                         message = this.messageInput.value;
 245                         if ( message.indexOf( '~~~' ) === -1 ) {
 246                                 message += ' ~~~~';
 247                         }
 248
 249                         this.displaySubmitting();
 250
 251                         this.api.newSection( this.title, subject, message, ok, err );
 252                 },
 253
 254                 /**
 255                  * Modify the display form, and then open it, focusing interface on the subject.
 256                  * @param {Object} optional prefilled contents for the feedback form. Object with properties:
 257                  *                                              subject: {String}
 258                  *                                              message: {String}
 259                  */
 260                 launch: function ( contents ) {
 261                         this.displayForm( contents );
 262                         this.$dialog.dialog( 'open' );
 263                         this.subjectInput.focus();
 264                 }
 265
 266         };
 267
 268 }( mediaWiki, jQuery ) );