User:Novusistic/createUserScript.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
( function ( window, document, $, mw, gt ) {
// Gets the current logged in user. Returns Null if user is anonymous.
const currentUser = mw.user.getName();
// It ensures that the tour works only on the common.js page.
if ( mw.config.get( 'wgPageName' ) === `User:${currentUser}/common.js` ) {
let tour, isCreatePage, buttonType;
// This ensures if the page already exists or has to be created.
isCreatePage = $( '#ca-edit a' )
.html() === 'Create';
buttonType = isCreatePage ? 'Create' : 'Edit';
// Instantiates the Guided Tour.
tour = new gt.TourBuilder( {
// Name of the tour
name: 'createUserScript'
} );
// The very first step/guider of the tour is defined using .firstStep.
tour
.firstStep( {
// Name of the step
name: 'introduction',
// The title of the step
title: `${buttonType} the page.`,
// The corresponding description of the step
description:
`Click the ${buttonType} button to make changes to your
common.js page`,
// Defines the step as the "attachment" rather than the
// "Overlay"
attachTo: '#ca-edit',
// Sets the attachment position of the step.
position: 'bottom',
// Defines the custom behaviour of the button to be shown on the
// First step.
buttons: [
{
action: 'okay',
onclick: function () {
// Clicking this button will only hide the tour and
// Not end it.
mw.libs.guiders.hideAll();
}
}
]
} )
// Defines the guider/step to show to the user based on certain events
// (transition points).
.transition( function () {
// If the page is being edited, then the "Preview" guider is
// Shown.
if ( gt.isEditing() ) {
return 'preview';
}
} );
// It defines the "Preview" step/guider to be shown on the page being
// Edited.
tour
.step( {
name: 'preview',
title: 'Preview your changes (optional)',
description:
`Clicking "Show preview" allows you to check what the page will
look like with your changes. Just do not forget to save!`,
attachTo: '#wpPreview',
position: 'top',
// It automatically scrolls to the position of "Preview" button.
autoFocus: true,
// It prevents the guider/step to close on clicking outside of
// It.
closeOnClickOutside: false
} )
.transition( function () {
// If the page is being reviewed, then the "Save" guider is
// Shown.
if ( gt.isReviewing() ) {
return 'save';
// If the page is neither being edited nor reviewed, then
// The tour ends.
} else if ( !gt.isEditing() ) {
return gt.TransitionAction.END;
}
} )
// It automatically creates the next button on the guider and links
// It to the "Save" guider.
.next( 'save' );
// It defines the "Save" step/guider to be shown on the page being
// Edited.
tour
.step( {
name: 'save',
title: "You're almost done!",
description:
`When you are ready, clicking "Save pages" will make your
changes visible on your personalized account.`,
attachTo: '#wpSave',
autoFocus: true,
position: 'top',
closeOnClickOutside: false
} )
.transition( function () {
// This ends the tour when the user isn't reviewing and has
// Clicked the "Save" button
if ( !gt.isReviewing() ) {
return gt.TransitionAction.END;
}
} )
// It automatically creates the back button on the guider and
// Links it to the "Preview" guider.
.back( 'preview' );
}
}( window, document, jQuery, mediaWiki, mediaWiki.guidedTour ) );