Nantes Université

Skip to content
Extraits de code Groupes Projets
Valider 4a4bab35 rédigé par Nicolas DARY's avatar Nicolas DARY
Parcourir les fichiers

séparation des fichiers v1

parent 13f87b7b
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
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
Ce diff est replié.
//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
......@@ -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>
......
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter