Discussion utilisateur:Dr Brains/MagicSidebox.js
 Moi |  Bla-bla |  Contributions |  Travaux |  Outils |  Scripts |  Bot |  Administration |  Bureaucratie |  Divers |
|
Après une première attaque au début d'octobre 2011, Wikipédia est morte le . Elle ne le sait pas encore, alors soyez gentil et essayez de le lui faire comprendre sans être trop brusque. Merci pour elle et condoléances à la famille. |
|
 |
 Vous êtes ici sur la page personnelle d’un utilisateur de Wikipédia en français. Si vous avez accédé à cette page depuis un autre site que celui de Wikipédia en français, c’est que vous êtes sur un site miroir ou un site qui fait de la réutilisation de contenu. Cette page n’est peut-être pas à jour et l’utilisateur identifié n’a probablement aucune affiliation avec le site sur lequel vous vous trouvez. L’original de cette page se trouve à l'adresse suivante : https://fr.wikipedia.org/wiki/Discussion utilisateur:Dr Brains/MagicSidebox.js. |
|
 Archives
| |
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 lors d'un changement de page.
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
Utilisation
Habillage
Ce script fonctionne uniquement avec l'habillage Monobook. Une version pour Vector/Açai est à l'étude.
Navigateur
Ce script fonctionne correctement avec
- Firefox 3.5
Il ne marche pas avec
- Internet explorer 7
Les autres navigateurs n'ont pas été testés. Vous pouvez mettre à jour cette liste si vous le souhaitez.
Caractéristiques
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 :
- Le logo (qui ne peut pas être déplacé directement mais peut descendre en plaçant une autre boîte au-dessus),
- la boîte "Favoris",
- la boîte de recherche,
- la boîte "Navigation",
- la boîte "Contribuer,
- la boîte "Créer un livre", due à l'extension collection installée sur Wikipédia,
- la boîte "Catégories",
- la boîte à outils,
- la boîte "Autres projets",
- la boîte "Autres langues".
Relations avec d'autres scripts
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
Deux codes sont nécessaire :
- un programme Javascript
- une feuille de style CSS
Deux possibilités pour installer ce gadget :
- Importer via un élément <script> et un élément <link> dans son monobook.js
- Copier entièrement le code source dans des sous-pages personnelles.
Importer
Pour importer le script, ajouter dans votre page monobook.js le code suivant :
document.write('<script type="text/javascript" src="'
+ 'http://fr.wikipedia.org/w/index.php?title=Utilisateur:Dr_Brains/MagicSidebox.js'
+ '&action=raw&ctype=text/javascript&dontcountme=s"></script>');
document.write('<link rel="stylesheet" type="text/css" href="'
+ 'http://fr.wikipedia.org/w/index.php?title=Utilisateur:Dr_Brains/MagicSidebox.css'
+ '&action=raw&ctype=text/css&dontcountme=s">');
|
Ceci importera le code tel qu'il se trouve sur les pages Utilisateur:Dr Brains/MagicSidebox.js et Utilisateur:Dr Brains/MagicSidebox.css
L'avantage de cette méthode est la simplicité, l'inconvénient est l'absence de personnalisation.
Copier
Pour pouvoir personnaliser le script, il est nécessaire de
- copier le code contenu dans Utilisateur:Dr Brains/MagicSidebox.js dans une sous page personnelle, par exemple Utilisateur:<VOTRE NOM>/MagicSidebox.js
- copier le code contenu dans Utilisateur:Dr Brains/MagicSidebox.css dans une sous page personnelle, par exemple Utilisateur:<VOTRE NOM>/MagicSidebox.css
- 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="'
+ 'http://fr.wikipedia.org/w/index.php?title=PAGE_OÙ_LE_CODE_JS_A_ÉTÉ_COPIÉ'
+ '&action=raw&ctype=text/javascript&dontcountme=s"></script>');
document.write('<link rel="stylesheet" type="text/css" href="'
+ 'http://fr.wikipedia.org/w/index.php?title=PAGE_OÙ_LE_CODE_CSS_A_ÉTÉ_COPIÉ'
+ '&action=raw&ctype=text/css&dontcountme=s">');
|
Cette méthode permet la personnalisation du script, et notamment le retrait de boîtes jugées inutiles ou indésirables.
Personnaliser le script
Masquer des boîtes
Il est possible de masquer une ou plusieurs boîtes.
Pour cela, modifier la valeur des variables dans la partie personnalisable du 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 DisplayLProjectsPortlet = true; // Affichage (ou pas) de la boîte "Autres projet"
var DisplayLangPortlet = true; // Affichage (ou pas) des interwikis
////////////////////////////////////////////////////////////////////// PARTIE PERSONNALISABLE /////////////////////////////////////////////////////////////////////////////
|
Il est à noter que la boîte "autres projets" ne peut pas être supprimée de la sorte, car la fonction qui crée la boîte originale, sur MediaWiki:Common.js, ne lui donne pas d'Id, ce qui la rend difficilement manipulable.
Lorsque la modif demandée Ici aura été accomplie, ces lignes :
// if( DisplayLProjectsPortlet == false){ // Affichage (ou pas) de la boîte "Autres projet" (ne marche pas)
// var RemoveDbx = document.getElementById("p-projects");
// document=document.getElementById("column-one").removeChild(RemoveDbx);
// }
|
qui sont situées plus bas dans la fonction principale, pourront être décommentées ce qui permettra de supprimer la boîte avec la méthode décrite plus haut. (les décommenter avant supprimerait la "fausse boîte", crée par ce script, mais pas la vraie, ce qui amènerait le problème évoqué plus haut du nombre de boîtes variable)
Modifier l'aspect des boîtes
L'aspect des boîtes est géré par la feuille de style CSS, qui détermine l'aspect des différentes classes d'éléments.
En HTML, la page se présente désormais comme ceci :
<div class="container13" id="globalWrapper">
<div class="dbx-group" id="sidebox">
<div class="portlet" id="p-personal" ></div> // Liens personnels, en haut à droite de l'écran
<div class="portlet" id="p-cactions" ></div> // Onglets, en haut de la page
<div class="dbx-box" id="ID DE LA BOÎTE" >
<div class="dbx-handle"><h5>TITRE DE LA BOÎTE</h5></div>
<div class="dbx-content">
CONTENU DE LA BOÎTE
</div>
</div>
[ d'autres boîtes de classe "dbx-box" ... ]
</div>
<div id="column-content"></div> // Contenu de la page
<div id="footer"></div> // Bas de page
</div>
|
Ce sont donc ces classes qui sont utilisées pour déterminer l'aspect des boîtes. Il est possible de modifier la couleur, la bordure, l'espacement, etc... de ces différentes classes.
Deux images, situées sur Commons, sont également utilisées pour le fond de titre de la boîte et l'aspect du bouton. (Le lien à utiliser n'est pas celui de la page Commons mais celui de l'image elle-même)
Questions et problèmes
Merci d'utiliser le lien en haut à droite de cette page. 