Add a way for packagers to override some installation details
[mediawiki.git] / resources / mediawiki / mediawiki.feedback.js
blob9a4a7298273644eb82e94d800e7a7d4a62b1e8b0
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, $, undefined ) {
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                 }
45                 if ( options.api === undefined ) {
46                         options.api = new mw.Api();
47                 }
49                 if ( options.title === undefined ) {
50                         options.title = new mw.Title( 'Feedback' );
51                 }
53                 if ( options.dialogTitleMessageKey === undefined ) {
54                         options.dialogTitleMessageKey = 'feedback-submit';
55                 }
57                 if ( options.bugsLink === undefined ) {
58                         options.bugsLink = '//bugzilla.wikimedia.org/enter_bug.cgi';
59                 }
61                 if ( options.bugsListLink === undefined ) {
62                         options.bugsListLink = '//bugzilla.wikimedia.org/query.cgi';
63                 }
65                 $.extend( this, options );
66                 this.setup();
67         };
69         mw.Feedback.prototype = {
70                 setup: function() {
71                         var _this = this;
73                         var $feedbackPageLink = $( '<a></a>' )
74                                 .attr( { 'href': _this.title.getUrl(), 'target': '_blank' } )
75                                 .css( { 'white-space': 'nowrap' } );
77                         var $bugNoteLink = $( '<a></a>' ).attr( { 'href': '#' } ).click( function() { _this.displayBugs(); } );
79                         var $bugsListLink = $( '<a></a>' ).attr( { 'href': _this.bugsListLink, 'target': '_blank' } );
81                         this.$dialog =
82                                 $( '<div style="position:relative;"></div>' ).append(
83                                         $( '<div class="feedback-mode feedback-form"></div>' ).append(
84                                                 $( '<small></small>' ).append(
85                                                         $( '<p></p>' ).msg(
86                                                                 'feedback-bugornote',
87                                                                 $bugNoteLink,
88                                                                 _this.title.getNameText(),
89                                                                 $feedbackPageLink.clone()
90                                                         )
91                                                 ),
92                                                 $( '<div style="margin-top:1em;"></div>' ).append(
93                                                         mw.msg( 'feedback-subject' ),
94                                                         $( '<br/>' ),
95                                                         $( '<input type="text" class="feedback-subject" name="subject" maxlength="60" style="width:99%;"/>' )
96                                                 ),
97                                                 $( '<div style="margin-top:0.4em;"></div>' ).append(
98                                                         mw.msg( 'feedback-message' ),
99                                                         $( '<br/>' ),
100                                                         $( '<textarea name="message" class="feedback-message" style="width:99%;" rows="5" cols="60"></textarea>' )
101                                                 )
102                                         ),
103                                         $( '<div class="feedback-mode feedback-bugs"></div>' ).append(
104                                                 $( '<p>' ).msg( 'feedback-bugcheck', $bugsListLink )
105                                         ),
106                                         $( '<div class="feedback-mode feedback-submitting" style="text-align:center;margin:3em 0;"></div>' ).append(
107                                                 mw.msg( 'feedback-adding' ),
108                                                 $( '<br/>' ),
109                                                 $( '<span class="feedback-spinner"></span>' )
110                                         ),
111                                         $( '<div class="feedback-mode feedback-thanks" style="text-align:center;margin:1em"></div>' ).msg(
112                                                 'feedback-thanks', _this.title.getNameText(), $feedbackPageLink.clone()
113                                         ),
114                                         $( '<div class="feedback-mode feedback-error" style="position:relative;"></div>' ).append(
115                                                 $( '<div class="feedback-error-msg style="color:#990000;margin-top:0.4em;"></div>' )
116                                         )
117                                 );
119                                 // undo some damage from dialog css
120                                 this.$dialog.find( 'a' ).css( { 'color': '#0645ad' } );
122                                 this.$dialog.dialog({
123                                         width: 500,
124                                         autoOpen: false,
125                                         title: mw.msg( this.dialogTitleMessageKey ),
126                                         modal: true,
127                                         buttons: _this.buttons
128                                 });
130                         this.subjectInput = this.$dialog.find( 'input.feedback-subject' ).get(0);
131                         this.messageInput = this.$dialog.find( 'textarea.feedback-message' ).get(0);
133                 },
135                 display: function( s ) {
136                         this.$dialog.dialog( { buttons:{} } ); // hide the buttons
137                         this.$dialog.find( '.feedback-mode' ).hide(); // hide everything
138                         this.$dialog.find( '.feedback-' + s ).show(); // show the desired div
139                 },
141                 displaySubmitting: function() {
142                         this.display( 'submitting' );
143                 },
145                 displayBugs: function() {
146                         var _this = this;
147                         this.display( 'bugs' );
148                         var bugsButtons = {};
149                         bugsButtons[ mw.msg( 'feedback-bugnew' ) ] = function() { window.open( _this.bugsLink, '_blank' ); };
150                         bugsButtons[ mw.msg( 'feedback-cancel' ) ] = function() { _this.cancel(); };
151                         this.$dialog.dialog( { buttons: bugsButtons } );
152                 },
154                 displayThanks: function() {
155                         var _this = this;
156                         this.display( 'thanks' );
157                         var closeButton = {};
158                         closeButton[ mw.msg( 'feedback-close' ) ] = function() { _this.$dialog.dialog( 'close' ); };
159                         this.$dialog.dialog( { buttons: closeButton } );
160                 },
162                 /**
163                  * Display the feedback form
164                  * @param {Object} optional prefilled contents for the feedback form. Object with properties:
165                  *                                              subject: {String}
166                  *                                              message: {String}
167                  */
168                 displayForm: function( contents ) {
169                         var _this = this;
170                         this.subjectInput.value = (contents && contents.subject) ? contents.subject : '';
171                         this.messageInput.value = (contents && contents.message) ? contents.message : '';
173                         this.display( 'form' );
175                         // Set up buttons for dialog box. We have to do it the hard way since the json keys are localized
176                         var formButtons = {};
177                         formButtons[ mw.msg( 'feedback-submit' ) ] = function() { _this.submit(); };
178                         formButtons[ mw.msg( 'feedback-cancel' ) ] = function() { _this.cancel(); };
179                         this.$dialog.dialog( { buttons: formButtons } ); // put the buttons back
180                 },
182                 displayError: function( message ) {
183                         var _this = this;
184                         this.display( 'error' );
185                         this.$dialog.find( '.feedback-error-msg' ).msg( message );
186                         var closeButton = {};
187                         closeButton[ mw.msg( 'feedback-close' ) ] = function() { _this.$dialog.dialog( 'close' ); };
188                         this.$dialog.dialog( { buttons: closeButton } );
189                 },
191                 cancel: function() {
192                         this.$dialog.dialog( 'close' );
193                 },
195                 submit: function() {
196                         var _this = this;
198                         // get the values to submit
199                         var subject = this.subjectInput.value;
201                         var message = "<small>User agent: " + navigator.userAgent + "</small>\n\n"
202                                  + this.messageInput.value;
203                         if ( message.indexOf( '~~~' ) == -1 ) {
204                                 message += " ~~~~";
205                         }
207                         this.displaySubmitting();
209                         var ok = function( result ) {
210                                 if ( result.edit !== undefined ) {
211                                         if ( result.edit.result === 'Success' ) {
212                                                 _this.displayThanks();
213                                         } else {
214                                                 _this.displayError( 'feedback-error1' ); // unknown API result
215                                         }
216                                 } else {
217                                         _this.displayError( 'feedback-error2' ); // edit failed
218                                 }
219                         };
221                         var err = function( code, info ) {
222                                 _this.displayError( 'feedback-error3' ); // ajax request failed
223                         };
225                         this.api.newSection( this.title, subject, message, ok, err );
226                 }, // close submit button function
228                 /**
229                  * Modify the display form, and then open it, focusing interface on the subject.
230                  * @param {Object} optional prefilled contents for the feedback form. Object with properties:
231                  *                                              subject: {String}
232                  *                                              message: {String}
233                  */
234                 launch: function( contents ) {
235                         this.displayForm( contents );
236                         this.$dialog.dialog( 'open' );
237                         this.subjectInput.focus();
238                 }
240         };
242 } )( window.mediaWiki, jQuery );