MediaWiki:Guidedtour-tour-visual edition.js

// 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:
// Find a way to prevent close button or send a warning message if user tries to close the tour
// Find a way to callback on button click and transition tour using those callbacks (useful for image insertion, source insertion, etc)
// 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?)


// TO USE ANY PAGE INSTEAD of brouillon see

//https://en.wikipedia.org/wiki/MediaWiki:Guidedtour-tour-twa3.js
//buttons: [ {
//                        name: 'Head to Earth*',
 //                       onclick: function()  {  if(!mw.config.get('wgUserName')){  alert( "Please login." );   return;   } sendMessage( 'User:' + mw.config.get( 'wgUserName' ) + '/TWA/Earth', 'Wikipedia:TWA/Earth/1' , mw.util.getUrl( 'Special:MyPage/TWA/Earth' ) + '?tour=twa3&step=2'); }
      //          } ],  //Basically sendMessage=Create new page, see code in page

( 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' );

	tour = new gt.TourBuilder( {
		name: 'visual_edition',
		shouldLog: false,
		showConditionally: 'VisualEditor'
	} );
	
	tour.firstStep({
		name: 'overlay',
		title: 'Bienvenue dans ce premier guide Wikimedica!',
		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 telle 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> <small> N\'ayez crainte, il ne s\'agit pas de la vraie page, mais bien d\'une simulation. </small> <br> 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' );
	
	
	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,
		closeOnClickOutside : 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( 'intro' );
	
	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 bouton 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_do';
			}
		} ).next('personaliser_style_do').back('ecrire_texte_success');
	
	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,
		allowAutomaticNext: 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,
		allowAutomaticNext: 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,
		allowAutomaticNext: 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(Comparaison)',
		position: 'top',
		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!" );
				}
			}
		} ],
		allowAutomaticNext: false,
		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',
			}],
		allowAutomaticNext: false,
		allowAutomaticOkay: false
	} ).next( 'ajouter_liens' ).back('inserer_tableau_do');
	
	tour.step( {
		name: 'ajouter_liens',
		description: 'L\'une des plus grandes forces du Wiki est sa capacité d\'établir des liens entre les pages. 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: 'right',
		attachTo: '.ve-ui-toolbar-group-link',
		autoFocus: true,
		closeOnClickOutside: false,
		allowAutomaticNext: 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',
		description: 'Tentez de créer des liens vers les pages du <b>rhinocéros</b> et du <b>narval</b> de l\'introduction!',
		position: 'bottom',
		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;
			}
		} ],
		allowAutomaticNext: false,
		allowAutomaticOkay: false
	} ).next( 'ajouter_liens_success' ).back('ajouter_liens');
	
	tour.step( {
		name: 'ajouter_liens_success',
		title: 'Félicitations!',
		description: 'Voyons maintenant comment ajouter une source!',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		buttons: [ {
			action: 'next',
			}],
		allowAutomaticNext: false,
		allowAutomaticOkay: false
	} ).next( 'ajouter_source' ).back('ajouter_liens_do');
	
	tour.step( {
		name: 'ajouter_source',
		description: 'Il est important pour toutes pages de bien citer ses sources. La section <b>Représentations picturales de la licorne</b> parle par exemple de l\'ouvrage <i>Spiritualis unicorn</i>, mais ne le cite pas. Afin d\'ajouter une source, il suffit de cliquer sur le bouton ci-contre. Vous pouvez alors copier le lien suivant afin de générer automatiquement votre source: <br>  10.1177/1461957104056505',
		position: 'left',
		attachTo: '.oo-ui-tool-name-citefromid',
		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' );
	
	tour.step( {
		name: 'ajouter_source_success',
		title: 'Félicitations!',
		description: 'Voyons maintenant comment ajouter des liens vers d\'autres pages!',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		buttons: [ {
			action: 'next',
			}],
		allowAutomaticNext: false,
		allowAutomaticOkay: false
	} ).next( 'inserer_image' ).back('ajouter_source');

	
	tour.step( {
		name: 'inserer_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: 'left',
		attachTo: '.ve-test-toolbar-insert',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		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' );
	
	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');
	
	
	
	

	

    /*
	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;
			}
		} );

}( mw.guidedTour ) );