User:Bilalwaheed099/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;
// Check if there are section edit links (used later)
hasEditSection = $( '.mw-editsection' ).length > 0;
tour = new gt.TourBuilder( {
name: 'userscript-tutorial',
// Specify that we want logging for this tour
shouldLog: true
} );
tour.firstStep( {
name: 'intro',
title: 'UserScript Tutorial',
description: 'This is a tutorial for creating user scripts.',
attachTo: '#ca-edit',
position: 'bottom',
// 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.
action: hasEditSection ? 'next' : 'okay',
onclick: function () {
if ( hasEditSection ) {
mw.libs.guiders.next();
} else {
mw.libs.guiders.hideAll();
}
}
} ]
} )
// At certain times, called transition points, the callback passed to .transition
// will be called. At those times, this tour checks if the user is editing. If so,
// the tour returns 'preview', indicating that the tour should transition to the
// 'preview' step automatically.
.transition( function () {
if ( gt.isEditing() ) {
return 'preview';
}
} )
.next( 'editSection' );
tour.step( {
name: 'editSection',
title: 'Edit a section.',
description: 'There are "edit" links for each major section in a page, so you can focus on just that part.",',
position: 'right',
attachTo: '.mw-editsection',
// Automatically scroll to this step
autoFocus: true,
// Custom width, in pixels
width: 300
} )
.transition( function () {
if ( gt.isEditing() ) {
return 'preview';
} else if ( !hasEditSection ) {
// Returning HIDE means that the tour should be hidden, but not ended.
return gt.TransitionAction.HIDE;
}
} )
.back( 'intro' );
tour.step( {
name: 'preview',
title: 'Last step! Preview your changes.',
description: 'Clicking "Show preview" allows you to view your page. Just don\'t forget to save!",',
attachTo: '#wpPreview',
autoFocus: true,
position: 'top',
// 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' );
} ( window, document, jQuery, mediaWiki, mediaWiki.guidedTour ) );