01a75f29783cd7bf935052e6be00c97f4da7a0a0
4 * @author Ryan Kaldari, 2010
5 * @author Neil Kandalgaonkar, 2010-11
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.
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.
22 * This feature works with classic MediaWiki pages
23 * and is not compatible with LiquidThreads or Flow.
25 * Minimal usage example:
27 * var feedback = new mw.Feedback();
28 * $( '#myButton' ).click( function () { feedback.launch(); } );
30 * You can also launch the feedback form with a prefilled subject and body.
31 * See the docs for the #launch() method.
35 * @param {Object} [options]
36 * @param {mw.Api} [options.api] if omitted, will just create a standard API
37 * @param {mw.Title} [options.title="Feedback"] The title of the page where you collect
39 * @param {string} [options.dialogTitleMessageKey="feedback-submit"] Message key for the
40 * title of the dialog box
41 * @param {string} [options.bugsLink="//bugzilla.wikimedia.org/enter_bug.cgi"] URL where
43 * @param {mw.Uri|string} [options.bugsListLink="//bugzilla.wikimedia.org/query.cgi"]
44 * URL where bugs can be listed
46 mw
.Feedback = function ( options
) {
47 if ( options
=== undefined ) {
51 if ( options
.api
=== undefined ) {
52 options
.api
= new mw
.Api();
55 if ( options
.title
=== undefined ) {
56 options
.title
= new mw
.Title( 'Feedback' );
59 if ( options
.dialogTitleMessageKey
=== undefined ) {
60 options
.dialogTitleMessageKey
= 'feedback-submit';
63 if ( options
.bugsLink
=== undefined ) {
64 options
.bugsLink
= '//bugzilla.wikimedia.org/enter_bug.cgi';
67 if ( options
.bugsListLink
=== undefined ) {
68 options
.bugsListLink
= '//bugzilla.wikimedia.org/query.cgi';
71 $.extend( this, options
);
75 mw
.Feedback
.prototype = {
80 var $feedbackPageLink
,
85 $feedbackPageLink
= $( '<a>' )
87 href
: fb
.title
.getUrl(),
94 $bugNoteLink
= $( '<a>' ).attr( { href
: '#' } ).click( function () {
98 $bugsListLink
= $( '<a>' ).attr( {
99 href
: fb
.bugsListLink
,
103 // TODO: Use a stylesheet instead of these inline styles in the template
104 this.$dialog
= $( mw
.template
.get( 'mediawiki.feedback', 'dialog.html' ).render() );
105 this.$dialog
.find( '.feedback-mode small p' ).msg(
106 'feedback-bugornote',
108 fb
.title
.getNameText(),
109 $feedbackPageLink
.clone()
111 this.$dialog
.find( '.feedback-form .subject span' ).msg( 'feedback-subject' );
112 this.$dialog
.find( '.feedback-form .message span' ).msg( 'feedback-message' );
113 this.$dialog
.find( '.feedback-bugs p' ).msg( 'feedback-bugcheck', $bugsListLink
);
114 this.$dialog
.find( '.feedback-submitting span' ).msg( 'feedback-adding' );
115 this.$dialog
.find( '.feedback-thanks' ).msg( 'feedback-thanks', fb
.title
.getNameText(),
116 $feedbackPageLink
.clone() );
118 this.$dialog
.dialog( {
121 title
: mw
.message( this.dialogTitleMessageKey
).escaped(),
126 this.subjectInput
= this.$dialog
.find( 'input.feedback-subject' ).get( 0 );
127 this.messageInput
= this.$dialog
.find( 'textarea.feedback-message' ).get( 0 );
131 * Displays a section of the dialog.
133 * @param {"form"|"bugs"|"submitting"|"thanks"|"error"} s
134 * The section of the dialog to show.
136 display: function ( s
) {
138 this.$dialog
.dialog( { buttons
: {} } );
140 this.$dialog
.find( '.feedback-mode' ).hide();
141 // Show the desired div
142 this.$dialog
.find( '.feedback-' + s
).show();
146 * Display the submitting section.
148 displaySubmitting: function () {
149 this.display( 'submitting' );
153 * Display the bugs section.
155 displayBugs: function () {
159 this.display( 'bugs' );
160 bugsButtons
[ mw
.msg( 'feedback-bugnew' ) ] = function () {
161 window
.open( fb
.bugsLink
, '_blank' );
163 bugsButtons
[ mw
.msg( 'feedback-cancel' ) ] = function () {
166 this.$dialog
.dialog( {
172 * Display the thanks section.
174 displayThanks: function () {
178 this.display( 'thanks' );
179 closeButton
[ mw
.msg( 'feedback-close' ) ] = function () {
180 fb
.$dialog
.dialog( 'close' );
182 this.$dialog
.dialog( {
188 * Display the feedback form
189 * @param {Object} [contents] Prefilled contents for the feedback form.
190 * @param {string} [contents.subject] The subject of the feedback
191 * @param {string} [contents.message] The content of the feedback
193 displayForm: function ( contents
) {
197 this.subjectInput
.value
= ( contents
&& contents
.subject
) ? contents
.subject
: '';
198 this.messageInput
.value
= ( contents
&& contents
.message
) ? contents
.message
: '';
200 this.display( 'form' );
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 () {
206 formButtons
[ mw
.msg( 'feedback-cancel' ) ] = function () {
209 this.$dialog
.dialog( { buttons
: formButtons
} ); // put the buttons back
213 * Display an error on the form.
215 * @param {string} message Should be a valid message key.
217 displayError: function ( message
) {
221 this.display( 'error' );
222 this.$dialog
.find( '.feedback-error-msg' ).msg( message
);
223 closeButton
[ mw
.msg( 'feedback-close' ) ] = function () {
224 fb
.$dialog
.dialog( 'close' );
226 this.$dialog
.dialog( { buttons
: closeButton
} );
230 * Close the feedback form.
232 cancel: function () {
233 this.$dialog
.dialog( 'close' );
237 * Submit the feedback form.
239 submit: function () {
240 var subject
, message
,
243 // Get the values to submit.
244 subject
= this.subjectInput
.value
;
246 // We used to include "mw.html.escape( navigator.userAgent )" but there are legal issues
247 // with posting this without their explicit consent
248 message
= this.messageInput
.value
;
249 if ( message
.indexOf( '~~~' ) === -1 ) {
253 this.displaySubmitting();
255 // Post the message, resolving redirects
262 .done( function ( result
) {
263 if ( result
.edit
!== undefined ) {
264 if ( result
.edit
.result
=== 'Success' ) {
267 // unknown API result
268 fb
.displayError( 'feedback-error1' );
272 fb
.displayError( 'feedback-error2' );
276 // ajax request failed
277 fb
.displayError( 'feedback-error3' );
282 * Modify the display form, and then open it, focusing interface on the subject.
283 * @param {Object} [contents] Prefilled contents for the feedback form.
284 * @param {string} [contents.subject] The subject of the feedback
285 * @param {string} [contents.message] The content of the feedback
287 launch: function ( contents
) {
288 this.displayForm( contents
);
289 this.$dialog
.dialog( 'open' );
290 this.subjectInput
.focus();
293 }( mediaWiki
, jQuery
) );