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 $feedbackPageLink,
  72                                 $bugNoteLink,
  73                                 $bugsListLink,
  74                                 fb = this;
  75
  76                         $feedbackPageLink = $( '<a>' )
  77                                 .attr( {
  78                                         href: fb.title.getUrl(),
  79                                         target: '_blank'
  80                                 } )
  81                                 .css( {
  82                                         whiteSpace: 'nowrap'
  83                                 } );
  84
  85                         $bugNoteLink = $( '<a>' ).attr( { href: '#' } ).click( function () {
  86                                 fb.displayBugs();
  87                         } );
  88
  89                         $bugsListLink = $( '<a>' ).attr( {
  90                                 href: fb.bugsListLink,
  91                                 target: '_blank'
  92                         } );
  93
  94                         // TODO: Use a stylesheet instead of these inline styles
  95                         this.$dialog =
  96                                 $( '<div style="position: relative;"></div>' ).append(
  97                                         $( '<div class="feedback-mode feedback-form"></div>' ).append(
  98                                                 $( '<small>' ).append(
  99                                                         $( '<p>' ).msg(
 100                                                                 'feedback-bugornote',
 101                                                                 $bugNoteLink,
 102                                                                 fb.title.getNameText(),
 103                                                                 $feedbackPageLink.clone()
 104                                                         )
 105                                                 ),
 106                                                 $( '<div style="margin-top: 1em;"></div>' ).append(
 107                                                         mw.msg( 'feedback-subject' ),
 108                                                         $( '<br>' ),
 109                                                         $( '<input type="text" class="feedback-subject" name="subject" maxlength="60" style="width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;"/>' )
 110                                                 ),
 111                                                 $( '<div style="margin-top: 0.4em;"></div>' ).append(
 112                                                         mw.msg( 'feedback-message' ),
 113                                                         $( '<br>' ),
 114                                                         $( '<textarea name="message" class="feedback-message" rows="5" cols="60"></textarea>' )
 115                                                 )
 116                                         ),
 117                                         $( '<div class="feedback-mode feedback-bugs"></div>' ).append(
 118                                                 $( '<p>' ).msg( 'feedback-bugcheck', $bugsListLink )
 119                                         ),
 120                                         $( '<div class="feedback-mode feedback-submitting" style="text-align: center; margin: 3em 0;"></div>' ).append(
 121                                                 mw.msg( 'feedback-adding' ),
 122                                                 $( '<br>' ),
 123                                                 $( '<span class="feedback-spinner"></span>' )
 124                                         ),
 125                                         $( '<div class="feedback-mode feedback-thanks" style="text-align: center; margin:1em"></div>' ).msg(
 126                                                 'feedback-thanks', fb.title.getNameText(), $feedbackPageLink.clone()
 127                                         ),
 128                                         $( '<div class="feedback-mode feedback-error" style="position: relative;"></div>' ).append(
 129                                                 $( '<div class="feedback-error-msg style="color: #990000; margin-top: 0.4em;"></div>' )
 130                                         )
 131                                 );
 132
 133                                 // undo some damage from dialog css
 134                                 this.$dialog.find( 'a' ).css( {
 135                                         color: '#0645ad'
 136                                 } );
 137
 138                                 this.$dialog.dialog({
 139                                         width: 500,
 140                                         autoOpen: false,
 141                                         title: mw.msg( this.dialogTitleMessageKey ),
 142                                         modal: true,
 143                                         buttons: fb.buttons
 144                                 });
 145
 146                         this.subjectInput = this.$dialog.find( 'input.feedback-subject' ).get(0);
 147                         this.messageInput = this.$dialog.find( 'textarea.feedback-message' ).get(0);
 148
 149                 },
 150
 151                 display: function ( s ) {
 152                         this.$dialog.dialog( { buttons:{} } ); // hide the buttons
 153                         this.$dialog.find( '.feedback-mode' ).hide(); // hide everything
 154                         this.$dialog.find( '.feedback-' + s ).show(); // show the desired div
 155                 },
 156
 157                 displaySubmitting: function () {
 158                         this.display( 'submitting' );
 159                 },
 160
 161                 displayBugs: function () {
 162                         var fb = this,
 163                                 bugsButtons = {};
 164                         this.display( 'bugs' );
 165                         bugsButtons[ mw.msg( 'feedback-bugnew' ) ] = function () {
 166                                 window.open( fb.bugsLink, '_blank' );
 167                         };
 168                         bugsButtons[ mw.msg( 'feedback-cancel' ) ] = function () {
 169                                 fb.cancel();
 170                         };
 171                         this.$dialog.dialog( {
 172                                 buttons: bugsButtons
 173                         } );
 174                 },
 175
 176                 displayThanks: function () {
 177                         var fb = this,
 178                                 closeButton = {};
 179                         this.display( 'thanks' );
 180                         closeButton[ mw.msg( 'feedback-close' ) ] = function () {
 181                                 fb.$dialog.dialog( 'close' );
 182                         };
 183                         this.$dialog.dialog( {
 184                                 buttons: closeButton
 185                         } );
 186                 },
 187
 188                 /**
 189                  * Display the feedback form
 190                  * @param {Object} optional prefilled contents for the feedback form. Object with properties:
 191                  *  subject: {String}
 192                  *      message: {String}
 193                  */
 194                 displayForm: function ( contents ) {
 195                         var fb = this,
 196                                 formButtons = {};
 197                         this.subjectInput.value = ( contents && contents.subject ) ? contents.subject : '';
 198                         this.messageInput.value = ( contents && contents.message ) ? contents.message : '';
 199
 200                         this.display( 'form' );
 201
 202                         // Set up buttons for dialog box. We have to do it the hard way since the json keys are localized
 203                         formButtons[ mw.msg( 'feedback-submit' ) ] = function () {
 204                                 fb.submit();
 205                         };
 206                         formButtons[ mw.msg( 'feedback-cancel' ) ] = function () {
 207                                 fb.cancel();
 208                         };
 209                         this.$dialog.dialog( { buttons: formButtons } ); // put the buttons back
 210                 },
 211
 212                 displayError: function ( message ) {
 213                         var fb = this,
 214                                 closeButton = {};
 215                         this.display( 'error' );
 216                         this.$dialog.find( '.feedback-error-msg' ).msg( message );
 217                         closeButton[ mw.msg( 'feedback-close' ) ] = function () {
 218                                 fb.$dialog.dialog( 'close' );
 219                         };
 220                         this.$dialog.dialog( { buttons: closeButton } );
 221                 },
 222
 223                 cancel: function () {
 224                         this.$dialog.dialog( 'close' );
 225                 },
 226
 227                 submit: function () {
 228                         var subject, message,
 229                                 fb = this;
 230
 231                         function ok( result ) {
 232                                 if ( result.edit !== undefined ) {
 233                                         if ( result.edit.result === 'Success' ) {
 234                                                 fb.displayThanks();
 235                                         } else {
 236                                                 // unknown API result
 237                                                 fb.displayError( 'feedback-error1' );
 238                                         }
 239                                 } else {
 240                                         // edit failed
 241                                         fb.displayError( 'feedback-error2' );
 242                                 }
 243                         }
 244
 245                         function err() {
 246                                 // ajax request failed
 247                                 fb.displayError( 'feedback-error3' );
 248                         }
 249
 250                         // Get the values to submit.
 251                         subject = this.subjectInput.value;
 252
 253                         // We used to include "mw.html.escape( navigator.userAgent )" but there are legal issues
 254                         // with posting this without their explicit consent
 255                         message = this.messageInput.value;
 256                         if ( message.indexOf( '~~~' ) === -1 ) {
 257                                 message += ' ~~~~';
 258                         }
 259
 260                         this.displaySubmitting();
 261
 262                         this.api.newSection( this.title, subject, message, ok, err );
 263                 },
 264
 265                 /**
 266                  * Modify the display form, and then open it, focusing interface on the subject.
 267                  * @param {Object} optional prefilled contents for the feedback form. Object with properties:
 268                  *                                              subject: {String}
 269                  *                                              message: {String}
 270                  */
 271                 launch: function ( contents ) {
 272                         this.displayForm( contents );
 273                         this.$dialog.dialog( 'open' );
 274                         this.subjectInput.focus();
 275                 }
 276
 277         };
 278
 279 }( mediaWiki, jQuery ) );