resources/src/mediawiki.feedback/feedback.js

   1 /*!
   2  * mediawiki.feedback
   3  *
   4  * @author Ryan Kaldari, 2010
   5  * @author Neil Kandalgaonkar, 2010-11
   6  * @author Moriel Schottlender, 2015
   7  * @since 1.19
   8  */
   9 ( function () {
  10
  11         const FeedbackDialog = require( './FeedbackDialog.js' );
  12
  13         /**
  14          * @classdesc Obtain feedback from users. Functionality is provided
  15          * by the mediawiki.feedback ResourceLoader module.
  16          *
  17          * This is a way of getting simple feedback from users. It's useful
  18          * for testing new features — users can give you feedback without
  19          * the difficulty of opening a whole new talk page. For this reason,
  20          * it also tends to collect a wider range of both positive and negative
  21          * comments. However you do need to tend to the feedback page. It will
  22          * get long relatively quickly, and you often get multiple messages
  23          * reporting the same issue.
  24          *
  25          * It takes the form of an element on your page which, when clicked, opens
  26          * a small dialog box. Submitting that dialog box appends its contents to a
  27          * wiki page that you specify, as a new section.
  28          *
  29          * This feature works with any content model that defines a
  30          * {@link mw.messagePoster.MessagePoster}.
  31          *
  32          * ```
  33          * // Minimal usage example
  34          * mw.loader.using( 'mediawiki.feedback').then(() => {
  35          *     var feedback = new mw.Feedback();
  36          *     $( '#myButton' ).click( function () { feedback.launch(); } );
  37          * });
  38          * ```
  39          * You can also launch the feedback form with a prefilled subject and body.
  40          * See the docs for the {@link mw.Feedback#launch launch() method}.
  41          *
  42          * @class mw.Feedback
  43          * @constructor
  44          * @description Create an instance of `mw.Feedback`.
  45          * @param {Object} [config] Configuration object
  46          * @param {mw.Title} [config.title="Feedback"] The title of the page where you collect
  47          *  feedback.
  48          * @param {string} [config.apiUrl] api.php URL if the feedback page is on another wiki
  49          * @param {string} [config.dialogTitleMessageKey="feedback-dialog-title"] Message key for the
  50          *  title of the dialog box
  51          * @param {mw.Uri|string} [config.bugsLink="//phabricator.wikimedia.org/maniphest/task/edit/form/1/"] URL where
  52          *  bugs can be posted
  53          * @param {boolean} [config.showUseragentCheckbox=false] Show a Useragent agreement checkbox as part of the form.
  54          * @param {boolean} [config.useragentCheckboxMandatory=false] Make the Useragent checkbox mandatory.
  55          * @param {string|jQuery} [config.useragentCheckboxMessage] Supply a custom message for the useragent checkbox.
  56          *  Defaults to the {@link mw.Message} 'feedback-terms'.
  57          */
  58         mw.Feedback = function MwFeedback( config ) {
  59                 config = config || {};
  60
  61                 this.dialogTitleMessageKey = config.dialogTitleMessageKey || 'feedback-dialog-title';
  62
  63                 // Feedback page title
  64                 this.feedbackPageTitle = config.title || new mw.Title( 'Feedback' );
  65
  66                 this.messagePosterPromise = mw.messagePoster.factory.create( this.feedbackPageTitle, config.apiUrl );
  67                 this.foreignApi = config.apiUrl ? new mw.ForeignApi( config.apiUrl ) : null;
  68
  69                 // Links
  70                 this.bugsTaskSubmissionLink = config.bugsLink || '//phabricator.wikimedia.org/maniphest/task/edit/form/1/';
  71
  72                 // Terms of use
  73                 this.useragentCheckboxShow = !!config.showUseragentCheckbox;
  74                 this.useragentCheckboxMandatory = !!config.useragentCheckboxMandatory;
  75                 this.useragentCheckboxMessage = config.useragentCheckboxMessage ||
  76                         $( '<p>' ).append( mw.message( 'feedback-terms' ).parseDom() );
  77
  78                 // Message dialog
  79                 this.thankYouDialog = new OO.ui.MessageDialog();
  80         };
  81
  82         /* Initialize */
  83         OO.initClass( mw.Feedback );
  84
  85         /**
  86          * mw.Feedback Dialog
  87          * See FeedbackDialog.js for documentation
  88          *
  89          * @ignore
  90          */
  91         mw.Feedback.Dialog = FeedbackDialog;
  92
  93         /* Static Properties */
  94         mw.Feedback.static.windowManager = null;
  95         mw.Feedback.static.dialog = null;
  96
  97         /* Methods */
  98
  99         /**
 100          * Respond to dialog submit event. If the information was
 101          * submitted successfully, open a MessageDialog to thank the user.
 102          *
 103          * @param {string} status A status of the end of operation
 104          *  of the main feedback dialog. Empty if the dialog was
 105          *  dismissed with no action or the user followed the button
 106          *  to the external task reporting site.
 107          * @param {string} feedbackPageName
 108          * @param {string} feedbackPageUrl
 109          */
 110         mw.Feedback.prototype.onDialogSubmit = function ( status, feedbackPageName, feedbackPageUrl ) {
 111                 if ( status !== 'submitted' ) {
 112                         return;
 113                 }
 114
 115                 const dialogConfig = {
 116                         title: mw.msg( 'feedback-thanks-title' ),
 117                         message: $( '<span>' ).msg(
 118                                 'feedback-thanks',
 119                                 feedbackPageName,
 120                                 $( '<a>' ).attr( {
 121                                         target: '_blank',
 122                                         href: feedbackPageUrl
 123                                 } )
 124                         ),
 125                         actions: [
 126                                 {
 127                                         action: 'accept',
 128                                         label: mw.msg( 'feedback-close' ),
 129                                         flags: 'primary'
 130                                 }
 131                         ]
 132                 };
 133
 134                 // Show the message dialog
 135                 this.constructor.static.windowManager.openWindow(
 136                         this.thankYouDialog,
 137                         dialogConfig
 138                 );
 139         };
 140
 141         /**
 142          * Modify the display form, and then open it, focusing interface on the subject.
 143          *
 144          * @param {Object} [contents] Prefilled contents for the feedback form.
 145          * @param {string} [contents.subject] The subject of the feedback, as plaintext
 146          * @param {string} [contents.message] The content of the feedback, as wikitext
 147          */
 148         mw.Feedback.prototype.launch = function ( contents ) {
 149                 // Dialog
 150                 if ( !this.constructor.static.dialog ) {
 151                         this.constructor.static.dialog = new mw.Feedback.Dialog();
 152                         this.constructor.static.dialog.connect( this, { submit: 'onDialogSubmit' } );
 153                 }
 154                 if ( !this.constructor.static.windowManager ) {
 155                         this.constructor.static.windowManager = new OO.ui.WindowManager();
 156                         this.constructor.static.windowManager.addWindows( [
 157                                 this.constructor.static.dialog,
 158                                 this.thankYouDialog
 159                         ] );
 160                         $( OO.ui.getTeleportTarget() )
 161                                 .append( this.constructor.static.windowManager.$element );
 162                 }
 163                 // Open the dialog
 164                 this.constructor.static.windowManager.openWindow(
 165                         this.constructor.static.dialog,
 166                         {
 167                                 // The following messages are used here
 168                                 // * feedback-dialog-title
 169                                 // * config.dialogTitleMessageKey ...
 170                                 title: mw.msg( this.dialogTitleMessageKey ),
 171                                 foreignApi: this.foreignApi,
 172                                 settings: {
 173                                         messagePosterPromise: this.messagePosterPromise,
 174                                         title: this.feedbackPageTitle,
 175                                         dialogTitleMessageKey: this.dialogTitleMessageKey,
 176                                         bugsTaskSubmissionLink: this.bugsTaskSubmissionLink,
 177                                         useragentCheckbox: {
 178                                                 show: this.useragentCheckboxShow,
 179                                                 mandatory: this.useragentCheckboxMandatory,
 180                                                 message: this.useragentCheckboxMessage
 181                                         }
 182                                 },
 183                                 contents: contents
 184                         }
 185                 );
 186         };
 187
 188 }() );