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/js/main.js | 30 ++++++++-- public/js/tinymce.js | 151 +++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 153 insertions(+), 28 deletions(-) (limited to 'public/js') 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