Aller au contenu

Discussion utilisateur:Dr Brains/MagicSidebox.js

Le contenu de la page n’est pas pris en charge dans d’autres langues.
Bistro du jour
Guilde de la semaine
Oracle de la semaine
Bulletin des patrouilleurs du mois
BA de la semaine
Bulletin des bureaucrates
Commons
Cat Cabal
Une page de Wikipédia, l'encyclopédie libre.
Moi 
Moi
 Bla-bla 
Bla-bla
 Contributions 
Contributions
 Travaux 
Travaux
 Outils 
Outils
 Scripts 
Scripts
 Bot 
Bot
 Administration 
Administration
 Bureaucratie 
Bureaucratie
 Divers 
Divers


Archives Archives

Récompenses Récompenses

Ajouter


Démonstration du script en action.

MagicSidebox est un script permettant de transformer la barre de navigation gauche pour permettre le Drag & Drop, autrement dit, les boîtes de la barre de navigation deviennent déroulante et réorganisables. L'ordre des boîtes ainsi que leur état (enroulées ou déroulées) sont enregistrés après chaque modification sur un cookie local dans l'ordinateur de l'utilisateur. Ces informations ne se perdent donc pas après un changement de page ou la fermeture du navigateur.

Il est basé sur le script "Docking Boxes" version 2.05, dont la dernière version est disponible ici. La version 2.05 peut être téléchargée ici, où elle est utilisée dans un skin perso pour faire précisément ce que fait MagicSidebox. Ce skin, et donc l'équivalent du présent script, peut être testé ici.

Description

[modifier le code]

Utilisation

[modifier le code]

Habillage

[modifier le code]

Ce script fonctionne uniquement avec l'habillage Monobook.

Une version pour Vector/Açai est disponible sur la page Utilisateur:Dr Brains/VectorMagicSidebox.js.

[modifier le code]

Ce script fonctionne correctement avec

  • Firefox 3.5
  • Opera 10
  • Google Chrome 3

Il ne marche pas avec

  • Internet explorer 7 et 8

Caractéristiques

[modifier le code]

Le script effectue plusieurs opérations avant la "transformation", dues au fait que le nombre de boîtes DOIT être constant sur toutes les pages. En effet, si une page n'a pas le même nombre de boîtes que ce qui est enregistré sur le cookie, l'ordre des boîtes est perdu.

Or, certaines boîtes n'apparaissent que sous condition.

C'est la cas pour :

  • Les liens interwikis
  • Les liens "Autres projets" (liens vers Commons, WikiBook, etc...)
  • Les catégories lors de l'utilisation du gadget MediaWiki:Gadget-CatsaGauche.js

Pour palier à ce défaut, le script teste donc si ces boîtes sont présentes, et si ce n'est pas le cas, il crée en une "fausse" pour faire le nombre. Dans le cas des catégories, une version modifiée du gadget est utilisée pour créer la boîte. Aussi, CatsaGauche ne doit pas être utilisé car il créerait une autre boîte (non permanente donc amenant le défaut expliqué plus haut).

Une version light (monobook uniquement) de Utilisateur:Dr Brains/favoris.js est également utilisée pour ajouter un panneau "favoris" où les utilisateurs peuvent stocker des liens vers leurs pages favorites.

Les boîtes ré-organisables sont donc, dans l'ordre initial :

  1. Le logo (qui ne peut pas être déplacé directement mais peut descendre en plaçant une autre boîte au-dessus),
  2. la boîte "Favoris",
  3. la boîte de recherche,
  4. la boîte "Navigation",
  5. la boîte "Contribuer,
  6. la boîte "Créer un livre", due à l'extension collection installée sur Wikipédia,
  7. la boîte "Catégories",
  8. la boîte à outils,
  9. la boîte "Autres projets",
  10. la boîte "Autres langues".

Relations avec d'autres scripts

[modifier le code]

Ce script transforme beaucoup d'éléments de la page et pourrait entrer en conflit avec un autre script. Par conséquent, il doit être appelé en tout dernier dans le monobook.

Pour info, parmi les modifications effectuées :

  • Tous les élément de classe "portlet" et "pBody" (sauf deux, les liens perso et les onglets) sont transformés respectivement en "dbx-box" et "dbx-content",
  • Le <div> de gauche reçoit la classe "dbx-group" et son Id est modifiée : elle passe de "column-one" à "sidebox" (le script qui gère les boîtes ne veut pas de tiret).
  • Le <div> "globalWrapper" (le <div> principal, qui inclue tous les éléments de la page) reçoit la classe "container13".

Installer le script

[modifier le code]

Deux possibilités pour installer ce gadget :

Pour importer le script, ajouter dans votre page monobook.js le code suivant :

document.write('<script type="text/javascript" src="'
+ 'https://fr.wikipedia.org/w/index.php?title=Utilisateur:Dr_Brains/MagicSidebox.js'
+ '&action=raw&ctype=text/javascript&dontcountme=s"></script>');

Ceci importera le code tel qu'il se trouve sur la page Utilisateur:Dr Brains/MagicSidebox.js

L'avantage de cette méthode est la simplicité, l'inconvénient est l'absence de personnalisation, ou plutôt l'obligation d'avoir la même que la mienne.

Pour pouvoir personnaliser le script, il est nécessaire de

  1. copier les deux parties du code javascript dans une sous page personnelle, par exemple Utilisateur:<VOTRE NOM>/MagicSidebox.js
  2. ajouter à votre page monobook le code suivant en remplaçant le texte en majuscules par les pages utilisées pour les opérations précédentes (remplacer les espaces par des underscores : shift + 8 ) :
document.write('<script type="text/javascript" src="'
+ 'https://fr.wikipedia.org/w/index.php?title=PAGE_OÙ_LE_CODE_JS_A_ÉTÉ_COPIÉ'
+ '&action=raw&ctype=text/javascript&dontcountme=s"></script>');

Cette méthode permet la personnalisation du script, et notamment le retrait de boîtes jugées inutiles ou indésirables.

Personnaliser le script

[modifier le code]

Masquer des boîtes

[modifier le code]

Il est possible de masquer une ou plusieurs boîtes.

Pour cela, modifier la valeur des variables dans la première partie personnalisable du code Javascript (voir ci-dessous). Les valeurs possibles sont true ou false. Par défaut, toutes sont à true.

////////////////////////////////////////////////////////////////////// PARTIE PERSONNALISABLE /////////////////////////////////////////////////////////////////////////////
 
var DisplayLogoPortlet = true;                     // Affichage (ou pas) du logo
 
var DisplayFavoritesPortlet = true;                // Affichage (ou pas) des favoris
 
var DisplaySearchPortlet = true;                   // Affichage (ou pas) de la boîte de recherche
 
var DisplayNavigationPortlet = true;               // Affichage (ou pas) de la boîte "Navigation"
 
var DisplayContribuerPortlet = true;               // Affichage (ou pas) de la boîte "Contribuer"
 
var DisplayBookPortlet = true;                     // Affichage (ou pas) de la boîte "Créer un livre"
 
var DisplayCategoriesPortlet = true;               // Affichage (ou pas) de la boîte "Catégories"
 
var DisplayToolboxPortlet = true;                  // Affichage (ou pas) de la boîte à outils
 
var DisplayProjectsPortlet = true;                // Affichage (ou pas) de la boîte "Autres projet"
 
var DisplayLangPortlet = true;                     // Affichage (ou pas) des interwikis
 
////////////////////////////////////////////////////////////////////// PARTIE PERSONNALISABLE /////////////////////////////////////////////////////////////////////////////

Modifier le comportement des boîtes

[modifier le code]

Certains paramètres peuvent être modifiés dans la deuxième partie personnalisable du code Javascript.

Les textes des popups sont également modifiables.

/////////////////////////////////////////////////////////////// PARTIE PERSONNALISABLE ///////////

		'no',			                          // restrict drag movement to container axis ['yes'|'no']
		'10', 			                          // animate re-ordering [frames per transition, or '0' for no effect]
		'yes', 		              	                  // include open/close toggle buttons ['yes'|'no']
		'open', 		                          // default state ['open'|'closed']

		'ouvrir', 		                          // word for "open", as in "open this box"
		'fermer', 		                          // word for "close", as in "close this box"
		'Cliquer et glisser pour déplacer cette boite',   // sentence for "move this box" by mouse
		'Cliquer pour %toggle% cette boîte',              // pattern-match sentence for "(open|close) this box" by mouse
		'Déplacer cette boîte avec le clavier',           // sentence for "move this box" by keyboard
		', ou utiliser une touche pour la %toggle%',      // pattern-match sentence-fragment for "(open|close) this box" by keyboard

////////////////////////////////////////////////////////////// FIN DE LA PARTIE PERSONNALISABLE /////////

CODE SOURCE

[modifier le code]
OSZAR »