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.
Démo boîte favoris
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 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 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 le comportement des boîtes
Certains paramètres peuvent être modifiés dans deuxième partie personnalisable.
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 ////////////////////////////////////////////////////////////////////
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"> // Page
<div class="dbx-group" id="sidebox"> // Colonne de gauche
<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" > // Exemple de boîte "dbx-box"
<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)
CODE SOURCE
MagicSidebox.js
Première partie : Modifications de l'affichage
/**************************************************************************
* Libère les panneaux de la barre de navigation gauche *
* *
* à appeler après tous les scripts créant des nouveaux panneaux *
* *
* Documentation : [[Discussion utilisateur:Dr Brains/MagicSidebox.js]] *
* *
* Remplace : *
* * MediaWiki:Gadget-CatsaGauche.js *
* * Utilisateur:Dr Brains/favoris.js *
* *
* A besoin de *
**(http://fr.wikipedia.org/wiki/Utilisateur:Dr Brains/MagicSidebox.js) *
**(http://fr.wikipedia.org/wiki/Utilisateur:Dr Brains/MagicSidebox.css) *
* *
* Fonctionne avec : *
* * Firefox 3.5 *
* *
* Ne fonctionne pas avec : *
* * Internet Explorer 7 *
* *
* Habillage Monobook uniquement *
* *
* Basé sur le script Docking Boxes version 2.05 (voir plus bas) *
* http://www.brothercake.com/site/resources/scripts/dbx/ *
* *
* [[Catégorie:MediaWiki:Fonction Monobook en JavaScript]] *
**************************************************************************/
//******************************************************************************************************************************** FONCTION PRINCIPALE
function MagicSidebar(){
////////////////////////////////////////////////////////////////////// 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 = false; // 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" (ne marche pas)
var DisplayLangPortlet = true; // Affichage (ou pas) des interwikis
////////////////////////////////////////////////////////////////////// PARTIE PERSONNALISABLE /////////////////////////////////////////////////////////////////////////////
// Boîtes additionnelles
var Fav_TEST = document.getElementById('p-fav');
if(!Fav_TEST){
addFavoritesPortlet();
}
var Cat_TEST = document.getElementById('p-cat');
if(!Cat_TEST){
addCatPortlet();
}
var Projets_TEST = document.getElementById('autres_projets');
if(!Projets_TEST){
addProjectPortlet();
}
var lang_TEST = document.getElementById("p-lang");
if (!lang_TEST){
addLangPortlet();
}
// Préférences
if( DisplayLogoPortlet == false){ // Affichage (ou pas) du logo
var RemoveDbx = document.getElementById("p-logo");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
if( DisplayFavoritesPortlet == false){ // Affichage (ou pas) de la boîte "favoris"
var RemoveDbx = document.getElementById("p-fav");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
if( DisplaySearchPortlet == false){ // Affichage (ou pas) de la boîte de recherche
var RemoveDbx = document.getElementById("p-search");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
if( DisplayNavigationPortlet == false){ // Affichage (ou pas) de la boîte "Navigation"
var RemoveDbx = document.getElementById("p-navigation");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
if( DisplayContribuerPortlet = false){ // Affichage (ou pas) de la boîte "Contribuer"
var RemoveDbx = document.getElementById("p-Contribuer");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
if( DisplayBookPortlet == false){ // Affichage (ou pas) de la boîte "Créer un livre"
var RemoveDbx = document.getElementById("p-coll_-create_a_book");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
if( DisplayCategoriesPortlet == false){ // Affichage (ou pas) de la boîte "Catégories"
var RemoveDbx = document.getElementById("p-cat");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
if( DisplayToolboxPortlet == false){ // Affichage (ou pas) de la boîte à outils
var RemoveDbx = document.getElementById("p-tb");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
// 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);
// }
if( DisplayLangPortlet == false){ // Affichage (ou pas) des interwikis
var RemoveDbx = document.getElementById("p-lang");
document=document.getElementById("column-one").removeChild(RemoveDbx);
}
// Transformation
var global_div = document.getElementById( "globalWrapper" );
global_div.setAttribute( "class", "container13" );
var column_div = document.getElementById( "column-one" );
column_div.setAttribute( "class", "dbx-group" );
var Panneaux_div = column_div.getElementsByTagName("div");
for(i=0;i<Panneaux_div.length;i++){
if (hasClass(Panneaux_div[i], "portlet" )){
var Id_Panneaux_div = Panneaux_div[i].getAttribute("id");
if( (Id_Panneaux_div != "p-personal" ) && (Id_Panneaux_div != "p-cactions" ) ){
magicPortlets(Panneaux_div[i]);
}
}
}
column_div.setAttribute( "id", "sidebox" );
}
addOnloadHook(MagicSidebar);
//******************************************************************************************************************************** FIN DE LA FONCTION PRINCIPALE
//******************************************************************************************************************************** TRANSFORMATION DES PANNEAUX
function magicPortlets(dbx_panneau){
removeClass(dbx_panneau, "portlet");
addClass(dbx_panneau, "dbx-box");
var dbx_handle_div = document.createElement( "div" );
dbx_handle_div.setAttribute( "class", "dbx-handle" );
var dbx_h5 = dbx_panneau.getElementsByTagName("h5");
for(i=0;i<dbx_h5.length;i++){
dbx_handle_div.appendChild( dbx_h5[i] );
dbx_panneau.appendChild( dbx_handle_div);
}
var pBodies = dbx_panneau.getElementsByTagName("div");
for(i=0;i<pBodies.length;i++){
if (hasClass(pBodies[i], "pBody" )){
removeClass(pBodies[i], "pBody" )
addClass(pBodies[i], "dbx-content")
dbx_panneau.appendChild( pBodies[i]);
}
}
}
//******************************************************************************************************************************** FIN DE LA TRANSFORMATION DES PANNEAUX
//******************************************************************************************************************************** PANNEAU FAVORIS
function addFavoritesPortlet(){
/////////////////////////////// PARTIE PERSONNALISABLE //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////// POPUPS //////////
// popup titre //
var PopupTitle_fav = "Cliquer pour ajouter la page courante aux favoris" ;
// popup aide (?) //
var PopupHelp_fav = "INFORMATION : Cette liste est stockée sur un cookie local. Si vous effacez vos cookies, cette liste disparaîtra." ;
// popup retrait [-] //
var PopupRemove_fav = "Cliquer pour retirer de la liste la page : " ;
//////////////////////////////// TEXTES ///////////
// titre de la boîte //
var Title_fav = "Ajouter aux favoris" ;
// texte de la boîte vide //
var NoFavorites_fav = "Vous n'avez pas de favoris." ;
/////////////////////////////// PARAMÈTRES /////////////////
// début de l'URL des liens //
var Path_fav = "http://fr.wikipedia.org/wiki/" ;
/////////////////////////////// FIN DE LA PARTIE PERSONNALISABLE //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// * création du titre du panneau *
var span_fav = document.createElement( "span" );
span_fav.setAttribute( "title",PopupTitle_fav );
span_fav.setAttribute( "fixdabsx","3");
span_fav.setAttribute( "requireclick","off");
span_fav.setAttribute( "style","cursor:pointer");
var a_fav = document.createElement( "a" );
a_fav.setAttribute( "href", "javascript:storePage()" );
var title_fav = document.createTextNode( Title_fav ) ;
a_fav.appendChild( title_fav ) ;
span_fav.appendChild( a_fav ) ;
var h5_fav = document.createElement( "h5" );
h5_fav.appendChild( span_fav ) ;
// * création de la liste de favoris *
var ul_fav = document.createElement( "ul" );
var pageList = getCookie("pageList");
var pageListTitle = getCookie("pageListTitle");
if (pageList != "" && pageList != null) {
pSplit = pageList.split(";")
for (a=0;a<pSplit.length;a++) {
if (pSplit[a] != '' && pSplit[a] != 'null') {
if (pageListTitle != "" && pageListTitle != null) {
pSplitTitle = pageListTitle.split(";")
for (a=0;a<pSplitTitle.length;a++) {
if (pSplitTitle[a] != '' && pSplitTitle[a] != 'null') {
var li_fav = document.createElement( "li" );
li_fav.setAttribute( "id", "t-whatlinkshere");
var spanaCR_fav = document.createElement( "span" );
spanaCR_fav.setAttribute( "title", PopupRemove_fav + pSplitTitle[a] );
spanaCR_fav.setAttribute( "fixdabsx","3");
spanaCR_fav.setAttribute( "requireclick","off");
spanaCR_fav.setAttribute( "style","cursor:pointer");
var aCR_fav = document.createElement( "a" );
aCR_fav.setAttribute( "href", "javascript:removePage('" + pSplitTitle[a] + "')" );
var smallR_fav = document.createElement( "small" );
var font_fav = document.createElement( "font" );
font_fav.setAttribute( "color", "red" );
var textaCR_fav = document.createTextNode( "[-]");
font_fav.appendChild( textaCR_fav );
smallR_fav.appendChild( font_fav );
aCR_fav.appendChild( smallR_fav );
spanaCR_fav.appendChild( aCR_fav ) ;
var spanaC_fav = document.createElement( "span" );
spanaC_fav.setAttribute( "title", "" + pSplitTitle[a] + "");
spanaC_fav.setAttribute( "fixdabsx","3");
spanaC_fav.setAttribute( "requireclick","off");
spanaC_fav.setAttribute( "style","cursor:pointer");
var aC_fav = document.createElement( "a" );
aC_fav.setAttribute( "href", "" + Path_fav + pSplitTitle[a] +"");
var smallT_fav = document.createElement( "small" );
var textaC_fav = document.createTextNode( "" + pSplitTitle[a] + "") ;
smallT_fav.appendChild( textaC_fav ) ;
aC_fav.appendChild( smallT_fav );
spanaC_fav.appendChild( aC_fav ) ;
li_fav.appendChild( spanaCR_fav );
li_fav.appendChild( spanaC_fav );
ul_fav.appendChild( li_fav );
}
}
}
}
}
} else {
var li_fav = document.createElement( "li" );
var nofav_fav = document.createTextNode( NoFavorites_fav );
li_fav.appendChild( nofav_fav );
ul_fav.appendChild( li_fav );
}
// * insertion du panneau *
var div_fav = document.createElement( "div" );
div_fav.setAttribute( "class", "pBody" );
div_fav.appendChild( ul_fav ) ;
var portlet_fav = document.createElement( "div" ) ;
portlet_fav.setAttribute( "class", "portlet" );
portlet_fav.setAttribute( "id", "p-fav" ) ;
portlet_fav.appendChild( h5_fav ) ;
portlet_fav.appendChild( div_fav ) ;
div_ptb = document.getElementById( "p-search" );
document.getElementById("column-one").insertBefore( portlet_fav, div_ptb)
}
// ** FONCTIONS SUBALTERNES **
// * Ajout d'une page à la liste *
function storePage(){
thisPage = document.location.href;
thisPageTitle = wgPageName;
var pageList = getCookie("pageList");
var pageListTitle = getCookie("pageListTitle");
var linkFound = false;
if (pageList != "" && pageList != null) {
pSplit = pageList.split(";");
for (a=0;a<pSplit.length;a++) {
}
}
if (!linkFound) {
if (pageList == null || pageList == ";") {
pageList = thisPage;
pageListTitle = thisPageTitle;
} else {
pageList += ";" + thisPage;
pageListTitle += ";" + thisPageTitle;
}
}
var now = new Date();
var nextYear = new Date(now.getTime() + 1000 * 60 * 60 * 24 * 365 );
setCookie("pageList",pageList,nextYear);
setCookie("pageListTitle",pageListTitle,nextYear);
window.location.reload();
}
// * Suppression d'une page de la liste *
function removePage(url){
var pageListTitle = getCookie("pageListTitle");
var linkList = ""
if (pageListTitle != "" && pageListTitle != null) {
pSplitTitle = pageListTitle.split(";");
for (a=0;a<pSplitTitle.length;a++) {
if (pSplitTitle[a] != url && pSplitTitle[a] != '') linkList += ";" + pSplitTitle[a];
}
}
var now = new Date();
var nextYear = new Date(now.getTime() + 1000 * 60 * 60 * 24 * 365 );
setCookie("pageList",linkList,nextYear);
setCookie("pageListTitle",linkList,nextYear);
window.location.reload();
}
// * Mise à jour du cookie *
function setCookie (cookieName, cookieValue, expires, path) {
document.cookie = escape(cookieName) + '=' + escape(cookieValue) + (expires ? '; EXPIRES=' + expires.toGMTString() : '') + "; PATH=/" ;
}
// * Interrogation du cookie *
function getCookie (cookieName) {
var cookieValue = null;
var posName = document.cookie.indexOf(escape(cookieName) + '=' );
if (posName != -1) {
var posValue = posName + (escape(cookieName) + '=' ).length;
var endPos = document.cookie.indexOf(';', posValue) ;
if (endPos != -1) {
cookieValue = unescape(document.cookie.substring(posValue, endPos));
} else {
cookieValue = unescape(document.cookie.substring(posValue));
}
}
return cookieValue;
}
//******************************************************************************************************************************** FIN DU PANNEAU FAVORIS
//******************************************************************************************************************************** PANNEAU CATÉGORIES
function addCatPortlet(){
var portlet = document.createElement( "div" ) ;
portlet.setAttribute( "class", "portlet" );
portlet.setAttribute( "id", "p-cat" ) ;
var h5_cats = document.createElement( "h5" );
var text = document.createTextNode( "Catégories" ) ;
h5_cats.appendChild( text ) ;
var catlinks = document.getElementById("catlinks");
if (!catlinks) {
var div_cats = document.createElement( "div" );
div_cats.setAttribute( "class", "pBody" );
var ul_cats = document.createElement( "UL" );
var li_nocats = document.createElement( "LI" );
var text_nocats = document.createTextNode( "Aucune" );
li_nocats.appendChild( text_nocats );
ul_cats.appendChild( li_nocats );
div_cats.appendChild( ul_cats ) ;
} else {
var div_cats = document.createElement( "div" );
div_cats.setAttribute( "class", "pBody" );
var ul_cats = document.createElement( "UL" );
var categories = catlinks.getElementsByTagName("a") ;
var a_debut = 1 ; // evitons le lien Categories:
for (var i = a_debut ; i < categories.length ; i++ ) {
var a = categories[i] ;
var li_cats = document.createElement( "LI" ) ;
li_cats.appendChild( a.cloneNode(1) ) ;
ul_cats.appendChild( li_cats );
}
div_cats.appendChild( ul_cats ) ;
}
portlet.appendChild( h5_cats ) ;
portlet.appendChild( div_cats ) ;
div_ptb = document.getElementById( "p-tb" );
document.getElementById("column-one").insertBefore( portlet, div_ptb)
}
//******************************************************************************************************************************** FIN DU PANNEAU CATÉGORIES
//******************************************************************************************************************************** PANNEAU AUTRES PROJETS
function addProjectPortlet(){
var list = document.createElement("LI");
var newlist = document.createElement("UL");
var newlinktext = document.createTextNode("Aucun");
list.appendChild(newlinktext);
newlist.appendChild(list);
var interProject = document.createElement("DIV");
interProject.className = "portlet" ;
interProject.setAttribute( "id", "p-project" );
interProject.innerHTML = '<h5>Autres projets<\/h5><div class="pBody"><ul>'+newlist.innerHTML+'</ul></div>';
insertAfter(document.getElementById( "column-one" ),interProject,document.getElementById( "p-tb" ));
}
//******************************************************************************************************************************** FIN DU PANNEAU AUTRES PROJETS
//******************************************************************************************************************************** PANNEAU AUTRES LANGUES (interwiki)
function addLangPortlet(){
var dbx_lang = document.createElement( "div" );
dbx_lang.setAttribute( "class", "portlet" );
dbx_lang.setAttribute( "id", "p_lang" );
var dbx_lang_h5 = document.createElement( "h5" );
var dbx_lang_text = document.createTextNode( "Autres langues" );
dbx_lang_h5.appendChild( dbx_lang_text );
var dbx_lang_content = document.createElement( "div" );
dbx_lang_content.setAttribute( "class", "pBody" );
var dbx_lang_text_ul = document.createElement( "ul" );
var dbx_lang_text_li = document.createElement( "li" );
var dbx_lang_text_content = document.createTextNode( "Aucune" );
dbx_lang_text_li.appendChild( dbx_lang_text_content );
dbx_lang_text_ul.appendChild( dbx_lang_text_li );
dbx_lang_content.appendChild( dbx_lang_text_ul );
dbx_lang.appendChild( dbx_lang_h5 );
dbx_lang.appendChild( dbx_lang_content );
var column_div = document.getElementById( "column-one");
column_div.appendChild( dbx_lang);
}
//******************************************************************************************************************************** FIN DU PANNEAU AUTRES LANGUES
Deuxième partie : Animation des boîtes
//******************************************************************************************************************************** DÉFINITION DES DBX-GROUP ( http://www.brothercake.com/site/resources/scripts/dbx/ script dbx-key.js)
window.onload = function()
{
//initialise the docking boxes manager
var manager = new dbxManager('main'); //session ID [/-_a-zA-Z0-9/]
//create new docking boxes group
var sidebox = new dbxGroup(
'sidebox', // container ID [/-_a-zA-Z0-9/]
'vertical', // orientation ['vertical'|'horizontal']
'7', // drag threshold ['n' pixels]
/////////////////////////////////////////////////////////////////////////////////////////////////// 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 ////////////////////////////////////////////////////////////////////
'%mytitle% [%dbxtitle%]' // pattern-match syntax for title-attribute conflicts
);
};
//******************************************************************************************************************************** FIN DE LA DÉFINITION DES DBX-GROUP
//******************************************************************************************************************************** FONCTION DRAG & DROP ( http://www.brothercake.com/site/resources/scripts/dbx/ script dbx.js)
// DBX2.05 :: Docking Boxes (dbx)
// *********************************************************************************************************************************************************
// DOM scripting by brothercake -- http://www.brothercake.com/
// GNU Lesser General Public License -- http://www.gnu.org/licenses/lgpl.html
//***********************************************************************************************************************************************************
var dbx;
function dbxManager(sid){
dbx = this;
if(!/^[-_a-z0-9]+$/i.test(sid)) {
alert('Error from dbxManager:\n"' + sid + '" is an invalid session ID');
return;
}
this.supported = !(document.getElementsByTagName('*').length == 0 || (navigator.vendor == 'KDE' && typeof window.sidebar == 'undefined'));
if(!this.supported) {
return;
}
this.etype = typeof document.addEventListener != 'undefined' ? 'addEventListener' : typeof document.attachEvent != 'undefined' ? 'attachEvent' : 'none';
this.eprefix = (this.etype == 'attachEvent' ? 'on' : '');
if(typeof window.opera != 'undefined' && parseFloat(navigator.userAgent.toLowerCase().split(/opera[\/ ]/)[1].split(' ')[0], 10) < 7.5){
this.etype = 'none';
}
if(this.etype == 'none') {
this.supported = false;
return;
}
this.running = 0;
this.sid = sid;
this.savedata = {};
this.cookiestate = this.getCookieState();
};
dbxManager.prototype.setCookieState = function(){ ////////////////////////////////////////////////////////////////////////// SET COOKIE
var now = new Date();
now.setTime(now.getTime() + (365*24*60*60*1000));
var str = '';
for(j in this.savedata){
if(typeof this.savedata[j]!='function'){
str += j + '=' + this.savedata[j] + '&'
}
}
this.state = str.replace(/^(.+)&$/, '$1');
this.cookiestring = this.state.replace(/,/g, '|');
this.cookiestring = this.cookiestring.replace(/=/g, ':');
if(typeof this.onstatechange == 'undefined' || this.onstatechange()){
document.cookie = 'dbx-' + this.sid + '=' + this.cookiestring + '; EXPIRES=' + now.toGMTString() + '; PATH=/';
}
};
dbxManager.prototype.getCookieState = function(){ ////////////////////////////////////////////////////////////////////////// GET COOKIE
this.cookiestate = null;
if(document.cookie){
if(document.cookie.indexOf('dbx-' + this.sid)!=-1){
this.cookie = document.cookie.split('dbx-' + this.sid + '=')[1].split(';')[0].split('&');
for(var i in this.cookie){
if(typeof this.cookie[i]!='function'){
this.cookie[i] = this.cookie[i].replace(/\|/g, ',');
this.cookie[i]= this.cookie[i].replace(/:/g, '=');
this.cookie[i] = this.cookie[i].split('=');
this.cookie[i][1] = this.cookie[i][1].split(',');
}
}
this.cookiestate = {};
for(i in this.cookie){
if(typeof this.cookie[i]!='function'){
this.cookiestate[this.cookie[i][0]] = this.cookie[i][1];
}
}
}
}
return this.cookiestate;
};
dbxManager.prototype.addDataMember = function(gid, order){
this.savedata[gid] = order;
};
dbxManager.prototype.createElement = function(tag){
return typeof document.createElementNS != 'undefined' ? document.createElementNS('http://www.w3.org/1999/xhtml', tag) : document.createElement(tag);
};
dbxManager.prototype.getTarget = function(e, pattern, node){
if(typeof node != 'undefined'){
var target = node;
}else{
target = typeof e.target != 'undefined' ? e.target : e.srcElement;
}
var regex = new RegExp(pattern, '');
while(!regex.test(target.className)){
target = target.parentNode;
}
return target;
};
function dbxGroup(gid, dir, thresh, fix, ani, togs, def, open, close, move, toggle, kmove, ktoggle, syntax){
if(!/^[-_a-z0-9]+$/i.test(gid)) {
alert('Error from dbxGroup:\n"' + gid + '" is an invalid container ID'); return;
}
this.container = document.getElementById(gid);
if(this.container == null || !dbx.supported) {
return;
}
var self = this;
this.gid = gid;
this.dragok = false;
this.box = null;
this.vertical = dir == 'vertical';
this.threshold = parseInt(thresh, 10);
this.restrict = fix == 'yes';
this.resolution = parseInt(ani, 10);
this.toggles = togs == 'yes';
this.defopen = def != 'closed';
this.vocab = {'open' : open,'close' : close,'move' : move,'toggle' : toggle,'kmove' : kmove,'ktoggle' : ktoggle,'syntax' : syntax};
this.container.style.position = 'relative';this.container.style.display = 'block';
if(typeof window.opera != 'undefined'){
this.container.style.display = 'run-in';
}
this.boxes = [];this.buttons = [];this.order = [];this.eles = this.container.getElementsByTagName('*');
for(var i=0; i<this.eles.length; i++){
if(/dbx\-box/i.test(this.eles[i].className) && !/dbx\-dummy/i.test(this.eles[i].className)){
this.eles[i].style.position = 'relative';
this.eles[i].style.display = 'block';
this.boxes.push(this.eles[i]);
this.eles[i].className += ' dbx-box-open';
this.eles[i].className += ' dbxid' + this.order.length;
this.order.push(this.order.length.toString() + '+');
this.eles[i][dbx.etype](dbx.eprefix + 'mousedown', function(e){
if(!e) { e = window.event; }
self.mousedown(e, dbx.getTarget(e, 'dbx\-box'));
}, false);
}
if(/dbx\-handle/i.test(this.eles[i].className)){
this.eles[i].style.position = 'relative';
this.eles[i].style.display = 'block';
this.eles[i].className += ' dbx-handle-cursor';
this.eles[i].setAttribute('title', this.eles[i].getAttribute('title') == null || this.eles[i].title == '' ? this.vocab.move : this.vocab.syntax.replace('%mytitle%', this.eles[i].title).replace('%dbxtitle%', this.vocab.move));
if(this.toggles){
this.buttons.push(this.addToggleBehavior(this.eles[i]));
}else{
this.eles[i][dbx.etype](dbx.eprefix + 'key' + (typeof document.uniqueID != 'undefined' || navigator.vendor == 'Apple Computer, Inc.' ? 'down' : 'press'), function(e){
if(!e) {
e = window.event; }return self.keypress(e, dbx.getTarget(e, 'dbx\-handle'));
}, false);
this.eles[i][dbx.etype](dbx.eprefix + 'focus', function(e){
if(!e) {
e = window.event;
}
self.createTooltip(null, dbx.getTarget(e, 'dbx\-handle'));
}, false);
this.eles[i][dbx.etype](dbx.eprefix + 'blur', function(){self.removeTooltip();}, false);
}
}
}
dbx.addDataMember(this.gid, this.order.join(','));
var dummy = this.container.appendChild(dbx.createElement('span'));
dummy.className = 'dbx-box dbx-dummy';
dummy.style.display = 'block';
dummy.style.width = '0';dummy.style.height = '0';
dummy.style.overflow = 'hidden';
if(this.vertical) {
dummy.className += ' dbx-offdummy';
}
this.boxes.push(dummy);
if(dbx.cookiestate != null && typeof dbx.cookiestate[this.gid] != 'undefined'){
var num = dbx.cookiestate[this.gid].length;
if(num == this.boxes.length - 1){
for(i=0; i<num; i++){
var index = parseInt(dbx.cookiestate[this.gid][i], 10);
this.container.insertBefore(this.boxes[index], dummy);
if(this.toggles && /\-$/.test(dbx.cookiestate[this.gid][i])){
this.toggleBoxState(this.buttons[index], false);
}
}
this.getBoxOrder();
}
}else if(!this.defopen && this.toggles){
var len = this.buttons.length;
for(i=0; i<len; i++){
this.toggleBoxState(this.buttons[i], true);
}
}
document[dbx.etype](dbx.eprefix + 'mouseout', function(e){
if(typeof e.target == 'undefined') {
e = window.event; e.relatedTarget = e.toElement;
}
if(e.relatedTarget == null){
self.mouseup(e);
}
}, false);
document[dbx.etype](dbx.eprefix + 'mousemove', function(e){
self.mousemove(e);
return !self.dragok;
}, false);
document[dbx.etype](dbx.eprefix + 'mouseup', function(e){
self.mouseup(e);
}, false);
this.keydown = false;
document[dbx.etype](dbx.eprefix + 'keydown', function(){
self.keydown = true;
}, false);
document[dbx.etype](dbx.eprefix + 'keyup', function(){
self.keydown = false;
}, false);
};
dbxGroup.prototype.addToggleBehavior = function(){
var self = this;
var button = arguments[0].appendChild(dbx.createElement('a'));
button.appendChild(document.createTextNode('\u00a0'));
button.style.cursor = 'pointer';
button.href = 'javascript:void(null)';
button.className = 'dbx-toggle dbx-toggle-open';
button.setAttribute('title', this.vocab.toggle.replace('%toggle%', this.vocab.close));
button.hasfocus = typeof window.opera != 'undefined' || navigator.vendor == 'Apple Computer, Inc.' ? null : false;
this.tooltip = null;
button.onclick = function(){
if(this.hasfocus === true || this.hasfocus === null){
self.removeTooltip();
self.toggleBoxState(this, true);
}
};
button['onkey' + (typeof document.uniqueID != 'undefined' || navigator.vendor == 'Apple Computer, Inc.' ? 'down' : 'press')] = function(e){
if(!e) {
e = window.event;
}
return self.keypress(e, this);
};
button.onfocus = function(){
var len = self.buttons.length;
for(var i=0; i<len; i++){
self.buttons[i].className = self.buttons[i].className.replace(/[ ](dbx\-toggle\-hilite\-)(open|closed)/, '');
}
var isopen = (/dbx\-toggle\-open/.test(this.className));
this.className += ' dbx-toggle-hilite-' + (isopen ? 'open' : 'closed');
self.createTooltip(isopen, this);
this.isactive = true;
if(this.hasfocus !== null) {
this.hasfocus = true;
}
};
button.onblur = function(){
this.className = this.className.replace(/[ ](dbx\-toggle\-hilite\-)(open|closed)/, '');
self.removeTooltip();
if(this.hasfocus !== null) {
this.hasfocus = false;
}
};
return button;};
dbxGroup.prototype.toggleBoxState = function(button, regen){
var isopen = (/dbx\-toggle\-open/.test(button.className));
var parent = dbx.getTarget(null, 'dbx\-box', button);dbx.box = parent;dbx.toggle = button;
if(typeof dbx.container == 'undefined'){
dbx.group = dbx.getTarget(null, 'dbx\-group', parent);
}
else {
dbx.group = dbx.container;
}
if((!isopen && (typeof dbx.onboxopen == 'undefined' || dbx.onboxopen()))||(isopen && (typeof dbx.onboxclose == 'undefined' || dbx.onboxclose()))){
button.className = 'dbx-toggle dbx-toggle-' + (isopen ? 'closed' : 'open');
button.title = this.vocab.toggle.replace('%toggle%', isopen ? this.vocab.open : this.vocab.close);
if(typeof button.isactive != 'undefined'){
button.className += ' dbx-toggle-hilite-' + (isopen ? 'closed' : 'open')
}
parent.className = parent.className.replace(/[ ](dbx-box-)(open|closed)/, ' $1' + (isopen ? 'closed' : 'open'));
if(regen) {
this.getBoxOrder();
}
}
};
dbxGroup.prototype.shiftBoxPosition = function(e, anchor, positive){
var parent = dbx.getTarget(null, 'dbx\-box', anchor);
dbx.group = this.container;
dbx.box = parent;dbx.event = e;
if(typeof dbx.onboxdrag == 'undefined' || dbx.onboxdrag()){
var positions = [];
var len = this.boxes.length;
for(var i=0; i<len; i++){
positions[i] = [i, this.boxes[i][this.vertical ? 'offsetTop' : 'offsetLeft']];
if(parent == this.boxes[i]) {
this.idref = i;
}
}
positions.sort(this.compare);
for(i=0; i<len; i++){
if(positions[i][0] == this.idref){
if((positive && i < len - 2) || (!positive && i > 0)){
var sibling = this.boxes[positions[i + (positive ? 1 : -1)][0]];
if(this.resolution > 0){
var visipos = { 'x' : parent.offsetLeft, 'y' : parent.offsetTop };
var siblingpos = { 'x' : sibling.offsetLeft, 'y' : sibling.offsetTop };
}
var obj = { 'insert' : (positive ? sibling : parent), 'before' : (positive ? parent : sibling)
};
this.container.insertBefore(obj.insert, obj.before);
if(this.resolution > 0){
var animators ={'sibling' : new dbxAnimator(this, sibling, siblingpos, this.resolution, true, anchor),'parent' : new dbxAnimator(this, parent, visipos, this.resolution, true, anchor)};
}else{
anchor.focus();}break;
}
}
}
this.getBoxOrder();
}
};
dbxGroup.prototype.compare = function(a, b){return a[1] - b[1];
};
dbxGroup.prototype.createTooltip = function(isopen, anchor){
if(this.keydown){
this.tooltip = this.container.appendChild(dbx.createElement('span'));
this.tooltip.style.visibility = 'hidden';
this.tooltip.className = 'dbx-tooltip';
if(isopen != null){
this.tooltip.appendChild(document.createTextNode(this.vocab.kmove + this.vocab.ktoggle.replace('%toggle%', isopen ? this.vocab.close : this.vocab.open)));
}else{
this.tooltip.appendChild(document.createTextNode(this.vocab.kmove));
}
var parent = dbx.getTarget(null, 'dbx\-box', anchor);
this.tooltip.style.left = parent.offsetLeft + 'px';
this.tooltip.style.top = parent.offsetTop + 'px';
var tooltip = this.tooltip;window.setTimeout(function(){
if(tooltip != null) {
tooltip.style.visibility = 'visible';
}
}, 500);
}
};
dbxGroup.prototype.removeTooltip = function(){
if(this.tooltip != null){
this.tooltip.parentNode.removeChild(this.tooltip);
this.tooltip = null;
}
};
dbxGroup.prototype.mousedown = function(e, box){
var node = typeof e.target != 'undefined' ? e.target : e.srcElement;
if(node.nodeName == '#text') {
node = node.parentNode;
}
if(!/dbx\-(toggle|box|group)/i.test(node.className)){
while(!/dbx\-(handle|box|group)/i.test(node.className)){
node = node.parentNode;
}
}
if(/dbx\-handle/i.test(node.className)){
this.removeTooltip();this.released = false;
this.initial = { 'x' : e.clientX, 'y' : e.clientY };
this.current = { 'x' : 0, 'y' : 0 };
this.createCloneBox(box);
if(typeof e.preventDefault != 'undefined' ) {
e.preventDefault();
}
if(typeof document.onselectstart != 'undefined'){
document.onselectstart = function() {
return false;
}
}
}
};
dbxGroup.prototype.mousemove = function(e){
if(this.dragok && this.box != null){
this.positive = this.vertical ? (e.clientY > this.current.y ? true : false) : (e.clientX > this.current.x ? true : false);
this.current = { 'x' : e.clientX, 'y' : e.clientY };
var overall = { 'x' : this.current.x - this.initial.x, 'y' : this.current.y - this.initial.y };
if(((overall.x >= 0 && overall.x <= this.threshold) || (overall.x <= 0 && overall.x >= 0 - this.threshold))&&((overall.y >= 0 && overall.y <= this.threshold) || (overall.y <= 0 && overall.y >= 0 - this.threshold))){
this.current.x -= overall.x;this.current.y -= overall.y;
}
if(this.released || overall.x > this.threshold || overall.x < (0 - this.threshold) || overall.y > this.threshold || overall.y < (0 - this.threshold)){
dbx.group = this.container;
dbx.box = this.box;
dbx.event = e;
if(typeof dbx.onboxdrag == 'undefined' || dbx.onboxdrag()){
this.released = true;
if(!this.restrict || !this.vertical) {
this.boxclone.style.left = (this.current.x - this.difference.x) + 'px';
}
if(!this.restrict || this.vertical) {
this.boxclone.style.top = (this.current.y - this.difference.y) + 'px';
}
this.moveOriginalToPosition(this.current.x, this.current.y);
if(typeof e.preventDefault != 'undefined' ) {
e.preventDefault();
}
}
}
}
return true;
};
dbxGroup.prototype.mouseup = function(e){
if(this.box != null){
this.moveOriginalToPosition(e.clientX, e.clientY);
this.removeCloneBox();
this.getBoxOrder();
if(typeof document.onselectstart != 'undefined'){
document.onselectstart = function() {
return true;
}
}
}
this.dragok = false;
};
dbxGroup.prototype.keypress = function(e, anchor){
if(/^(3[7-9])|(40)$/.test(e.keyCode)){
this.removeTooltip();
if((this.vertical && /^(38|40)$/.test(e.keyCode)) || (!this.vertical && /^(37|39)$/.test(e.keyCode))){
this.shiftBoxPosition(e, anchor, /^[3][78]$/.test(e.keyCode) ? false : true);
if(typeof e.preventDefault != 'undefined') {
e.preventDefault();
}else {
return false;
}
typeof e.stopPropagation != 'undefined' ? e.stopPropagation() : e.cancelBubble = true;this.keydown = false;
}
}
return true;
};
dbxGroup.prototype.getBoxOrder = function(){
this.order = [];
var len = this.eles.length;
for(var j=0; j<len; j++){
if(/dbx\-box/i.test(this.eles[j].className) && !/dbx\-(clone|dummy)/i.test(this.eles[j].className)){
this.order.push(this.eles[j].className.split('dbxid')[1] + (/dbx\-box\-open/i.test(this.eles[j].className) ? '+' : '-'));
}
}
dbx.savedata[this.gid] = this.order.join(',');
dbx.setCookieState();
};
dbxGroup.prototype.createClone = function(){
var clone = this.container.appendChild(arguments[0].cloneNode(true));
clone.className += ' dbx-clone';
clone.style.position = 'absolute';
clone.style.visibility = 'hidden';
clone.style.zIndex = arguments[1];
clone.style.left = arguments[2].x + 'px';
clone.style.top = arguments[2].y + 'px';
clone.style.width = arguments[0].offsetWidth + 'px';
clone.style.height = arguments[0].offsetHeight + 'px';
return clone;
};
dbxGroup.prototype.createCloneBox = function(box){
this.box = box;
this.position = { 'x' : this.box.offsetLeft, 'y' : this.box.offsetTop };
this.difference = { 'x' : (this.initial.x - this.position.x), 'y' : (this.initial.y - this.position.y) };
this.boxclone = this.createClone(this.box, 30000, this.position);
this.boxclone.style.cursor = 'move';
this.dragok = true;
};
dbxGroup.prototype.removeCloneBox = function(){
this.container.removeChild(this.boxclone);
this.box.style.visibility = 'visible';
this.box = null;
};
dbxGroup.prototype.moveOriginalToPosition = function(clientX, clientY){
var cloneprops = {'xy' : this.vertical ? clientY - this.difference.y : clientX - this.difference.x,'wh' : this.vertical ? this.boxclone.offsetHeight : this.boxclone.offsetWidth};
this.box.style.visibility = 'hidden';
this.boxclone.style.visibility = 'visible';
var len = this.boxes.length;
for(var i=0; i<len; i++){
var boxprops = {'xy' : this.vertical ? this.boxes[i].offsetTop : this.boxes[i].offsetLeft,'wh' : this.vertical ? this.boxes[i].offsetHeight : this.boxes[i].offsetWidth};
if((this.positive && cloneprops.xy + cloneprops.wh > boxprops.xy && cloneprops.xy < boxprops.xy)||(!this.positive && cloneprops.xy < boxprops.xy && cloneprops.xy + cloneprops.wh > boxprops.xy)){
if(this.boxes[i] == this.box) {
return;
}
var sibling = this.box.nextSibling;
while(sibling.className == null || !/dbx\-box/.test(sibling.className)){
sibling = sibling.nextSibling;
}
if(this.boxes[i] == sibling) {
return;
}
if(this.resolution > 0){
if(this.box[this.vertical ? 'offsetTop' : 'offsetLeft'] < boxprops.xy){
var visibox = this.boxes[i].previousSibling;
while(visibox.className == null || !/dbx\-box/.test(visibox.className)){
visibox = visibox.previousSibling;
}
}else{
visibox = this.boxes[i];
}
var visipos = { 'x' : visibox.offsetLeft, 'y' : visibox.offsetTop };
}
var prepos = { 'x' : this.box.offsetLeft, 'y' : this.box.offsetTop };
this.container.insertBefore(this.box, this.boxes[i]);
this.initial.x += (this.box.offsetLeft - prepos.x);
this.initial.y += (this.box.offsetTop - prepos.y);
if(this.resolution > 0 && visibox != this.box){
var animator = new dbxAnimator(this, visibox, visipos, this.resolution, false, null);
}else{
}
break;
}
}
};
function dbxAnimator(caller, box, pos, res, kbd, anchor){
this.caller = caller;
this.box = box;
this.timer = null;
var before = pos[this.caller.vertical ? 'y' : 'x'];
var after = this.box[this.caller.vertical ? 'offsetTop' : 'offsetLeft'];
if(before != after){
if(dbx.running > this.caller.boxes.length - 1) {
return;
}
var clone = this.caller.createClone(this.box, 29999, arguments[2]);
clone.style.visibility = 'visible';
this.box.style.visibility = 'hidden';
this.animateClone(clone,before,after > before ? after - before : 0 - (before - after),this.caller.vertical ? 'top' : 'left',res,kbd,anchor);
}
};
dbxAnimator.prototype.animateClone = function(clone, current, change, dir, res, kbd, anchor){
var self = this;
var count = 0;
dbx.running ++;
this.timer = window.setInterval(function(){
count ++;
current += change / res;
clone.style[dir] = current + 'px';
if(count == res){
window.clearTimeout(self.timer);
self.timer = null;
dbx.running --;
self.caller.container.removeChild(clone);
self.box.style.visibility = 'visible';
if(kbd){
if(anchor != null && anchor.parentNode.style.visibility != 'hidden'){
anchor.focus();
}else if(self.caller.toggles){
var button = self.caller.buttons[parseInt(self.box.className.split('dbxid')[1],10)];
if(button != null && typeof button.isactive != 'undefined'){
button.focus();
}
}
}
}
}, 20);
};
if(typeof window.attachEvent != 'undefined'){
window.attachEvent('onunload', function(){
var ev = ['mousedown', 'mousemove', 'mouseup', 'mouseout', 'click', 'keydown', 'keyup', 'focus', 'blur', 'selectstart', 'statechange', 'boxdrag', 'boxopen', 'boxclose'];
var el = ev.length;var dl = document.all.length;
for(var i=0; i<dl; i++){
for(var j=0; j<el; j++){
document.all[i]['on' + ev[j]] = null;
}
}
});
}
MagicSidebox.css
Code source pour /MagicSidebox.css
/****************************************************************
Docking Boxes core CSS: YOU MUST NOT CHANGE OR OVERRIDE THESE
*****************************************************************/
.dbx-clone {
position:absolute;
visibility:hidden;
}
.dbx-clone, .dbx-clone .dbx-handle-cursor {
cursor:move !important;
}
.dbx-dummy {
display:block;
width:0;
height:0;
overflow:hidden;
border:0px;
}
.dbx-group, .dbx-box, .dbx-handle {
position:relative;
display:block;
}
/****************************************************************
avoid padding, margins or borders on dbx-box,
to reduce visual discrepancies between it and the clone.
overall, dbx-box is best left as visually unstyled as possible
*****************************************************************/
.dbx-box {
margin-bottom:10px;
margin-left:0.2em;
padding:0;
border:1px solid #595f66;
overflow:hidden;
width:11.7em
}
/****************************************************************
otherwise, do what you like :)
*****************************************************************/
/* group container(s) */
#sidebox-outer {
float:left;
position:relative;/* additional outer containers must also have position:relative */
}
.dbx-group {
}
* html .dbx-group {
width:170px;
padding-bot\tom:0;
}
/* handles */
.dbx-handle {
background: #f2f3f4;
border-bottom:1px solid #f2f3f4;
margin: 0px;
padding: 0px 0 1px 0;
}
div.dbx-handle h5 {
background: transparent url(/media/wikipedia/commons/0/09/Tile_sub.gif);
border-bottom: 1px solid #595F66;
color: #595f66;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
margin: 0;
padding: 5px;
}
* html .dbx-handle {
width:150px;
}
/* handle cursors are in a class of their own
so they only get applied if the script is supported */
.dbx-handle-cursor {
cursor:move;
}
/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
display:block;
width:20px;
height:15px;
overflow:hidden;
background:url(/media/wikipedia/commons/7/75/Toggle.gif) no-repeat;
position:absolute;
top:2px;
right:3px;
text-indent:-50px;
text-decoration:none;
}
a.dbx-toggle-open, a.dbx-toggle-open:visited {
background-position:0 0;
}
a.dbx-toggle-closed, a.dbx-toggle-closed:visited {
background-position:0 -20px;
}
a.dbx-toggle-hilite-open, a.dbx-toggle-hilite-open:visited {
background-position:-20px 0;
}
a.dbx-toggle-hilite-closed, a.dbx-toggle-hilite-closed:visited {
background-position:-20px -20px;
}
/* keyboard navigation tooltip */
.dbx-tooltip {
display:block;
position:absolute;
margin:36px 0 0 125px;
width:185px;
border:1px solid #000;
background:#ffd;
color:#000;
font:normal normal normal 0.85em tahoma, arial, sans-serif;
padding:2px 4px 3px 5px;
text-align:left;
}
* html .dbx-tooltip { width:195px; }
/* use CSS2 system colors in CSS2 browsers
but not safari, which doesn't support them */
*[class="dbx-tooltip"]:lang(en) {
border-color:InfoText;
background:InfoBackground;
color:InfoText;
font:small-caption;
font-weight:normal;
}
/* inner content area */
.dbx-content {
padding:0 5px 10px 5px;
background:#f2f3f4;
border-top:1px solid #f2f3f4;
margin:0px;
font-size:85%;
}
/* toggle state of inner content area */
.dbx-box-closed .dbx-content {
display:block;
height:10px;
padding:0;
overflow:hidden;
}
.dbx-box-closed .dbx-content * {
display:none;
}
/* additional clone styles */
.dbx-clone {
opacity:0.8;
-khtml-opacity:0.8;
}
div.container13 {border:0px;margin-bottom:10px;}
/* Ajustements */
#p-logo {
top: 0;
left: 0;
position: absolute; /*needed to use z-index */
z-index: 3;
height: 155px;
width: 12em;
border:none;
overflow: visible;
}