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:
// BIG BUG -> DOUBLE NEXT SI ON FAIT UN NEXT AVEC UN EVENT UNACTIF
// Better attach for Liste/Section/Tableau/Source



// 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;
	
	mw.loader.load(['oojs-ui']); // Provides the oo-ui-pendingElement-pending CSS class.
	
	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' : 'Création de la page de départ du tutoriel sur l\'édition visuelle',
						'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_link_window_hook = mw.hook( 'group_link_window_hook' );
	var group_citoid_hook = mw.hook( 'group_citoid_hook' );
	var group_citoid_window_hook =  mw.hook( 'group_citoid_window_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', detectSectionSelection);
		}
	}
	
	var selection_change_link_hook = mw.hook('selection_change_link_hook');
	function detectLinkSelection(event){
		if (window.getSelection().toString().includes('Asie') || window.getSelection().toString().includes('Amérique du Nord')){
			selection_change_link_hook.fire();	
			document.removeEventListener('selectionchange', detectLinkSelection);
		}
	}
	
	var selection_change_source_hook = mw.hook('selection_change_source_hook');
	function detectSourceSelection(event){
		if (window.getSelection().toString().includes('FAO 2013')){
			selection_change_source_hook.fire();	
			document.removeEventListener('selectionchange', detectSourceSelection);
		}
	}
	
	


	tour = new gt.TourBuilder( {
		name: 'visual_edition',
		shouldLog: false,
		showConditionally: 'VisualEditor'
	} );
	
	tour.firstStep({
		name: 'overlay',
		title: 'Wikimedica est bâti par vous et vos collègues',
		description: 'Wikimedica est une plateforme collaborative construite par ses utilisateurs. Dans ce guide, vous apprendrez à modifier une page. À la fin de ce guide, vous saurez comment rédiger de nouvelles sections, ajouter des tableaux et créer des liens vers d\'autres pages!',
		overlay: true,
		closeOnClickOutside : false,
		buttons: [ 
			{ name: 'Plus tard', type: 'destructive', classString: 'mw-tour-later', onclick: function() {} },
		]
	}).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 ces fenêtres ou quitter le tour</b>, 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;   
                	}
                	
                	// Display a loader during the transition to the tutorial's demo page.
                	$('.guider').addClass('oo-ui-pendingElement-pending');
                	
                	sendMessage( 'Utilisateur:' + mw.config.get( 'wgUserName' ) + '/Brouillons/Tutoriel_Édition_Visuelle', 'MediaWiki:Guidedtour-tour-visual_edition-template', mw.util.getUrl( 'Utilisateur:' + mw.config.get( 'wgUserName' ) + '/Brouillons/Tutoriel_Édition_Visuelle'));
                }
        } ],
        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 d\'une 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\'orthographe et de grammaire. <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: 'topLeft',
		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: 'bottomLeft',
		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',
		autoFocus: false,
		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',
		autoFocus: false,
		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: 'bottomLeft',
		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: 'topLeft',
		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: 'topLeft',
		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-dessus permet de créer la nouvelle section dans la page.',
		attachTo: '.ve-ui-toolbar-group-format',
		position: 'bottomRight',
		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 <b>Titre de section</b> 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: 'C\'est également à l\'aide de ce menu qu\'il est possible de créer des sous-sections, sous-sous-sections, etc. 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: 'bottomLeft',
		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>. <br>N\'oubliez pas de bien choisir préalablement l\'endoit où vous voulez insérer votre tableau!',
		attachTo: '.ve-ui-toolbar-group-insert',
		position: 'bottomRight',
		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: 'bottomLeft',
		closeOnClickOutside: false,
		buttons: [ {
			action: 'okay',
			onclick: function () {
				if ($('.ve-ce-tableNode').length>1){
					if ($('.ve-ce-tableNode')[1].textContent.includes('Pologne')) {
						mw.libs.guiders.next();
					}
					else {
						alert( "Essayez d\'ajouter dans votre tableau l\'information suivante:\n1er Italie 1 118 600 t\n 2ème États-Unis 1 041 400 t\n 3ème Pologne 889 900t" );
					}
				} 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_exemple' ).back('inserer_tableau_do');
	
	tour.step( {
		name: 'ajouter_liens_exemple',
		title: 'Ajouter des liens',
		description: 'Les liens sont l\'une des plus grande force du Wiki. Ils permettent de lier avec des mots-clés différentes pages ensemble. Par exemple, il existe un lien ci-dessous pour le mot-clé <b>Chine</b>. <br>Lorsqu\'un lien est bleu, il est alors possible de cliquer ce dernier pour accéder la page en question. Si le lien est rouge, cela signifie que la page n\'a pas encore été créée!',
		attachTo: '.ve-ce-annotation:contains(Chine)',
		position: 'topLeft',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		buttons: [ {
			action: 'next',
			}],
		allowAutomaticNext: false,
		allowAutomaticOkay: false
	} ).next( 'ajouter_liens_contre_exemple' ).back('inserer_tableau_success');
	
	tour.step( {
		name: 'ajouter_liens_contre_exemple',
		title: 'Ajouter des liens',
		description: 'Il serait intéressant d\'ajouter des liens vers les pages <b>Asie</b> et <b>Amérique du Nord</b>. Pour ce faire, sélectionnez d\'abord ces mots.',
		attachTo: '.ve-ce-paragraphNode:contains(comestible)',
		position: 'bottom',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		buttons: [ {
			action: 'next',
			}],
		allowAutomaticNext: false,
		allowAutomaticOkay: false,
		onShow: function(){
			// Set up selection change hook
			document.addEventListener("selectionchange", detectLinkSelection, false);
		}
	} ).listenForMwHooks( 'selection_change_link_hook' )
	.transition( function(transitionEvent) {
		if (transitionEvent.hookName === 'selection_change_link_hook'){
				return 'ajouter_liens';
			}
		} ).next('ajouter_liens').back('ajouter_liens_exemple');
	
	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 pour lequel un lien souhaite être créé 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: false,
		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
						setTimeout(function () {
								group_link_hook.fire();
					    }, 500); // Otherwise '.ve-ui-toolbar-group-link' appears after next 
						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_sub';
			}
		} ).next( 'ajouter_liens_do' ).back('ajouter_liens_contre_exemple');
	
	
	tour.step( {
		name: 'ajouter_liens_sub',
		title: 'Ajouter des liens',
		description: 'Afin d\'ajouter le lien, il suffit de cliquer sur le bouton <b>Terminer</b> ci-contre.',
		attachTo: '.oo-ui-processDialog-actions-primary', //'.ve-ui-mwLinkAnnotationInspector',
		position: 'topLeft',
		autoFocus: true,
		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
						setTimeout(function () {
								group_link_window_hook.fire();
					    }, 250); // Otherwise might think cancel is annotation
						mutationObserverGroupStructure.disconnect();
					});
				});
				mutationObserverGroupStructure.observe(document.querySelector('.ve-ui-mwLinkAnnotationInspector'), {
					attributes: true
				});
		}
	} ).listenForMwHooks( 'group_link_window_hook' )
	.transition( function(transitionEvent) {
		if (transitionEvent.hookName === 'group_link_window_hook'){
				if ($('.ve-ce-annotation:contains(Amérique du Nord)').length>0 && $('.ve-ce-annotation:contains(Asie)').length>0){
					return 'ajouter_liens_success';
				} else {
					return 'ajouter_liens_do';
				}
			}
		} ).back('ajouter_liens');
	
	
	tour.step( {
		name: 'ajouter_liens_do',
		title: 'Ajouter des liens',
		description: 'Tentez de créer des liens vers les pages du <b>Asie</b> et du <b>Amérique du Nord</b> de l\'introduction!',
		position: 'bottom',
		attachTo: '.ve-ce-paragraphNode:contains(comestible)',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		buttons: [ {
			action: 'okay',
			onclick: function () {
				if ($('.ve-ce-annotation:contains(Amérique du Nord)').length>0 && $('.ve-ce-annotation:contains(Asie)')){
					mw.libs.guiders.next();
				} else {
					alert( "Vous n\'avez pas créer de liens vers la page \"Asie\" et \"Amérique du Nord\"!" );
				}
			}
		} ],
		allowAutomaticOkay: false,
		onShow: function(){
			// Set up selection change hook
			document.addEventListener("selectionchange", detectLinkSelection, false);
		}
	} ).listenForMwHooks( 'selection_change_link_hook' )
	.transition( function(transitionEvent) {
		if (transitionEvent.hookName === 'selection_change_link_hook'){
				return 'ajouter_liens';
			}
		} ).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_exemple' ).back('ajouter_liens_do');
	
	tour.step( {
		name: 'ajouter_source_exemple',
		title: 'Citer une source',
		description: 'Lorsqu\'une statistique ou tout autre information est rapportée, il est essentiel de bien citer les sources nécessaires. Par exemple, une source a été ajoutée à la section <b>Variétés</b>.',
		attachTo: '.ve-ce-mwReferenceNode:contains(1)',
		position: 'right',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		buttons: [ {
			action: 'next',
			}],
		allowAutomaticNext: false,
		allowAutomaticOkay: false
	} ).next( 'ajouter_source_exemple_2' ).back('ajouter_liens_success');
	
	tour.step( {
		name: 'ajouter_source_exemple_2',
		title: 'Citer une source',
		description: 'Chaque source ajoutée sur la page se retrouve par la suite dans la section <b>Références</b>.',
		attachTo: '.ve-ce-contentBranchNode:contains(Références)',
		position: 'top',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		buttons: [ {
			action: 'next',
			}],
		allowAutomaticNext: false,
		allowAutomaticOkay: false
	} ).next( 'ajouter_source_contre_exemple' ).back('ajouter_source_exemple');
	
	tour.step( {
		name: 'ajouter_source_contre_exemple',
		title: 'Citer une source',
		description: 'La section <b>Consommation</b> fait mention de la source <b>FAO 2013</b>, mais cette dernière n\'est pas présente dans les références. Sélectionnez d\'abord le paragraphe dont la source est question.',
		attachTo: '.ve-ce-paragraphNode:contains(FAO)',
		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", detectSourceSelection, false);
		}
	} ).listenForMwHooks( 'selection_change_source_hook' )
	.transition( function(transitionEvent) {
		if (transitionEvent.hookName === 'selection_change_source_hook'){
				return 'ajouter_source';
			}
		} ).next('ajouter_source').back('ajouter_source_exemple_2');
	
	
	tour.step( {
		name: 'ajouter_source',
		title: 'Citer une source',
		description: 'Afin d\'ajouter une source, il suffit sélectionner l\'endroit où une source souhaite être ajoutée et de cliquer sur le bouton ci-contre.',
		position: 'bottom',
		attachTo: '.ve-ui-toolbar-group-citoid',
		autoFocus: false,
		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
						setTimeout(function () {
								group_citoid_hook.fire();
					    }, 500); // Otherwise '.ve-ui-toolbar-group-citoid' appears after next 
						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_sub';
			}
		} ).next( 'ajouter_source_do' ).back('ajouter_source_contre_exemple');
		
	tour.step( {
		name: 'ajouter_source_sub',
		title: 'Citer une source',
		description: 'Afin de citer une source, il suffit de copier l\'URL, le DOI, l\'ISBN, etc. dans la boîte de texte ci-dessus, puis de cliquer sur <b>Générer</b>.<br>Dans le cas notre source, le lien à ajouter est <b>http://www.fao.org/faostat/en/#data/QC</b>   .',
		attachTo: '.oo-ui-textInputWidget-type-text', //'.ve-ui-citoidInspector',
		position: 'bottom',
		autoFocus: true,
		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
						setTimeout(function () {
								group_citoid_window_hook.fire();
					    }, 500);
						mutationObserverGroupStructure.disconnect();
					});
				});
				mutationObserverGroupStructure.observe(document.querySelector('.ve-ui-citoidInspector'), {
					attributes: true
				});
		}
	} ).listenForMwHooks( 'group_citoid_window_hook' )
	.transition( function(transitionEvent) {
		if (transitionEvent.hookName === 'group_citoid_window_hook'){
				if ($('.ve-ce-mwReferenceNode:not(.ve-ce-mwReferenceNode-placeholder)').length>1){ // Better verification??
					return 'ajouter_source_success';
				} else {
					return 'ajouter_source_do';
				}
			}
		} ).back('ajouter_source');
	
	
	tour.step( {
		name: 'ajouter_source_do',
		title: 'Citer une source',
		description: 'La section <b>Consommation</b> fait mention de la source <b>FAO 2013</b>, mais cette dernière n\'est pas présente dans les références. Sélectionnez d\'abord le paragraphe dont la source est question pour citer une nouvelle source. <br> Le lien à ajouter est <b>http://www.fao.org/faostat/en/#data/QC</b> .',
		position: 'top',
		attachTo: '.ve-ce-paragraphNode:contains(FAO)',
		autoFocus: true,
		closeOnClickOutside: false,
		overlay: true,
		buttons: [ {
			action: 'okay',
			onclick: function () {
				if ($('.ve-ce-mwReferenceNode:not(.ve-ce-mwReferenceNode-placeholder)').length>1) {
					mw.libs.guiders.next();
				} else {
					alert( "Essayez d\'insérer une source avec le lien suivant:  http://www.fao.org/faostat/en/#data/QC" );
				}
			}
		} ],
		allowAutomaticNext: false,
		allowAutomaticOkay: false,
		onShow: function(){
			// Set up selection change hook
			document.addEventListener("selectionchange", detectSourceSelection, false);
		}
	} ).listenForMwHooks( 'selection_change_source_hook' )
	.transition( function(transitionEvent) {
		if (transitionEvent.hookName === 'selection_change_source_hook'){
				return 'ajouter_source';
			}
		} ).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.<br>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('ajouter_source_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('ajouter_source_success');

}( mw.guidedTour ) );