Utilisateur:Otourly/vector.js

/**
 * Déplacement de coordonnées qui apparaissent en haut de la page
 */
function moveCoord() {
  var h1 = document.getElementById('firstHeading');
  if(!h1) h1 = document.getElementsByTagName('h1')[0]; // Nostalgia, Standard
  var coord = document.getElementById('geoCoord');
  if ( !coord || !h1 ) return;
  coord.id = "coordinates-title";
  h1.insertBefore(coord, h1.firstChild); /* déplacement de l'élément */
}
$(moveCoord);
// Verwendung von OpenStreetMap in Wikipedia.
// (c) 2008 by Magnus Manske
// Released under GPL
// Modifié pour marcher après moveCoord() ci-dessus par User:Dr_Brains
 
/*
if(typeof(MoveResizeAbsolute_AddMoveArea)!="function")
mw.loader.load('//fr.wikipedia.org/wiki/MediaWiki:Gadget-MoveResizeAbsolute.js&action=raw&ctype=text/javascript');
 */

function openStreetMap_Init () {
  var c = document.getElementById ( 'coordinates-title' ) ;
  if ( !c ) return ;
 
  var a = c.getElementsByTagName ( 'a' ) ;
  var geohack = false;
  for ( var i = 0 ; i < a.length ; i++ ) {
    var h = a[i].href ;

// http://fr.wikivoyage.org/w/index.php?title=Sp%C3%A9cial:MapSources&params=41.4167_N_2.1667_E_scale%3A10000

    if ( !h.match(/fr\.wikivoyage\.org/) ) continue ;
    if (h.match(/skyhack/)) continue;
    if (h.match(/_globe:/)) continue; // no OSM for moon, mars, etc
    geohack = true ;
    break ;
  }
  if ( !geohack ) return ;
 
  var na = c.getElementsByTagName('a')[0];
  if(!na) return;
  na.href = 'javascript:openStreetMap_Toggle();' ;
  na.title = 'Afficher/Masquer la carte' ;
}
 
function openStreetMap_Toggle () {
  var c = document.getElementById ( 'coordinates-title' ) ;
  if ( !c) return ;
  var osm = document.getElementById ( 'OpenStreetMap' ) ;
 
  if (osm) {
    if ( osm.style.display == 'none' ) {
      osm.style.display = 'block' ;
    } else {
      osm.style.display = 'none' ;
    }
    return;
  }
 
  var found_link = false ;
  var a = c.getElementsByTagName ( 'a' ) ;
  var h;
  for ( var i = 0 ; i < a.length ; i++ ) {
    h = a[i].href ;

// //fr.wikivoyage.org/w/index.php?title=Sp%C3%A9cial:MapSources&params=41.4167_N_2.1667_E_scale%3A10000

// //toolserver.org/~kolossos/openlayers/embed.html?layer=mapnik&bbox=2.1…1.412837619019%2C2.1724830439518%2C41.420562380981&marker=41.4167%2C2.1667

    if ( !h.match(/fr\.wikivoyage\.org/) ) continue ;
    if (h.match(/skyhack/)) continue;
    if (h.match(/_globe:/)) continue; // no OSM for moon, mars, etc
    found_link = true ;
    break ;
  }
  if ( !found_link ) return ; // No geohack link found
 
  h = h.split('params=')[1] ;
 
  var LargeurEcran = MoveResizeAbsolute_GetScreenWidth();
  var HauteurEcran = MoveResizeAbsolute_GetScreenHeight();
 
  var OSMDiv = document.createElement('div');
  OSMDiv.id = 'OpenStreetMap' ;
  OSMDiv.style.position = "absolute";
  OSMDiv.style.zIndex = 5000;
  OSMDiv.style.top = (HauteurEcran*10/100) + "px";
  OSMDiv.style.left = (LargeurEcran*15/100) + "px";
  OSMDiv.style.width = "70%";
  OSMDiv.style.height = (HauteurEcran*80/100) + "px";
  OSMDiv.style.border = "2px solid black";
  OSMDiv.style.backgroundColor = "white";
  OSMDiv.style.overflow = "hidden";
 
  var MoveArea = document.createElement('div');
  MoveArea.style.position = "relative";
  MoveArea.style.top = "0";
  MoveArea.style.width = "100%";
  MoveArea.style.height = "50px";
  MoveArea.title = "Cliquer et glisser pour déplacer la carte";
 
  var CloseLink = document.createElement('a');
  CloseLink.setAttribute("style", "float:right;margin:10px;");
  CloseLink.innerHTML = "Masquer";
  CloseLink.title = "Cliquer pour masquer la carte";
  CloseLink.href = "javascript:openStreetMap_Toggle();";
  MoveArea.appendChild(CloseLink);
 
  var iFrame = document.createElement ( 'iframe' ) ;
  var url = '//toolserver.org/~kolossos/openlayers/kml-on-ol.php?'
          + 'lang=' + mw.config.get('wgUserLanguage')
          + '&params=' + h
          + '&title=' + mw.util.wikiUrlencode( mw.config.get( 'wgTitle' ) )
          + ( window.location.protocol == 'https:' ? '&secure=1' : '' ) ;
  iFrame.style.width = '100%' ;
  iFrame.style.height = ((HauteurEcran*80/100)-100) + 'px' ;
  iFrame.style.clear = 'both' ;
  iFrame.src = url ;
 
  var ResizeArea = document.createElement('div');
  ResizeArea.style.position = "relative";
  ResizeArea.style.top = "0";
  ResizeArea.style.width = "100%";
  ResizeArea.style.height = "50px";
  ResizeArea.title = "Cliquer et glisser pour redimensionner la carte";
 
  OSMDiv.appendChild(MoveArea);
  OSMDiv.appendChild(iFrame);
  OSMDiv.appendChild(ResizeArea);
 
  document.body.appendChild ( OSMDiv ) ;
 
  var ElementsToMove = new Array(OSMDiv);
  var ElementsToResize = new Array(OSMDiv, iFrame);
  var ElementsMinWidth = new Array(150, 150);
  var ElementsMinHeights = new Array(200, 100);
 
  MoveResizeAbsolute_AddMoveArea(MoveArea, ElementsToMove);
  MoveResizeAbsolute_AddResizeArea(ResizeArea, ElementsToResize, ElementsMinWidth, ElementsMinHeights);
}
 
$(openStreetMap_Init);

/* {{Projet:JavaScript/Script|MoveResizeAbsolute}} */

/* <noinclude>

Fonctions standards pour gérer des éléments en position absolute : 
* 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 MoveResizeAbsolute_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 MoveResizeAbsolute_GetScreenWidth(){
     if(MoveResizeAbsolute_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 MoveResizeAbsolute_GetScreenHeight(){
     if(MoveResizeAbsolute_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)
* elementsToMove = éléments à 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 MoveResizeAbsolute_AddMoveArea(elementArea, elementsToMove, LeftLimit, TopLimit){
     if((!elementArea)||(!elementsToMove)) return;
     elementArea.onmousedown=function(event) {
          var monbody = document.body;
          if(!event) { event = window.event; }
          if(MoveResizeAbsolute_NavIsIE()){ 
               positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
               positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
          }else{
               positionSouris_X = parseInt( event.pageX );
               positionSouris_Y = parseInt( event.pageY );
          } 
          for(var a=0;a<elementsToMove.length;a++){
               elementsToMove[a].initialX = parseInt( positionSouris_X - elementsToMove[a].offsetLeft);
               elementsToMove[a].initialY = parseInt( positionSouris_Y - elementsToMove[a].offsetTop);
               elementsToMove[a].style.opacity = '.8';
          }
          monbody.onmousemove = function(event) {
               if(!event) { event = window.event; }
               if(MoveResizeAbsolute_NavIsIE()){
                    positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
                    positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
               }else{
                    positionSouris_X = parseInt( event.pageX );
                    positionSouris_Y = parseInt( event.pageY );
               }
               var LeftLimitDone = false;
               var TopLimitDone = false;
               for(var a=0;a<elementsToMove.length;a++){
                    PositionGauche = parseInt( positionSouris_X ) - elementsToMove[a].initialX;
                    PositionHaut = parseInt(positionSouris_Y ) - elementsToMove[a].initialY;
                    if(LeftLimit){
                         if(LeftLimit[a]|| LeftLimit[a]==0){
                              if( PositionGauche < parseInt(LeftLimit[a])){
                                   PositionGauche = LeftLimit[a];
                                   LeftLimitDone = true;
                              }
                         }
                    }
                    if(TopLimit){
                         if(TopLimit[a]||TopLimit[a]==0){
                              if( PositionHaut < parseInt(TopLimit[a])){
                                   PositionHaut = parseInt(TopLimit[a]);
                                   TopLimitDone = true;
                              }
                         }
                    }
                    elementsToMove[a].style.left = PositionGauche + 'px';
                    elementsToMove[a].style.top = PositionHaut + 'px';
               }
               if(LeftLimitDone){
                    for(var a=0;a<elementsToMove.length;a++){
                         if(LeftLimit[a]) elementsToMove[a].style.left = LeftLimit[a] + 'px';
                    }
                    LeftLimitDone = false;
               }
               if(TopLimitDone){
                    for(var a=0;a<elementsToMove.length;a++){
                         if(TopLimit[a]) elementsToMove[a].style.top = TopLimit[a] + 'px';
                    }
                    TopLimitDone = false;
               }
          } 
          monbody.onmouseup=function(event) {
               for(var a=0;a<elementsToMove.length;a++){
                    elementsToMove[a].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)
* elementsToResize = éléments à redimensionner (obligatoire, dans une Array)
* 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 MoveResizeAbsolute_AddResizeArea(elementArea, elementsToResize, MinWidth, MinHeight){
     if((!elementArea)||(!elementsToResize)) return;
     elementArea.onmousedown = function(event){
          var monbody = document.body;
          if(!event) { event = window.event; }
          if(MoveResizeAbsolute_NavIsIE()){ 
               positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
               positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
          }else{
               positionSouris_X = parseInt( event.pageX );
               positionSouris_Y = parseInt( event.pageY );
          }
          for(var a=0;a<elementsToResize.length;a++){
               elementsToResize[a].initialWidth = parseInt( positionSouris_X - elementsToResize[a].offsetWidth );
               elementsToResize[a].initialHeight = parseInt( positionSouris_Y - elementsToResize[a].offsetHeight );
               elementsToResize[a].style.opacity = '.8';
          }
          monbody.onmousemove=function(event) {
               if(!event) { event = window.event; }
               if(MoveResizeAbsolute_NavIsIE()){ 
                    positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
                    positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
               }else{
                    positionSouris_X = parseInt( event.pageX );
                    positionSouris_Y = parseInt( event.pageY );
               }
               var MinWidthDone = false;
               var MinHeightDone = false;
               for(var a=0;a<elementsToResize.length;a++){
                    var NewWidth = parseInt( positionSouris_X - elementsToResize[a].initialWidth  );
                    var NewHeight = parseInt( positionSouris_Y - elementsToResize[a].initialHeight );
                    if(MinWidth){
                         if(MinWidth[a] || MinWidth[a]==0){
                              if(NewWidth<parseInt(MinWidth[a])){
                                   NewWidth = MinWidth[a];
                                   MinWidthDone = true;
                              }
                         }
                    }
                    if(MinHeight){
                         if(MinHeight[a] || MinHeight[a]==0){
                              if(NewHeight<parseInt(MinHeight[a])){
                                   NewHeight = MinHeight[a];
                                   MinHeightDone = true;
                              }
                         }
                    }
                    elementsToResize[a].style.width  = NewWidth + 'px';
                    elementsToResize[a].style.height = NewHeight + 'px';
               }
               if(MinWidthDone){
                    for(var a=0;a<elementsToResize.length;a++){
                         if(MinWidth[a]) elementsToResize[a].style.width  = MinWidth[a] + 'px';
                    }
               }
               if(MinHeightDone){
                    for(var a=0;a<elementsToResize.length;a++){
                         if(MinHeight[a]) elementsToResize[a].style.height  = MinHeight[a] + 'px';
                    }
               }

          }
          monbody.onmouseup=function(event) {
               for(var a=0;a<elementsToResize.length;a++){
                    elementsToResize[a].style.opacity = '';
               }
               monbody.onmousemove = null;
               monbody.onmouseup = null;
          }
     }
     elementArea.style.cursor = "se-resize";
}
//</nowiki></pre></source></div>