User:Gauransh Dingwani/tour.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 ) {
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 ) );