resources/mediawiki/mediawiki.feedback.js

   1 ( function( mw, $, undefined ) {
   2
   3         /**
   4          * Thingy for collecting user feedback on a wiki page
   5          * @param {mw.Api}  api properly configured to talk to this wiki
   6          * @param {mw.Title} the title of the page where you collect feedback
   7          * @param {id} a string identifying this feedback form to separate it from others on the same page
   8          */
   9         mw.Feedback = function( api, feedbackTitle ) {
  10                 var _this = this;
  11                 this.api = api;
  12                 this.feedbackTitle = feedbackTitle;
  13                 this.setup();
  14         };
  15
  16         mw.Feedback.prototype = {
  17                 setup: function() {
  18                         var _this = this;
  19
  20                         // Set up buttons for dialog box. We have to do it the hard way since the json keys are localized
  21                         _this.buttons = {};
  22                         _this.buttons[ mw.msg( 'mwe-upwiz-feedback-cancel' ) ] = function() { _this.cancel(); };
  23                         _this.buttons[ mw.msg( 'mwe-upwiz-feedback-submit' ) ] = function() { _this.submit(); };
  24
  25                         var $feedbackPageLink = $j( '<a></a>' ).attr( { 'href': _this.feedbackTitle.getUrl(), 'target': '_blank' } );
  26                         this.$dialog =
  27                                 $( '<div style="position:relative;"></div>' ).append(
  28                                         $( '<div class="mwe-upwiz-feedback-mode mwe-upwiz-feedback-form"></div>' ).append(
  29                                                 $( '<div style="margin-top:0.4em;"></div>' ).append(
  30                                                         $( '<small></small>' ).msg( 'mwe-upwiz-feedback-note',
  31                                                                                     _this.feedbackTitle.getNameText(),
  32                                                                                     $feedbackPageLink )
  33                                                 ),
  34                                                 $( '<div style="margin-top:1em;"></div>' ).append(
  35                                                         mw.msg( 'mwe-upwiz-feedback-subject' ),
  36                                                         $( '<br/>' ),
  37                                                         $( '<input type="text" class="mwe-upwiz-feedback-subject" name="subject" maxlength="60" style="width:99%;"/>' )
  38                                                 ),
  39                                                 $( '<div style="margin-top:0.4em;"></div>' ).append(
  40                                                         mw.msg( 'mwe-upwiz-feedback-message' ),
  41                                                         $( '<br/>' ),
  42                                                         $( '<textarea name="message" class="mwe-upwiz-feedback-message" style="width:99%;" rows="5" cols="60"></textarea>' )
  43                                                 )
  44                                         ),
  45                                         $( '<div class="mwe-upwiz-feedback-mode mwe-upwiz-feedback-submitting" style="text-align:center;margin:3em 0;"></div>' ).append(
  46                                                 mw.msg( 'mwe-upwiz-feedback-adding' ),
  47                                                 $( '<br/>' ),
  48                                                 $( '<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" />' )
  49                                         ),
  50                                         $( '<div class="mwe-upwiz-feedback-mode mwe-upwiz-feedback-error" style="position:relative;"></div>' ).append(
  51                                                 $( '<div class="mwe-upwiz-feedback-error-msg style="color:#990000;margin-top:0.4em;"></div>' )
  52
  53                                         )
  54                                 ).dialog({
  55                                         width: 500,
  56                                         autoOpen: false,
  57                                         title: mw.msg( 'mwe-upwiz-feedback-title' ),
  58                                         modal: true,
  59                                         buttons: _this.buttons
  60                                 });
  61
  62                         this.subjectInput = this.$dialog.find( 'input.mwe-upwiz-feedback-subject' ).get(0);
  63                         this.messageInput = this.$dialog.find( 'textarea.mwe-upwiz-feedback-message' ).get(0);
  64                         this.displayForm();
  65                 },
  66
  67                 display: function( s ) {
  68                         this.$dialog.dialog( { buttons:{} } ); // hide the buttons
  69                         this.$dialog.find( '.mwe-upwiz-feedback-mode' ).hide(); // hide everything
  70                         this.$dialog.find( '.mwe-upwiz-feedback-' + s ).show(); // show the desired div
  71                 },
  72
  73                 displaySubmitting: function() {
  74                         this.display( 'submitting' );
  75                 },
  76
  77                 displayForm: function( contents ) {
  78                         this.subjectInput.value = (contents && contents.subject) ? contents.subject : '';
  79                         this.messageInput.value = (contents && contents.message) ? contents.message : '';
  80
  81                         this.display( 'form' );
  82                         this.$dialog.dialog( { buttons: this.buttons } ); // put the buttons back
  83                 },
  84
  85                 displayError: function( message ) {
  86                         this.display( 'error' );
  87                         this.$dialog.find( '.mwe-upwiz-feedback-error-msg' ).msg( message );
  88                 },
  89
  90                 cancel: function() {
  91                         this.$dialog.dialog( 'close' );
  92                 },
  93
  94                 submit: function() {
  95                         var _this = this;
  96
  97                         // get the values to submit
  98                         var subject = this.subjectInput.value;
  99
 100                         var message = "<small>User agent: " + navigator.userAgent + "</small>\n\n"
 101                                  + this.messageInput.value;
 102                         if ( message.indexOf( '~~~' ) == -1 ) {
 103                                 message += " ~~~~";
 104                         }
 105
 106                         this.displaySubmitting();
 107
 108                         var ok = function( result ) {
 109                                 if ( result.edit !== undefined ) {
 110                                         if ( result.edit.result === 'Success' ) {
 111                                                 _this.$dialog.dialog( 'close' ); // edit complete, close dialog box
 112                                         } else {
 113                                                 _this.displayError( 'mwe-upwiz-feedback-error1' ); // unknown API result
 114                                         }
 115                                 } else {
 116                                         displayError( 'mwe-upwiz-feedback-error2' ); // edit failed
 117                                 }
 118                         };
 119
 120                         var err = function( code, info ) {
 121                                 displayError( 'mwe-upwiz-feedback-error3' ); // ajax request failed
 122                         };
 123
 124                         this.api.newSection( this.feedbackTitle, subject, message, ok, err );
 125
 126                 }, // close submit button function
 127
 128
 129                 launch: function( contents ) {
 130                         this.displayForm( contents );
 131                         this.$dialog.dialog( 'open' );
 132                         this.subjectInput.focus();
 133                 }
 134
 135         };
 136
 137
 138 } )( window.mediaWiki, jQuery );