From 68b6058e2a27fc251c117c4efeb141392a0c9736 Mon Sep 17 00:00:00 2001 From: polo Date: Sun, 6 Apr 2025 12:18:49 +0200 Subject: =?UTF-8?q?nouvel=20article,=20boutons=20dans=20les=20builders,=20?= =?UTF-8?q?makeArticleNode,=20JS=20MAJ=20page,=20tri=20quand=20d=C3=A9plac?= =?UTF-8?q?ement=20ou=20suppression?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/main.css | 14 +++- public/css/trombinoscope.css | 6 ++ public/images/SAR_Constructions.jpg | Bin 0 -> 571935 bytes public/images/Ysoline Rabin.jpg | Bin 0 -> 4993 bytes public/images/beatrice_carre.jpg | Bin 0 -> 4475 bytes public/images/eaulibre.jpg | Bin 0 -> 53251 bytes public/images/frank_pouliquen.jpg | Bin 0 -> 27842 bytes public/images/leclerc_bigouden.png | Bin 0 -> 82228 bytes public/images/silhouette nageur.jpg | Bin 0 -> 11805 bytes public/images/silhouette nageuse.jpg | Bin 0 -> 18499 bytes public/images/yves_pouliquen.jpg | Bin 0 -> 37276 bytes public/index.php | 4 +- public/js/main.js | 30 +++++-- public/js/tinymce.js | 151 +++++++++++++++++++++++++++++------ 14 files changed, 173 insertions(+), 32 deletions(-) create mode 100644 public/images/SAR_Constructions.jpg create mode 100644 public/images/Ysoline Rabin.jpg create mode 100644 public/images/beatrice_carre.jpg create mode 100644 public/images/eaulibre.jpg create mode 100644 public/images/frank_pouliquen.jpg create mode 100644 public/images/leclerc_bigouden.png create mode 100644 public/images/silhouette nageur.jpg create mode 100644 public/images/silhouette nageuse.jpg create mode 100644 public/images/yves_pouliquen.jpg (limited to 'public') diff --git a/public/css/main.css b/public/css/main.css index 50c2173..cb44e16 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -28,8 +28,8 @@ section > p /* boutons spéciaux mode admin */ } .galery_photos .html_from_editor img { - max-width: 400px; - max-height: 250px; + max-width: 300px; + max-height: 200px; } article { @@ -50,6 +50,11 @@ article .logo2 { width: 100%; } +article img +{ + max-width: 100%; + height: auto; +} .new_content_text { max-height: 250px; @@ -120,4 +125,9 @@ main button:hover cursor: pointer; /* curseur qui pointe du doigt */ background-color: #ffff00; border-radius: 4px; +} + +article a:hover +{ + cursor: pointer; } \ No newline at end of file diff --git a/public/css/trombinoscope.css b/public/css/trombinoscope.css index f42dad8..357e6b0 100644 --- a/public/css/trombinoscope.css +++ b/public/css/trombinoscope.css @@ -1,4 +1,10 @@ article img { border-radius: 50%; +} + +.grid_columns +{ + /* écrase les 3 colonnes par défaut */ + grid-template-columns: repeat(4, 1fr); } \ No newline at end of file diff --git a/public/images/SAR_Constructions.jpg b/public/images/SAR_Constructions.jpg new file mode 100644 index 0000000..1b9cb81 Binary files /dev/null and b/public/images/SAR_Constructions.jpg differ diff --git a/public/images/Ysoline Rabin.jpg b/public/images/Ysoline Rabin.jpg new file mode 100644 index 0000000..2ecfcc4 Binary files /dev/null and b/public/images/Ysoline Rabin.jpg differ diff --git a/public/images/beatrice_carre.jpg b/public/images/beatrice_carre.jpg new file mode 100644 index 0000000..8db4036 Binary files /dev/null and b/public/images/beatrice_carre.jpg differ diff --git a/public/images/eaulibre.jpg b/public/images/eaulibre.jpg new file mode 100644 index 0000000..02b1917 Binary files /dev/null and b/public/images/eaulibre.jpg differ diff --git a/public/images/frank_pouliquen.jpg b/public/images/frank_pouliquen.jpg new file mode 100644 index 0000000..7bb3ead Binary files /dev/null and b/public/images/frank_pouliquen.jpg differ diff --git a/public/images/leclerc_bigouden.png b/public/images/leclerc_bigouden.png new file mode 100644 index 0000000..596ead7 Binary files /dev/null and b/public/images/leclerc_bigouden.png differ diff --git a/public/images/silhouette nageur.jpg b/public/images/silhouette nageur.jpg new file mode 100644 index 0000000..526cc0f Binary files /dev/null and b/public/images/silhouette nageur.jpg differ diff --git a/public/images/silhouette nageuse.jpg b/public/images/silhouette nageuse.jpg new file mode 100644 index 0000000..e4f7307 Binary files /dev/null and b/public/images/silhouette nageuse.jpg differ diff --git a/public/images/yves_pouliquen.jpg b/public/images/yves_pouliquen.jpg new file mode 100644 index 0000000..435c69e Binary files /dev/null and b/public/images/yves_pouliquen.jpg differ diff --git a/public/index.php b/public/index.php index 3c6f261..2512d6d 100644 --- a/public/index.php +++ b/public/index.php @@ -69,9 +69,9 @@ elseif(isset($_GET['action']) && $_GET['action'] === 'modif_mdp') } // -- contrôleurs -- -$director = new Director($entityManager); +$director = new Director($entityManager, true); $director->makeRootNode($id); -$node = $director->getRootNode(); +$node = $director->getNode(); // -- vues -- $view_builder = new ViewBuilder($node); diff --git a/public/js/main.js b/public/js/main.js index 1351fea..c05eb2f 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -30,10 +30,10 @@ function copyInClipBoard(link){ } // complète les fonctions dans tinymce.js -function switchPositions(articleId, direction) +function switchPositions(article_id, direction) { - const current_article = document.getElementById(articleId).parentElement.parentElement; - var other_article = current_article; + const current_article = findParent(document.getElementById(article_id), 'article'); + var other_article; if(direction == 'down'){ other_article = current_article.nextElementSibling; @@ -41,14 +41,23 @@ function switchPositions(articleId, direction) else if(direction == 'up'){ other_article = current_article.previousElementSibling; } - const other_article_id = other_article.querySelector('div[id]').id; + + var other_article_id; + try{ + other_article_id = other_article.querySelector('div[id]').id; + other_article_id = 'i' + other_article_id.slice(1); // peut mieux faire + } + catch(error){ + console.log('Inversion impossible'); + return; + } fetch('index.php?action=switch_positions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ id1: articleId, id2: other_article_id }) + body: JSON.stringify({ id1: article_id, id2: other_article_id }) }) .then(response => response.json()) .then(data => { @@ -155,4 +164,15 @@ function submitDate(id_date) .catch(error => { console.error('Erreur:', error); }); +} + +function findParent(element, tag_name) { + while (element !== null) { + if (element.tagName === tag_name.toUpperCase()) // tagName est en majuscules + { + return element; + } + element = element.parentElement; + } + return null; } \ No newline at end of file diff --git a/public/js/tinymce.js b/public/js/tinymce.js index d3c9739..cb1938a 100644 --- a/public/js/tinymce.js +++ b/public/js/tinymce.js @@ -1,15 +1,26 @@ let editors = {}; function openEditor(id, page = '') { - const real_id = 'i' + id.slice(1); + var creation_mode; + var real_id; + var article; - // Récupérer et sauvegarder le contenu d'origine de l'article - const articleContent = document.getElementById(id).innerHTML; - document.getElementById(id).setAttribute('data-original-content', articleContent); + // création ou modification d'un article? + if(id[0] === 'n'){ + creation_mode = true; + article = document.getElementById(id); + } + else{ + creation_mode = false; + // Récupérer et sauvegarder le contenu d'origine de l'article + real_id = 'i' + id.slice(1); + article = document.getElementById(id); + document.getElementById(id).setAttribute('data-original-content', article.innerHTML); + } tinymce.init({ selector: `#${id}`, - language: 'fr_FR', // télécharger des paquets de langue ici: https://www.tiny.cloud/get-tiny/language-packages/ + language: 'fr_FR', // téléchargement 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', branding: false, @@ -23,14 +34,18 @@ function openEditor(id, page = '') { editors[id] = editor; // boutons "Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Soumettre" - 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-${id}`).classList.add('hidden'); - document.querySelector(`#position_down-${id}`).classList.add('hidden'); + if(creation_mode === false){ + document.querySelector(`#edit-${id}`).classList.add('hidden'); + document.querySelector(`#delete-${real_id}`).classList.add('hidden'); + if(page != 'article'){ + document.querySelector(`#position_up-${id}`).classList.add('hidden'); + document.querySelector(`#position_down-${id}`).classList.add('hidden'); + } + } + else{ + document.querySelector(`#new-${id}`).classList.add('hidden'); // id = new-new-id_node } }); }, @@ -60,7 +75,9 @@ function openEditor(id, page = '') { }); // Remplacer le contenu de l'article par l'éditeur - document.getElementById(id).innerHTML = articleContent; + if(creation_mode === false){ + document.getElementById(id).innerHTML = article.innerHTML; + } } function deleteArticle(id, page = '') { @@ -100,33 +117,78 @@ function deleteArticle(id, page = '') { } } -function closeEditor(id, page = '', display_old = true) +function closeEditor(id, page = '', restore_old = true) { - const real_id = 'i' + id.slice(1); + var creation_mode; + var real_id; + var article; + var parent; + + // création ou modification d'un article? + if(id[0] === 'n'){ + creation_mode = true; + } + else{ + creation_mode = false; + } // Fermer l'éditeur tinymce.remove(`#${id}`); delete editors[id]; + if(creation_mode){ + article = document.getElementById(id); + parent = findParent(article, 'section'); + } + else{ + real_id = 'i' + id.slice(1); + } + // Restaurer le contenu d'origine de l'article - if(display_old){ + if(restore_old){ 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-${id}`).classList.remove('hidden'); + // boutons: "Nouvel article", Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Valider" 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(creation_mode){ + document.querySelector(`#new-${id}`).classList.remove('hidden'); // id = new-new-id_node + } + else{ + document.querySelector(`#edit-${id}`).classList.remove('hidden'); + if(page != 'article'){ + document.querySelector(`#position_up-${id}`).classList.remove('hidden'); + document.querySelector(`#position_down-${id}`).classList.remove('hidden'); + document.querySelector(`#delete-${id}`).classList.remove('hidden'); + } + } if(page != 'article'){ - document.querySelector(`#position_up-${id}`).classList.remove('hidden'); + /*document.querySelector(`#position_up-${id}`).classList.remove('hidden'); document.querySelector(`#position_down-${id}`).classList.remove('hidden'); - } + document.querySelector(`#delete-${id}`).classList.remove('hidden');*/ + } + else{ + //document.querySelector(`#delete-${real_id}`).classList.remove('hidden'); + } + } -function submitArticle(id, page = '') { +function submitArticle(id, page = '', clone = null) { + //var creation_mode; + if(id[0] === 'n'){ + //creation_mode = true; + + // sécurité + if(clone == null){ + return; + } + } + else{ + //creation_mode = false; + } + // Récupérer l'éditeur correspondant à l'article const editor = editors[id]; if(!editor) { @@ -150,7 +212,50 @@ function submitArticle(id, page = '') { if (data.success) { // Fermer l'éditeur et mettre à jour le contenu de l'article closeEditor(id, page, false); - document.getElementById(id).innerHTML = html; + if(id[0] === 'n'){ + var share_btn = document.querySelector(`.share.hidden`); // combinaison de deux classes + var new_btn = document.querySelector(`#new-${id}`); + var edit_btn = document.querySelector(`#edit-${id}`); + var pos_up_btn = document.querySelector(`#position_up-${id}`); + var pos_down_btn = document.querySelector(`#position_down-${id}`); + var delete_btn = document.querySelector(`#delete-${id}`); + var cancel_btn = document.querySelector(`#cancel-${id}`); + var submit_btn = document.querySelector(`#submit-${id}`); + + share_btn.classList.remove('hidden') + new_btn.classList.add('hidden'); + edit_btn.classList.remove('hidden'); + pos_up_btn.classList.remove('hidden'); + pos_down_btn.classList.remove('hidden'); + delete_btn.classList.remove('hidden'); + //cancel_btn.classList.add('hidden'); + //submit_btn.classList.add('hidden'); + + var article = document.getElementById(id); + var parent = findParent(article, 'article'); + //share_btn.setAttribute('href', '#' + data.article_id); + share_btn.setAttribute('onclick', "copyInClipBoard('" + window.location.href + data.article_id + "')"); // # de l'ancre ajouté au clic sur le lien ouvrant l'éditeur + article.id = data.article_id; + edit_btn.id = 'edit-' + data.article_id; + edit_btn.querySelector('.action_icon').setAttribute('onclick', "openEditor('" + data.article_id + "')"); + pos_up_btn.id = 'position_up-' + data.article_id; + pos_up_btn.querySelector('.action_icon').setAttribute('onclick', "switchPositions('" + data.article_id + "', 'up')"); + pos_down_btn.id = 'position_down-' + data.article_id; + pos_down_btn.querySelector('.action_icon').setAttribute('onclick', "switchPositions('" + data.article_id + "', 'down')"); + delete_btn.id = 'delete-' + data.article_id; + delete_btn.querySelector('.action_icon').setAttribute('onclick', "deleteArticle('" + data.article_id + "')"); + cancel_btn.id = 'cancel-' + data.article_id; + cancel_btn.querySelector('button').setAttribute('onclick', "closeEditor('" + data.article_id + "')"); + submit_btn.id = 'submit-' + data.article_id; + submit_btn.querySelector('button').setAttribute('onclick', "submitArticle('" + data.article_id + "')"); + + var next_div = parent.nextElementSibling.nextElementSibling; + parent.parentNode.replaceChild(clone, parent); + next_div.appendChild(parent); + } + else{ + //document.getElementById(id).innerHTML = html; + } } else { alert('Erreur lors de la sauvegarde de l\'article.'); -- cgit v1.2.3