4 * @author Ryan Kaldari, 2010
5 * @author Neil Kandalgaonkar, 2010-11
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.
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.
20 * Not compatible with LiquidThreads.
22 * Minimal example in how to use it:
24 * var feedback = new mw.Feedback();
25 * $( '#myButton' ).click( function () { feedback.launch(); } );
27 * You can also launch the feedback form with a prefilled subject and body.
28 * See the docs for the launch() method.
30 ( function ( mw
, $ ) {
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
40 mw
.Feedback = function ( options
) {
41 if ( options
=== undefined ) {
45 if ( options
.api
=== undefined ) {
46 options
.api
= new mw
.Api();
49 if ( options
.title
=== undefined ) {
50 options
.title
= new mw
.Title( 'Feedback' );
53 if ( options
.dialogTitleMessageKey
=== undefined ) {
54 options
.dialogTitleMessageKey
= 'feedback-submit';
57 if ( options
.bugsLink
=== undefined ) {
58 options
.bugsLink
= '//bugzilla.wikimedia.org/enter_bug.cgi';
61 if ( options
.bugsListLink
=== undefined ) {
62 options
.bugsListLink
= '//bugzilla.wikimedia.org/query.cgi';
65 $.extend( this, options
);
69 mw
.Feedback
.prototype = {
73 var $feedbackPageLink
= $( '<a>' )
74 .attr( { 'href': fb
.title
.getUrl(), 'target': '_blank' } )
75 .css( { 'white-space': 'nowrap' } );
77 var $bugNoteLink
= $( '<a>' ).attr( { 'href': '#' } ).click( function () {
81 var $bugsListLink
= $( '<a>' ).attr( { 'href': fb
.bugsListLink
, 'target': '_blank' } );
83 // TODO: Use a stylesheet instead of these inline styles
85 $( '<div style="position: relative;"></div>' ).append(
86 $( '<div class="feedback-mode feedback-form"></div>' ).append(
87 $( '<small>' ).append(
91 fb
.title
.getNameText(),
92 $feedbackPageLink
.clone()
95 $( '<div style="margin-top: 1em;"></div>' ).append(
96 mw
.msg( 'feedback-subject' ),
98 $( '<input type="text" class="feedback-subject" name="subject" maxlength="60" style="width: 99%;"/>' )
100 $( '<div style="margin-top: 0.4em;"></div>' ).append(
101 mw
.msg( 'feedback-message' ),
103 $( '<textarea name="message" class="feedback-message" style="width: 99%;" rows="5" cols="60"></textarea>' )
106 $( '<div class="feedback-mode feedback-bugs"></div>' ).append(
107 $( '<p>' ).msg( 'feedback-bugcheck', $bugsListLink
)
109 $( '<div class="feedback-mode feedback-submitting" style="text-align: center; margin: 3em 0;"></div>' ).append(
110 mw
.msg( 'feedback-adding' ),
112 $( '<span class="feedback-spinner"></span>' )
114 $( '<div class="feedback-mode feedback-thanks" style="text-align: center; margin:1em"></div>' ).msg(
115 'feedback-thanks', fb
.title
.getNameText(), $feedbackPageLink
.clone()
117 $( '<div class="feedback-mode feedback-error" style="position: relative;"></div>' ).append(
118 $( '<div class="feedback-error-msg style="color: #990000; margin-top: 0.4em;"></div>' )
122 // undo some damage from dialog css
123 this.$dialog
.find( 'a' ).css( {
127 this.$dialog
.dialog({
130 title
: mw
.msg( this.dialogTitleMessageKey
),
135 this.subjectInput
= this.$dialog
.find( 'input.feedback-subject' ).get(0);
136 this.messageInput
= this.$dialog
.find( 'textarea.feedback-message' ).get(0);
140 display: function ( s
) {
141 this.$dialog
.dialog( { buttons
:{} } ); // hide the buttons
142 this.$dialog
.find( '.feedback-mode' ).hide(); // hide everything
143 this.$dialog
.find( '.feedback-' + s
).show(); // show the desired div
146 displaySubmitting: function () {
147 this.display( 'submitting' );
150 displayBugs: function () {
152 this.display( 'bugs' );
153 var bugsButtons
= {};
154 bugsButtons
[ mw
.msg( 'feedback-bugnew' ) ] = function () {
155 window
.open( fb
.bugsLink
, '_blank' );
157 bugsButtons
[ mw
.msg( 'feedback-cancel' ) ] = function () {
160 this.$dialog
.dialog( {
165 displayThanks: function () {
167 this.display( 'thanks' );
168 var closeButton
= {};
169 closeButton
[ mw
.msg( 'feedback-close' ) ] = function () {
170 fb
.$dialog
.dialog( 'close' );
172 this.$dialog
.dialog( {
178 * Display the feedback form
179 * @param {Object} optional prefilled contents for the feedback form. Object with properties:
183 displayForm: function ( contents
) {
185 this.subjectInput
.value
= ( contents
&& contents
.subject
) ? contents
.subject
: '';
186 this.messageInput
.value
= ( contents
&& contents
.message
) ? contents
.message
: '';
188 this.display( 'form' );
190 // Set up buttons for dialog box. We have to do it the hard way since the json keys are localized
191 var formButtons
= {};
192 formButtons
[ mw
.msg( 'feedback-submit' ) ] = function () {
195 formButtons
[ mw
.msg( 'feedback-cancel' ) ] = function () {
198 this.$dialog
.dialog( { buttons
: formButtons
} ); // put the buttons back
201 displayError: function ( message
) {
203 this.display( 'error' );
204 this.$dialog
.find( '.feedback-error-msg' ).msg( message
);
205 var closeButton
= {};
206 closeButton
[ mw
.msg( 'feedback-close' ) ] = function () {
207 fb
.$dialog
.dialog( 'close' );
209 this.$dialog
.dialog( { buttons
: closeButton
} );
212 cancel: function () {
213 this.$dialog
.dialog( 'close' );
216 submit: function () {
217 var subject
, message
,
220 function ok( result
) {
221 if ( result
.edit
!== undefined ) {
222 if ( result
.edit
.result
=== 'Success' ) {
225 // unknown API result
226 fb
.displayError( 'feedback-error1' );
230 fb
.displayError( 'feedback-error2' );
234 function err( code
, info
) {
235 // ajax request failed
236 fb
.displayError( 'feedback-error3' );
239 // Get the values to submit.
240 subject
= this.subjectInput
.value
;
242 // We used to include "mw.html.escape( navigator.userAgent )" but there are legal issues
243 // with posting this without their explicit consent
244 message
= this.messageInput
.value
;
245 if ( message
.indexOf( '~~~' ) === -1 ) {
249 this.displaySubmitting();
251 this.api
.newSection( this.title
, subject
, message
, ok
, err
);
255 * Modify the display form, and then open it, focusing interface on the subject.
256 * @param {Object} optional prefilled contents for the feedback form. Object with properties:
260 launch: function ( contents
) {
261 this.displayForm( contents
);
262 this.$dialog
.dialog( 'open' );
263 this.subjectInput
.focus();
268 }( mediaWiki
, jQuery
) );