ClickOnPerson, and the time will change

src/Version 1/assets/js/config.js

@@ -2,5 +2,7 @@
 const gitName = 'Sandcook';
 const appMode = false;
 const resizerMinimumWidth = 320;
+const MIN_TIME = 1800;
+const MAX_TIME = 2000;
 
 

src/Version 1/assets/js/familyGraph.js

@@ -445,9 +445,9 @@ function createJsonGlobal(json){
    /**
     * retourne si la personne au nom donné en paramètre est dirigeante du pays donné
     */
-   function isCurrentLeader(preNom, pays)
+   function isLeaderAt(preNom, pays, date)
    {
-      let p = getPersonne(document.querySelector('#slider').value, pays);
+      let p = getPersonne(date, pays);
       if(p && preNom === p.prenom + " " + p.nom) return "Actuel";
       else return "";
    }
@@ -998,6 +998,27 @@ function createJsonGlobal(json){
       return false;
    }
 
+   function changementDate(pays, date) {
+      let myRange = document.querySelector('#slider');
+      let myNumber = document.querySelector('#number');
+      let myValue = document.querySelector('#value');
+      myValue.innerHTML = date;
+      myRange.value = date;
+      myNumber.value = date;
+      refreshDisplay();
+      setBasicButThisLayer(pays);
+   }
+
+   function setBasicButThisLayer(name) {
+      shownPoly.eachLayer(function (layer) {
+         if(name == layer.feature.properties.idpays) 
+            setLayerFilled(layer);
+         else
+            setLayerBasic(layer);
+      });
+      
+   }
+
    /**
     * construction du graphe pour le dirigeant donné en paramètre 
     */
@@ -1122,8 +1143,6 @@ function createJsonGlobal(json){
          .attr('height', node_height)
          .attr('rx', '0px')
          .attr('ry', '0px')
-         .on("click", function(d) { window.open('https://fr.wikipedia.org/wiki/' + d.name); });
-      
       enter_g
          .append('text')
          .attr('x', 2)
@@ -1132,7 +1151,7 @@ function createJsonGlobal(json){
             let css = "";
             if(estDirigeant(d.name)){
                const pays = paysDirigeant(d.name);
-               const actuelDirigeant = isCurrentLeader(d.name, pays);
+               const actuelDirigeant = isLeaderAt(d.name, pays, document.querySelector('#slider').value);
                let toRet = "";
                if(actuelDirigeant === "Actuel"){
                   css += "font-weight:bold;"
@@ -1149,13 +1168,25 @@ function createJsonGlobal(json){
          .text((d) => {
             if(estDirigeant(d.name)){
                const pays = paysDirigeant(d.name);
-               const actuelDirigeant = isCurrentLeader(d.name, pays);
+               const actuelDirigeant = isLeaderAt(d.name, pays, document.querySelector('#slider').value);
                return d.name + "\n"+ actuelDirigeant +"("+pays +")";
             }
             
             return d.name;})
          
-         .on("click", function(d) { window.open('https://fr.wikipedia.org/wiki/' + d.name); })
+         .on("click", function(d) { 
+            if(estDirigeant(d.name)){
+               const pays = paysDirigeant(d.name);
+               for(var i = MIN_TIME; i < MAX_TIME; i++) {
+                  const actuelDirigeant = isLeaderAt(d.name, pays, i);
+                  if(actuelDirigeant == "Actuel") {
+                     changementDate(pays, i)
+                     return
+                  }
+               }
+            }
+          })
+          //window.open('https://fr.wikipedia.org/wiki/' + d.name);
          .call(wrap, node_width);
       
       enter_g

src/Version 2/assets/js/functions.js

@@ -144,6 +144,8 @@ function getColor(name) {
 	return color;
 }
 
+
+
 function getPaysFromRegion(name) {
 	let s = null;
 	let theeDigit = getTHREEDIGITNAME(name);
@@ -495,7 +497,7 @@ function modifyRangeValue(){
 	let myRange = document.querySelector('#slider');
 	let myNumber = document.querySelector('#number');
 	let myValue = document.querySelector('#value');
-	refreshDisplay(myRange);
+	refreshDisplay();
 	myValue.innerHTML = myRange.value;
 	myNumber.value = myRange.value;
 }
@@ -504,8 +506,8 @@ 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);
+	if(myNumber.value>MIN_TIME && myNumber.value<MAX_TIME){
+		refreshDisplay();
 		myValue.innerHTML = myNumber.value;
 		myRange.value = myNumber.value;
 	}
@@ -588,6 +590,8 @@ function getPersonne(annee, idPays)
 	return p;
 }
 
+
+
 //listener
 document.body.addEventListener('keyup', function(event) {
 	if(event.code == 'KeyQ')

src/Version 2/index.html

@@ -52,8 +52,8 @@
 	<div id="inferiorUI">
 		<div class="slidecontainer">
 			<br>
-			<input type="range" min="1800" max="2000" value="1800" class="slider" id="slider">
-			<input type="number" min="1800" max="2000" value="1800" class="number" id="number">
+			<input type="range" min="400" max="2000" value="400" class="slider" id="slider">
+			<input type="number" min="400" max="2000" value="400" class="number" id="number">
 		</div>
 	</div>
 	<div id="help">