User:Novusistic/createUserScript.js

( 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 ) );