Guidedtour-tour-gui.js

Hinweis: Leeren Sie nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Extras → Internetspuren löschen … → Individuelle Auswahl → Den kompletten Cache löschen

/*
 * Guided Tour to test guided tour features.
 */
// Copy the next line into the start of your tour.
( function ( window, document, $, mw, gt ) {

	// Declare a variable for use later
	var pageName = 'Help:Guided tours/guider',
		tour;

	tour = new gt.TourBuilder( {
		/*
		 * This is the name of the tour.  It must be lowercase, without any hyphen (-) or
		 * period (.) characters.
		 *
		 * The page where you save an on-wiki tour must be named
		 * MediaWiki:Guidedtour-tour-{name}.js , in this example MediaWiki:Guidedtour-tour-mytest.js
		 */
		name: 'gui'
	} );

	// Information defining each tour step

	// This tour shows a central overlay at the start of the tour.
	// Guiders appear in the center if another position is not specified.
	// To specify the first step of the tour, use .firstStep instead of .step
	tour.firstStep( {
		name: 'overlay',
		// Note that for on-wiki tours, we use title and description with the actual text.
		// The title appears in the title bar of the guider.
		title: 'BlueSpice 4 in 4 Minuten',

		// The description appears in the body
		description: 'Eine Kurzeinführung zur Benutzeroberfläche',

		// This specifies that there is an overlay behind the guider.
		overlay: true
	} )
	// This specifies the next step of the tour, and will automatically generate a next button.
	// 'callout' refers to the name used in the step immediately below.  Although putting the steps
	// in a meaningful order is recommended, any step can be specified as next/back.
	.next( 'sidebarmain' );

	tour.step( {
		/*
		 * Callout of left menu
		 */
		name: 'sidebarmain',
		title: 'Hauptseitenleiste',
		description: 'Links zu wichtigen Einstiegsseiten in Ihrem Wiki.',

                // description
		attachTo: '#bs-sitenavtabs',

                // description
		position: 'right',
	} )
	.next( 'bookshelf' )
	// description of back functionality
	.back( 'overlay' );

	tour.step( {
		/*
		 * Callout of left menu
		 */
		name: 'bookshelf',
		title: 'Bücherregal',
		description: 'Hier geht es zum Bücherregal.',

                // description
		attachTo: '#bs-nav-section-bs-bookshelfui-link',

                // description
		position: 'right',
	} )
	.next( 'mainnav' )
	// description of back functionality
	.back( 'sidebarmain' );

	tour.step( {
		/*
		 * Test out mediawiki description pages
		 */
		name: '123445',
		title: 'Test MediaWiki description pages',

		// Name of the page to parse
		description: pageName,

		overlay: true,

		// This means the wikitext for the description will be loaded from the
		// page name in the description field.
		onShow: gt.getPageAsDescription,

		buttons: [ {
			// This makes a button which acts like a wikilink to 'Help:Guided tours/guider'
			action: 'wikiLink',
			page: pageName,
			name: 'Go to description page',
			// This specifies that the button takes you to the next step of a process,
			// which affects its appearance.
			type: 'progressive'
		}, {
			// This makes the okay button on this step end the tour.
			action: 'end'
		} ]
	} )
	.back( 'callout' );

// The following should be the last line of your tour.
} ( window, document, jQuery, mediaWiki, mediaWiki.guidedTour ) );

// Firstedit tour code walkthrough

// This is a walkthrough of a simplified version of the 'firstedit' tour, if it were written as an on-wiki tour. It covers more advanced features not described above:

// Guided Tour to help users make their first edit.
// Designed to work on any Wikipedia article, and can work for other sites with minor message changes.

( 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: 'myfirstedit',
		// Specify that we want logging for this tour
		shouldLog: true
	} );

	tour.firstStep( {
		name: 'intro',
		title: 'Edit the whole page…',
		description: 'Click the "Edit" button to make your changes.',
		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: 'Or 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: '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: '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' );

	tour.step( {
		name: 'save',
		title: 'You\'re almost done!',
		description: 'When you\'re ready, clicking "Save pages" will make your changes visible for everyone.',
		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 ) );