séparation des fichiers v1

src/Version 1/assets/js/functions.js

+
+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.addEventListener('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();
+				}
+			}
+		});
+		let p = getPersonne(document.querySelector('#slider').value, layer.feature.properties.idpays); //Do we have a leader for the country?
+		if(p != null) // We have info about the leader
+		{
+			const uptimg = layer;
+			uptimg.addEventListener('click',setLeaderImg);
+			uptimg.name = p.prenom + " " + p.nom;
+		}
+	});
+}
+
+
+
+
+
+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(evt){
+	let name = evt.target.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 = window.innerWidth-(0.3*window.innerWidth)+'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
+	{
+		const uptimg = doc('slider');
+		uptimg.addEventListener('change',setLeaderImg);
+		uptimg.name = 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";
+		document.querySelector('#familyUI .close').src = "assets/images/cross.png";	
+		document.querySelector('#familyUI .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').style.visibility = "visible";
+	doc("leaderimg").style.position = "relative";
+	document.querySelector('#familyUI .close').src = "assets/images/cross.png";	
+	document.querySelector('#familyUI .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('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%";
+	document.querySelector('#familyUI .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;
+	myRange.addEventListener('change', modifyRangeValue);	
+	myNumber.addEventListener('change', modifyNumberValue);		
+	
+	if(low){	
+		myRange.removeEventListener('input',modifyRangeValue);	
+		myNumber.removeEventListener('input',modifyNumberValue);	
+	}	
+	else{	
+		myRange.addEventListener('input', modifyRangeValue);	
+		myNumber.addEventListener('input', 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;	
+	}
+}
+
+document.querySelector('#familyUI .close').addEventListener('click', showRight);
+doc('help').addEventListener('mouseover', displayHelp);	
+doc('help').addEventListener('mouseout', hideHelp);
+
+function resizeFamily() {
+	const element = document.querySelector('#familyUI');
+	const resizer = document.querySelector('#familyUI' + ' .resizer');
+	const minimum_size = resizerMinimumWidth;
+	let original_width = 0;
+	let original_x = 0;
+	let original_mouse_x = 0;
+	  resizer.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', ''));	
+				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<window.innerWidth) {	
+					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 = window.innerWidth-current_width+ 'px';	
+					del.style.left = window.innerWidth-current_width - 145 + 'px';
+					exp.style.left = window.innerWidth-current_width - 145 + 'px';	
+					slider.style.width = window.innerWidth-current_width - 50 +"px";	
+					band.style.width = window.innerWidth-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);
+	  }
+	});
+}
+
+		
+function displayHelp(){	
+	doc('help').innerHTML = "<br>Aide :<br><br>\
+	A :  Informations marquantes sur les batailles <br>\
+	Clic sur une région :  Informations sur la région";	
+	doc('help').style.width = "20%";	
+}	
+	
+function hideHelp(){	
+	doc('help').innerHTML = "";	
+	doc('help').style.width = "0.5%";	
+}
+
+
+
+
+
+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;
+}
\ No newline at end of file

src/Version 1/assets/js/init.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");
+	}
+}
\ No newline at end of file

src/Version 1/index.html

@@ -66,6 +66,8 @@
 	</div>
 
 	<script src="assets/js/config.js"></script>
+	<script src="assets/js/init.js"></script>
+	<script src="assets/js/functions.js"></script>
 	<script src="assets/js/index.js"></script>
 
 </body>