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 * Not compatible with LiquidThreads.
24 * Minimal example in how to use it:
26 * var feedback = new mw.Feedback();
27 * $( '#myButton' ).click( function () { feedback.launch(); } );
29 * You can also launch the feedback form with a prefilled subject and body.
30 * See the docs for the #launch() method.
32 * @param {Object} [options]
33 * @param {mw.Api} [options.api] if omitted, will just create a standard API
34 * @param {mw.Title} [options.title="Feedback"] The title of the page where you collect
36 * @param {string} [options.dialogTitleMessageKey="feedback-submit"] Message key for the
37 * title of the dialog box
38 * @param {string} [options.bugsLink="//bugzilla.wikimedia.org/enter_bug.cgi"] URL where
40 * @param {mw.Uri|string} [options.bugsListLink="//bugzilla.wikimedia.org/query.cgi"]
41 * URL where bugs can be listed
43 mw
.Feedback = function ( options
) {
44 if ( options
=== undefined ) {
48 if ( options
.api
=== undefined ) {
49 options
.api
= new mw
.Api();
52 if ( options
.title
=== undefined ) {
53 options
.title
= new mw
.Title( 'Feedback' );
56 if ( options
.dialogTitleMessageKey
=== undefined ) {
57 options
.dialogTitleMessageKey
= 'feedback-submit';
60 if ( options
.bugsLink
=== undefined ) {
61 options
.bugsLink
= '//bugzilla.wikimedia.org/enter_bug.cgi';
64 if ( options
.bugsListLink
=== undefined ) {
65 options
.bugsListLink
= '//bugzilla.wikimedia.org/query.cgi';
68 $.extend( this, options
);
72 mw
.Feedback
.prototype = {
77 var $feedbackPageLink
,
82 $feedbackPageLink
= $( '<a>' )
84 href
: fb
.title
.getUrl(),
91 $bugNoteLink
= $( '<a>' ).attr( { href
: '#' } ).click( function () {
95 $bugsListLink
= $( '<a>' ).attr( {
96 href
: fb
.bugsListLink
,
100 // TODO: Use a stylesheet instead of these inline styles
102 $( '<div style="position: relative;"></div>' ).append(
103 $( '<div class="feedback-mode feedback-form"></div>' ).append(
104 $( '<small>' ).append(
106 'feedback-bugornote',
108 fb
.title
.getNameText(),
109 $feedbackPageLink
.clone()
112 $( '<div style="margin-top: 1em;"></div>' ).append(
113 mw
.msg( 'feedback-subject' ),
115 $( '<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;"/>' )
117 $( '<div style="margin-top: 0.4em;"></div>' ).append(
118 mw
.msg( 'feedback-message' ),
120 $( '<textarea name="message" class="feedback-message" rows="5" cols="60"></textarea>' )
123 $( '<div class="feedback-mode feedback-bugs"></div>' ).append(
124 $( '<p>' ).msg( 'feedback-bugcheck', $bugsListLink
)
126 $( '<div class="feedback-mode feedback-submitting" style="text-align: center; margin: 3em 0;"></div>' ).append(
127 mw
.msg( 'feedback-adding' ),
129 $( '<span class="feedback-spinner"></span>' )
131 $( '<div class="feedback-mode feedback-thanks" style="text-align: center; margin:1em"></div>' ).msg(
132 'feedback-thanks', fb
.title
.getNameText(), $feedbackPageLink
.clone()
134 $( '<div class="feedback-mode feedback-error" style="position: relative;"></div>' ).append(
135 $( '<div class="feedback-error-msg style="color: #990000; margin-top: 0.4em;"></div>' )
139 // undo some damage from dialog css
140 this.$dialog
.find( 'a' ).css( {
144 this.$dialog
.dialog({
147 title
: mw
.msg( this.dialogTitleMessageKey
),
152 this.subjectInput
= this.$dialog
.find( 'input.feedback-subject' ).get(0);
153 this.messageInput
= this.$dialog
.find( 'textarea.feedback-message' ).get(0);
158 * Displays a section of the dialog.
160 * @param {"form"|"bugs"|"submitting"|"thanks"|"error"} s
161 * The section of the dialog to show.
163 display: function ( s
) {
164 this.$dialog
.dialog( { buttons
:{} } ); // hide the buttons
165 this.$dialog
.find( '.feedback-mode' ).hide(); // hide everything
166 this.$dialog
.find( '.feedback-' + s
).show(); // show the desired div
170 * Display the submitting section.
172 displaySubmitting: function () {
173 this.display( 'submitting' );
177 * Display the bugs section.
179 displayBugs: function () {
182 this.display( 'bugs' );
183 bugsButtons
[ mw
.msg( 'feedback-bugnew' ) ] = function () {
184 window
.open( fb
.bugsLink
, '_blank' );
186 bugsButtons
[ mw
.msg( 'feedback-cancel' ) ] = function () {
189 this.$dialog
.dialog( {
195 * Display the thanks section.
197 displayThanks: function () {
200 this.display( 'thanks' );
201 closeButton
[ mw
.msg( 'feedback-close' ) ] = function () {
202 fb
.$dialog
.dialog( 'close' );
204 this.$dialog
.dialog( {
210 * Display the feedback form
211 * @param {Object} [contents] Prefilled contents for the feedback form.
212 * @param {string} [contents.subject] The subject of the feedback
213 * @param {string} [contents.message] The content of the feedback
215 displayForm: function ( contents
) {
218 this.subjectInput
.value
= ( contents
&& contents
.subject
) ? contents
.subject
: '';
219 this.messageInput
.value
= ( contents
&& contents
.message
) ? contents
.message
: '';
221 this.display( 'form' );
223 // Set up buttons for dialog box. We have to do it the hard way since the json keys are localized
224 formButtons
[ mw
.msg( 'feedback-submit' ) ] = function () {
227 formButtons
[ mw
.msg( 'feedback-cancel' ) ] = function () {
230 this.$dialog
.dialog( { buttons
: formButtons
} ); // put the buttons back
234 * Display an error on the form.
236 * @param {string} message Should be a valid message key.
238 displayError: function ( message
) {
241 this.display( 'error' );
242 this.$dialog
.find( '.feedback-error-msg' ).msg( message
);
243 closeButton
[ mw
.msg( 'feedback-close' ) ] = function () {
244 fb
.$dialog
.dialog( 'close' );
246 this.$dialog
.dialog( { buttons
: closeButton
} );
250 * Close the feedback form.
252 cancel: function () {
253 this.$dialog
.dialog( 'close' );
257 * Submit the feedback form.
259 submit: function () {
260 var subject
, message
,
263 function ok( result
) {
264 if ( result
.edit
!== undefined ) {
265 if ( result
.edit
.result
=== 'Success' ) {
268 // unknown API result
269 fb
.displayError( 'feedback-error1' );
273 fb
.displayError( 'feedback-error2' );
278 // ajax request failed
279 fb
.displayError( 'feedback-error3' );
282 // Get the values to submit.
283 subject
= this.subjectInput
.value
;
285 // We used to include "mw.html.escape( navigator.userAgent )" but there are legal issues
286 // with posting this without their explicit consent
287 message
= this.messageInput
.value
;
288 if ( message
.indexOf( '~~~' ) === -1 ) {
292 this.displaySubmitting();
294 this.api
.newSection( this.title
, subject
, message
, ok
, err
);
298 * Modify the display form, and then open it, focusing interface on the subject.
299 * @param {Object} [contents] Prefilled contents for the feedback form.
300 * @param {string} [contents.subject] The subject of the feedback
301 * @param {string} [contents.message] The content of the feedback
303 launch: function ( contents
) {
304 this.displayForm( contents
);
305 this.$dialog
.dialog( 'open' );
306 this.subjectInput
.focus();
311 }( mediaWiki
, jQuery
) );