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