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:
// 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
// Ask Antoine how to know which callbacks are called (ex: listenForMwHooks('ve.toolbarSaveButton.stateChanged' )) How to figure 've.toolbarSaveButton.stateChanged'?
// Ask Antoine how to create pratice page in user/EXAMPLE like twa tours
// Maybe switch from alert to another Tour window?
// FIX BUG WHERE PAGE APPEARS ON SECOND TRY
// Complete tour with
// * Image insertion
// * List insertion
// * Symbol insertion
// * Link insertion
// * Source insertion
// 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\'exerice',
'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;
} );
} );
});
});
}
});
}
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 accompagnez 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 'ecrire_texte';} )
.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 'ecrire_texte';
}
} )
.back( 'intro' );
tour.step( {
name: 'ecrire_texte',
description: 'Afin d\'écrire du texte, vous pouvez simplement cliquer à l\'endroit où vous désirez écrire, et taper le texte désirez.<br> 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-contentBranchNode:eq(0)',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
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' );
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: 'Afin de personnaliser le style d\'un texte, il suffit de cliquer sur le menu déroulant ci-contre. <br> 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-test-toolbar-style',
position: 'right',
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('ecrire_texte_success');
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');
tour.step( {
name: 'creer_liste',
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-test-toolbar-structure',
position: 'right',
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('personaliser_style_success');
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');
tour.step( {
name: 'creer_section',
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 ci-contre.',
attachTo: '.ve-test-toolbar-format',
position: 'right',
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('ecrire_texte_success');
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');
tour.step( {
name: 'inserer_tableau',
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. Afin d\'insérer un tableau, il suffit de cliquer sur le menu déroulant ci-contre et de choisir <b>Tableau</b>. <br> Tentez de corriger le travail de l\'utilisateur précédent. N\'oubliez pas de donner un titre à votre tableau!',
attachTo: '.ve-test-toolbar-insert',
position: 'right',
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('creer_section_success');
tour.step( {
name: 'inserer_tableau_success',
title: 'Félicitations!',
description: 'Voyons maintenant comment insérer une image!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'inserer_image' ).back('inserer_tableau');
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: 'Voyons maintenant comment ajouter une source!',
autoFocus: true,
closeOnClickOutside: false,
overlay: true,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false
} ).next( 'ajouter_source' ).back('inserer_image');
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( 'pointSavePage' );
/*
tour.step( {
name: 'creer_section',
description: 'Afin de créer des sections, il suffit de choisir la mise en forme désirée dans le bouton <b>Paragraphe<b>',
attachTo: '.ve-ui-toolbar-saveButton', //'.oo-ui-labelElement',
positon: 'top',
closeOnClickOutside: false,
buttons: [ {
action: 'next',
}],
allowAutomaticNext: false,
allowAutomaticOkay: false,
} ).next( 'pointSavePage' ).back('ecrire_texte_success');
*/
/*
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 pour sauvegarder vos changements.',
attachTo: '.ve-ui-toolbar-saveButton',
position: 'bottomRight',
closeOnClickOutside: false
} ).listenForMwHooks( 've.deactivationComplete' )
.transition( function () {
if ( !gt.isEditing() ) {
return gt.TransitionAction.END;
}
} );
}( mw.guidedTour ) );