modification de page en mode modif page, déplacement modif_page js et css et MAJ BDD, vue page nouvelle page

8 files changed, 577 insertions, 1 deletions

diff --git a/public/css/body.css b/public/css/body.css
index 87f71f2..20e53e0 100644
--- a/public/css/body.css
+++ b/public/css/body.css
@@ -36,4 +36,149 @@ body
 .infobulle img
 {
     vertical-align: middle;
-}*/
\ No newline at end of file
+}*/
+
+main
+{
+    margin: auto;
+    /*max-width: 1200px;*/
+    background-color: #E3F3FF;
+    padding: 15px 0;
+}
+section > h3
+{
+    padding: 15px;
+    margin: 0;
+    text-align: center;
+}
+.grid_columns
+{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+}
+@media screen and (max-width: 800px)
+{
+    .grid_columns
+    {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+@media screen and (max-width: 550px)
+{
+    .grid_columns
+    {
+        display: block;
+    }
+}
+.galery_photos
+{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+.galery_photos .html_from_editor img
+{
+    max-width: 300px;
+    max-height: 200px;
+}
+article
+{
+    /*display: flex;*/
+    background-color: white;
+    margin: 15px;
+    padding: 0 15px;
+    /*min-height: 150px;*/
+}
+article .logo2
+{
+    vertical-align: middle;
+    max-width: 200px;
+    max-height: 200px;
+    margin-right: 15px;
+}
+.new_content, .article_content
+{
+    width: 100%;
+}
+.new_content
+{
+    /*max-height: 400;*/
+    overflow: hidden;
+}
+article img
+{
+    max-width: 100%; /* règle compliquée, vérifier selon la page et la taille de l'image */
+    height: auto;
+}
+
+.action_icon
+{
+    width: 24px;
+    vertical-align: bottom;
+    border: transparent 2px solid; /* invisible */
+}
+button .action_icon
+{
+    border: none;
+}
+.action_icon:hover
+{
+    background-color: #ffff00;
+    border-radius: 4px;
+    border: lightgrey 2px outset;
+    cursor: pointer;
+}
+button .action_icon:hover
+{
+    border: none;
+}
+
+.button_zone
+{
+    display: flex;
+}
+
+.share
+{
+    float: right;
+}
+.article_title_zone
+{
+    padding: 10px;
+}
+.under_an_article
+{
+    display: flex;
+    justify-content: space-between;
+    font-size: small;
+}
+.under_an_article img
+{
+    width: 24px;
+    margin-right: 5px;
+    vertical-align: middle;
+}
+.article_admin_zone
+{
+    display: flex;
+    justify-content: end;
+}
+section button
+{
+    color: #ff1d04;
+    font-size: medium;
+    border-radius: 4px;
+    background-color: white;
+    border: lightgrey 2px outset; /* rend identiques les boutons firefox et chromium */
+}
+section button:hover
+{
+    background-color: #ffff00;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+article a:hover
+{
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/public/css/modif_page.css b/public/css/modif_page.css
new file mode 100644
index 0000000..c494221
--- /dev/null
+++ b/public/css/modif_page.css
@@ -0,0 +1,74 @@
+/* -- mode modification d'une page -- */
+.page_modification
+{
+        background-color: white;
+        padding: 10px;
+        margin: 10px 15px;
+}
+.page_modification form select, .page_modification form input[type=submit]
+{
+        color: #ff1d04;
+        font-size: medium;
+        border-radius: 4px;
+        background-color: white;
+        border: lightgrey 2px outset;
+}
+.page_modificationselect:hover
+{
+        cursor: pointer;
+}
+.page_modification form input[type=submit]:hover
+{
+        background-color: #ffff00;
+        border-radius: 4px;
+        cursor: pointer;
+}
+.edit_page_title_zone
+{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+}
+.edit_page_zone, .edit_bloc_zone
+{
+        background-color: #f0f0f0f0;
+        margin: 5px;
+        padding: 10px;
+}
+#edit_description
+{
+        margin: 5px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 5px;
+}
+#edit_description button
+{
+        vertical-align: top;
+}
+.edit_bloc_zone
+{
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+}
+.edit_page_zone p, .edit_bloc_zone p, .edit_page_zone form
+{
+        margin: 5px;
+}
+
+.new_bloc #bloc_title
+{
+        width: 70%;
+        max-width: 300px;
+}
+.modify_bloc > div
+{
+        display: flex;
+        align-items: baseline;
+}
+.modify_bloc img
+{
+        vertical-align: middle;
+}
\ No newline at end of file
diff --git a/public/css/new_page.css b/public/css/new_page.css
new file mode 100644
index 0000000..0cc067a
--- /dev/null
+++ b/public/css/new_page.css
@@ -0,0 +1,30 @@
+/*-- page "Nouvelle page" uniquement --*/
+.new_page
+{
+        padding: 0 20px;
+}
+.new_page .form_zone
+{
+        background-color: white;
+        padding: 10px;
+}
+
+.new_page #page_location, .new_page input[type=submit]
+{
+        color: #ff1d04;
+        font-size: medium;
+        border-radius: 4px;
+        background-color: white;
+        border: lightgrey 2px outset;
+}
+.new_page #page_location:hover, .new_page input[type=submit]:hover
+{
+        background-color: #ffff00;
+        border-radius: 4px;
+        border: lightgrey 2px outset;
+        cursor: pointer;
+}
+.label_textarea
+{
+        vertical-align: top;
+}
\ No newline at end of file
diff --git a/public/js/modif_page.js b/public/js/modif_page.js
new file mode 100644
index 0000000..8ff26c1
--- /dev/null
+++ b/public/js/modif_page.js
@@ -0,0 +1,188 @@
+/* -- mode modification d'une page -- */
+
+// même fonction que dans new_page.js
+function makePageNamePath(){
+        const page_name = document.getElementById("page_name");
+        const page_name_path = document.getElementById("page_name_path");
+        page_name_path.value = page_name.value.replace(/\W+/g, " ").trim().toLowerCase().split(' ').join('_');
+
+        /* explication de l'expression régulière
+    / = début et fin, \W+ = lettres et chiffres, g = global */
+}
+
+
+// partie "page"
+function changePageTitle(page_id){
+        const page_name = document.getElementById("page_name");
+
+        fetch('index.php?page_edit=page_title', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({title: page_name.value, page_id: page_id})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+                document.querySelector("title").innerHTML = data.title; // metadonnées
+                        document.getElementById("m_" + page_id).innerHTML = data.title; // menu
+            const thesee = document.getElementById("thesee"); // fil d'Ariane
+            if(thesee != null){
+                thesee.innerHTML = data.title;
+            }
+                        console.log("la page a été renommée: " + data.title);
+                        toastNotify("la page a été renommée: " + data.title);
+        }
+        else{
+            console.error('Erreur au renommage de la page.');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+/*function changePageMenuPath(page_id){
+        const page_name_path = document.getElementById("page_name_path");
+        
+        fetch('index.php?page_edit=page_menu_path', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({page_menu_path: page_name_path.value, page_id: page_id})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+                // oh putaing...
+                        let url = new URL(document.getElementById("m_" + page_id).parentElement.href); // url attrapée dans une balise <a>
+                        let params = new URLSearchParams(url.search); // params à droite du ?
+                        let path_array = params.get('page').split('/'); // chemin 'page' découpé dans un tableau
+            console.log(data.page_name_path);
+                        path_array[path_array.length - 1] = data.page_name_path; // modif de la dernière case
+                        params.set('page', path_array.join('/')); // réassemblage du chemin et MAJ de params
+                        url.search = params.toString(); // MAJ de url
+                        document.getElementById("m_" + page_id).parentElement.href = url.toString(); // MAJ de la balise <a>
+
+            //  modifier l'URL sans rafraichir en touchant à l'historique
+            params.set('action', 'modif_page'); // on veut rester en mode "modif"
+            url.search = params.toString();
+            history.pushState({}, '', url.toString())
+            
+            console.log("la nouveau chemin est: " + data.page_name_path);
+            toastNotify("la nouveau chemin est: " + data.page_name_path);
+        }
+        else{
+            console.error("Erreur à la modification du chemin de la page dans l'URL.");
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}*/
+function changeDescription(node_data_id){
+        const textarea = document.getElementById("description_textarea");
+
+        fetch('index.php?page_edit=page_description', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({description: textarea.value, node_data_id: node_data_id})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+                document.querySelector('meta[name="description"]').setAttribute('content', data.description); // c'était vraiment nécéssaire?
+                        console.log("la nouvelle description de la page est: " + data.description);
+                        toastNotify("la nouvelle description de la page est: " + data.description);
+        }
+        else{
+            console.error('Erreur à la modification de la description de la page.');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+
+// partie "blocs"
+function renamePageBloc(bloc_id){
+        const input = document.getElementById("bloc_rename_" + bloc_id);
+        const title = document.getElementById(bloc_id).querySelector("h3");
+
+        fetch('index.php?bloc_edit=rename_page_bloc', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({bloc_title: input.value, bloc_id: bloc_id})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+                title.innerHTML = data.title;
+                console.log(data.title);
+                toastNotify('Le bloc a été renommé: ' + data.title);
+        }
+        else{
+            console.error('Erreur au renommage du titre.');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+function switchBlocsPositions(bloc_id, direction, current_page) {
+        const current_bloc = document.getElementById(bloc_id);
+        const current_bloc_edit_zone = document.getElementById("bloc_edit_" + bloc_id);
+        var other_bloc;
+
+        if(direction == 'down'){
+                other_bloc = current_bloc.nextElementSibling;
+        }
+        else if(direction == 'up'){
+                other_bloc = current_bloc.previousElementSibling;
+        }
+
+        if(other_bloc == null || other_bloc.tagName !== 'SECTION')
+        {
+                console.log('Inversion impossible');
+                return;
+        }
+        const other_bloc_edit_zone = document.getElementById("bloc_edit_" + other_bloc.id);
+        
+    fetch('index.php?page=' + current_page + '&bloc_edit=switch_blocs_positions', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id1: bloc_id, id2: parseInt(other_bloc.id) })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success)
+        {
+                if(direction == 'down'){
+                                current_bloc.parentElement.insertBefore(other_bloc, current_bloc);
+                                current_bloc_edit_zone.parentElement.insertBefore(other_bloc_edit_zone, current_bloc_edit_zone);
+                                console.log('Inversion réussie');
+                        }
+                        else if(direction == 'up'){
+                                other_bloc.parentElement.insertBefore(current_bloc, other_bloc);
+                                other_bloc_edit_zone.parentElement.insertBefore(current_bloc_edit_zone, other_bloc_edit_zone);
+                                console.log('Inversion réussie');
+                        }
+        }
+        else {
+
+            console.error('Échec de l\'inversion');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
\ No newline at end of file
diff --git a/public/js/new_page.js b/public/js/new_page.js
new file mode 100644
index 0000000..7cfa5b8
--- /dev/null
+++ b/public/js/new_page.js
@@ -0,0 +1,18 @@
+/*-- page Nouvelle page --*/
+
+// même fonction que dans modif_page.js
+function makePageNamePath(){
+        const page_name = document.getElementById("page_name");
+        const page_name_path = document.getElementById("page_name_path");
+        page_name_path.value = page_name.value.replace(/\W+/g, " ").trim().toLowerCase().split(' ').join('_');
+
+        /* explication de l'expression régulière
+    / = début et fin, \W+ = lettres et chiffres, g = global */
+}
+
+
+/* to do list:
+=> au submit l'utilisateur est emmener sur la nouvelle page
+=> interdir les doublons dans new_page_name_path
+=> écrire la description avec l'éditeur?
+*/
\ No newline at end of file
diff --git a/src/view/NewPageBuilder.php b/src/view/NewPageBuilder.php
new file mode 100644
index 0000000..2fae6fa
--- /dev/null
+++ b/src/view/NewPageBuilder.php
@@ -0,0 +1,49 @@
+<?php
+// src/view/NewPageBuilder.php
+//
+// page Nouvelle page en mode admin, fonctionne avec new_page.js
+
+declare(strict_types=1);
+
+use App\Entity\Node;
+use App\Entity\Page;
+
+class NewPageBuilder extends AbstractBuilder
+{
+    //private int $margin_left_multiplier = 29;
+    private string $options = '';
+
+    public function __construct(Node $node = null)
+    {
+        //parent::__construct($node);
+        $viewFile = self::VIEWS_PATH . $node->getName() . '.php';
+        
+        if(isset($_SESSION['admin']) && $_SESSION['admin'] && file_exists($viewFile))
+        {
+            /*if(!empty($node->getNodeData()->getData()))
+            {
+                extract($node->getNodeData()->getData());
+            }*/
+
+            $this->unfoldOptions(Director::$menu_data);
+
+            ob_start();
+            require $viewFile; // insertion de $this->html généré par unfoldMenu
+            $this->html = ob_get_clean(); // pas de concaténation .= cette fois on écrase
+        }
+        else{
+            header('Location: ' . new URL);
+            die;
+        }
+    }
+
+    private function unfoldOptions(Page $page): void
+    {
+        foreach($page->getChildren() as $entry){
+            $this->options .= '<option value="' . $entry->getId() . '">' . $entry->getPageName() . "</option>\n";
+            if(count($entry->getChildren()) > 0){
+                $this->unfoldOptions($entry);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/view/templates/main.php b/src/view/templates/main.php
new file mode 100644
index 0000000..7ff03a8
--- /dev/null
+++ b/src/view/templates/main.php
@@ -0,0 +1,45 @@
+<?php declare(strict_types=1); ?>
+<section class="page_modification">
+    <h3>Modification de la page</h3>
+    <div class="edit_page_zone">
+        <div class="edit_page_title_zone">
+            <p id="edit_page_title">
+                <label for="page_name">Titre de la page</label>
+                <input type="text" id="page_name" name="edit_page_title" value="<?= Director::$page_path->getLast()->getPageName() ?>" onchange="makePageNamePath()" required>
+                <button onclick="changePageTitle('<?= Director::$page_path->getLast()->getId() ?>')">Renommer</button>
+            </p>
+            <form id="edit_page_menu_path" method="post" action="<?= new URL(['page' => CURRENT_PAGE]) ?>">
+                <label for="page_name_path">Chemin en "snake_case"</label>
+                <input type="text" id="page_name_path" name="page_menu_path" value="<?= Director::$page_path->getLast()->getEndOfPath() ?>" placeholder="ex: nouvelle_page" required>
+                <input type="hidden" name="page_id" value="<?= Director::$page_path->getLast()->getId() ?>"><input type="hidden" name="page_name_path_hidden">
+                <input type="submit" value="Modifier">
+            </form>
+        </div>
+        <div id="edit_description">
+            <label for="description_textarea">Description sous le titre dans les moteurs de recherche</label>
+            <div>
+                <textarea id="description_textarea" name="edit_description" cols="40" rows="3" placeholder="ex: nous faisons ceci et cela, etc" required><?= $head_node->getNodeData()->getData()['description'] ?></textarea>
+                <button onclick="changeDescription('<?= $head_node->getNodeData()->getId() ?>')">Modifier</button>
+            </div>
+        </div>
+    </div>
+    <div class="edit_bloc_zone">
+    <div class="new_bloc">
+        <p>Ajouter un bloc de page</p>
+        <form method="post" action="<?= new URL(['page' => CURRENT_PAGE]) ?>">
+            <p><label for="bloc_title">Titre</label>
+            <input type="text" id="bloc_title" name="bloc_title" required></p>
+            <p><label for="bloc_select">Type</label>
+            <select id="bloc_select" name="bloc_select" required>
+             <?= $options ?>
+            </select>
+            <input type="hidden" name="bloc_title_hidden">
+            <input type="submit" value="Valider"></p>
+        </form>
+    </div>
+    <div class="modify_bloc">
+        <p>Modifier un bloc</p>
+        <?= $bloc_edit ?>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/view/templates/new_page.php b/src/view/templates/new_page.php
new file mode 100644
index 0000000..db48496
--- /dev/null
+++ b/src/view/templates/new_page.php
@@ -0,0 +1,27 @@
+<?php declare(strict_types=1); ?>
+<section class="new_page">
+        <h3>Création d'une nouvelle page</h3>
+        <div class="form_zone">
+                <form method="post" action="<?= new URL(['from' => 'nouvelle_page']) ?>">
+                        <p>
+                                <label for="new_page_name">Nom de la page</label>
+                                <input id="page_name" type="text" name="new_page_name" onchange="makePageNamePath()" required>
+                        </p>
+                        <p>
+                                <label for="new_page_name_path">Chemin de l'URL</label>
+                                <input id="page_name_path" type="text" name="new_page_name_path" placeholder="ex: nouvelle_page" required>
+                        </p>
+                        <p>
+                                <label for="page_location">Placer la page juste après cette entrée</label>
+                                <select id="page_location" name="page_location">
+                                        <?= $this->options ?>
+                                </select>
+                        </p>
+                        <p>
+                                <label class="label_textarea" for="new_page_description">Description qui apparaît sous le titre dans les moteurs de recherche</label>
+                                <textarea id="new_page_description" name="new_page_description" cols="40" rows="3" placeholder="ex: nous faisons ceci et cela, etc" required></textarea>
+                        </p>
+                        <input type="submit" value="Créer la page">
+                </form>
+        </div>
+</section>
\ No newline at end of file