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  * How to use it:
  23  *
  24  *    var feedback = new mw.Feedback( api, myFeedbackPageTitle );
  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, $, undefined ) {
  31
  32         /**
  33          * Thingy for collecting user feedback on a wiki page
  34          * @param {mw.api}  api properly configured to talk to this wiki
  35          * @param {mw.Title} the title of the page where you collect feedback
  36          * @param {String} optional - message key for the title of the dialog box
  37          */
  38         mw.Feedback = function( api, feedbackTitle, dialogTitleMessageKey ) {
  39                 var _this = this;
  40                 this.api = api;
  41                 this.feedbackTitle = feedbackTitle;
  42                 this.dialogTitleMessageKey = dialogTitleMessageKey;
  43                 if ( this.dialogTitleMessageKey === undefined ) {
  44                         this.dialogTitleMessageKey = 'feedback-submit';
  45                 }
  46                 this.setup();
  47         };
  48
  49         mw.Feedback.prototype = {
  50                 setup: function() {
  51                         var _this = this;
  52
  53                         // Set up buttons for dialog box. We have to do it the hard way since the json keys are localized
  54                         _this.buttons = {};
  55                         _this.buttons[ mw.msg( 'feedback-cancel' ) ] = function() { _this.cancel(); };
  56                         _this.buttons[ mw.msg( 'feedback-submit' ) ] = function() { _this.submit(); };
  57
  58                         var $feedbackPageLink = $j( '<a></a>' ).attr( { 'href': _this.feedbackTitle.getUrl(), 'target': '_blank' } );
  59                         this.$dialog =
  60                                 $( '<div style="position:relative;"></div>' ).append(
  61                                         $( '<div class="feedback-mode feedback-form"></div>' ).append(
  62                                                 $( '<div style="margin-top:0.4em;"></div>' ).append(
  63                                                         $( '<small></small>' ).msg( 'feedback-note',
  64                                                                                     _this.feedbackTitle.getNameText(),
  65                                                                                     $feedbackPageLink )
  66                                                 ),
  67                                                 $( '<div style="margin-top:1em;"></div>' ).append(
  68                                                         mw.msg( 'feedback-subject' ),
  69                                                         $( '<br/>' ),
  70                                                         $( '<input type="text" class="feedback-subject" name="subject" maxlength="60" style="width:99%;"/>' )
  71                                                 ),
  72                                                 $( '<div style="margin-top:0.4em;"></div>' ).append(
  73                                                         mw.msg( 'feedback-message' ),
  74                                                         $( '<br/>' ),
  75                                                         $( '<textarea name="message" class="feedback-message" style="width:99%;" rows="5" cols="60"></textarea>' )
  76                                                 )
  77                                         ),
  78                                         $( '<div class="feedback-mode feedback-submitting" style="text-align:center;margin:3em 0;"></div>' ).append(
  79                                                 mw.msg( 'feedback-adding' ),
  80                                                 $( '<br/>' ),
  81                                                 $( '<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" />' )
  82                                         ),
  83                                         $( '<div class="feedback-mode feedback-error" style="position:relative;"></div>' ).append(
  84                                                 $( '<div class="feedback-error-msg style="color:#990000;margin-top:0.4em;"></div>' )
  85
  86                                         )
  87                                 ).dialog({
  88                                         width: 500,
  89                                         autoOpen: false,
  90                                         title: mw.msg( this.dialogTitleMessageKey ),
  91                                         modal: true,
  92                                         buttons: _this.buttons
  93                                 });
  94
  95                         this.subjectInput = this.$dialog.find( 'input.feedback-subject' ).get(0);
  96                         this.messageInput = this.$dialog.find( 'textarea.feedback-message' ).get(0);
  97                         this.displayForm();
  98                 },
  99
 100                 display: function( s ) {
 101                         this.$dialog.dialog( { buttons:{} } ); // hide the buttons
 102                         this.$dialog.find( '.feedback-mode' ).hide(); // hide everything
 103                         this.$dialog.find( '.feedback-' + s ).show(); // show the desired div
 104                 },
 105
 106                 displaySubmitting: function() {
 107                         this.display( 'submitting' );
 108                 },
 109
 110                 /**
 111                  * Display the feedback form
 112                  * @param {Object} optional prefilled contents for the feedback form. Object with properties:
 113                  *                                              subject: {String}
 114                  *                                              message: {String}
 115                  */
 116                 displayForm: function( contents ) {
 117                         this.subjectInput.value = (contents && contents.subject) ? contents.subject : '';
 118                         this.messageInput.value = (contents && contents.message) ? contents.message : '';
 119
 120                         this.display( 'form' );
 121                         this.$dialog.dialog( { buttons: this.buttons } ); // put the buttons back
 122                 },
 123
 124                 displayError: function( message ) {
 125                         this.display( 'error' );
 126                         this.$dialog.find( '.feedback-error-msg' ).msg( message );
 127                 },
 128
 129                 cancel: function() {
 130                         this.$dialog.dialog( 'close' );
 131                 },
 132
 133                 submit: function() {
 134                         var _this = this;
 135
 136                         // get the values to submit
 137                         var subject = this.subjectInput.value;
 138
 139                         var message = "<small>User agent: " + navigator.userAgent + "</small>\n\n"
 140                                  + this.messageInput.value;
 141                         if ( message.indexOf( '~~~' ) == -1 ) {
 142                                 message += " ~~~~";
 143                         }
 144
 145                         this.displaySubmitting();
 146
 147                         var ok = function( result ) {
 148                                 if ( result.edit !== undefined ) {
 149                                         if ( result.edit.result === 'Success' ) {
 150                                                 _this.$dialog.dialog( 'close' ); // edit complete, close dialog box
 151                                         } else {
 152                                                 _this.displayError( 'feedback-error1' ); // unknown API result
 153                                         }
 154                                 } else {
 155                                         displayError( 'feedback-error2' ); // edit failed
 156                                 }
 157                         };
 158
 159                         var err = function( code, info ) {
 160                                 displayError( 'feedback-error3' ); // ajax request failed
 161                         };
 162
 163                         this.api.newSection( this.feedbackTitle, subject, message, ok, err );
 164
 165                 }, // close submit button function
 166
 167
 168                 /**
 169                  * Modify the display form, and then open it, focusing interface on the subject.
 170                  * @param {Object} optional prefilled contents for the feedback form. Object with properties:
 171                  *                                              subject: {String}
 172                  *                                              message: {String}
 173                  */
 174                 launch: function( contents ) {
 175                         this.displayForm( contents );
 176                         this.$dialog.dialog( 'open' );
 177                         this.subjectInput.focus();
 178                 }
 179
 180         };
 181
 182
 183 } )( window.mediaWiki, jQuery );