User:Novusistic/tour.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 ) );