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