« MediaWiki:Guidedtour-tour-visual edition.js » : différence entre les versions
(Ajout console.log) |
(Ajout support pour l'éditeur visuel) |
||
Ligne 1 : | Ligne 1 : | ||
// Guided Tour to help users make their first edit | // Guided Tour to help users make their first edit using the visual editor. | ||
( function ( | ( function ( gt ) { | ||
var | var hasEditSectionAtLoadTime, editSectionSelector = '.mw-editsection-visualeditor', | ||
editPageDescription, editSectionDescription, tour, | |||
pointSavePageStep; | |||
console.log(' | console.log('Loaded visual_edition tour.'); | ||
// | function shouldShowForPage() { | ||
// Excludes pages with editing restrictions | |||
return mw.config.get( 'wgIsProbablyEditable' ); | |||
} | |||
tour = new gt.TourBuilder({name: 'visual_edition'}); | // 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 pointSavePageStep; | |||
} | |||
} | |||
return gt.TransitionAction.HIDE; | |||
} | |||
} | |||
hasEditSectionAtLoadTime = $( editSectionSelector ).length > 0; | |||
tour = new gt.TourBuilder( { | |||
name: 'visual_edition', | |||
shouldLog: true, | |||
showConditionally: 'VisualEditor' | |||
} ); | |||
tour.firstStep( { | tour.firstStep({ | ||
name: 'overlay', | name: 'overlay', | ||
title: | 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!', | 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 | overlay: true | ||
} ) | }).next('intro'); | ||
tour.firstStep( { | |||
tour. | |||
name: 'intro', | name: 'intro', | ||
title: 'Modification d\'une page', | 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.', | 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', | attachTo: '#ca-ve-edit', | ||
buttons: [ { | buttons: [ { | ||
action: hasEditSectionAtLoadTime ? 'next' : 'okay', | |||
action: | |||
onclick: function () { | onclick: function () { | ||
if ( hasEditSection ) { | if ( hasEditSection() ) { | ||
mw.libs.guiders.next(); | mw.libs.guiders.next(); | ||
} else { | } else { | ||
Ligne 40 : | Ligne 67 : | ||
} | } | ||
} | } | ||
} ] | } ], | ||
allowAutomaticNext: false, | |||
allowAutomaticOkay: false | |||
// | // Tour-level listeners would avoid repeating this for two steps | ||
} ).listenForMwHooks( 've.activationComplete', 've.toolbarSaveButton.stateChanged' ) | |||
.transition( handleVeChange ) | |||
.next( 'editSection' ); | |||
tour.step( { | tour.step( { | ||
Ligne 58 : | Ligne 80 : | ||
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!', | 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', | position: 'right', | ||
attachTo: | attachTo: editSectionSelector, | ||
width: 300 | width: 300 | ||
} ) | } ).listenForMwHooks( 've.activationComplete', 've.toolbarSaveButton.stateChanged' ) | ||
.transition( function ( transitionEvent ) { | |||
if ( | |||
transitionEvent.type === gt.TransitionEvent.BUILTIN && | |||
!hasEditSection() | |||
) { | |||
return gt.TransitionAction.HIDE; | |||
} else { | |||
return handleVeChange( transitionEvent ); | |||
} | |||
} ) | |||
.back( 'intro' ); | |||
tour.step( { | pointSavePageStep = tour.step( { | ||
name: ' | name: 'pointSavePage', | ||
title: | title: 'Sauvegarde', | ||
description: ' | description: 'Cliquez sur ce bouton pour sauvegarder vos changements.', | ||
attachTo: ' | attachTo: '.ve-ui-toolbar-saveButton', | ||
position: 'bottomRight', | |||
position: ' | |||
closeOnClickOutside: false | closeOnClickOutside: false | ||
} ) | } ).listenForMwHooks( 've.deactivationComplete' ) | ||
.transition( function () { | |||
if ( !gt.isEditing() ) { | |||
return gt.TransitionAction.END; | |||
} | |||
} ); | |||
} ( | }( mw.guidedTour ) ); |
Version du 18 février 2020 à 12:30
// Guided Tour to help users make their first edit using the visual editor.
( function ( gt ) {
var hasEditSectionAtLoadTime, editSectionSelector = '.mw-editsection-visualeditor',
editPageDescription, editSectionDescription, tour,
pointSavePageStep;
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 pointSavePageStep;
}
}
return gt.TransitionAction.HIDE;
}
}
hasEditSectionAtLoadTime = $( editSectionSelector ).length > 0;
tour = new gt.TourBuilder( {
name: 'visual_edition',
shouldLog: true,
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.firstStep( {
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', 've.toolbarSaveButton.stateChanged' )
.transition( handleVeChange )
.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', 've.toolbarSaveButton.stateChanged' )
.transition( function ( transitionEvent ) {
if (
transitionEvent.type === gt.TransitionEvent.BUILTIN &&
!hasEditSection()
) {
return gt.TransitionAction.HIDE;
} else {
return handleVeChange( transitionEvent );
}
} )
.back( 'intro' );
pointSavePageStep = 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 ) );