Utilisateur:Zebulon84/Js1.js

/**
 * Ce code regroupe les cartes et ajoute des boutons de navigtion
 * dans un div de class "geoloc_toggle" contenant des div de class "geoloc"
 */

function imageurl (imgElmt, size, imgObj, bigSize, legend) {
    var imageInfo;
    imgElmt.setAttribute('srcset', '');
	imgElmt.alt = imgObj.alt || imgObj.carte;
 
    $.get( mw.util.wikiScript( 'api' ), {
        format: 'xml',
        action: 'query',
        prop: 'imageinfo',
        titles: mw.config.get('wgFormattedNamespaces')[6] + ':' + imgObj.carte,
        iiprop: 'url|size',
        iiurlwidth: size
    },
    function (data) {
		imageInfo = data.getElementsByTagName('ii')[0];
        imgElmt.src = imageInfo.getAttribute('thumburl');
		if (bigSize) {
			imgObj.srcBigSize = imgElmt.src;
		} else {
			imgObj.src = imgElmt.src;
			legend.href = imgObj.link;
		}
		imgObj.link = imageInfo.getAttribute('descriptionurl');
		imgObj.fullWidth = imageInfo.getAttribute('width');
		imgObj.fullHeight = imageInfo.getAttribute('height');
    } );

    $.get( mw.util.wikiScript( 'api' ), {
        format: 'xml',
        action: 'query',
        prop: 'imageinfo',
        titles: mw.config.get('wgFormattedNamespaces')[6] + ':' + imgObj.carte,
        iiprop: 'url',
        iiurlwidth: size * 1.5
    },
    function (data) {
		var srcset = imgElmt.getAttribute('srcset');
		imageInfo = data.getElementsByTagName('ii')[0].getAttribute('thumburl') + ' 1.5x';
		if (srcset) {
			imageInfo = imageInfo + ', ' + srcset;
		}
        imgElmt.setAttribute('srcset', imageInfo);
		imgObj.srcset = imageInfo;
    } );

	$.get( mw.util.wikiScript( 'api' ), {
        format: 'xml',
        action: 'query',
        prop: 'imageinfo',
        titles: mw.config.get('wgFormattedNamespaces')[6] + ':' + imgObj.carte,
        iiprop: 'url',
        iiurlwidth: size * 2
    },
    function (data) {
		var srcset = imgElmt.getAttribute('srcset');
		imageInfo = data.getElementsByTagName('ii')[0].getAttribute('thumburl') + ' 2x';
		if (srcset) {
			imageInfo = srcset + ', ' + imageInfo;
		}
        imgElmt.setAttribute('srcset', imageInfo);
		imgObj.srcset = imageInfo;
    } );
}

function Geoloc_fullsize (geoloc, imgObj, legend) {
	    if (!geoloc) {
        return;
    }
    var geolocFullSizeDiv = document.getElementById('geoloc_FullSize'),	
	bodyContent = document.getElementById('content') || document.body,	
	titleBar, 
	titleBarText, 
	CloseButton, 
	geolocFullSize2 = geoloc.cloneNode(true), 
	geolocFullSize2Childs, 
	screenWidth = MoveResizeAbsolute_GetScreenWidth(), 
	screenHeight = MoveResizeAbsolute_GetScreenHeight(), 
	geolocFullSizeWidth,
	geolocFullSizeImg, 
	i;
	
	geolocFullSizeWidth = 50 * Math.floor(0.016 * screenHeight * (imgObj.fullWidth || imgObj.width) / (imgObj.fullHeight || imgObj.width));
	geolocFullSizeWidth = Math.min(geolocFullSizeWidth, 50 * Math.floor(0.016 * screenWidth), (imgObj.fullWidth || geolocFullSizeWidth));
	geolocFullSizeImg = getElementsByClassName(geolocFullSize2, 'img', 'geolocimg')[0];
	if (imgObj.srcBigSize) {
		geolocFullSizeImg.src = imgObj.srcBigSize;
	} else {
		imageurl(geolocFullSizeImg, geolocFullSizeWidth, imgObj, true);
	}
	geolocFullSizeImg.style.width = 'inherit';
	geolocFullSize2.id = 'geoloc_FullSize2';
	 
    if (!geolocFullSizeDiv) {
        geolocFullSizeDiv = document.createElement('div');
        geolocFullSizeDiv.id = 'geoloc_FullSize';
		geolocFullSizeDiv.className = 'ui-widget-content';
		geolocFullSizeDiv.style.display = 'table';
		geolocFullSizeDiv.style.position = 'absolute';
		geolocFullSizeDiv.style.zIndex = '5000';		

		CloseButton = document.createElement('button');
		CloseButton.style.position = 'absolute';
		CloseButton.style.right = '0';
		CloseButton.style.fontSize = 'x-small';
		CloseButton.appendChild(document.createTextNode('X'));
		CloseButton.onclick = function() {
			geolocFullSizeDiv.style.display = 'none';
		};
		
		titleBar = document.createElement('div');
		titleBar.style.width = 'inherit';
		titleBar.style.height = '1.6em';
		titleBar.style.background = '#F6F6F6';
		titleBar.style.paddingLeft = '0.5em';
		titleBar.id = 'geoloc_FullSize_Title';
		titleBarText = document.createTextNode(legend);
		titleBar.appendChild(titleBarText);
		titleBar.appendChild(CloseButton);
		
		geolocFullSizeDiv.appendChild(titleBar);
		geolocFullSizeDiv.appendChild(geolocFullSize2);
		
		bodyContent.insertBefore(geolocFullSizeDiv,bodyContent.firstChild);
		
		if (!bodyContent) {
			bodyContent = document.body;
		}
		$( '#geoloc_FullSize' ).draggable();
		
	} else {
		titleBarText = document.getElementById('geoloc_FullSize_Title').firstChild;
		titleBarText.nodeValue = legend;
		geolocFullSizeDiv.replaceChild(geolocFullSize2, geolocFullSizeDiv.lastChild);
	}
	
	//geolocFullSizeDiv.style.top = (screenHeight * 0.1) +'px';
	//geolocFullSizeDiv.style.left = (screenHeight * 0.15) +'px';
	geolocFullSize2.style.width = geolocFullSizeWidth + 'px';
	$( '#geoloc_FullSize2' ).resizable({ aspectRatio: true });
	
	geolocFullSizeDiv.style.display = '';
}
 

function GeolocData (geolocDiv) {
	var geoloc2, mapArray, mapIndex, relief, geolocImg, imgWwidth, activeMap, pointDivs, poitDiv, pointArray, legendA, zoomInBtn, zoomOutBtn, changeTypeBtn, i, j;
  
	geoloc2 = getElementsByClassName(geolocDiv, 'div', 'geoloc2')[0];
	geolocImg = getElementsByClassName(geolocDiv, 'img', 'geolocimg')[0];

	mapArray = JSON.parse(geoloc2.getAttribute('data-cartes'));
	mapIndex = 1;
	if (geoloc2.getAttribute('data-type')) {
		relief =  0;
	} else if (mapArray[1][1]) {
		relief =  1;
	} else {
		relief =  0;
	}
	activeMap = mapArray[mapIndex][relief];
	activeMap.src = geolocImg.src;
	activeMap.srcset = geolocImg.getAttribute('srcset');
	activeMap.height = geolocImg.height;
	activeMap.width = geolocImg.width;
	
	imgWwidth = geolocImg.width;
	geolocImg.removeAttribute('width');
	geolocImg.removeAttribute('height');
	geolocImg.style.position = 'relative';
	jQuery(geolocImg).load(function() {
		geolocImg.style.zIndex = '';
	});
 
	pointDivs = getElementsByClassName(geolocDiv, 'div', 'geolocPoint');
	pointArray = [ ];
	for (i = 0; i < pointDivs.length; i++) {
		pointArray[i] = JSON.parse(pointDivs[i].getAttribute('data-positions'));
		for (j = 0; j < pointArray[i].length; j++) {
			if (pointArray[i][j].point) {
				pointArray[i][j].pointDiv = getElementsByClassName(pointDivs[i], 'div', 'geolocPoint' + j)[0];
			} else {
				pointArray[i][j].pointDiv = getElementsByClassName(pointDivs[i], 'div', 'geolocPointDefaut')[0].getElementsByTagName('div')[0];
			}
			if (pointArray[i][1].point) {
				getElementsByClassName(pointDivs[i], 'div', 'geolocPointDefaut')[0].getElementsByTagName('div')[0].style.display = 'none';
			}
		}
	}
 
	legendA = getElementsByClassName(geolocDiv, 'div', 'geolocLegend')[0].getElementsByTagName('a')[0];
	activeMap.link = legendA.href;
 
	function setMap(mapChange) {
		var testType, pointDiv;
		mapIndex += mapChange;
		if (!mapChange) {
			relief = 1 - relief;
		}
 
		if (!relief || mapArray[mapIndex][relief]) {
			activeMap = mapArray[mapIndex][relief];
		} else {
			activeMap = mapArray[mapIndex][0];
		}
 
		zoomInBtn.disabled = !mapArray[mapIndex + 1];
		zoomOutBtn.disabled = !mapArray[mapIndex - 1];
 
		if (mapArray[mapIndex][1]) {
			changeTypeBtn.disabled = false;
			changeTypeBtn.innerHTML = 'Voir la ' + mapArray[mapIndex][1 - relief].alt;
		} else {
			changeTypeBtn.disabled = true;
			changeTypeBtn.innerHTML = '';
		}
 
		if (!activeMap.src) {
			geolocImg.style.zIndex = '-1';
			imageurl(geolocImg, imgWwidth, activeMap, false, legendA);
		} else {
			geolocImg.src = activeMap.src;
			geolocImg.setAttribute('srcset',activeMap.srcset);
			geolocImg.alt = activeMap.alt;
			legendA.href = activeMap.link;
		}
		legendA.innerHTML = activeMap.alt;
		legendA.title = activeMap.carte;
 
		if (mapChange) {
			for (i = 0; i < pointDivs.length; i++) {
				pointArray[i][mapIndex - mapChange].pointDiv.style.display = 'none';
				pointDiv = pointArray[i][mapIndex].pointDiv;
				pointDiv.style.display = 'block';
				if (!pointArray[i][mapIndex].point) {
					pointDiv.style.left = pointArray[i][mapIndex].x + '%';
					pointDiv.style.top = pointArray[i][mapIndex].y + '%';
				}
			}
		}
	}
 
	function createButton(textB, side, bold, alt, mapChange) {
		var nB = document.createElement('button');
		nB.appendChild(document.createTextNode(textB));
		nB.style.display = 'inline';
		nB.style.styleFloat = side;
		nB.style.cssFloat = side;	
		nB.style.fontSize = 'x-small';
		if (bold) {nB.style.fontWeight = 'bold'; }
		nB.title = alt;
		nB.onclick = function () {
			setMap(mapChange);
		};
		return nB;
	}

	zoomInBtn = createButton('+', '', 'true', 'Zoom avant', 1);
	if (!mapArray[2]) {
		zoomInBtn.disabled = true;
	}
	zoomOutBtn = createButton('–', '', 'true', 'Zoom arrière', -1);
	if (mapArray[1][1]) {
		changeTypeBtn = createButton('Voir la ' + mapArray[1][1 - relief].alt, 'left', '', 'Changer de type de carte', 0);
	} else {
		changeTypeBtn = createButton('', 'left', '', 'Changer de type de carte', 0);
		changeTypeBtn.disabled = true;
	}

	geolocDiv.insertBefore(changeTypeBtn, geolocDiv.firstChild);
	geolocDiv.insertBefore(zoomOutBtn, geolocDiv.firstChild);
	geolocDiv.insertBefore(zoomInBtn, geolocDiv.firstChild);
	
	geolocImg.parentNode.onclick = function () {
		Geoloc_fullsize(geoloc2, activeMap, legendA.parentNode.textContent || legendA.parentNode.innerText);
		return false;
	};
}

function geolocDiv_Init() {
	var i, geolocTab, geolocDivs = getElementsByClassName(document.body, 'div', 'geolocDiv');
	if (geolocDivs.length === 0) {
		return;
	}

	geolocTab = [ ];
	for (i = 0; i < geolocDivs.length; i++) {
		geolocTab[i] = new GeolocData(geolocDivs[i]);
	}
}

$(geolocDiv_Init);

/***
* première version de Géoloc
*/



function geoloc_FullSize_Toggle(c) {
    if (!c) {
        return;
    }
    var geoloc_FullSize, found_link, a, h, imgArea, ima, geoloc_FullSize_Div, LargeurEcran, HauteurEcran, MoveArea, CloseLink, ResizeArea, ElementsToMove, ElementsToResize, ElementsMinWidth, ElementsMinHeights;

    geoloc_FullSize = document.getElementById('geoloc_FullSize');
    LargeurEcran = MoveResizeAbsolute_GetScreenWidth();
    HauteurEcran = MoveResizeAbsolute_GetScreenHeight();

    if (!geoloc_FullSize) {
        geoloc_FullSize = document.createElement('div');
        geoloc_FullSize.id = 'geoloc_FullSize';
        geoloc_FullSize.style.position = "absolute";
        geoloc_FullSize.style.zIndex = 5000;
        geoloc_FullSize.style.border = "2px solid black";
        geoloc_FullSize.style.backgroundColor = "white";
        geoloc_FullSize.style.overflow = "hidden";

        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";

        CloseLink = document.createElement('a');
        CloseLink.setAttribute("style", "float:right;margin:10px;");
        CloseLink.innerHTML = "Masquer";
        CloseLink.title = "Cliquer pour masquer la carte";
        CloseLink.onclick = function () {
            document.getElementById('geoloc_FullSize').style.display = 'none';
            return false;
        };
        CloseLink.href = '#';
        MoveArea.appendChild(CloseLink);

        imgArea = document.createElement('div');
        ima = document.createElement('img');
        imgArea.appendChild(ima);

        geoloc_FullSize.appendChild(MoveArea);
        geoloc_FullSize.appendChild(imgArea);

        document.body.appendChild(geoloc_FullSize);

        ElementsToMove = [geoloc_FullSize];
        ElementsToResize = [geoloc_FullSize, ima];
        ElementsMinWidth = [150, 150];
        ElementsMinHeights = [200, 100];

        MoveResizeAbsolute_AddMoveArea(MoveArea, ElementsToMove);
    }
    geoloc_FullSize.style.top = (HauteurEcran * 10 / 100) + "px";
    geoloc_FullSize.style.left = (LargeurEcran * 15 / 100) + "px";
    geoloc_FullSize.style.width = (LargeurEcran * 70 / 100);
    ima = geoloc_FullSize.getElementsByTagName('img')[0];
    if (LargeurEcran / HauteurEcran > c.width / c.height) {
        ima.style.width = 'auto';
        ima.style.height = '';
        ima.style.maxWidth = '';
        ima.style.maxHeight = (HauteurEcran * 70 / 100) + 'px';
    } else {
        ima.style.width = '';
        ima.style.height = 'auto';
        ima.style.maxWidth = (LargeurEcran * 70 / 100) + 'px';
        ima.style.maxHeight = '';
    }
    ima.src = c.src;
    ima.src = c.src.replace(/thumb\/(.+\.(jpg|gif|png|svg))\/.+$/, '$1');
    geoloc_FullSize.style.display = 'block';
}

function buttonCreate(idB, tB, side, bold, alt) {
	var nB = document.createElement('button');
	nB.id = idB;
	nB.appendChild(document.createTextNode(tB));
	nB.style.display = 'inline';
	nB.style.styleFloat = side;
	nB.style.cssFloat = side;
	nB.style.fontSize = 'x-small';
	if (bold) {nB.style.fontWeight = 'bold'; }
	nB.title = alt;
	return nB;
}

function geoloc_Init() {
	var cont = getElementsByClassName(document.body, 'div', 'geoloc_toggle');
	if (cont.length === 0) {
		return;
	}

	var zoomPlus, zoomMoins, zoomDiv, toggle, boxes, box, nbBox, i, j, m, l, typecarte, imagelinks;

	function buttonsDef(tC, idBox) {
		zoomPlus = buttonCreate('geolocZp_' + idBox, '+', '', 'true', 'Zoom avant');
		zoomMoins = buttonCreate('geolocZm_' + idBox, '–', '', 'true', 'Zoom arrière');
		toggle = buttonCreate('geolocToggle_' + idBox, 'Voir la carte ' + tC, 'left', '', 'Changer de type de carte');
		zoomDiv.appendChild(toggle);
		zoomDiv.appendChild(zoomMoins);
		zoomDiv.appendChild(zoomPlus);
	}

	for (i = 0, m = cont.length; i < m; i++) {
		cont[i].id = 'geoloc_toggle_' + i;
		boxes = getElementsByClassName(cont[i], 'div', 'geoloc');
		for (j = 0, nbBox = 0, l = boxes.length; j < l; j++) {
			box = boxes[j];
			zoomDiv = getElementsByClassName(box, 'div', 'typecarte');
			if (zoomDiv.length > 0) {
				zoomDiv = zoomDiv[0];
				typecarte = zoomDiv.getAttribute('data-type');
				switch (typecarte) {
				case 'adm':
					nbBox += 1;
					box.id = 'geoloc_' + i + '_' + nbBox;
					buttonsDef('administrative', i + '_' + nbBox);
					toggle.style.display = 'none';
					(function (i, nbb) {
						zoomPlus.onclick = function () {
							this.parentNode.parentNode.style.display = 'none';
							document.getElementById('geoloc_' + i + '_' + (nbb + 1)).style.display = '';
							return false;
						};
						zoomMoins.onclick = function () {
							this.parentNode.parentNode.style.display = 'none';
							document.getElementById('geoloc_' + i + '_' + (nbb - 1)).style.display = '';
							return false;
						};
					})(i, nbBox);
					toggle.onclick = function () {
						var geobox = this.parentNode.parentNode;
						geobox.style.display = 'none';
						document.getElementById(geobox.id + '_relief').style.display = '';
						return false;
					};
					break;
				case 'relief':
					box.id = 'geoloc_' + i + '_' + nbBox + '_relief';
					buttonsDef('topographique', i + '_' + nbBox + '_relief', box.firstChild);
					(function (i, nbb) {
						zoomPlus.onclick = function () {
							this.parentNode.parentNode.style.display = 'none';
							var bx = document.getElementById('geoloc_' + i + '_' + (nbb + 1) + '_relief');
							if (bx) {
								bx.style.display = '';
							} else {
								document.getElementById('geoloc_' + i + '_' + (nbb + 1)).style.display = '';
							}
							return false;
						};
						zoomMoins.onclick = function () {
							this.parentNode.parentNode.style.display = 'none';
							var bx = document.getElementById('geoloc_' + i + '_' + (nbb - 1) + '_relief');
							if (bx) {
								bx.style.display = '';
							} else {
								document.getElementById('geoloc_' + i + '_' + (nbb - 1)).style.display = '';
							}
							return false;
						};
						toggle.onclick = function () {
							this.parentNode.parentNode.style.display = 'none';
							document.getElementById('geoloc_' + i + '_' + nbb).style.display = '';
							return false;
						};
					})(i, nbBox);
					document.getElementById('geolocToggle_' + i + '_' + nbBox).style.display = '';
					break;
				default:
			    }
			}
			box.style.display = 'none';

		}
		document.getElementById('geolocZm_' + i + '_1').disabled = true;
		box = document.getElementById('geolocZm_' + i + '_1_relief');
		if (box) {
			box.disabled = true;
		}
		document.getElementById('geolocZp_' + i + '_' + nbBox).disabled = true;
		box = document.getElementById('geolocZp_' + i + '_' + nbBox + '_relief');
		if (box) {
			box.disabled = true;
		}
		box = document.getElementById('geoloc_' + i + '_1_relief');
		if (box) {
			box.style.display = '';
		} else {
			document.getElementById('geoloc_' + i + '_1').style.display = '';
		}

		imagelinks = getElementsByClassName(cont[i], 'a', 'image');
		for (j = 0, l = imagelinks.length; j < l; j++) {
			imagelinks[j].onclick = function () {
				geoloc_FullSize_Toggle(this.firstChild);
				return false;
			};
			imagelinks[j].href = '#';
		}
	}
}

$(geoloc_Init);