diff --git a/index.html b/index.html
new file mode 100644
index 0000000..79932ef
--- /dev/null
+++ b/index.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+ photo_mem v1.0.0
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/photo_mem.html b/photo_mem.html
deleted file mode 100644
index 0d31102..0000000
--- a/photo_mem.html
+++ /dev/null
@@ -1,419 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
![]()
-
-
-
-
-
-
-
-
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..636c9ec
--- /dev/null
+++ b/script.js
@@ -0,0 +1,373 @@
+// Make sure that photo_mem titles displays right version
+let version = '1.6.1';
+version_spans = document.getElementsByClassName('version');
+title = document.getElementsByTagName('title')[0];
+title.innerHTML = title.innerHTML.replace('1.0.0', version)
+for (span of version_spans) {
+ span.innerHTML = version
+}
+
+
+// Photo_mem script:
+
+var personnes = [],
+ nom = [],
+ nomjf = [],
+ prenom = [],
+ posx = [],
+ posy = [],
+ etx = [],
+ ety = [],
+ can_etiq = [];
+var ibac = 0,
+ tit = {},
+ titre = "";
+var image = document.getElementById('ima_fond');
+var cercle = document.getElementById("cirsvg");
+var menu = document.getElementById("menu_modif");
+var cant = document.createElement("canvas");
+document.body.appendChild(cant);
+
+function lecfic(fichier) {
+ i_xml = 0;
+ if (fichier.length == 2) {
+ for (var i = 0; i < fichier.length; i++) {
+ var ext = fichier[i].name.split('.').pop();
+ if (ext == "xml") {
+ i_xml = i
+ };
+ };
+ } else {
+ alert("Choisissez deux fichiers : un .xml et un fichier image");
+ return;
+ }
+ i_img = ((i_xml - 1) < 0 ? 1 : 0);
+ var fichier_xml = fichier[i_xml];
+ fond = fichier[i_img];
+ var src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf("."));
+ enreg_xml = src + ".xml"
+ enreg_noms = src + "_noms.png"
+
+ var reader = new FileReader();
+ reader.onload = function(evt) {
+ lecture(evt.target.result);
+ };
+ reader.readAsText(fichier_xml);
+
+ function lecture(text) {
+ var parser = new DOMParser();
+ data_xml = parser.parseFromString(text, "text/xml");
+ affiche_fond();
+ lecture_xml();
+ };
+}
+
+function lecture_xml() {
+ personnes = data_xml.documentElement.getElementsByTagName("personne");
+ tit = data_xml.documentElement.getElementsByTagName("titre")[0];
+ titre = tit.textContent
+ nb_pers = personnes.length
+ for (var i = 0; i < nb_pers; i++) {
+ nom[i] = personnes[i].getElementsByTagName("nom")[0].textContent;
+ if (personnes[i].getElementsByTagName("nom_jeune_fille")[0]) {
+ nomjf[i] = personnes[i].getElementsByTagName("nom_jeune_fille")[0].textContent
+ };
+ prenom[i] = personnes[i].getElementsByTagName("prenom")[0].textContent;
+ posx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posx'].value);
+ posy[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posy'].value);
+ etx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['etx'].value);
+ ety[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['ety'].value);
+ }
+ if (titre !== '') {
+ affiche_titre()
+ } else {
+ affiche_etiquette()
+ };
+};
+// Chargement et dessin de l'image background
+function affiche_fond() {
+ var read_fond = new FileReader();
+ read_fond.addEventListener("load", function(evt) {
+ image.src = evt.target.result;
+ }, false);
+ read_fond.readAsDataURL(fond);
+}
+
+function affiche_titre() {
+ cant.className = "tit";
+ cant.height = 23;
+ var taille = titre.length;
+ cant.width = taille * 12;
+ tx = parseFloat(tit.attributes['titx'].value);
+ ty = parseFloat(tit.attributes['tity'].value);
+ cant.style.left = tx + "px";
+ cant.style.top = ty + "px";
+ titre_ctx = cant.getContext("2d");
+ titre_ctx.font = '21px Arial';
+ titre_ctx.fillStyle = 'Maroon';
+ titre_ctx.fillText(titre, 20, 18);
+
+ affiche_etiquette();
+}
+
+function affiche_etiquette() {
+ // affichage du texte nom/prénom dans des canvas etiquette
+ rayon = 28
+ for (var i = 0; i < nb_pers; i++) {
+ var id = "can" + i;
+ if (document.getElementById(id)) continue;
+ var canv = document.createElement("canvas");
+ canv.id = id;
+ document.body.appendChild(canv);
+ can_etiq[i] = document.getElementById(canv.id);
+ can_etiq[i].className = "etiq";
+ can_etiq[i].height = 30;
+ etiq_ctx = can_etiq[i].getContext("2d");
+ var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
+ can_etiq[i].width = taille * 7 + 10
+ if (nomjf[i].length > 1) {
+ can_etiq[i].height = 45
+ };
+ etiq_ctx.font = '13px Arial';
+ etiq_ctx.fillStyle = 'chocolate';
+ can_etiq[i].style.left = etx[i] + "px";
+ can_etiq[i].style.top = ety[i] + "px";
+ etiq_ctx.fillText(nom[i], 7, 12);
+ etiq_ctx.fillText(prenom[i], 7, 25);
+ if (nomjf[i].length > 1) {
+ etiq_ctx.fillText("née : " + nomjf[i], 7, 38)
+ };
+ };
+ gestion_souris(); // enregistre la position de l'étiquette
+};
+
+function gestion_souris() {
+ if (titre !== '') { // pour déplacer le titre
+ cant.addEventListener("mousedown", function(e) {
+ this.addEventListener("mousemove", deplace_etiquette);
+ });
+ cant.addEventListener("mouseup", function(e) {
+ this.removeEventListener("mousemove", deplace_etiquette);
+ });
+ }
+ for (var i = 0; i < nb_pers; i++) { // pour déplacer les étiquettes nom,prénom ...
+ can_etiq[i].addEventListener("mousedown", function(e) {
+ this.addEventListener("mousemove", deplace_etiquette);
+ });
+ can_etiq[i].addEventListener("mouseup", function(e) {
+ this.removeEventListener("mousemove", deplace_etiquette);
+ });
+ };
+ ima_fond.addEventListener('mousedown', afficher_formulaire); // pour afficher le formulaire de saisie personne
+ ima_fond.addEventListener('mousemove', tracer_cercle); // pour afficher cercle personne
+ cercle.addEventListener('contextmenu', function(e) {
+ menu_modif(e);
+ e.preventDefault();
+ }, false); // menu modif personne
+};
+
+function deplace_etiquette(e) {
+ e.target.style.top = e.pageY - 15 + "px";
+ e.target.style.left = e.pageX - 30 + "px";
+};
+
+function menu_modif() {
+ menu.style.left = parseFloat(cercle.getAttribute("cx")) + 10 + "px";
+ menu.style.top = parseFloat(cercle.getAttribute("cy")) + 40 + "px";
+ menu.style.visibility = "visible";
+}
+
+function supprimer_personne() {
+ misajour_xml();
+ x = data_xml.getElementsByTagName("personne")[ibac];
+ x.parentNode.removeChild(x);
+ for (var i = 0; i < nb_pers; i++) {
+ x = can_etiq[i];
+ x.parentNode.removeChild(x);
+ };
+ cercle.style.visibility = "hidden";
+ lecture_xml();
+}
+
+function position_souris(canvas, evt) {
+ var rect = canvas.getBoundingClientRect();
+ return {
+ x: evt.clientX - rect.left,
+ y: evt.clientY - rect.top
+ };
+};
+
+function tracer_cercle(e) {
+ document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight);
+ document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth);
+ var pos_x = position_souris(ima_fond, e).x;
+ var pos_y = position_souris(ima_fond, e).y;
+ for (var i = 0; i < nb_pers; i++) {
+ var dx = posx[i] - pos_x;
+ var dy = posy[i] - pos_y;
+ var dist2 = dx * dx + dy * dy;
+ var rayon2 = rayon * rayon;
+
+ if (dist2 < rayon2) {
+ ibac = i
+ bac = can_etiq[i].style.backgroundColor;
+ can_etiq[i].style.background = "palegreen"
+ cercle.setAttribute("cx", posx[i]);
+ cercle.setAttribute("cy", posy[i]);
+ cercle.setAttribute("r", rayon);
+ cercle.style.visibility = "visible";
+ // grossir ou diminuer la taille du cercle
+ // cercle.addEventListener("wheel", function(e) {
+ // rayon=rayon + (e.deltaY>0 ? -1 : +1);
+ // cercle.setAttribute("r",rayon );
+ // } , false);
+ return
+ }
+ };
+ cercle.style.visibility = "hidden";
+ can_etiq[ibac].style.backgroundColor = "oldlace";
+};
+
+
+function afficher_formulaire(e) {
+ souris_x = position_souris(ima_fond, e).x;
+ souris_y = position_souris(ima_fond, e).y;
+ if (souris_y - document.getElementById('ajout').height < 0) sourisy = 50;
+ document.getElementById('ajout').style.top = souris_y + 40 + "px";
+ document.getElementById('ajout').style.left = souris_x - 80 + "px";
+ setTimeout(function() {
+ document.getElementById("nom").focus();
+ }, 10);
+ document.getElementById('ajout').className = 'visible';
+};
+
+function ajouter_personne_xml() {
+ // création d'un nouvel élément dans data_xml
+ var nomform = document.getElementById("nom").value
+ var nomjfform = document.getElementById("nom_jeune_fille").value
+ var prenomform = document.getElementById("prenom").value
+ var surnomform = ""
+ var anneeform = document.getElementById("annee").value
+ var noteform = document.getElementById("note").value
+ document.getElementById('ajout').className = 'invisible';
+ console.log(nomform + " " + prenomform + " " + anneeform)
+ var personne_ = data_xml.createElement("personne");
+ var nom_ = data_xml.createElement("nom");
+ nom_.appendChild(data_xml.createTextNode(nomform));
+ var nom_jf_ = data_xml.createElement("nom_jeune_fille");
+ nom_jf_.appendChild(data_xml.createTextNode(nomjfform));
+ var prenom_ = data_xml.createElement("prenom");
+ prenom_.appendChild(data_xml.createTextNode(prenomform));
+ var surnom_ = data_xml.createElement("surnom");
+ surnom_.appendChild(data_xml.createTextNode(surnomform));
+ var annee_ = data_xml.createElement("annee_naiss");
+ annee_.appendChild(data_xml.createTextNode(anneeform));
+ var note_ = data_xml.createElement("note");
+ note_.appendChild(data_xml.createTextNode(noteform));
+ var position_ = data_xml.createElement("position");
+ position_.setAttribute("posx", souris_x);
+ position_.setAttribute("posy", souris_y);
+ position_.setAttribute("etx", souris_x - 30);
+ position_.setAttribute("ety", souris_y + 60);
+ personne_.appendChild(nom_);
+ personne_.appendChild(nom_jf_);
+ personne_.appendChild(prenom_);
+ personne_.appendChild(surnom_);
+ personne_.appendChild(annee_);
+ personne_.appendChild(note_);
+ personne_.appendChild(position_);
+ data_xml.getElementsByTagName("photo")[0].appendChild(personne_)
+ lecture_xml();
+};
+
+function misajour_xml() {
+ tit.setAttribute("titx", cant.style.left);
+ tit.setAttribute("tity", cant.style.top);
+ for (var i = 0; i < nb_pers; i++) {
+ position = data_xml.getElementsByTagName("position")[i];
+ position.setAttribute("etx", can_etiq[i].style.left);
+ position.setAttribute("ety", can_etiq[i].style.top);
+ };
+ lecture_xml();
+};
+
+
+function enregistrer_fichier(fichier) {
+ misajour_xml()
+ var texte_xml = (new XMLSerializer()).serializeToString(data_xml)
+ var reg = /(>)\s*(<)(\/*)/g;
+ // règle pour enlever id="etiqnn" dans les versions précédentes du fichier xml
+ var rex = //g;
+ texte_xml = texte_xml.replace(rex, '');
+ texte_xml = texte_xml.replace(/\r|\n/g, '');
+ texte_xml = texte_xml.replace(reg, '$1\r\n$2$3');
+ var blob = new Blob([texte_xml], {
+ type: "text/plain;charset=utf-8"
+ });
+ if (navigator.msSaveBlob) {
+ navigator.msSaveBlob(blob, fichier);
+ } else {
+ var a = document.createElement('a');
+ if (a.download === '');
+ a.setAttribute('download', fichier);
+ a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texte_xml));
+ a.style.display = 'none';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ }
+}
+
+function image_finale() {
+ misajour_xml()
+ var decalx = 5;
+ var decaly = 29;
+ var can_imf = document.createElement("canvas");
+ document.body.appendChild(can_imf);
+ imf_ctx = can_imf.getContext("2d");
+ can_imf.width = ima_fond.width;
+ can_imf.height = ima_fond.height;
+ imf_ctx.drawImage(ima_fond, 0, 0)
+ if (titre !== '') {
+ var taille = titre.length;
+ hauteur = 25
+ roundedRect(imf_ctx, tx - decalx, ty - decaly, taille * 11, hauteur, 5, 'lightyellow', 'yellow');
+ imf_ctx.drawImage(cant, tx - decalx, ty - decaly)
+ };
+ for (var i = 0; i < nb_pers; i++) {
+ var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
+ hauteur = 30
+ if (nomjf[i].length > 1) {
+ hauteur = 45
+ };
+ roundedRect(imf_ctx, etx[i] - decalx, ety[i] - decaly, taille * 7 + 10, hauteur, 15, 'oldlace', 'blue');
+ imf_ctx.drawImage(can_etiq[i], etx[i] - decalx, ety[i] - decaly)
+ }
+ var a = document.createElement('a');
+ if (a.download === '');
+ a.setAttribute('download', enreg_noms);
+ a.setAttribute('href', can_imf.toDataURL("image/png").replace("image/png", "image/octet-stream"));
+ a.style.display = 'none';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ document.body.removeChild(can_imf);
+
+ function roundedRect(ctx, x, y, width, height, radius, couleur_fond, couleur_trait) {
+ ctx.beginPath();
+ ctx.strokeStyle = couleur_trait;
+ ctx.moveTo(x, y + radius);
+ ctx.lineTo(x, y + height - radius);
+ ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
+ ctx.lineTo(x + width - radius, y + height);
+ ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
+ ctx.lineTo(x + width, y + radius);
+ ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
+ ctx.lineTo(x + radius, y);
+ ctx.quadraticCurveTo(x, y, x, y + radius);
+ ctx.closePath();
+ ctx.fillStyle = couleur_fond;
+ ctx.fill();
+ ctx.stroke();
+ }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..19c0ef7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,66 @@
+circle {
+ fill: transparent;
+ stroke: black;
+ stroke-width: 2;
+}
+
+#ajout {
+ border: 2px solid red;
+ border-radius: 10px;
+ top: 100px;
+ left: 200px;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ padding-left: 1em;
+ background-color: Azure;
+ width: 230px;
+}
+
+#ajout input:focus {
+ border: solid 2px green;
+}
+
+.cotecote {
+ display: inline;
+}
+
+.visible {
+ visibility: visible;
+}
+
+.invisible {
+ visibility: hidden;
+}
+
+.etiq {
+ background-color: oldlace;
+ border: 1px solid blue;
+ border-radius: 10px;
+ position: absolute;
+ font-family: Arial;
+ font-size: 13px;
+ left: -200px;
+ top: 100px;
+}
+
+.tit {
+ background-color: LightYellow;
+ border: 2px solid Yellow;
+ border-radius: 5px;
+ position: absolute;
+ left: -200px;
+ top: 100px;
+}
+
+#menu_modif {
+ display: block;
+ color: black;
+ background-color: gainsboro;
+ cursor: pointer;
+ border: 2px solid;
+ border-radius: 6px;
+ text-align: center;
+ position: absolute;
+ width: 80px;
+ z-index: 10;
+}
\ No newline at end of file