« MediaWiki:Guidedtour-tour-visual edition.js » : différence entre les versions

De Wikimedica
(Correction conditions d'apparition des étapes)
(.transition() ne peut être appelé 2 fois)
Ligne 82 : Ligne 82 :
attachTo: editSectionSelector,
attachTo: editSectionSelector,
width: 300
width: 300
} ).listenForMwHooks( 've.activationComplete', 've.toolbarSaveButton.stateChanged' )
} ).listenForMwHooks( 've.activationComplete')
.transition( function ( transitionEvent ) {
.transition( function ( transitionEvent ) {
if (transitionEvent.type === gt.TransitionEvent.BUILTIN &&!hasEditSection()) {
if (transitionEvent.type === gt.TransitionEvent.BUILTIN &&!hasEditSection()) {
Ligne 97 : Ligne 97 :
autoFocus: true,
autoFocus: true,
overlay: true
overlay: true
}).transition( function () {
}).listenForMwHooks('ve.toolbarSaveButton.stateChanged' ).transition(function(){
if ( !gt.isEditing() ) {
if ( !gt.isEditing() ) {
// When the user is on this step, but not editing, this tour automatically ends.
// When the user is on this step, but not editing, this tour automatically ends.
return gt.TransitionAction.END;
return gt.TransitionAction.END;
}
}
}).listenForMwHooks('ve.toolbarSaveButton.stateChanged' ).transition(function(){
var isSaveButtonDisabled;
var isSaveButtonDisabled;

Version du 18 février 2020 à 12:57

// Guided Tour to help users make their first edit using the visual editor.
// Source modified from https://phabricator.wikimedia.org/diffusion/EGTO/browse/master/modules/tours/firsteditve.js
( function ( gt ) {
	var hasEditSectionAtLoadTime, editSectionSelector = '.mw-editsection-visualeditor',
		editPageDescription, editSectionDescription, tour,
		veStep;
	
	console.log('Loaded visual_edition tour.');
	
	function shouldShowForPage() {
		// Excludes pages with editing restrictions
		return mw.config.get( 'wgIsProbablyEditable' );
	}

	// If we shouldn't show it, don't initialize the guiders.
	if ( !shouldShowForPage() ) {
		return;
	}

	function hasEditSection() {
		return $( editSectionSelector ).length > 0;
	}

	function handleVeChange( transitionEvent ) {
		var isSaveButtonDisabled;

		if ( transitionEvent.type === gt.TransitionEvent.MW_HOOK ) {
			if ( transitionEvent.hookName === 've.toolbarSaveButton.stateChanged' ) {
				isSaveButtonDisabled = transitionEvent.hookArguments[ 0 ];
				if ( !isSaveButtonDisabled ) {
					return veStep;
				}
			}

			return gt.TransitionAction.HIDE;
		}
	}

	hasEditSectionAtLoadTime = $( editSectionSelector ).length > 0;

	tour = new gt.TourBuilder( {
		name: 'visual_edition',
		shouldLog: false,
		showConditionally: 'VisualEditor'
	} );
	
	tour.firstStep({
		name: 'overlay',
		title: 'Comment modifier une page?',
		description: 'Dans ce guide, vous apprendrez à modifier une page. À la fin de ce guide, vous saurez comment rédiger de nouvelles sections, ajouter des images et créer des liens vers d\'autres pages!',
		overlay: true
	}).next('intro');
	
	tour.step( {
		name: 'intro',
		title: 'Modification d\'une page',
		description: 'Par défaut, Wikimedica vous permet de consulter ses pages en mode \"Lecture\". Il est cependant possible de modifier une page en cliquant sur le bouton ci-dessus.',
		position: 'bottom',
		attachTo: '#ca-ve-edit',
		buttons: [ {
			action: hasEditSectionAtLoadTime ? 'next' : 'okay',
			onclick: function () {
				if ( hasEditSection() ) {
					mw.libs.guiders.next();
				} else {
					mw.libs.guiders.hideAll();
				}
			}
		} ],
		allowAutomaticNext: false,
		allowAutomaticOkay: false
	// Tour-level listeners would avoid repeating this for two steps
	} ).listenForMwHooks( 've.activationComplete' )
		.transition( function() {return 'modifier_texte';} )
		.next( 'editSection' );

	tour.step( {
		name: 'editSection',
		title: 'Modification d\'une page (suite)',
		description: 'Il existe aussi sur chaque page des boutons de modification pour chaque section. Ils permettent alors de se concentrer uniquement sur la section pertinente!',
		position: 'right',
		attachTo: editSectionSelector,
		width: 300
	} ).listenForMwHooks( 've.activationComplete')
		.transition( function ( transitionEvent ) {
			if (transitionEvent.type === gt.TransitionEvent.BUILTIN &&!hasEditSection()) {
				return gt.TransitionAction.HIDE;
			} else {
				return 'modifier_texte';
			}
		} )
		.back( 'intro' );

	veStep = tour.step({
		name: 'modifier_texte',
		description: 'Afin d\'écrire du texte, vous pouvez simplement cliquer à l\'endroit où vous désirez écrire, et taper le texte désirez. Essayer par exemple d\'écrire \"Voici ma première phrase écrite sur Wikimedica\".',
		autoFocus: true,
		overlay: true
	}).listenForMwHooks('ve.toolbarSaveButton.stateChanged' ).transition(function(){
		if ( !gt.isEditing() ) {
			// When the user is on this step, but not editing, this tour automatically ends.
			return gt.TransitionAction.END;
		}
		
		var isSaveButtonDisabled;
		
		if ( transitionEvent.type === gt.TransitionEvent.MW_HOOK ) {
			if ( transitionEvent.hookName === 've.toolbarSaveButton.stateChanged' ) {
				isSaveButtonDisabled = transitionEvent.hookArguments[ 0 ];
				if ( !isSaveButtonDisabled ) {
					return 'pointSavePage';
				}
			}

			return gt.TransitionAction.HIDE;
		}
	}).next( 'pointSavePage' );
	
	tour.step( {
		name: 'pointSavePage',
		title: 'Sauvegarde',
		description: 'Cliquez sur ce bouton pour sauvegarder vos changements.',
		attachTo: '.ve-ui-toolbar-saveButton',
		position: 'bottomRight',
		closeOnClickOutside: false
	} ).listenForMwHooks( 've.deactivationComplete' )
		.transition( function () {
			if ( !gt.isEditing() ) {
				return gt.TransitionAction.END;
			}
		} );

}( mw.guidedTour ) );