page menu et chemins, partie3

3 files changed, 250 insertions, 97 deletions

diff --git a/public/css/menu.css b/public/css/menu.css
index cce1d43..5016610 100644
--- a/public/css/menu.css
+++ b/public/css/menu.css
@@ -4,11 +4,19 @@
 {
         padding: 0 20px;
 }
+.menu_edit_entry
+{
+        margin-left: 29px;
+}
 .menu img
 {
         width: 20px;
         vertical-align: middle;
 }
+.menu form
+{
+        display: inline;
+}
 
 /* explications pour l'utiisateur */
 .menu aside
@@ -58,6 +66,7 @@ input
 {
         background-color: white;
         padding: 10px;
+        margin-top: 10px;
 }
 .menu .new_entry_buttons p
 {
@@ -65,8 +74,5 @@ input
 }
 
 @media screen and (min-width: 80rem) {
-        i
-        {
-                /*display: none;*/
-        }
+        i{}
 }
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index f74c670..e278325 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -202,97 +202,4 @@ function findParent(element, tag_name){
         element = element.parentElement;
     }
     return null;
-}
-
-
-/* page Menu et chemins */
-function moveOneLevelUp(){}
-function moveOneLevelDown(){}
-
-function switchMenuPositions(page_id, direction)
-{
-        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
-        const clicked_menu_entry = document.getElementById(page_id); // div parente du bouton
-        var other_entry = null;
-
-        // pas bon
-        if(direction == 'down'){
-                other_entry = clicked_menu_entry.nextElementSibling;
-        }
-        else if(direction == 'up'){
-                other_entry = clicked_menu_entry.previousElementSibling;
-        }
-
-        if(other_entry == null){
-                console.log('Inversion impossible');
-                return;
-        }
-        
-    fetch('index.php?menu_edit=switch_positions', {
-        method: 'POST',
-        headers: {
-        'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id1: clicked_menu_entry.id, id2: other_entry.id })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if(data.success)
-        {
-                if(direction == 'down'){
-                                clicked_menu_entry.parentElement.insertBefore(other_entry, clicked_menu_entry);
-                                console.log('Inversion réussie');
-                        }
-                        else if(direction == 'up'){
-                                other_entry.parentElement.insertBefore(clicked_menu_entry, other_entry);
-                                console.log('Inversion réussie');
-                        }
-                        else{
-                                console.error('Échec de l\'inversion');
-                        }
-
-                nav_zone.innerHTML = '';
-                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
-        }
-        else {
-
-            console.error('Échec de l\'inversion');
-        }
-    })
-    .catch(error => {
-        console.error('Erreur:', error);
-    });
-}
-
-function checkMenuEntry(page_id){
-        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
-        const clicked_menu_entry = document.getElementById(page_id); // div parente du bouton
-        const checkbox = clicked_menu_entry.querySelector("input");
-        let color;
-
-        fetch('index.php?menu_edit=displayInMenu', {
-        method: 'POST',
-        headers: {
-        'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id: clicked_menu_entry.id, checked: checkbox.checked })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if(data.success)
-        {
-                color = checkbox.checked ? "#ff1d04" : "grey";
-                clicked_menu_entry.querySelector("button").style.color = color;
-
-                nav_zone.innerHTML = '';
-                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
-        }
-        else {
-
-            console.error('Échec de l\'inversion');
-        }
-    })
-    .catch(error => {
-        console.error('Erreur:', error);
-    });
 }
\ No newline at end of file
diff --git a/public/js/menu.js b/public/js/menu.js
new file mode 100644
index 0000000..a864597
--- /dev/null
+++ b/public/js/menu.js
@@ -0,0 +1,240 @@
+// flèche gauche <=: position = position du parent + 1, parent = grand-parent, recalculer les positions
+function moveOneLevelUp(page_id)
+{
+        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
+        const menu_edit_buttons = document.getElementById("menu_edit_buttons"); // div englobant le html généré par MenuBuilder
+
+        fetch('index.php?menu_edit=move_one_level_up', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id: page_id })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success)
+        {
+                console.log(data);
+                        // affichage
+                        nav_zone.innerHTML = '';
+                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+                menu_edit_buttons.innerHTML = '';
+                        menu_edit_buttons.insertAdjacentHTML('afterbegin', data.menu_buttons);
+        }
+        else {
+
+            console.error('Échec du déplacement');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+// flèche droite =>: position = nombre d'éléments de la fraterie + 1, l'élément précédent devient le parent
+function moveOneLevelDown(page_id)
+{
+        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
+        const menu_edit_buttons = document.getElementById("menu_edit_buttons"); // div englobant le html généré par MenuBuilder
+
+        fetch('index.php?menu_edit=move_one_level_down', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id: page_id })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success)
+        {
+                console.log(data);
+                        // affichage
+                        nav_zone.innerHTML = '';
+                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+                menu_edit_buttons.innerHTML = '';
+                        menu_edit_buttons.insertAdjacentHTML('afterbegin', data.menu_buttons);
+        }
+        else {
+            console.error('Échec du déplacement');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+    
+        /*const element = document.getElementById(page_id); // div parente du bouton cliqué
+        let previous_element = element.previousElementSibling;
+        
+        if(previous_element != null)
+        {
+                // si l'element précédent n'a pas de chemin relatif, donc est une URL, on vérifie le précédent également
+                if(previous_element.querySelector(".path") == null){
+                        let test_previous = previous_element;
+                        while(test_previous.querySelector(".url") != null){
+                                console.log(test_previous);
+                                //if()
+                                test_previous = test_previous.previousElementSibling;
+                                if(test_previous == null){
+                                        console.log("pas d'élément précédent");
+                                        return;
+                                }
+                                console.log(test_previous);
+                        }
+                        previous_element = test_previous;
+                }
+
+                fetch('index.php?menu_edit=move_one_level_down', {
+                method: 'POST',
+                headers: {
+                'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ id: element.id })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if(data.success)
+                {
+                        //
+
+                                // menu régénéré
+                        nav_zone.innerHTML = '';
+                        nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+                }
+                else {
+
+                    console.error('Échec de l\'inversion');
+                }
+            })
+            .catch(error => {
+                console.error('Erreur:', error);
+            });
+                
+                // nouveau parent
+                let level_div = previous_element.querySelector(".level");
+                if(level_div == null){
+                        // créer une <div class="level">
+                        level_div = document.createElement("div");
+                        level_div.classList.add("level");
+                        previous_element.appendChild(level_div);
+                }
+
+                // déplacement
+                level_div.appendChild(element);
+
+                // marges
+                let margin_left = parseInt(element.style.marginLeft);
+                margin_left += 29;
+                element.style.marginLeft = String(margin_left) + "px";
+
+                // MAJ des chemins affichés si c'est un chemin relatif (les liens URL ne peuvent avoir d'enfants)
+                const element_path = element.querySelector(".path");
+                if(element_path != null){
+                        const previous_element_path = previous_element.querySelector(".path");
+                        element_path.innerHTML = previous_element_path.innerHTML + "/" + element_path.innerHTML.split("/").slice(-1);
+
+                        // même chose pour tous les enfants sauf les URL vers l'extérieur
+                        if(element.querySelector(".level") != null){
+                                element.querySelector(".level").querySelectorAll(".path").forEach( (one_elem) => {
+                                        const parent_elem_path = one_elem.parentNode.parentNode.parentNode.querySelector(".path"); // => div de l'élém => div class level => div du parent
+                                        const end_of_path = one_elem.innerHTML.split("/").slice(-1);
+                                        one_elem.innerHTML = parent_elem_path.innerHTML + "/" + end_of_path[0];
+                                });
+                        }
+                }
+
+                // dernier problème à corriger: le parent est une URL vers l'extérieur
+        }
+        else{
+                // ne rien faire
+                console.log("pas d'élément précédent");
+        }*/
+}
+
+function switchMenuPositions(page_id, direction)
+{
+        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
+        const clicked_menu_entry = document.getElementById(page_id); // div parente du bouton
+        let other_entry = null;
+
+        // pas bon
+        if(direction == 'down'){
+                other_entry = clicked_menu_entry.nextElementSibling;
+        }
+        else if(direction == 'up'){
+                other_entry = clicked_menu_entry.previousElementSibling;
+        }
+
+        if(other_entry == null){
+                console.log('Inversion impossible');
+                return;
+        }
+        
+    fetch('index.php?menu_edit=switch_positions', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id1: clicked_menu_entry.id, id2: other_entry.id })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success)
+        {
+                if(direction == 'down'){
+                                clicked_menu_entry.parentElement.insertBefore(other_entry, clicked_menu_entry);
+                        }
+                        else if(direction == 'up'){
+                                other_entry.parentElement.insertBefore(clicked_menu_entry, other_entry);
+                        }
+                        else{
+                                console.error('Échec de l\'inversion');
+                        }
+
+                        // menu régénéré
+                nav_zone.innerHTML = '';
+                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+        }
+        else {
+
+            console.error('Échec de l\'inversion');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+function checkMenuEntry(page_id){
+        const nav_zone = document.getElementById("nav_zone"); // parent de <nav>
+        const clicked_menu_entry = document.getElementById(page_id); // div parente du bouton
+        const checkbox = clicked_menu_entry.querySelector("input");
+        let color;
+
+        fetch('index.php?menu_edit=displayInMenu', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id: clicked_menu_entry.id, checked: checkbox.checked })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success)
+        {
+                color = checkbox.checked ? "#ff1d04" : "grey";
+                clicked_menu_entry.querySelector("button").style.color = color;
+
+                nav_zone.innerHTML = '';
+                nav_zone.insertAdjacentHTML('afterbegin', data.nav);
+        }
+        else {
+
+            console.error('Échec de l\'inversion');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
\ No newline at end of file