From e4a325c9d5c07f09bc18b7e366ffb82b82c43502 Mon Sep 17 00:00:00 2001 From: polo Date: Wed, 2 Apr 2025 00:00:35 +0200 Subject: =?UTF-8?q?modification=20des=20titres,=20aper=C3=A7us=20et=20date?= =?UTF-8?q?s=20des=20news?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/main.css | 29 +++++++++++--- public/js/main.js | 85 +++++++++++++++++++++++++++++++++++++++++- public/js/tinymce.js | 75 +++++++++++++++++++------------------ src/controller/ajax.php | 45 ++++++++++++++++++---- src/model/entities/Article.php | 12 ++++++ src/view/ArticleBuilder.php | 2 +- src/view/NewBuilder.php | 68 +++++++++++++++++++++++++-------- src/view/templates/article.php | 1 - src/view/templates/new.php | 17 +++++++-- 9 files changed, 262 insertions(+), 72 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index a75b8cd..50c2173 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -56,22 +56,39 @@ article .logo2 overflow: hidden; } -article .action_icon +.action_icon { width: 24px; - vertical-align: middle; + vertical-align: bottom; border: white 2px solid; /* invisible */ } -article .action_icon:hover +button .action_icon +{ + border: none; +} +.action_icon:hover { background-color: #ffff00; border-radius: 4px; border: lightgrey 2px outset; } -.article_title_zone +button .action_icon:hover +{ + border: none; +} + +.button_zone { display: flex; - justify-content: space-between; +} + +.share +{ + float: right; +} +.article_title_zone +{ + padding: 10px; } .under_an_article { @@ -82,8 +99,8 @@ article .action_icon:hover .under_an_article img { width: 24px; - vertical-align: middle; margin-right: 5px; + vertical-align: middle; } .article_admin_zone { diff --git a/public/js/main.js b/public/js/main.js index d985b71..1351fea 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -63,12 +63,93 @@ function switchPositions(articleId, direction) console.log('Inversion réussie'); } else{ - console.log('Échec de l\'inversion'); + console.error('Échec de l\'inversion'); } } else { - console.log('Échec de l\'inversion'); + console.error('Échec de l\'inversion'); + } + }) + .catch(error => { + console.error('Erreur:', error); + }); +} + +function changeDate(id_date) +{ + const real_id = 'i' + id_date.slice(1); + const date_span = document.getElementById(id_date); // = + var old_date = date_span.innerHTML; + + // changer "le 28-12-2024 à 23h14" en "2024-12-28T23:14" + let values = old_date.split(" à "); // 2 parties: date et heure + values[1] = values[1].replace('h', ':'); + values[0] = values[0].replace("le ", ""); + let date = values[0].split("-"); // tableau jj-mm-aaaa + old_date = date[2] + '-' + date[1] + "-" + date[0] + "T" + values[1]; + + var label = document.createElement('label'); + label.textContent = 'Choisir une date: '; + label.id = 'label-' + id_date; + + var input = document.createElement('input'); + input.type = 'datetime-local'; + input.value = old_date; + input.id = 'input-' + id_date; + + var parent = date_span.parentElement; + parent.appendChild(label) + parent.appendChild(input); + + date_span.classList.add('hidden'); + document.querySelector(`#edit-${id_date}`).classList.add('hidden'); + document.querySelector(`#cancel-${id_date}`).classList.remove('hidden'); + document.querySelector(`#submit-${id_date}`).classList.remove('hidden'); +} + +function closeInput(id) +{ + const date_span = document.getElementById(id); + const date_input = document.getElementById('input-' + id); + const date_label = document.getElementById('label-' + id); + + date_span.classList.remove('hidden'); + date_input.remove(); + date_label.remove(); + document.querySelector(`#edit-${id}`).classList.remove('hidden'); + document.querySelector(`#cancel-${id}`).classList.add('hidden'); + document.querySelector(`#submit-${id}`).classList.add('hidden'); +} + +function submitDate(id_date) +{ + const date_input = document.getElementById('input-' + id_date); + + fetch('index.php?action=date_submit', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({id: id_date, date: date_input.value}) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + // modifier la date dans le caché + const date_span = document.getElementById(id_date); + let date = new Date(date_input.value); + date_span.innerHTML = + 'le ' + String(date.getDate()).padStart(2, '0') + '-' + + String(date.getMonth() + 1).padStart(2, '0') + '-' + + String(date.getFullYear()).padStart(4, '0') + ' à ' + + String(date.getHours()).padStart(2, '0') + 'h' + + String(date.getMinutes()).padStart(2, '0'); + + closeInput(id_date); + } + else { + console.error('Erreur lors de la sauvegarde de la date.'); } }) .catch(error => { diff --git a/public/js/tinymce.js b/public/js/tinymce.js index 8aeaac8..d3c9739 100644 --- a/public/js/tinymce.js +++ b/public/js/tinymce.js @@ -1,12 +1,14 @@ let editors = {}; -function openEditor(articleId, page = '') { +function openEditor(id, page = '') { + const real_id = 'i' + id.slice(1); + // Récupérer et sauvegarder le contenu d'origine de l'article - const articleContent = document.getElementById(articleId).innerHTML; - document.getElementById(articleId).setAttribute('data-original-content', articleContent); + const articleContent = document.getElementById(id).innerHTML; + document.getElementById(id).setAttribute('data-original-content', articleContent); tinymce.init({ - selector: `#${articleId}`, + selector: `#${id}`, language: 'fr_FR', // télécharger des paquets de langue ici: https://www.tiny.cloud/get-tiny/language-packages/ language_url: 'js/tinymce-langs/fr_FR.js', // ou installer tweeb/tinymce-i18n avec composer license_key: 'gpl', @@ -18,19 +20,18 @@ function openEditor(articleId, page = '') { statusbar: false, setup: function (editor) { editor.on('init', function () { - editors[articleId] = editor; + editors[id] = editor; // boutons "Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Soumettre" - document.querySelector(`#edit-${articleId}`).classList.add('hidden'); - document.querySelector(`#delete-${articleId}`).classList.add('hidden'); + document.querySelector(`#edit-${id}`).classList.add('hidden'); + document.querySelector(`#cancel-${id}`).classList.remove('hidden'); + document.querySelector(`#submit-${id}`).classList.remove('hidden'); + document.querySelector(`#delete-${real_id}`).classList.add('hidden'); // boutons absents page article if(page != 'article'){ - document.querySelector(`#position_up-${articleId}`).classList.add('hidden'); - document.querySelector(`#position_down-${articleId}`).classList.add('hidden'); + document.querySelector(`#position_up-${id}`).classList.add('hidden'); + document.querySelector(`#position_down-${id}`).classList.add('hidden'); } - document.querySelector(`#cancel-${articleId}`).classList.remove('hidden'); - document.querySelector(`#submit-${articleId}`).classList.remove('hidden'); - }); }, // upload d'image @@ -59,10 +60,10 @@ function openEditor(articleId, page = '') { }); // Remplacer le contenu de l'article par l'éditeur - document.getElementById(articleId).innerHTML = articleContent; + document.getElementById(id).innerHTML = articleContent; } -function deleteArticle(articleId, page = '') { +function deleteArticle(id, page = '') { if (confirm('Voulez-vous vraiment supprimer cet article ?')) { // Envoyer une requête au serveur pour supprimer l'article @@ -71,7 +72,7 @@ function deleteArticle(articleId, page = '') { headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ id: articleId }) + body: JSON.stringify({ id: id }) }) .then(response => response.json()) .then(data => { @@ -85,7 +86,7 @@ function deleteArticle(articleId, page = '') { } else{ // Supprimer l'article du DOM - const articleElement = document.getElementById(articleId); + const articleElement = document.getElementById(id); articleElement.parentElement.parentElement.remove(); //
est deux niveau au dessus } } @@ -99,40 +100,42 @@ function deleteArticle(articleId, page = '') { } } -function closeEditor(articleId, page = '', display_old = true) +function closeEditor(id, page = '', display_old = true) { + const real_id = 'i' + id.slice(1); + // Fermer l'éditeur - tinymce.remove(`#${articleId}`); - delete editors[articleId]; + tinymce.remove(`#${id}`); + delete editors[id]; // Restaurer le contenu d'origine de l'article if(display_old){ - const originalContent = document.getElementById(articleId).getAttribute('data-original-content'); - document.getElementById(articleId).innerHTML = originalContent; + const originalContent = document.getElementById(id).getAttribute('data-original-content'); + document.getElementById(id).innerHTML = originalContent; } // boutons "Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Soumettre" - document.querySelector(`#edit-${articleId}`).classList.remove('hidden'); - document.querySelector(`#delete-${articleId}`).classList.remove('hidden'); + document.querySelector(`#edit-${id}`).classList.remove('hidden'); + document.querySelector(`#cancel-${id}`).classList.add('hidden'); + document.querySelector(`#submit-${id}`).classList.add('hidden'); + document.querySelector(`#delete-${real_id}`).classList.remove('hidden'); // boutons absents page article if(page != 'article'){ - document.querySelector(`#position_up-${articleId}`).classList.remove('hidden'); - document.querySelector(`#position_down-${articleId}`).classList.remove('hidden'); - } - document.querySelector(`#cancel-${articleId}`).classList.add('hidden'); - document.querySelector(`#submit-${articleId}`).classList.add('hidden'); + document.querySelector(`#position_up-${id}`).classList.remove('hidden'); + document.querySelector(`#position_down-${id}`).classList.remove('hidden'); + } } -function submitArticle(articleId, page = '') { +function submitArticle(id, page = '') { // Récupérer l'éditeur correspondant à l'article - const editor = editors[articleId]; - if (!editor) { - console.error('Éditeur non trouvé pour l\'article:', articleId); + const editor = editors[id]; + if(!editor) { + console.error('Éditeur non trouvé pour l\'article:', id); return; } // Récupérer le contenu de l'éditeur - const newContent = editor.getContent(); + const html = editor.getContent(); // Envoi AJAX au serveur fetch('index.php?action=editor_submit', { @@ -140,14 +143,14 @@ function submitArticle(articleId, page = '') { headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({id: articleId, content: newContent}) + body: JSON.stringify({id: id, content: html}) }) .then(response => response.json()) .then(data => { if (data.success) { // Fermer l'éditeur et mettre à jour le contenu de l'article - closeEditor(articleId, page, false); - document.getElementById(articleId).innerHTML = newContent; + closeEditor(id, page, false); + document.getElementById(id).innerHTML = html; } else { alert('Erreur lors de la sauvegarde de l\'article.'); diff --git a/src/controller/ajax.php b/src/controller/ajax.php index bcba3f2..86acd39 100644 --- a/src/controller/ajax.php +++ b/src/controller/ajax.php @@ -14,16 +14,32 @@ if($_SERVER['CONTENT_TYPE'] === 'application/json' && isset($_GET['action'])) { if(json_last_error() === JSON_ERROR_NONE) { - $articleId = $json['id']; + $id = $json['id']; + $id[0] = 'i'; $content = Security::secureString($json['content']); $director = new Director($entityManager); - if($director->makeArticleNode($articleId)) // une entrée est trouvée + if($director->makeArticleNode($id)) // une entrée est trouvée { $node = $director->getRootNode(); - $node->getArticle()->setContent($content); + switch($json['id'][0]){ + case 'i': + $node->getArticle()->setContent($content); + break; + case 'p': + $node->getArticle()->setPreview($content); // html de l'éditeur + break; + case 't': + $node->getArticle()->setTitle($content); // html de l'éditeur + break; + case 'd': + echo json_encode(['success' => false, 'message' => 'l\'action editor_submit ne supporte pas les dates, utiliser date_submit.']); + die; + default: + echo json_encode(['success' => false, 'message' => 'identifiant non utilisable']); + die; + } $entityManager->flush(); - echo json_encode(['success' => true]); } else{ @@ -37,16 +53,16 @@ if($_SERVER['CONTENT_TYPE'] === 'application/json' && isset($_GET['action'])) } elseif($_GET['action'] === 'delete_article' && isset($json['id'])) { - $articleId = $json['id']; + $id = $json['id']; $director = new Director($entityManager); - $director->makeArticleNode($articleId); + $director->makeArticleNode($id); $node = $director->getRootNode(); $entityManager->remove($node); $entityManager->flush(); // test avec une nouvelle requête qui ne devrait rien trouver - if(!$director->makeArticleNode($articleId)) + if(!$director->makeArticleNode($id)) { echo json_encode(['success' => true]); @@ -72,6 +88,21 @@ if($_SERVER['CONTENT_TYPE'] === 'application/json' && isset($_GET['action'])) $node2->setPosition($tmp); $entityManager->flush(); + echo json_encode(['success' => true]); + die; + } + elseif($_GET['action'] === 'date_submit' && isset($json['id']) && isset($json['date'])) + { + $id = $json['id']; + $id[0] = 'i'; + $date = new DateTime($json['date']); + + $director = new Director($entityManager); + $director->makeArticleNode($id); + $node = $director->getRootNode(); + $node->getArticle()->setDateTime($date); + $entityManager->flush(); + echo json_encode(['success' => true]); die; } diff --git a/src/model/entities/Article.php b/src/model/entities/Article.php index 3b846da..601e573 100644 --- a/src/model/entities/Article.php +++ b/src/model/entities/Article.php @@ -49,6 +49,10 @@ class Article { return $this->date_time; } + public function setDateTime(\DateTime $date_time): void + { + $this->date_time = $date_time; + } public function getTimestamp(): int { return $this->date_time->getTimestamp(); @@ -57,10 +61,18 @@ class Article { return $this->title; } + public function setTitle(string $title): void + { + $this->title = $title; + } public function getPreview(): string { return $this->preview; } + public function setPreview(string $preview): void + { + $this->preview = $preview; + } public function getContent(): string { return $this->content; diff --git a/src/view/ArticleBuilder.php b/src/view/ArticleBuilder.php index 6c2f63c..f86f9bd 100644 --- a/src/view/ArticleBuilder.php +++ b/src/view/ArticleBuilder.php @@ -25,7 +25,7 @@ class ArticleBuilder extends AbstractBuilder // partage $share_link = new URL(['page' => CURRENT_PAGE], $id); $share_js = 'onclick="copyInClipBoard(\'' . $share_link . '\')"'; - $share_button = '

' . "\n"; + $share_button = '' . "\n"; // modifier un article $admin_buttons = ''; diff --git a/src/view/NewBuilder.php b/src/view/NewBuilder.php index 94823bd..acde8b4 100644 --- a/src/view/NewBuilder.php +++ b/src/view/NewBuilder.php @@ -20,14 +20,23 @@ class NewBuilder extends AbstractBuilder // html, date $title = $node->getArticle()->getTitle(); $preview = $node->getArticle()->getPreview(); + + // lettre au début de l'id: i = article, p = preview, t = title, d = date $id = $node->getArticleTimestamp(); + $id_title = $id; + $id_title[0] = 't'; + $id_preview = $id; + $id_preview[0] = 'p'; + $id_date = $id; + $id_date[0] = 'd'; + $content = ''; // page article unique if(Director::$page_path->getLast()->getEndOfPath() === 'article') { $content = $node->getArticle()->getContent(); - $from_to_button = '

'; + $from_to_button = '

'; } // page d'accueil (avec des news) else @@ -38,32 +47,59 @@ class NewBuilder extends AbstractBuilder $date_object = $node->getArticle()->getDateTime(); // class DateTime $date = 'le ' . str_replace(':', 'h', $date_object->format('d-m-Y à H:i')); + //$date = str_replace(':', 'h', $date_object->format('d-m-Y à H:i')); // partage $share_link = new URL(['page' => CURRENT_PAGE], $id); isset($_GET['id']) ? $share_link->addParams(['id' => $_GET['id']]) : ''; $share_js = 'onclick="copyInClipBoard(\'' . $share_link . '\')"'; - $share_button = '

' . "\n"; + $share_button = '' . "\n"; // modifier un article + $title_buttons = ''; + $preview_buttons = ''; + $article_buttons = ''; + $date_buttons = ''; $admin_buttons = ''; if($_SESSION['admin']) { if(Director::$page_path->getLast()->getEndOfPath() === 'article'){ - $modify_js = 'onclick="openEditor(\'' . $id . '\', \'article\')"'; - $modify_article = '

' . "\n"; + $title_js = 'onclick="openEditor(\'' . $id_title . '\', \'article\')"'; + $modify_title = '

' . "\n"; + $close_js_title = 'onclick="closeEditor(\'' . $id_title . '\', \'article\', \'preview\')"'; + $close_editor_title = ''; + $submit_js_title = 'onclick="submitArticle(\'' . $id_title . '\', \'article\')"'; + $submit_title = ''; + $title_buttons = '
' . $modify_title . $close_editor_title . $submit_title . '
'; + + $preview_js = 'onclick="openEditor(\'' . $id_preview . '\', \'article\')"'; + $modify_preview = '

' . "\n"; + $close_js_preview = 'onclick="closeEditor(\'' . $id_preview . '\', \'article\', \'preview\')"'; + $close_editor_preview = ''; + $submit_js_preview = 'onclick="submitArticle(\'' . $id_preview . '\', \'article\')"'; + $submit_preview = ''; + $preview_buttons = '
' . $modify_preview . $close_editor_preview . $submit_preview . '
'; + + $article_js = 'onclick="openEditor(\'' . $id . '\', \'article\')"'; + $modify_article = '

' . "\n"; + $close_js_article = 'onclick="closeEditor(\'' . $id . '\', \'article\')"'; + $close_editor_article = ''; + $submit_js_article = 'onclick="submitArticle(\'' . $id . '\', \'article\')"'; + $submit_article = ''; + $article_buttons = '
' . $modify_article . $close_editor_article . $submit_article . '
'; + + $date_js = 'onclick="changeDate(\'' . $id_date . '\', \'article\');'; + $modify_date = '

' . "\n"; + $close_js_date = 'onclick="closeInput(\'' . $id_date . '\')"'; + $close_editor_date = ''; + $submit_js_date = 'onclick="submitDate(\'' . $id_date . '\')"'; + $submit_date = ''; + $date_buttons = '
' . $modify_date . $close_editor_date . $submit_date . '
'; - $up_button = ''; - $down_button = ''; - $delete_js = 'onclick="deleteArticle(\'' . $id . '\', \'' . CURRENT_PAGE . '\')"'; - $delete_article = '

' . "\n"; - - $close_js = 'onclick="closeEditor(\'' . $id . '\', \'article\')"'; - $close_editor = ''; - - $submit_js = 'onclick="submitArticle(\'' . $id . '\', \'article\')"'; - $submit_article = ''; + $delete_article = '

' . "\n"; + + $admin_buttons = $delete_article; } else{ $modify_article = '

' . "\n"; @@ -81,8 +117,10 @@ class NewBuilder extends AbstractBuilder $submit_article = ''; $submit_article = ''; + + $admin_buttons = $modify_article . $up_button . $down_button . $delete_article . $close_editor . $submit_article; } - $admin_buttons = $modify_article . $up_button . $down_button . $delete_article . $close_editor . $submit_article; + } ob_start(); diff --git a/src/view/templates/article.php b/src/view/templates/article.php index d34697e..f3ab32f 100644 --- a/src/view/templates/article.php +++ b/src/view/templates/article.php @@ -1,7 +1,6 @@
-

diff --git a/src/view/templates/new.php b/src/view/templates/new.php index 9dd8969..9515c70 100644 --- a/src/view/templates/new.php +++ b/src/view/templates/new.php @@ -1,20 +1,29 @@
-

+
+ +
+
-
+
+
+
-

- +

+ + +

+
+
-- cgit v1.2.3