MediaWiki:Gadget-articlefeedback-core.js
After saving, you may need to bypass your browser's cache to see the changes. For further information, see Wikipedia:Bypass your cache.
- In most Windows and Linux browsers: Hold down Ctrl and press F5.
- In Safari: Hold down ⇧ Shift and click the Reload button.
- In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.
/** <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 mw.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-mw.util', 'oojs-ui-core', 'oojs-ui.styles.icons-interactions'], function () {
$(self.init);
});
})(window.$, window.mw);
// </nowiki>