MediaWiki:Gadget-MoveResizeFixed.js

Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;

Firefox (sur GNU/Linux) / Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5.

/* <noinclude>

Fonctions standards pour gérer des éléments en position fixed : 
* fonction "move",
* fonction "resize"

Voir page de discussion.</noinclude>
== CODES SOURCE ==
<!--
*/

/* -->
=== FONCTION : navigateur ===

* Renvoie true si le navigateur est Internet Explorer

<!--
*/
// --><div style="border:1px dashed green;margin:1em;padding:1em;"><source lang=javascript>
//<pre><nowiki>

function MoveResizeFixed_NavIsIE(){
     var agt=navigator.userAgent.toLowerCase();
     var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
     return is_ie;
}

//</nowiki></pre></source></div><!--
/*
-->
=== FONCTION : largeur de l'écran ===
* Renvoie la largeur de l'écran (en pixels)

<!--
*/
// --><div style="border:1px dashed green;margin:1em;padding:1em;"><source lang=javascript>
//<pre><nowiki>

function MoveResizeFixed_GetScreenWidth(){
     if(MoveResizeFixed_NavIsIE()){
          var ScreenWidth = parseInt(screen.width);
     }else{
          var ScreenWidth = parseInt(window.innerWidth);
     }
     return ScreenWidth;
}

//</nowiki></pre></source></div><!--
/*
-->
=== FONCTION : hauteur de l'écran ===
* Renvoie la hauteur de l'écran (en pixels)

<!--
*/
//--><div style="border:1px dashed green;margin:1em;padding:1em;"><source lang=javascript>
//<pre><nowiki>

function MoveResizeFixed_GetScreenHeight(){
     if(MoveResizeFixed_NavIsIE()){
          var ScreenHeight = parseInt(screen.height);
     }else{
          var ScreenHeight = parseInt(window.innerHeight);
     }
     return ScreenHeight;
}

//</nowiki></pre></source></div><!--
/*
--> 
=== FONCTION : MOVE ===

Transforme un élément en ancre pour bouger un autre élément (en position fixed)
* elementArea = élément ancre (obligatoire)
* elementToMove = élément à bouger (obligatoire)
* LeftLimit = limite gauche, en pixel (facultatif)
* TopLimit = limite haut, en pixel (facultatif)

<!--
*/
//--><div style="border:1px dashed green;margin:1em;padding:1em;"><source lang=javascript>
//<pre><nowiki>

function MoveResizeFixed_AddMoveArea(elementArea, elementToMove, LeftLimit, TopLimit){
     if((!elementArea)||(!elementToMove)) return;
     elementArea.onmousedown=function(event) {
          monbody = document.body;
          if(!event) { event = window.event; }
          if(MoveResizeFixed_NavIsIE()){ 
               positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
               positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
          }else{
               positionSouris_X = parseInt( event.clientX );
               positionSouris_Y = parseInt( event.clientY );
          } 
          elementToMove.initialX = parseInt( positionSouris_X - elementToMove.offsetLeft);
          elementToMove.initialY = parseInt( positionSouris_Y - elementToMove.offsetTop);
          monbody.onmousemove = function(event) {
               if(!event) { event = window.event; }
               if(MoveResizeFixed_NavIsIE()){
                    positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
                    positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
               }else{
                    positionSouris_X = parseInt( event.clientX );
                    positionSouris_Y = parseInt( event.clientY );
               }
               PositionGauche = parseInt( positionSouris_X ) - elementToMove.initialX;
               PositionHaut = parseInt(positionSouris_Y ) - elementToMove.initialY;
               if(LeftLimit){
                    if( PositionGauche < LeftLimit){
                         PositionGauche = LeftLimit;
                    }
               }
               if(TopLimit){
                    if( PositionHaut < TopLimit){
                         PositionHaut = TopLimit;
                    }
               }
               elementToMove.style.left = PositionGauche + 'px';
               elementToMove.style.top = PositionHaut + 'px';
               elementToMove.style.opacity = '.8';
          } 
          monbody.onmouseup=function(event) {
               elementToMove.style.opacity = '';
               monbody.onmousemove = null;
               monbody.onmouseup = null;
          }
     }
     elementArea.style.cursor = "move";
}

//</nowiki></pre></source></div><!--
/*
-->
=== FONCTION : RESIZE ===

Transforme un élément en ancre pour redimensionner un autre élément (en position fixed)
* elementArea = élément ancre (obligatoire)
* elementToResize = élément à redimensionner (obligatoire)
* MinWidth = largeur minimum, en pixel (facultatif)
* MinHeight = hauteur minimum, en pixel (facultatif)

<!--
*/
//--><div style="border:1px dashed green;margin:1em;padding:1em;"><source lang=javascript>
//<pre><nowiki>

function MoveResizeFixed_AddResizeArea(elementArea, elementToResize, MinWidth, MinHeight){
     if((!elementToResize)||(!elementToResize)) return;
     elementArea.onmousedown = function(event){
          monbody = document.body;
          if(!event) { event = window.event; }
          if(MoveResizeFixed_NavIsIE()){ 
               positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
               positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
          }else{
               positionSouris_X = parseInt( event.clientX );
               positionSouris_Y = parseInt( event.clientY );
          }
          elementToResize.initialWidth = parseInt( positionSouris_X - elementToResize.offsetWidth );
          elementToResize.initialHeight = parseInt( positionSouris_Y - elementToResize.offsetHeight );
          elementToResize.style.opacity = '.8';
           monbody.onmousemove=function(event) {
               if(!event) { event = window.event; }
               if(MoveResizeFixed_NavIsIE()){ 
                    positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
                    positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
               }else{
                    positionSouris_X = parseInt( event.clientX );
                    positionSouris_Y = parseInt( event.clientY );
               }
               var NewWidth = parseInt( positionSouris_X - elementToResize.initialWidth  );
               if(MinWidth){
                    if(NewWidth<MinWidth) NewWidth = MinWidth;
               }
               var NewHeight = parseInt( positionSouris_Y - elementToResize.initialHeight );
               if(MinHeight){
                    if(NewHeight<MinHeight) NewHeight = MinHeight;
               }
               elementToResize.style.width  = NewWidth + 'px';
               elementToResize.style.height = NewHeight + 'px';
           }
          monbody.onmouseup=function(event) {
               elementToResize.style.opacity = '';
               monbody.onmousemove = null;
               monbody.onmouseup = null;
          }
     }
     elementArea.style.cursor = "se-resize";
}
//</nowiki></pre></source></div>