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:
// 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_structure_hook = mw.hook( 'group_structure_hook' );
var group_format_hook = mw.hook( 'group_format_hook' );
var group_insert_hook = mw.hook( 'group_insert_hook' );
var group_link_hook = mw.hook( 'group_link_hook' );
var group_citoid_hook = mw.hook( 'group_citoid_hook' );
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>Licorne</b>. Comme vous pouvez le voir, il y a place à beaucoup d\'amélioration! <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 comportent plusieurs erreurs d\'orthographes. <br><i>La licorne, parfois nommée unicorne, est une créature <b>léganderre</b> à corne unique. Son origine, controversée, résulte de multiples influences, en particulier de descriptions d\'<b>animos</b> tels que le rhinocéros et le narval, issues de récits d\'<b>essplorateurs</b>. </i><br>Essayer de corriger ces erreurs d\'orthographe!',
position: 'bottom',
attachTo: '.ve-ce-paragraphNode:contains(unicorne)',
autoFocus: true,
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if ( ($( '.mw-content-ltr' )[1].textContent).includes("explorateurs") ) {
mw.libs.guiders.next();
} else {
alert( "Vous n'avez pas corrigé les fautes d\'orthographe \"léganderre\", \"animos\" et \"essplorateurs\"!" );
}
}
} ],
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,
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_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';
}
} ).next('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>licorne</b>, parfois nommée <i>unicorne</i>, est une créature légendaire à corne unique',
attachTo: '.ve-ce-paragraphNode:contains(unicorne)',
position: 'bottom',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if (($( '.mw-content-ltr' )[1].querySelectorAll("b").length > 0) && ($( '.mw-content-ltr' )[1].querySelectorAll("i").length > 0)){
mw.libs.guiders.next();
} else {
alert( "Mettez en gras l\'expression \"licorne\" et en italique l\'expression \"unicorne\"!" );
}
}
} ],
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' ).back('personaliser_style_do');
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_do';
}
} ).next('creer_liste_do').back('personaliser_style_success');
tour.step( {
name: 'creer_liste_do',
title: 'Créer une liste à puces',
description: 'L\'utilisateur qui a créé cette page voulait créer une liste des <b>Pouvoirs magiques</b>. Toutefois, il s\'est résigné à employer des tirets parce qu\'il ne savait pas comment créer une liste à puces. <br>Afin de créer une liste à puces, il suffit de sélectionner la liste à créer et de choisir <i>Listes à puces</i> dans le menu déroulant ci-contre.<br> Tentez de corriger l\'erreur de l\'utilisateur précédent!',
attachTo: '.ve-ce-paragraphNode:contains(Vol)',
position: 'bottom',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if ($( '.mw-content-ltr' )[1].querySelectorAll("ul").length > 0) {
mw.libs.guiders.next();
} else {
alert( "Essayez de mettre \"Guérison\", \"Illusion\" et \"Vol\" sous forme de liste!" );
}
}
} ],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).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' ).back('creer_liste_do');
tour.step( {
name: 'creer_section',
title: 'Créer une nouvelle section',
description: 'Le bouton <b>Paragraphe</b> ci-contre permet de créer de nouvelles sections et sous-sections dans la page.',
attachTo: '.ve-ui-toolbar-group-format',
position: 'right',
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_do';
}
} ).next('creer_section_do').back('ecrire_texte_success');
tour.step( {
name: 'creer_section_do',
title: 'Créer une nouvelle section',
description: 'L\'utilisateur qui a créé cette page n\'a pas pris soin de bien créer les sections <b>Pouvoirs magiques</b>, <b>Comparaison avec animaux</b> et <b>Représentations picturales de la licorne</b>. Afin de créer des sections, il suffit de sélectionner le texte et de choisir la mise en forme <i>Titre de section</i> dans le menu déroulant <b>Paragraphe</b>.',
attachTo: '.ve-ce-paragraphNode:contains(picturales)',
position: 'top',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
sections=($( '.mw-content-ltr' )[1].querySelectorAll("h2"));
for (const section of sections) {
if (section.textContent.includes("Représentations picturales de la licorne")){
mw.libs.guiders.next();
return;
}
}
alert( "Vous n'avez pas créé les sections \"Pouvoirs magiques\", \"Comparaison avec animaux\" et \"Représentations picturales de la licorne\" . Réessayez!" );
return;
}
} ],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).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' ).back('creer_section_do');
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',
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_do';
}
} ).next('inserer_tableau_do').back('creer_section_success');
tour.step( {
name: 'inserer_tableau_do',
title: 'Insérer un tableau',
description: 'L\'utilisateur qui a créé cette page voulait créer un tableau de comparaison. Malheuresement, il ne savait pas comment insérer un tableau.<br> Tentez de corriger le travail de l\'utilisateur précédent. N\'oubliez pas de donner un titre à votre tableau!',
attachTo: '.ve-ce-paragraphNode:contains(Arctique)',
position: 'bottom',
closeOnClickOutside: false,
buttons: [ {
action: 'okay',
onclick: function () {
if ($( '.mw-content-ltr' )[1].querySelectorAll(".ve-ce-mwTableNode").length > 0){
captions_nodes = $( '.mw-content-ltr' )[1].querySelectorAll(".ve-ce-tableCaptionNode");
for (const caption_node of captions_nodes) {
if (caption_node.textContent !== ""){
mw.libs.guiders.next();
return;
}
}
alert( "Vous devez ajouter un titre à votre tableau. Réessayez!" );
} else {
alert( "Vous devez créer un tableau. Réessayez!" );
}
}
} ],
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 ) );