MediaWiki:Gadget-articlefeedback-core.js

/** <nowiki>
 * Gadget for the wiki article feedback feature.
 * @author Jayden
 */

'use strict';
(function($, mw){
    var conf = mw.config.get([
            'wgNamespaceNumber',
            'wgTitle',
            'wgAction',
            'wgArticleId',
            'wgUserGroups'
        ]),

        self = {
            // Constants
            API_ENDPOINT: 'https://api.weirdgloop.org/wiki/feedback',
            RESTRICTED_PAGES: [
            	// List of pages where only logged-in users should see the feedback button
            	'Gender', 'Makeover Mage', 'Pronouns', 'Body type'
        	],

            // Variables
            selectedRating: 0,
            submitBtn: null,
            $trigger: null,
            $feedbackInput: null,
            stack: null,
            panel1: null,
            panel2: null,
            window: null,

            /**
             * Startup method
             */
            init: function () {
            	if (self.RESTRICTED_PAGES.includes(conf.wgTitle) && !conf.wgUserGroups.includes('autoconfirmed')) {
            		return;
            	}
            	
                self.buildModal();
                self.buildTrigger();
            },

            /**
             * Build the element that triggers the modal.
             */
            buildTrigger: function () {
                var trigger = new OO.ui.ButtonWidget( {
                    label: 'Give feedback',
                    icon: 'feedback',
                } );

                trigger.on('click', function() {
                    self.openModal();
                });

                $('#firstHeading').append(
                    $('<div>').addClass('wgl-feedback-container').append(trigger.$element)
                );
            },

            /**
             * Build the modal we will show for providing article feedback.
             */
            buildModal: function () {
                var init = function (modal) {
                    self.panel1 = new OO.ui.PanelLayout( { padded: true, expanded: false } );

                    // Create star rating UI
                    var star = $("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z'/></svg>").addClass('rs-feedback-star');
                    var stars = [star.clone(), star.clone(), star.clone(), star.clone(), star.clone()];

                    var i;
                    stars.map(function (star) {
                    	// When we click on a star...
                        star.on('click', function () {
                            i = stars.indexOf(star);
                            
                            var selectedLength = $('.rs-feedback-star-selected').length - 1;
                            
                            // This whole if statement could probably be 10x cleaner but I lack the brain capacity right now to try and do something nice without ES6 syntax
                            
                            if (!star.hasClass('rs-feedback-star-selected')) {
                                // ...if this DOES NOT have selected class, give this star + all previous ones it
                                for (i; i >= 0; --i) stars[i].addClass('rs-feedback-star-selected');
                            } else if (selectedLength === 0 && selectedLength === i) {
                            	// ...if this DOES have the selected class, but it's the only star, remove it
                            	$('.rs-feedback-star-selected').removeClass('rs-feedback-star-selected');
                            } else if (($('.rs-feedback-star-selected').length - 1) === i) {
                                // ...if this DOES have the selected class, and this is the last star, remove the selected class
                                for (i; i < stars.length; ++i) stars[i].removeClass('rs-feedback-star-selected');
                            } else  {
                            	// ...if this DOES have the selected class, but this is not the last star, remove everything after this
                            	stars.forEach(function (ele, ix) {
                            		if (ix > i) {
                            			ele.removeClass('rs-feedback-star-selected');
                            		}
                            	})
                            }

                            self.selectedRating = $('.rs-feedback-star-selected').length;
                        })
                    });

                    var finalStarUi = $('<div>').append(
                        $('<h5>').text('Give feedback on this page'),
                        $('<div>').addClass('rs-feedback-star-container').append(
                        	$('<div>').addClass('rs-feedback-stars').append(stars),
                        	$('<p>').addClass('text-grey small').text('(optional)')
                        )
                    );

                    self.$feedbackInput = new OO.ui.MultilineTextInputWidget( { placeholder: 'What can be improved on this page?', id: 'rs-feedback-feedback', rows: 5, autosize: true, autofocus: true} );

                    self.submitBtn = new OO.ui.ButtonInputWidget( {
                        label: 'Submit',
                        flags: [ 'primary', 'progressive' ]
                    } );
                    var b1click = ('click', function(modal) {
                        // When the submit button is clicked, do the submission...
                        self.submit();
                    });
                    self.submitBtn.on('click', b1click, [modal]);

                    var cancelBtn = new OO.ui.ButtonInputWidget( {
                        label: 'Cancel',
                    } );
                    var close = function(modal) {
                        self.closeModal();
                    };
                    cancelBtn.on('click', close, [modal]);

                    self.panel1.$element.append(finalStarUi, self.$feedbackInput.$element, $('<p>').addClass('wgl-feedback-error'), self.submitBtn.$element, cancelBtn.$element );

                    self.panel2 = new OO.ui.PanelLayout( { padded: true, expanded: false } );
                    self.panel2.$element.append(
                        $('<h3>').text('Thank you!'),
                        $('<p>').html('Your feedback has been brought up for discussion on our Discord server. You can join by clicking <strong>Open Discord App</strong>.'),
                        $('<iframe>')
                            .addClass('rs-feedback-discord')
                            .css('border-top', '1px')
                            .css('margin', '1em 0')
                            .attr('width', '100%')
                            .attr('height', '500px')
                            .attr('frameBorder', '0')
                    )

                    self.stack = new OO.ui.StackLayout({
                        items: [self.panel1, self.panel2]
                    })
                    modal.$body.append( self.stack.$element );
                };

                rs.createOOUIWindow('feedback', 'Submit feedback for ' + conf.wgTitle, {size: 'large', classes: ['rs-feedback-modal']}, init, false, true, true).then(function (w) {
                    self.window = w;
                    self.window.$element.on('click', function (e) {
                        if (e.target !== this) return;
                        self.closeModal();
                    })
                });
            },

            /**
             * Open the modal
             */
            openModal: function (e) {
                if (e) { e.preventDefault(); }
                window.OOUIWindowManager.openWindow( 'feedback' );
            },

            /**
             * Close the modal
             */
            closeModal: function () {
                self.resetForm();
                window.OOUIWindowManager.closeWindow( 'feedback' );
                self.stack.setItem(self.panel1);
            },

            /**
             * Reset the form entirely
             */
            resetForm: function () {
                self.setError('');
                self.submitBtn.setDisabled(false);
                $('.rs-feedback-star-selected').removeClass('rs-feedback-star-selected');
                self.selectedRating = 0;
            },

            /**
             * Actually do the submission
             */
            submit: function () {
                self.submitBtn.setDisabled(true);
                self.setError('');

                // Ensure that feedback was provided
                var feedbackInputValue = self.$feedbackInput.value.trim();
                if (!feedbackInputValue) {
                    self.setError('Please provide feedback!');
                    self.submitBtn.setDisabled(false);
                    return;
                };

                // Make API call to save feedback
                self.submitToAPI(self.selectedRating, feedbackInputValue);
            },

            showResultPage: function () {
              self.stack.setItem(self.panel2);
              // This is here so that we don't load the iframe until the result page is displayed
              $('.rs-feedback-discord').attr('src', 'https://e.widgetbot.io/channels/177206626514632704/269673599554551808');
              self.window.updateSize();
            },

            /**
             * Make API call
             */
            submitToAPI: function (rating, feedback) {
                $.ajax(self.API_ENDPOINT, {
                    data: JSON.stringify({wiki: 'osw', page: conf.wgArticleId, rating: rating, feedback: feedback}),
                    type: 'POST',
                    contentType: 'application/json'
                })
                    .done(function () {
                        self.showResultPage();
                    })
                    .fail(function (jqXHR) {
                        self.setError('There was a problem. Please try again later.');
                        self.submitBtn.setDisabled(false);
                    })
                ;
            },

            /**
             * Set an error message
             */
            setError: function(error) {
                $('.wgl-feedback-error').text(error);
                self.window.updateSize();
            }
        };

    mw.loader.using(['mediawiki.api', 'ext.gadget.rsw-util', 'oojs-ui-core', 'oojs-ui.styles.icons-interactions'], function () {
        $(self.init);
    });
})(window.$, window.mw);
// </nowiki>