From aa8898ae00beaa0ac7e65e45c5f28199b25a9267 Mon Sep 17 00:00:00 2001 From: polo Date: Sat, 10 May 2025 20:16:56 +0200 Subject: =?UTF-8?q?modification=20de=20page=20en=20mode=20modif=20page,=20?= =?UTF-8?q?d=C3=A9placement=20modif=5Fpage=20js=20et=20css=20et=20MAJ=20BD?= =?UTF-8?q?D,=20vue=20page=20nouvelle=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/body.css | 147 ++++++++++++++++++++++++++++++- public/css/modif_page.css | 74 ++++++++++++++++ public/css/new_page.css | 30 +++++++ public/js/modif_page.js | 188 ++++++++++++++++++++++++++++++++++++++++ public/js/new_page.js | 18 ++++ src/view/NewPageBuilder.php | 49 +++++++++++ src/view/templates/main.php | 45 ++++++++++ src/view/templates/new_page.php | 27 ++++++ 8 files changed, 577 insertions(+), 1 deletion(-) create mode 100644 public/css/modif_page.css create mode 100644 public/css/new_page.css create mode 100644 public/js/modif_page.js create mode 100644 public/js/new_page.js create mode 100644 src/view/NewPageBuilder.php create mode 100644 src/view/templates/main.php create mode 100644 src/view/templates/new_page.php 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 + 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 + + // 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 @@ +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 .= '\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 @@ + +
+

Modification de la page

+
+
+

+ + + +

+
+ + + + +
+
+
+ +
+ + +
+
+
+
+
+

Ajouter un bloc de page

+
+

+

+

+ + +

+
+
+
+

Modifier un bloc

+ +
+
+
\ 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 @@ + +
+

Création d'une nouvelle page

+
+
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+ +
+
+
\ No newline at end of file -- cgit v1.2.3