index.js

//git URL that will be used to import the layers
const git = 'https://raw.githubusercontent.com/' + gitName + '/europe_maps/master/polygones.json';
const gitPersonnes = 'https://raw.githubusercontent.com/' + gitName + '/europe_maps/master/personne.json';
const gitSouv = 'https://raw.githubusercontent.com/' + gitName + '/europe_maps/master/link.json';
const gitEvents = 'https://raw.githubusercontent.com/' + gitName + '/europe_maps/master/event.json';



function importMap() {

	if (appMode) hideImportExport();

	let s = window.location.href;
	let url = new URL(s);
	//Si l'utilisateur a tenté d'importé une année
	let request = new XMLHttpRequest();
	//Ajout de chaque polygone
	try {
		request.open('GET', git, true);
		request.onload = function () {
			// Convert JSON data to an object
			window.features = JSON.parse(this.response);

			//Parcours des polygones, appel de la fonction onEachFeature
			L.geoJson(window.features, {
				onEachFeature: onEachFeature
			});
			refreshDisplay();
		}
		request.send();
	} catch {
		console.log("An unknown error has been fired");
	}
}

function importPersonnes() {
	if (appMode) hideImportExport();

	let s = window.location.href;
	let url = new URL(s);
	//Si l'utilisateur a tenté d'importé une année
	let request = new XMLHttpRequest();
	//Ajout de chaque polygone
	try {
		request.open('GET', gitPersonnes, true);
		request.onload = function () {
			// Convert JSON data to an object
			window.listePersonnes = JSON.parse(this.response);
			createJsonGlobal(window.listePersonnes);
		}
		request.send();
	} catch {
		console.log("An unknown error has been fired");
	}
}

function importSouverainete() {

	if (appMode) hideImportExport();

	let s = window.location.href;
	let url = new URL(s);
	//Si l'utilisateur a tenté d'importé une année
	let request = new XMLHttpRequest();
	//Ajout de chaque polygone
	try {
		request.open('GET', gitSouv, true);
		request.onload = function () {
			// Convert JSON data to an object
			window.souverainete = JSON.parse(this.response);
		}
		request.send();
	} catch {
		console.log("An unknown error has been fired");
	}
}

function importEvents() {

	if (appMode) hideImportExport();

	let s = window.location.href;
	let url = new URL(s);
	//Si l'utilisateur a tenté d'importé une année
	let request = new XMLHttpRequest();
	//Ajout de chaque polygone
	try {
		request.open('GET', gitEvents, true);
		request.onload = function () {
			// Convert JSON data to an object
			window.events = JSON.parse(this.response);
		}
		request.send();
	} catch {
		console.log("An unknown error has been fired");
	}
}





function onEachFeature(feature, layer) {
	feature.layer = null;
	layer.feature = feature;
	layer.setStyle({
		color: getRandomColor(layer.feature.properties.idpays),
		fillOpacity: 0.4,
		fillColor: getRandomColor(layer.feature.properties.idpays)
	});
	layer.on('mouseover', function (e) {
		this.setStyle({
			fillOpacity: 0.8
		})
	});
	layer.on('mouseout', function (e) {
		this.setStyle({
			fillOpacity: 0.4
		})
	});
	allPoly.addLayer(layer);
}





function getRandomColor(n) {
	if (countryColor.get(n) === undefined) {
		let letters = '0123456789ABCDEF';
		let goodColor = false;
		let color;
		//Decide if the color is good or not
		while (!goodColor) {
			color = '#';
			for (let i = 0; i < 3; i++) {
				color += letters[Math.floor(Math.random() * 16)];
			}
			if (usedColor.get(color) === undefined) {
				usedColor.set(color, true);
				goodColor = true;
			}
		}
		countryColor.set(n, color);
		return color;
	} else {
		return countryColor.get(n);
	}
}





function refreshDisplay() {
	if(listePluriPays.length > 0)
	{
		for(let pays of listePluriPays){
			pays.off('click');
			setLayerBasic(pays);
		}
		listePluriPays = []
	}
	pluriPays = false;
	shownPoly.clearLayers();
	allPoly.eachLayer(
		function (layer) {
			//console.log(layer);
			if (layer.feature.properties.idbataille != null)
			{
				if (layer.feature.properties.debut.split('/')[2] <= document.querySelector('#slider').value && layer.feature.properties.fin.split('/')[2] >= document.querySelector('#slider').value) {
					shownPoly.addLayer(layer);
				}
			}
			else
			{
				if (layer.feature.properties.debut <= document.querySelector('#slider').value && layer.feature.properties.fin >= document.querySelector('#slider').value) {
					shownPoly.addLayer(layer);
				}
			}
		});
	doc('pointId').style.visibility = "hidden";
	redefEachLayer();
	if(currentShowingCountry)
		showInfos(currentShowingCountry);
}





function addOrRemoveOfList(layer){
	let isIN = false;
	for(let pays of listePluriPays){
		if(pays.feature.properties.idpays == layer.feature.properties.idpays){ // Si le pays est dans la liste, on l'enlève, et on return
			const indexOfPays = listePluriPays.indexOf(pays);
			if(indexOfPays > -1) listePluriPays.splice(indexOfPays,1);
			isIN = false;
			return isIN;
		}
	}
	//Si le pays n'a pas été trouvé, on l'ajoute et on retourne
	listePluriPays.push(layer);
	isIN = true;
	return isIN;
}

function setLayerFilled(layer) {
	layer.setStyle({
		color: getRandomColor(layer.feature.properties.idpays),
		fillOpacity: 1,
		fillColor: getRandomColor(layer.feature.properties.idpays)
	});
	layer.on('mouseover', function (e) {
		this.setStyle({
			fillOpacity: 1
		})
	});
	layer.on('mouseout', function (e) {
		this.setStyle({
			fillOpacity: 1
		})
	});
}

function setLayerBasic(layer) {
	layer.setStyle({
		color: getRandomColor(layer.feature.properties.idpays),
		fillOpacity: 0.4,
		fillColor: getRandomColor(layer.feature.properties.idpays)
	});
	layer.on('mouseover', function (e) {
		this.setStyle({
			fillOpacity: 0.8
		})
	});
	layer.on('mouseout', function (e) {
		this.setStyle({
			fillOpacity: 0.4
		})
	});
}





//Fonction redéfinit la fonction qui affiche le nom du pays
function redefEachLayer() {
	shownPoly.eachLayer(function (layer) {
		let isIN = false;
		layer.on('click', function () {
			if(pluriPays) {
				
				if(listePluriPays.length == 1)
				{
					if(listePluriPays[0].feature.properties.idpays != layer.feature.properties.idpays)
						setLayerFilled(listePluriPays[0]);
				}
				isIN = addOrRemoveOfList(layer);
				if(isIN) {
					setLayerFilled(layer);
				}
				else
				{
					setLayerBasic(layer);
				}
				//console.log(listePluriPays)
			}
			else
			{
				if(listePluriPays.length > 0)
				{
					for(let pays of listePluriPays){
						setLayerBasic(pays);
					}
					listePluriPays = []
				}
				setLayerFilled(layer);
				listePluriPays.push(layer);
				isIN = true;
			}
			if(layer.feature.properties.idbataille != null)
			{
				layer.on('click', function () {
					//console.log(layer);
					let s = "VOICI LA BATAILLE DE " + layer.feature.properties.idbataille + "<br>";
					s += "Elle dura du " + layer.feature.properties.debut + " au " + layer.feature.properties.fin + "<br>";
					layer.bindPopup(s);
				});
			}
			else
			{
				shownFamily=true;
				showRight();

				let p = getPersonne(document.querySelector('#slider').value, layer.feature.properties.idpays);
				if(p)
				{
					let s = '<p style="text-align:center">';
					s += layer.feature.properties.idpays;
					s += " (" + layer.feature.properties.debut + " - " + layer.feature.properties.fin + ")";
					s += "<br>";
					s += "Gouverné par " + p.prenom + " " + p.nom;
					s += "<br>";
					s += "(" + p.datenaissance.split("-")[0] + " - " + p.datemort.split("-")[0] + ")";
					s += "<br>";
					s += '<a onClick="showRight(\'' + layer.feature.properties.idpays + '\')">En savoir plus sur le souverain<a>';
					s += "</p>";
					if(isIN)
						layer.bindPopup(s).openPopup();
					else
						layer.unbindPopup();
						if(listePluriPays.length > 0)
							listePluriPays[listePluriPays.length-1].openPopup();
						
				}
				else {
					let s = '<p style="text-align:center">'
					s+= "Pas de données";
					s += "<br>";
					layer.bindPopup(s).openPopup();
				}
			}
		});
	});
}





function showRight(e) {
	if (shownFamily == false)
	{
		currentShowingCountry = e;
		showInfos(currentShowingCountry);
	}
	else
	{
		currentShowingCountry = null;
		hideInfos();
	}
	return false;
}





/**
 * get the local string of date from the string in parameter : format YYYY-MM-DD
 */
function getDate(string){
	let [year,month,day] = string.split('-');
	month -= 1;
	const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

	const date = new Date(Date.UTC(year,month,day));
	return date.toLocaleDateString("fr-FR", options);
}

function setLeaderImg(name){
	let request = new XMLHttpRequest();
	try {
		request.open('GET', 'https://en.wikipedia.org/w/api.php?origin=*&action=query&titles='+name+'&prop=pageimages&format=json&pithumbsize=1000', true);
		request.onload = function () {
			// Convert JSON data to an object
			try{
				let img = JSON.parse(this.response);
				doc('leaderimg').src = Object.values(img.query.pages)[0].thumbnail.source;
			}
			catch(e){
				doc('leaderimg').src ='https://www.abc-citations.com/wp-content/uploads/2015/03/louis-XIV.jpg';
			}
		}
		request.send();
	}
	catch(e){
		doc('leaderimg').src = 'https://www.abc-citations.com/wp-content/uploads/2015/03/louis-XIV.jpg';
	}	
}

function showInfos(e) {
	//console.log(listePluriPays);
	shownFamily = true;
	doc('familyUI').style.width = "30%";
	doc('familyUI').style.left = doc('mapUI').getBoundingClientRect().width-(0.3*doc('mapUI').getBoundingClientRect().width)+'px';	
	doc('familyUI').style.display = null;
	doc('inferiorUI').style.width = "66%";
	doc('inferiorUI').style.marginLeft = "2%";
	let p = getPersonne(document.querySelector('#slider').value, e); //Do we have a leader for the country?
	if(p != null) // We have info about the leader
	{
		setLeaderImg(p.prenom + " " + p.nom);
		doc('leaderinfo').innerHTML = "Nous parlons de " + p.prenom + " " + p.nom + "<br>" + "Cette personne est née le "+ getDate(p.datenaissance) + " et morte le " + getDate(p.datemort) + ",<br>" + "qui a régné de " + p.debutr + " à " + p.finr;
		doc('leaderimg').align = "middle";
		doc('leaderimg').style.border = "5px solid black";
		doc('leaderimg').align = "middle";
		doc('leaderimg').style.visibility = "visible";
		doc("leaderimg").style.position = "relative";
		doc('close').src = "assets/images/cross.png";	
		doc('close').style.visibility = "visible";
		doc('canvas').style.overflowX = 'scroll';
		document.querySelector('.resizer').style.visibility = "visible";
		document.querySelector('.resizer').style.left = "-6px";
		if(!appMode)
		{
			doc('delete').style.left = "60%";
			doc('export').style.left = "60%";
		}
		doc('leaderinfo').innerHTML += '<br> Il s\'agit de l\'arbre de ';

		if(listePluriPays.length < 2){ //Graph of one country's leader
			graph_main(p.prenom + " " + p.nom);
			doc('leaderinfo').innerHTML += p.prenom + ' ' + p.nom + '.<br>';
		}
		else{
			let countryLeaders = [];
			for(let pays of listePluriPays){
				const p = getPersonne(document.querySelector('#slider').value, pays.feature.properties.idpays);
				countryLeaders.push(p.prenom + " " + p.nom);
				doc('leaderinfo').innerHTML += " " + p.prenom + ' ' + p.nom;
				if(countryLeaders.length == listePluriPays.length){
					doc('leaderinfo').innerHTML += '.<br>';
				}
				else if(countryLeaders.length+1 == listePluriPays.length){
					doc('leaderinfo').innerHTML += ' et de ';
				}
				else{
					doc('leaderinfo').innerHTML += ', ';
				}
			}
			graph_main(countryLeaders)
		}
	}
	else // We have no leader in our database
	{
		emptyInfos(e);
	}
}

function emptyInfos(e) {
	doc('leaderinfo').innerHTML = "Aucun dirigeant n'a été trouvé pour la zone demandée";
	doc('leaderimg').src = "https://www.abc-citations.com/wp-content/uploads/2015/03/louis-XIV.jpg";
	doc('leaderimg').align = "middle";
	doc('leaderimg').style.border = "5px solid black";
	doc('leaderimg').align = "middle";
	doc('leaderimg').style.visibility = "visible";
	doc("leaderimg").style.position = "relative";
	doc('close').src = "assets/images/cross.png";	
	doc('close').style.visibility = "visible";
	d3.select('#canvas').select('svg').remove();
	doc('canvas').style.overflowX = 'hidden';
}

function hideInfos() {
	shownFamily = false;
	doc('familyUI').style.width = "0%";
	doc('familyUI').style.left = "100%";
	doc('familyUI').style.display = "none";
	doc('delete').style.left = "90%";
	doc('export').style.left = "90%";
	doc('inferiorUI').style.width = "100%";
	doc('inferiorUI').style.marginLeft = "0%";
	doc('leaderinfo').innerHTML = "";
	doc('leaderimg').style.visibility = "hidden";
	doc("leaderimg").style.position = "absolute";
	doc("leaderimg").style.top = "0%";
	doc("leaderimg").style.right = "0%";
	doc('close').style.visibility = "hidden";
	document.querySelector('.resizer').style.visibility = "hidden"
	document.querySelector('.resizer').style.left = "-13px";
	if(!appMode)
	{
		doc('delete').style.left = "90%";
		doc('export').style.left = "90%";
	}
}

function doc(element) {
	return document.getElementById(element);
}

function hideImportExport()
{
	doc('delete').style.display = "none";
	doc('export').style.display = "none";
}

function displaySlider(low) {	
	let myRange = document.querySelector('#slider');	
	let myNumber = document.querySelector('#number');	
	let myValue = document.querySelector('#value');	
	
	myValue.innerHTML = myRange.value;	
	
	if(low){	
		myRange.addEventListener('change', modifyRangeValue);	
		myNumber.addEventListener('change', modifyNumberValue);	
		myRange.removeEventListener('input',modifyRangeValue);	
		myNumber.removeEventListener('input',modifyNumberValue);	
	}	
	else{	
		myRange.addEventListener('input', modifyRangeValue);	
		myNumber.addEventListener('input', modifyNumberValue);	
		myRange.removeEventListener('change',modifyRangeValue);	
		myNumber.removeEventListener('change',modifyNumberValue);	
	}	
}	
	
function modifyRangeValue(){	
	let myRange = document.querySelector('#slider');	
	let myNumber = document.querySelector('#number');	
	let myValue = document.querySelector('#value');	
	refreshDisplay(myRange);	
	myValue.innerHTML = myRange.value;	
	myNumber.value = myRange.value;	
}	
	
function modifyNumberValue(){	
	let myRange = document.querySelector('#slider');	
	let myNumber = document.querySelector('#number');	
	let myValue = document.querySelector('#value');	
	if(myNumber.value>1800 && myNumber.value<2000){	
		refreshDisplay(myNumber);	
		myValue.innerHTML = myNumber.value;	
		myRange.value = myNumber.value;	
	}
}

doc('close').addEventListener('click', showRight)

function resizeFamily() {
	const element = document.querySelector('#familyUI');
	const resizer = document.querySelectorAll('#familyUI' + ' .resizer');
	const minimum_size = resizerMinimumWidth;
	let original_width = 0;
	let original_x = 0;
	let original_mouse_x = 0;
	for (let i = 0; i < resizer.length; i++) {
	  const currentResizer = resizer[i];
	  currentResizer.addEventListener('mousedown', function (e) {
		e.preventDefault();
		original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
		original_x = element.getBoundingClientRect().left;
		original_mouse_x = e.pageX;
		window.addEventListener('mousemove', resize);
		window.addEventListener('mouseup', stopResize);
	  });

	  function resize(e) {
		let left = element.style.left.replace('px', '');	
			let current_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));	
			if (currentResizer.classList.contains('resizer')) {	
				const del = doc('delete');	
				const exp = doc('export');	
				const slider = doc('inferiorUI');	
				const band = doc('pointId');	
				const width = original_width - (e.pageX - original_mouse_x);
				doc('familyUI').style.transition = "0s";	
		  		if ((current_width > minimum_size || width>current_width) && left<doc('mapUI').getBoundingClientRect().width) {	
					element.style.width = width + 'px';	
					element.style.left = original_x + (e.pageX - original_mouse_x) + 'px';	
					del.style.left = original_x + (e.pageX - original_mouse_x) - 145 + 'px';	
					del.style.transition = "0s";	
					exp.style.left = original_x + (e.pageX - original_mouse_x) - 145 + 'px';	
					exp.style.transition = "0s";	
					slider.style.width = original_x + (e.pageX - original_mouse_x)- 50 +"px";	
					slider.style.transition = "0s";	
					band.style.width = original_x + (e.pageX - original_mouse_x) +"px";	
					band.style.transition = "0s";	
			  	}	
		 	 	else{	
					current_width = minimum_size;	
					element.style.width = minimum_size + 'px';	
					element.style.left = doc('mapUI').getBoundingClientRect().width-current_width+ 'px';	
					del.style.left = doc('mapUI').getBoundingClientRect().width-current_width - 145 + 'px';
					exp.style.left = doc('mapUI').getBoundingClientRect().width-current_width - 145 + 'px';	
					slider.style.width = doc('mapUI').getBoundingClientRect().width-current_width - 50 +"px";	
					band.style.width = doc('mapUI').getBoundingClientRect().width-current_width +"px";
				}
			}
	  	}

	  function stopResize() {
			doc('familyUI').style.transition = "0.3s";
			doc('delete').style.transition = "0.3s";
			doc('export').style.transition = "0.3s";
			doc('pointId').style.transition = "0.3s";
			doc('inferiorUI').style.transition = "0.3s";
			window.removeEventListener('mousemove', resize);
	  }
	}
}





document.body.addEventListener('keyup', function(event) {
	if(event.code == 'KeyQ')
	{
		if (doc('pointId').style.visibility == "hidden") // Si ce n'est pas affiché, on affiche le bandeau
		{
			doc('pointId').style.visibility = "visible";
			doc('pointId').style.opacity = 0.6;

			let s = "";
			window.events.forEach(function(event){
				//console.log(event);
				if(document.querySelector('#slider').value >= event.debut.split('-')[0] && document.querySelector('#slider').value <= event.fin.split('-')[0])
				{
					s += event.description + "<br><br>";
				}
			});
			if(s == "")
			{
				s = 'Aucune information sur cette année';
			}

			doc('texteGuerre').innerHTML = s;
		}
		else
		{ //On l'enlève
			doc('pointId').style.visibility = "hidden";
		}

	}
	else if (event.code == 'ControlLeft')
	{
		pluriPays = false;
	}
});

document.body.addEventListener('keydown', function(event) {
	if(event.code == 'ControlLeft')
	{
		pluriPays = true;
	}
});

document.body.addEventListener('click', function(event) {
	if(event.type == 'click')
	{
		doc('pointId').style.visibility = "hidden";
	}
});





function getPersonne(annee, idPays)
{
	let p = null;
	//console.log(annee, idPays);
	window.souverainete.forEach(function(lien)
	{
		let annDebut = lien.debutregne.split('-')[0];
		let annFin = lien.finregne.split('-')[0];

		if (lien.idPays == idPays && annee >= annDebut && annee <= annFin)
		{
			//console.log("UN GENS A ETE TROUVE");
			let souverain = lien.idSouverain;
			window.listePersonnes.forEach(function(personne)
			{
				//console.log(personne);
				if(personne.id == souverain)
				{
					p = personne;
					p.debutr = annDebut;
					p.finr = annFin;
				}
			});
		}
	});
	return p;
}





let countryColor = new Map();
let usedColor = new Map();

let mymap = L.map('mapid').setView([52.51, 13.35], 4);
let cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
	maxZoom: 6,
	minZoom: 4,
	id: 'mapbox.satellite',
	attribution: cartodbAttribution
}).addTo(mymap);


let allPoly = L.featureGroup();
let shownPoly = L.featureGroup().addTo(mymap);

let shownFamily = false;
let currentShowingCountry;

let pluriPays = false;
let listePluriPays = [];

const topValue = document.querySelector('#value');
topValue.addEventListener('input', ()=>{
	document.querySelector('#slider').value = topValue.innerHTML;
	refreshDisplay();
});

let toggle = document.querySelector('#switch input');	
toggle.addEventListener('change', function() {
    displaySlider(this.checked)
});

importMap();
importPersonnes();
importSouverainete();
importEvents();
displaySlider(true);
resizeFamily();





if (appMode)
{
	mymap.touchZoom.disable();
	mymap.doubleClickZoom.disable();
	mymap.scrollWheelZoom.disable();
	mymap.boxZoom.disable();
	mymap.keyboard.disable();

	// on click, clear all layers
	doc('delete').onclick = function (e) {
		shownPoly.clearLayers();
		shownPoly.eachLayer(function (layer){
			if (allPoly.hasLayer(layer)) {
				allPoly.removeLayer(layer);
			}
		});
		redefEachLayer();
	}

	//on click, export all polygones
	doc('export').onclick = function (e) {
		// Extract GeoJson from shownPoly
		let data = allPoly.toGeoJSON();
		// Stringify the GeoJson
		let convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));

		// Create export
		doc('export').setAttribute('href', 'data:' + convertedData);
		doc('export').setAttribute('download', 'polygones.json');
	}
}
else
{
	let drawControl = new L.Control.Draw({
		draw: {
			polyline: false,
			rectangle: false,
			circle: false
		},
		edit: {
			featureGroup: shownPoly
		}
	}).addTo(mymap);
}





mymap.on('draw:created', function (e) {
	let valide = true;

	let layer = e.layer,
		feature = layer.feature = layer.feature || {}; // Intialize layer.feature

	feature.type = feature.type || "Feature"; // Intialize feature.type
	let props = feature.properties = feature.properties || {}; // Intialize feature.properties

	if(e.layerType == 'marker')
	{
		let idbataille = prompt("Nom de la bataille : ", "");
		let debut = prompt("Date de début : XX/XX/XXXX ", "");
		let fin = prompt("Date de fin : XX/XX/XXXX", "");

		if(idbataille == null || debut == null || fin == null)
			valide = false;

		props.idbataille = idbataille;
		props.debut = debut;
		props.fin = fin;

		if(valide)
		{
			// Each time a feature is created, it's added to the over arching feature group
			allPoly.addLayer(e.layer);

			refreshDisplay();
		}
	}
	else
	{
		let idpays = prompt("Nom du pays : ", "");
		let debut = prompt("Année de début : ", "");
		let fin = prompt("Année de fin : ", "");

		if(idpays == null || debut == null || fin == null)
			valide = false;

		props.idpays = idpays;
		props.debut = debut;
		props.fin = fin;

		//console.log(e.layer);

		if(valide)
		{
			// Each time a feature is created, it's added to the over arching feature group
			allPoly.addLayer(e.layer);

			refreshDisplay();
		}
	}
});

mymap.on('draw:edited', function (e) {
	e.layers.eachLayer(function (layer) {
		//console.log(layer);
	});
});

mymap.on('draw:deleted', function (e) {
	e.layers.eachLayer(function (layer) {
		allPoly.removeLayer(layer);
	});
});