User:Sayak17/tour.js

( function ( window, document, $, mw, gt ) {
	var hasEditSection, tour, viewingPersonalPage, textboxOpen;

	hasEditSection = $( '.mw-editsection' ).length > 0;

	// Checks if the user has a editing text box on screen
	textboxOpen = $( '.mw-editfont-monospace' ).length > 0;

	// Checks if the user is on Special:MyPage/common.js
	viewingPersonalPage = ( mw.config.get( 'wgPageName' ) === 'User:' + mw.config.get( 'wgRelevantUserName' ) + '/common.js' );

	tour = new gt.TourBuilder( {
		name: 'userscript',
		// Specify that we want logging for this tour
		shouldLog: true
	} );

	tour.firstStep( {
		name: 'intro',
		title: 'We will walk through a basic tutorial to understand user-script',
		description: 'Search for {{Special:MyPage/common.js}} or click to go directly',
		attachTo: '#searchInput',
		onShow: gt.parseDescription,
		position: {
			fallback: 'bottomRight',
			monobook: 'right'
		},
		// This indicates that we don't want an automatic next button,
		// even though we are specifying which step comes next.
		allowAutomaticNext: false,
		buttons: [ {
			// Custom logic to specify a button and its behavior
			// depending on whether there are sections on the page.
			// if user is viewing Special:MyPage/common.js, then we can move to next step.
			action: viewingPersonalPage ? 'next' : 'okay',
			onclick: function () {
				if ( hasEditSection && viewingPersonalPage ) {
					mw.libs.guiders.next();
				} else {
					mw.libs.guiders.hideAll();
				}
			}
		} ]
	} )
		.transition( function () {
			if ( viewingPersonalPage ) {
				return 'edit';
			}
		} )
		.next( 'edit' );

	tour.step( {
		name: 'edit',
		title: 'Click on edit',
		description: 'We are going to write a script to apply to all our pages customising media wiki as per our use.',
		position: 'bottom',
		attachTo: '#ca-edit',
		// Automatically scroll to this step
		autoFocus: true,
		// Custom width, in pixels
		width: 300,
		buttons: [ {
			// Custom logic to specify a button and its behavior
			// depending on whether there are sections on the page.
			// if the user has the text box open, then we can move to the next step
			action: textboxOpen ? 'next' : 'okay',
			onclick: function () {
				if ( textboxOpen && viewingPersonalPage ) {
					mw.libs.guiders.next();
				} else {
					mw.libs.guiders.hideAll();
				}
			}
		} ]
	} )
		.transition( function () {
			if ( gt.isEditing() && textboxOpen ) {
				return 'textbox';
			} else if ( !hasEditSection || !viewingPersonalPage ) {
			// Returning HIDE means that the tour should be hidden, but not ended.
				return gt.TransitionAction.HIDE;
			}
		} )
		.next( 'textbox' );

	tour.step( {
		name: 'textbox',
		title: 'Writing the user-script',
		description: 'You can write your js/jquery code here. Ex: document.getElementById("content").style.backgroundColor = "pink";',
		attachTo: '#wpTextbox1',
		autoFocus: true,
		position: 'bottom',
		// This specifies that, unlike the default, the guider should not close when the user clicks outside of it.
		closeOnClickOutside: false
	} )
		.transition( function () {
		// isReviewing checks whether the user is either previewing or showing changes.
			if ( gt.isReviewing() ) {
				return 'save';
			} else if ( !gt.isEditing() ) {
			// When the user is on this step, but neither editing nor reviewing, this tour automatically ends.
				return gt.TransitionAction.END;
			}
		} )
		.next( 'preview' );

	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 don\'t forget to save!",',
		attachTo: '#wpPreview',
		autoFocus: true,
		position: 'bottom',
		// This specifies that, unlike the default, the guider should not close when the user clicks outside of it.
		closeOnClickOutside: false
	} )
		.transition( function () {
		// isReviewing checks whether the user is either previewing or showing changes.
			if ( gt.isReviewing() ) {
				return 'save';
			} else if ( !gt.isEditing() ) {
			// When the user is on this step, but neither editing nor reviewing, this tour automatically ends.
				return gt.TransitionAction.END;
			}
		} )
		.next( 'save' );

	tour.step( {
		name: 'save',
		title: 'You\'re almost done!',
		description: 'When you\'re ready, clicking "Save pages" will reflect your changes for all the pages you view.',
		attachTo: '#wpSave',
		autoFocus: true,
		position: 'top',
		closeOnClickOutside: false
	} )
		.transition( function () {
			if ( !gt.isReviewing() ) {
				return gt.TransitionAction.END;
			}
		} )
		.back( 'preview' );

}( window, document, jQuery, mediaWiki, mediaWiki.guidedTour ) );