MediaWiki:Guidedtour-tour-visual edition.js
Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
// 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
// TO DO:
// BIG BUG -> DOUBLE NEXT SI ON FAIT UN NEXT AVEC UN EVENT UNACTIF
// Better attach for Liste/Section/Tableau/Source
// Additionnal steps to guide user for Tableau/Lien/Source/Image
// Automatic Selection
// Automatic Click for Image/Table/Paragraphe
// Find a way to prevent close button or send a warning message if user tries to close the tour
// On a related note: Find how to know which callbacks are called (ex: listenForMwHooks('ve.toolbarSaveButton.stateChanged' )) How to figure 've.toolbarSaveButton.stateChanged'?
// Try to recover the "Sommaire" page found in the first edit
// Do a better job at checking if the user has made the right operations (or maybe not?)
( 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;
//automatic api:edit function to send yourself messages
function sendMessage( targetPage, msgPage, linkTo ) {
var api = new mw.Api();
api.get( {
'action' : 'query',
'titles' : targetPage,
'prop' : 'revisions|info',
'intoken' : 'edit',
'rvprop' : 'content',
'indexpageids' : 1
}).done( function (result_target) {
result_target = result_target.query;
console.log(result_target)
if (result_target.pageids[0]==-1){
console.log('Page doesn\'t exist');
api.get( {
'action' : 'query',
'titles' : msgPage,
'prop' : 'revisions|info',
'intoken' : 'edit',
'rvprop' : 'content',
'indexpageids' : 1
} ).done( function (result) {
result = result.query;
var page = result.pages[result.pageids[0]];
var text = page.revisions[0]['*'];
api.post( {
'action' : 'edit',
'title' : targetPage,
'createonly' : true,
'prependtext' : text,
'summary' : 'Nouveau message (simulé automatiquement par le guide d\'utilisation [[WP:Nom du guide d\'utilisation|Nom du guide d\'utilisation]])',
'token' : page.edittoken
} ).done( function () {
window.location.href = linkTo;
} );
} );
} else {
console.log('Page exists');
api.get( {
'action' : 'query',
'titles' : targetPage,
'prop' : 'revisions|info',
'intoken' : 'edit',
'rvprop' : 'content',
'indexpageids' : 1
} ).done( function (result) {
result = result.query;
var page = result.pages[result.pageids[0]];
api.post( {
'action' : 'delete',
'title' : targetPage,
'summary' : 'Réinitialistation de l\'exercice',
'token' : page.edittoken
} ).done( function (result) {
api.get( {
'action' : 'query',
'titles' : msgPage,
'prop' : 'revisions|info',
'intoken' : 'edit',
'rvprop' : 'content',
'indexpageids' : 1
} ).done( function (result) {
result = result.query;
var page = result.pages[result.pageids[0]];
var text = page.revisions[0]['*'];
api.post( {
'action' : 'edit',
'title' : targetPage,
'createonly' : true,
'prependtext' : text,
'summary' : 'Nouveau message (simulé automatiquement par le guide d\'utilisation [[WP:Nom du guide d\'utilisation|Nom du guide d\'utilisation]])',
'token' : page.edittoken
} ).done( function () {
window.location.href = linkTo;
} );
} );
});
});
}
});
}
var group_style_hook = mw.hook( 'group_style_hook' );
var group_bold_italic_hook = mw.hook( 'group_bold_italic_hook' );
var group_structure_hook = mw.hook( 'group_structure_hook' );
var group_bullet_hook = mw.hook( 'group_bullet_hook' );
var group_format_hook = mw.hook( 'group_format_hook' );
var group_section_hook = mw.hook( 'group_section_hook' );
var group_insert_hook = mw.hook( 'group_insert_hook' );
var group_table_hook = mw.hook( 'group_table_hook' );
var group_link_hook = mw.hook( 'group_link_hook' );
var group_citoid_hook = mw.hook( 'group_citoid_hook' );
var selection_change_list_hook = mw.hook('selection_change_list_hook');
function detectListSelection(event){
if (window.getSelection().toString().replace(/(\r\n|\n|\r)/gm,"").includes(';le cidre ;le calvados ;le cidre de glace ;l')){
selection_change_list_hook.fire();
document.removeEventListener('selectionchange', detectListSelection);
}
}
var selection_change_section_hook = mw.hook('selection_change_section_hook');
function detectSectionSelection(event){
if (window.getSelection().toString().includes('ariété')){
selection_change_section_hook.fire();
document.removeEventListener('selectionchange', detectListSelection);
}
}
tour = new gt.TourBuilder( {
name: 'visual_edition',
shouldLog: false,
showConditionally: 'VisualEditor'
} );
tour.firstStep({
name: 'overlay',
title: 'Tutoriel de l\'éditeur visuel',
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,
closeOnClickOutside : false
}).next('attention');
tour.step({
name: 'attention',
title: 'Attention!',
description: 'Vous serez accompagné tout au long de votre parcours d\'apprentissage par des fenêtres d\'aide telles que celle-ci. Il est important de <b>ne pas fermer</b> ces fenêtres, sinon vous perdrez tout votre progrès!',
overlay: true,
closeOnClickOutside : false,
buttons: [ {
name: 'Commencer le guide de modification d\'une page',
onclick: function() {
if(!mw.config.get('wgUserName')){
alert( "Veuillez-vous connecter." );
return;
}
sendMessage( 'Utilisateur:' + mw.config.get( 'wgUserName' ) + '/Guidedtour/visual_edition_template', 'MediaWiki:Guidedtour-tour-visual_edition-template', mw.util.getUrl( 'Utilisateur:' + mw.config.get( 'wgUserName' ) + '/Guidedtour/visual_edition_template'));
}
} ],
allowAutomaticOkay: false,
allowAutomaticNext: false,
}).transition( function() {return 'intro';}).next('intro');
tour.step( {
name: 'intro',
title: 'Modification d\'une page',
description: 'Vous voici maintenant sur la page de tutoriel de la <b>Pomme</b>. Cette page a bien été amorcée, mais comporte encore quelques erreurs! <br> <br> <small>N\'ayez crainte, il ne s\'agit pas de la vraie page, mais bien d\'une simulation. </small>',
overlay: true,
closeOnClickOutside : false,
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 'visual_editor';} )
.next( 'edit' );
tour.step( {
name: 'edit',
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',
closeOnClickOutside : false,
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 'visual_editor';} )
.next( 'editSection' ).back('intro');
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.<br>Modifier cette page afin de poursuivre le tutoriel.',
position: 'right',
attachTo: editSectionSelector,
closeOnClickOutside : false,
allowAutomaticOkay: false
} ).listenForMwHooks( 've.activationComplete')
.transition( function ( transitionEvent ) {
console.log('In transition');
if (transitionEvent.type === gt.TransitionEvent.BUILTIN &&!hasEditSection()) {
return gt.TransitionAction.HIDE;
} else {
return 'visual_editor';
}
} )
.back( 'edit' );
tour.step({
name: 'visual_editor',
title: 'Éditeur visuel',
description: 'Vous voici présentement dans l\'éditeur visuel de la page. C\'est dans cet environnement que vous pourrez modifier le texte et la mise en forme de la page.',
overlay: true,
closeOnClickOutside : false
}).next('ecrire_texte');
tour.step( {
name: 'ecrire_texte',
title: 'Corriger les erreurs',
description: 'La brève introduction de la page comporte plusieurs erreurs d\'orthographes. <br><i>La pomme est un fruit comestible produit par un pommier. Les pommiers sont <b>cultiv<u>és</u></b> mondialement et représentent l\'espèce la plus cultivée du genre Malus. Les pommes <b>son<u>t</u></b> cultivées depuis des milliers d\'années en Asie et en <b><u>E</u>urope</b> et ont été importées en Amérique du Nord par les colons européens. </i><br>Essayer de corriger ces erreurs d\'orthographe!',
position: 'bottomLeft',
attachTo: '.ve-ce-paragraphNode:contains(comestible)',
autoFocus: true,
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if ( ($( '.mw-content-ltr' )[1].textContent).includes("Europe") ) {
mw.libs.guiders.next();
} else {
alert( "Vous n'avez pas corrigé les fautes d\'orthographe \"cultivés\", \"sont\" et \"Europe\"!" );
}
}
} ],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'ecrire_texte_success' ).back('visual_editor');
tour.step( {
name: 'ecrire_texte_success',
title: 'Félicitations!',
description: 'Voyons maintenant comment personaliser le style d\'un texte!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'personaliser_style' ).back('ecrire_texte');
tour.step( {
name: 'personaliser_style',
title: 'Personaliser le style d\'un texte',
description: 'Il est possible de mettre du texte en gras ou en italique à l\'aide du menu déroulant ci-contre.',
attachTo: '.ve-ui-toolbar-group-style',
position: 'right',
closeOnClickOutside: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up group style observer
var mutationObserverGroupStyle = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group style is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")){
group_style_hook.fire();
mutationObserverGroupStyle.disconnect();
}
});
});
mutationObserverGroupStyle.observe(document.querySelector('.ve-ui-toolbar-group-style'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_style_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_style_hook'){
return 'personaliser_style_sub';
}
} ).next('personaliser_style_do').back('ecrire_texte_success');
tour.step( {
name: 'personaliser_style_sub',
title: 'Personaliser le style d\'un texte',
description: 'Il est possible de mettre du texte en gras ou en italique à l\'aide du menu déroulant ci-contre.',
attachTo: '.oo-ui-popupToolGroup-active-tools',
position: 'right',
closeOnClickOutside: false,
allowAutomaticOkay: false,
allowAutomaticNext: false,
onShow: function(){
// Set up group style observer
var mutationObserverGroupStyle = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group style is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")!==true){
group_bold_italic_hook.fire();
mutationObserverGroupStyle.disconnect();
}
});
});
mutationObserverGroupStyle.observe(document.querySelector('.ve-ui-toolbar-group-style'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_bold_italic_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_bold_italic_hook'){
return 'personaliser_style_do';
}
} ).back('personaliser_style');
tour.step( {
name: 'personaliser_style_do',
title: 'Personaliser le style d\'un texte',
description: 'Mettez un peu de piquant à l\'introduction en modifiant le style de la manière suivante: <br><br>La <b>pomme</b> est un fruit comestible produit par un pommier. Les pommiers sont cultivés mondialement et représentent l\'espèce la plus cultivée du genre <i>Malus</i>.',
attachTo: '.ve-ce-paragraphNode:contains(comestible)',
position: 'bottom',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if (($('.ve-ce-paragraphNode:contains(comestible)')[0].querySelectorAll("b").length > 0) && ($('.ve-ce-paragraphNode:contains(comestible)')[0].querySelectorAll("i").length > 0)){
mw.libs.guiders.next();
} else {
alert( "Mettez en gras le mot \"pomme\" et en italique le mot \"Malus\"!" );
}
}
} ],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next('personaliser_style_success').back('personaliser_style');
tour.step( {
name: 'personaliser_style_success',
title: 'Félicitations!',
description: 'Voyons maintenant comment créer des listes à puces!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'creer_liste_exemple' ).back('personaliser_style_do');
tour.step( {
name: 'creer_liste_exemple',
title: 'Créer une liste',
description: 'Les listes sont très utiles pour énumérer des éléments tout en attirant l\'attention du lecteur. La liste de <b>mets à base de pomme</b> ci-dessous est un très bon exemple.',
attachTo: '.ve-ce-paragraphNode:contains(mets à base de pomme)',
position: 'top',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'creer_liste_contre_exemple' ).back('personaliser_style_success');
tour.step( {
name: 'creer_liste_contre_exemple',
title: 'Créer une liste à puces',
description: 'Cependant, le créateur de cette page a oublié de mettre en liste la série de différentes boissons à base de pomme ci-dessus. Sélectionnez la série de boisson afin de la transformer en liste.',
attachTo: '.ve-ce-paragraphNode:contains(vinaigre)',
position: 'bottom',
closeOnClickOutside: false,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up selection change hook
document.addEventListener("selectionchange", detectListSelection, false);
}
} ).listenForMwHooks( 'selection_change_list_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'selection_change_list_hook'){
return 'creer_liste';
}
} ).next('creer_liste').back('creer_liste_exemple');
tour.step( {
name: 'creer_liste',
title: 'Créer une liste',
description: 'Il est possible de créer une liste à puces ou une liste numérotée à l\'aide du bouton ci-contre.',
attachTo: '.ve-ui-toolbar-group-structure',
position: 'right',
closeOnClickOutside: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up group structure observer
var mutationObserverGroupStructure = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group structure is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")){
group_structure_hook.fire();
mutationObserverGroupStructure.disconnect();
}
});
});
mutationObserverGroupStructure.observe(document.querySelector('.ve-ui-toolbar-group-structure'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_structure_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_structure_hook'){
return 'creer_liste_sub';
}
} ).next('creer_liste_do').back('creer_liste_contre_exemple');
tour.step( {
name: 'creer_liste_sub',
title: 'Créer une liste',
description: 'Il est possible de créer une liste à puces à l\'aide du bouton ci-contre.',
attachTo: '.oo-ui-tool-name-bullet',
position: 'right',
closeOnClickOutside: false,
allowAutomaticOkay: false,
allowAutomaticNext: false,
onShow: function(){
// Set up group bullet observer
var mutationObserverGroupStructure = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group structure is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")!==true){
group_bullet_hook.fire();
mutationObserverGroupStructure.disconnect();
}
});
});
mutationObserverGroupStructure.observe(document.querySelector('.ve-ui-toolbar-group-structure'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_bullet_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_bullet_hook'){
if ($('.ve-ce-paragraphNode:contains(calvados)')[0].parentElement.tagName == "LI"){
return 'creer_liste_success';
} else {
return 'creer_liste_do';
}
}
} ).back('creer_liste');
tour.step( {
name: 'creer_liste_do',
title: 'Créer une liste à puces',
description: 'Sélectionnez la série de boissons ci-dessus afin de la transformer en liste.',
attachTo: '.ve-ce-paragraphNode:contains(vinaigre)',
position: 'bottom',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if ($('.ve-ce-paragraphNode:contains(calvados)')[0].parentElement.tagName == "LI") {
mw.libs.guiders.next();
} else {
alert( "Essayez de transformez la série de boissons sous forme de liste!" );
}
}
} ],
allowAutomaticNext: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up selection change hook
document.addEventListener("selectionchange", detectListSelection, false);
}
} ).listenForMwHooks( 'selection_change_list_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'selection_change_list_hook'){
return 'creer_liste';
}
} ).next('creer_liste_success').back('creer_liste');
tour.step( {
name: 'creer_liste_success',
title: 'Félicitations!',
description: 'Voyons maintenant comment créer de nouvelles sections!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'creer_section_exemple' ).back('creer_liste_do');
tour.step( {
name: 'creer_section_exemple',
title: 'Créer une nouvelle section',
description: 'Il est possible de diviser une page en différentes sections. La section ci-dessous est par exemple celle de la <i><b>Consommation</i></b>.',
attachTo: '.ve-ce-contentBranchNode:contains(Consommation)',
position: 'top',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'creer_section_contre_exemple' ).back('creer_liste_success');
tour.step( {
name: 'creer_section_contre_exemple',
title: 'Créer une nouvelle section',
description: 'Cependant, le créateur de cette page a oublié de créer la section <i><b>Variétés</i></b>. Sélectionnez le texte afin de le transformer en section.',
attachTo: '.ve-ce-paragraphNode:contains(Variétés)',
position: 'top',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up selection change hook
document.addEventListener("selectionchange", detectSectionSelection, false);
}
} ).listenForMwHooks( 'selection_change_section_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'selection_change_section_hook'){
return 'creer_section';
}
} ).next('creer_section').back('creer_section_exemple');
tour.step( {
name: 'creer_section',
title: 'Créer une nouvelle section',
description: 'Le bouton <b>Paragraphe</b> ci-contre permet de créer la nouvelle section dans la page.',
attachTo: '.ve-ui-toolbar-group-format',
position: 'right',
autoFocus: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up group format observer
var mutationObserverGroupFormat = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group format is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")){
group_format_hook.fire();
mutationObserverGroupFormat.disconnect();
}
});
});
mutationObserverGroupFormat.observe(document.querySelector('.ve-ui-toolbar-group-format'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_format_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_format_hook'){
return 'creer_section_sub';
}
} ).next('creer_section_do').back('creer_section_contre_exemple');
tour.step( {
name: 'creer_section_sub',
title: 'Créer une section',
description: 'Il est possible de créer une nouvelle section à l\'aide du bouton ci-contre.',
attachTo: '.oo-ui-tool-name-heading2',
position: 'right',
autoFocus: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
allowAutomaticNext: false,
onShow: function(){
// Set up group bullet observer
var mutationObserverGroupStructure = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group structure is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")!==true){
group_section_hook.fire();
mutationObserverGroupStructure.disconnect();
}
});
});
mutationObserverGroupStructure.observe(document.querySelector('.ve-ui-toolbar-group-format'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_section_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_section_hook'){
if ($('.ve-ce-paragraphNode:contains(Variétés)').length === 0){
return 'creer_section_success';
} else {
return 'creer_section_do';
}
}
} ).back('creer_section');
tour.step( {
name: 'creer_section_do',
title: 'Créer une nouvelle section',
description: 'Sélectionnez le texte <b>Variétés</b> afin de le transformer en section.',
attachTo: '.ve-ce-paragraphNode:contains(Variétés)',
position: 'top',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if ($('.ve-ce-paragraphNode:contains(Variétés)').length === 0) {
mw.libs.guiders.next();
} else {
alert( "Essayez de créer la section Variétés!" );
}
}
} ],
allowAutomaticNext: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up selection change hook
document.addEventListener("selectionchange", detectSectionSelection, false);
}
} ).listenForMwHooks( 'selection_change_section_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'selection_change_section_hook'){
return 'creer_section';
}
} ).next('creer_section_success').back('creer_section');
tour.step( {
name: 'creer_section_success',
title: 'Félicitations!',
description: 'Voyons maintenant comment insérer un tableau!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'inserer_tableau_exemple' ).back('creer_section_do');
tour.step( {
name: 'inserer_tableau_exemple',
title: 'Insérer un tableau',
description: 'Les tableaux permettent de grouper efficacement de l\'information. Par exemple, le tableau ci-contre permet de résumer les statistiques des plus grands importateurs de pommes au monde.',
attachTo: '.ve-ce-tableNode',
position: 'right',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'inserer_tableau_contre_exemple' ).back('creer_section_success');
tour.step( {
name: 'inserer_tableau_contre_exemple',
title: 'Insérer un tableau',
description: 'Cependant, le créateur de cette page a oublié de mettre sous forme de tableau les statistiques des plus grands exportateurs de pommes ci-dessus.',
attachTo: '.ve-ce-paragraphNode:contains(Pologne)',
position: 'bottom',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false,
} ).next('inserer_tableau').back('inserer_tableau_exemple');
tour.step( {
name: 'inserer_tableau',
title: 'Insérer un tableau',
description: 'Afin d\'insérer un tableau, il suffit de cliquer sur le menu déroulant ci-contre et de choisir <b>Tableau</b>.',
attachTo: '.ve-ui-toolbar-group-insert',
position: 'right',
autoFocus: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up group insert observer
var mutationObserverGroupInsert = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group insert is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")){
group_insert_hook.fire();
mutationObserverGroupInsert.disconnect();
}
});
});
mutationObserverGroupInsert.observe(document.querySelector('.ve-ui-toolbar-group-insert'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_insert_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_insert_hook'){
return 'inserer_tableau_sub';
}
} ).next('inserer_tableau_do').back('inserer_tableau_contre_exemple');
tour.step( {
name: 'inserer_tableau_sub',
title: 'Insérer un tableau',
description: 'Il est possible d\'insérer un tableau à l\'aide du bouton ci-contre.',
attachTo: '.oo-ui-tool-name-insertTable',
position: 'right',
autoFocus: false,
closeOnClickOutside: false,
allowAutomaticOkay: false,
allowAutomaticNext: false,
onShow: function(){
// Set up group bullet observer
var mutationObserverGroupStructure = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group structure is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")!==true){
group_table_hook.fire();
mutationObserverGroupStructure.disconnect();
}
});
});
mutationObserverGroupStructure.observe(document.querySelector('.ve-ui-toolbar-group-insert'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_table_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_table_hook'){
return 'inserer_tableau_do';
}
} ).back('inserer_tableau');
tour.step( {
name: 'inserer_tableau_do',
title: 'Insérer un tableau',
description: 'Tentez de créer un tableau des exportateurs de pomme comme celui des importateurs!',
attachTo: '.ve-ce-paragraphNode:contains(Pologne)',
position: 'bottom',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if ($('.ve-ce-tableNode').length>1){
if ($('.ve-ce-tableNode')[1].textContent.includes('Italie') && $('.ve-ce-tableNode')[1].textContent.includes('États-Unis') && $('.ve-ce-tableNode')[1].textContent.includes('Pologne')) {
mw.libs.guiders.next();
}
} else {
alert( "Essayez de créer un tableau des exportateurs!" );
}
}
} ],
allowAutomaticOkay: false
} ).next('inserer_tableau_success').back('inserer_tableau');
tour.step( {
name: 'inserer_tableau_success',
title: 'Félicitations!',
description: 'Voyons maintenant comment insérer des liens!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticOkay: false
} ).next( 'ajouter_liens' ).back('inserer_tableau_do');
tour.step( {
name: 'ajouter_liens',
title: 'Ajouter des liens',
description: 'Afin de créer un lien vers une nouvelle page, il suffit de sélectionner le texte vers lequel on veut créer un lien et cliquer sur le bouton ci-contre! <br>Notez que si la page existe, le lien sera bleu. Dans le cas contraire, il sera rouge.',
position: 'bottom',
attachTo: '.ve-ui-toolbar-group-link',
autoFocus: true,
closeOnClickOutside: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up group link observer
var mutationObserverGroupLink = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group link is selected
group_link_hook.fire();
mutationObserverGroupLink.disconnect();
});
});
mutationObserverGroupLink.observe(document.querySelector('.ve-ui-toolbar-group-link'), {
attributes: true,
subtree: true
});
}
} ).listenForMwHooks( 'group_link_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_link_hook'){
return 'ajouter_liens_do';
}
} ).next( 'ajouter_liens_do' ).back('inserer_tableau_success');
tour.step( {
name: 'ajouter_liens_do',
title: 'Ajouter des liens',
description: 'Tentez de créer des liens vers les pages du <b>rhinocéros</b> et du <b>narval</b> de l\'introduction!',
position: 'top',
attachTo: '.ve-ce-paragraphNode:contains(unicorne)',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'okay',
onclick: function () {
wiki_links=($( '.mw-content-ltr' )[1].querySelectorAll(".ve-ce-linkAnnotation"));
for (const wiki_link of wiki_links) {
if (wiki_link.textContent.includes("narval")){
mw.libs.guiders.next();
return;
}
}
alert( "Vous n\'avez pas créer de liens vers la page \"Rhinocéros\" et \"Narval\"!" );
return;
}
} ],
allowAutomaticOkay: false
} ).next( 'ajouter_liens_success' ).back('ajouter_liens');
tour.step( {
name: 'ajouter_liens_success',
title: 'Félicitations!',
description: 'Les liens sont l\'une des plus grandes forces du Wiki, n\'hésitez pas à les utiliser. Voyons maintenant comment ajouter une source!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticOkay: false
} ).next( 'ajouter_source' ).back('ajouter_liens_do');
tour.step( {
name: 'ajouter_source',
title: 'Ajouter une source',
description: 'Afin d\'ajouter une source, il suffit sélectionner l\'endroit où l\'on souhaite ajouter une source et de cliquer sur le bouton ci-contre.',
position: 'right',
attachTo: '.ve-ui-toolbar-group-citoid',
autoFocus: true,
closeOnClickOutside: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up group citoid observer
var mutationObserverGroupCitoid = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group citoid is selected
group_citoid_hook.fire();
mutationObserverGroupCitoid.disconnect();
});
});
mutationObserverGroupCitoid.observe(document.querySelector('.ve-ui-toolbar-group-citoid'), {
attributes: true,
subtree: true
});
}
} ).listenForMwHooks( 'group_citoid_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_citoid_hook'){
return 'ajouter_source_do';
}
} ).next( 'ajouter_source_do' ).back('ajouter_liens_success');
tour.step( {
name: 'ajouter_source_do',
title: 'Ajouter une source',
description: 'La section <b>Représentations picturales de la licorne</b> parle de l\'ouvrage <i>Spiritualis unicorn</i>, mais ne le cite pas. Vous pouvez copier le lien suivant dans la boîte de dialogue afin de générer automatiquement votre source: <br><b>10.1177/1461957104056505</b>',
position: 'top',
attachTo: '.ve-ce-paragraphNode:contains(Spiritualis)',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'okay',
onclick: function () {
if ($( '.mw-content-ltr' )[1].querySelectorAll(".ve-ce-mwReferenceNode").length > 0) {
mw.libs.guiders.next();
} else {
alert( "Essayez d\'insérer une source avec le lien suivant: 10.1177/1461957104056505" );
}
}
} ],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'ajouter_source_success' ).back('ajouter_source');
tour.step( {
name: 'ajouter_source_success',
title: 'Félicitations!',
description: 'Il est important pour toutes pages de bien citer ses sources. Voyons maintenant comment ajouter des images!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'inserer_image' ).back('ajouter_source_do');
tour.step( {
name: 'inserer_image',
title: 'Ajouter une image',
description: 'Afin d\'insérer cette image, il suffit de cliquer sur le menu déroulant ci-contre et de choisir <b>Média</b>.',
position: 'right',
attachTo: '.ve-ui-toolbar-group-insert',
closeOnClickOutside: false,
allowAutomaticOkay: false,
onShow: function(){
// Set up group insert observer
var mutationObserverGroupInsert = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Set up the mutation observer to Fire hook if group insert is selected
if (mutation.target.classList.contains("oo-ui-popupToolGroup-active")){
group_insert_hook.fire();
mutationObserverGroupInsert.disconnect();
}
});
});
mutationObserverGroupInsert.observe(document.querySelector('.ve-ui-toolbar-group-insert'), {
attributes: true
});
}
} ).listenForMwHooks( 'group_insert_hook' )
.transition( function(transitionEvent) {
if (transitionEvent.hookName === 'group_insert_hook'){
return 'inserer_image_do';
}
} ).next( 'inserer_image_do' ).back('ajouter_source_success');
tour.step( {
name: 'inserer_image_do',
title: 'Ajouter une image',
description: 'L\'utilisateur décrit une peinture du français Gustave Moreau (1826-1898) dans la section <b>Représentations picturales de la licorne</b>. Il a cependant oublié d\'insérer l\'image en question! Afin d\'insérer cette image, il suffit de cliquer sur le menu déroulant ci-contre et de choisir <b>Média</b>. Recherche le terme <b>\"Licorne\"</b> dans la barre de recherche et l\'image de Gustave Moreau devrait apparaître! Vous pouvez même ajouter une description à l\'image!',
position: 'bottom',
attachTo: '.ve-ce-paragraphNode:contains(Spiritualis)',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if ($( '.mw-content-ltr' )[1].querySelectorAll(".ve-ce-mwBlockImageNode-thumbimage").length > 0) {
mw.libs.guiders.next();
} else {
alert( "Essayez d\'insérer l\'image de Gustave Moreau en recherchant le terme \"Licorne\"!" );
}
}
} ],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'inserer_image_success' ).back( 'inserer_image' );
tour.step( {
name: 'inserer_image_success',
title: 'Félicitations!',
description: 'Vous maîtrisez désormais la plupart des outils de l\'éditeur visuel! Si vous le désirez, prenez le temps d\'explorer et de pratiquer sur cette page les différents outils appris. C\'est la meilleure façon d\'apprendre!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'pointSavePage' ).back('inserer_image_do');
/*
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(transitionEvent){
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;
}
});
*/
tour.step( {
name: 'pointSavePage',
title: 'Sauvegarde',
description: 'Cliquez sur ce bouton si vous désirez sauvegarder vos changements. <br> Vous avez officiellement compléter le tutoriel de l\'éditeur visuel!',
attachTo: '.ve-ui-toolbar-saveButton',
position: 'bottomRight',
closeOnClickOutside: false
} ).listenForMwHooks( 've.deactivationComplete' )
.transition( function () {
if ( !gt.isEditing() ) {
return gt.TransitionAction.END;
}
} ).back('inserer_image_success');
}( mw.guidedTour ) );