diff options
author | polo <ordipolo@gmx.fr> | 2025-04-07 07:46:27 +0200 |
---|---|---|
committer | polo <ordipolo@gmx.fr> | 2025-04-07 07:46:27 +0200 |
commit | 09bea09c8157ff45279f0d06aa9d313448c0bec5 (patch) | |
tree | 4f79c47678df12cb508607be040050c8f08455aa /public | |
parent | 022d0c36258c874a21a36e207ae89aa8d91e44a1 (diff) | |
download | cms-09bea09c8157ff45279f0d06aa9d313448c0bec5.zip |
nouvelle "news"
Diffstat (limited to 'public')
-rw-r--r-- | public/assets/logo-fond-bleu.png | bin | 61236 -> 0 bytes | |||
-rw-r--r-- | public/js/main.js | 96 | ||||
-rw-r--r-- | public/js/tinymce.js | 166 |
3 files changed, 161 insertions, 101 deletions
diff --git a/public/assets/logo-fond-bleu.png b/public/assets/logo-fond-bleu.png deleted file mode 100644 index f51ac9c..0000000 --- a/public/assets/logo-fond-bleu.png +++ /dev/null | |||
Binary files differ | |||
diff --git a/public/js/main.js b/public/js/main.js index c05eb2f..cb76ea8 100644 --- a/public/js/main.js +++ b/public/js/main.js | |||
@@ -90,13 +90,8 @@ function changeDate(id_date) | |||
90 | const real_id = 'i' + id_date.slice(1); | 90 | const real_id = 'i' + id_date.slice(1); |
91 | const date_span = document.getElementById(id_date); // = <span> | 91 | const date_span = document.getElementById(id_date); // = <span> |
92 | var old_date = date_span.innerHTML; | 92 | var old_date = date_span.innerHTML; |
93 | 93 | ||
94 | // changer "le 28-12-2024 à 23h14" en "2024-12-28T23:14" | 94 | old_date = dateToISO(old_date); |
95 | let values = old_date.split(" à "); // 2 parties: date et heure | ||
96 | values[1] = values[1].replace('h', ':'); | ||
97 | values[0] = values[0].replace("le ", ""); | ||
98 | let date = values[0].split("-"); // tableau jj-mm-aaaa | ||
99 | old_date = date[2] + '-' + date[1] + "-" + date[0] + "T" + values[1]; | ||
100 | 95 | ||
101 | var label = document.createElement('label'); | 96 | var label = document.createElement('label'); |
102 | label.textContent = 'Choisir une date: '; | 97 | label.textContent = 'Choisir une date: '; |
@@ -117,6 +112,15 @@ function changeDate(id_date) | |||
117 | document.querySelector(`#submit-${id_date}`).classList.remove('hidden'); | 112 | document.querySelector(`#submit-${id_date}`).classList.remove('hidden'); |
118 | } | 113 | } |
119 | 114 | ||
115 | function dateToISO(date){ | ||
116 | // changer "le 28-12-2024 à 23h14" en "2024-12-28T23:14" | ||
117 | let values = date.split(" à "); // 2 parties: date et heure | ||
118 | values[1] = values[1].replace('h', ':'); | ||
119 | values[0] = values[0].replace("le ", ""); | ||
120 | let date_array = values[0].split("-"); // tableau jj-mm-aaaa | ||
121 | return date_array[2] + '-' + date_array[1] + "-" + date_array[0] + "T" + values[1]; | ||
122 | } | ||
123 | |||
120 | function closeInput(id) | 124 | function closeInput(id) |
121 | { | 125 | { |
122 | const date_span = document.getElementById(id); | 126 | const date_span = document.getElementById(id); |
@@ -133,40 +137,56 @@ function closeInput(id) | |||
133 | 137 | ||
134 | function submitDate(id_date) | 138 | function submitDate(id_date) |
135 | { | 139 | { |
136 | const date_input = document.getElementById('input-' + id_date); | 140 | var date_input = document.getElementById('input-' + id_date); |
141 | |||
142 | // cas des nouvelles "news" | ||
143 | const params = new URL(document.location).searchParams; // "search" = ? et paramètres, searchParams = objet avec des getters | ||
144 | if(params != null && params.get("id")[0] === 'n') | ||
145 | { | ||
146 | // modifier la date dans le <span> caché | ||
147 | date_input = updateDate(id_date, date_input); | ||
148 | closeInput(id_date); | ||
149 | return; | ||
150 | } | ||
151 | else{ | ||
152 | fetch('index.php?action=date_submit', { | ||
153 | method: 'POST', | ||
154 | headers: { | ||
155 | 'Content-Type': 'application/json' | ||
156 | }, | ||
157 | body: JSON.stringify({id: id_date, date: date_input.value}) | ||
158 | }) | ||
159 | .then(response => response.json()) | ||
160 | .then(data => { | ||
161 | if (data.success) { | ||
162 | // modifier la date dans le <span> caché | ||
163 | date_input = updateDate(id_date, date_input); | ||
164 | closeInput(id_date); | ||
165 | } | ||
166 | else { | ||
167 | console.error('Erreur lors de la sauvegarde de la date.'); | ||
168 | } | ||
169 | }) | ||
170 | .catch(error => { | ||
171 | console.error('Erreur:', error); | ||
172 | }); | ||
173 | } | ||
174 | } | ||
137 | 175 | ||
138 | fetch('index.php?action=date_submit', { | 176 | function updateDate(id_date, date_input){ |
139 | method: 'POST', | 177 | var date_span = document.getElementById(id_date); |
140 | headers: { | 178 | let date = new Date(date_input.value); |
141 | 'Content-Type': 'application/json' | 179 | date_span.innerHTML = |
142 | }, | 180 | 'le ' + String(date.getDate()).padStart(2, '0') + '-' + |
143 | body: JSON.stringify({id: id_date, date: date_input.value}) | 181 | String(date.getMonth() + 1).padStart(2, '0') + '-' + |
144 | }) | 182 | String(date.getFullYear()).padStart(4, '0') + ' à ' + |
145 | .then(response => response.json()) | 183 | String(date.getHours()).padStart(2, '0') + 'h' + |
146 | .then(data => { | 184 | String(date.getMinutes()).padStart(2, '0'); |
147 | if (data.success) { | 185 | |
148 | // modifier la date dans le <span> caché | 186 | return date_input; |
149 | const date_span = document.getElementById(id_date); | ||
150 | let date = new Date(date_input.value); | ||
151 | date_span.innerHTML = | ||
152 | 'le ' + String(date.getDate()).padStart(2, '0') + '-' + | ||
153 | String(date.getMonth() + 1).padStart(2, '0') + '-' + | ||
154 | String(date.getFullYear()).padStart(4, '0') + ' à ' + | ||
155 | String(date.getHours()).padStart(2, '0') + 'h' + | ||
156 | String(date.getMinutes()).padStart(2, '0'); | ||
157 | |||
158 | closeInput(id_date); | ||
159 | } | ||
160 | else { | ||
161 | console.error('Erreur lors de la sauvegarde de la date.'); | ||
162 | } | ||
163 | }) | ||
164 | .catch(error => { | ||
165 | console.error('Erreur:', error); | ||
166 | }); | ||
167 | } | 187 | } |
168 | 188 | ||
169 | function findParent(element, tag_name) { | 189 | function findParent(element, tag_name){ |
170 | while (element !== null) { | 190 | while (element !== null) { |
171 | if (element.tagName === tag_name.toUpperCase()) // tagName est en majuscules | 191 | if (element.tagName === tag_name.toUpperCase()) // tagName est en majuscules |
172 | { | 192 | { |
diff --git a/public/js/tinymce.js b/public/js/tinymce.js index 1e40f51..00868ee 100644 --- a/public/js/tinymce.js +++ b/public/js/tinymce.js | |||
@@ -38,10 +38,10 @@ function openEditor(id, page = '') { | |||
38 | document.querySelector(`#submit-${id}`).classList.remove('hidden'); | 38 | document.querySelector(`#submit-${id}`).classList.remove('hidden'); |
39 | if(creation_mode === false){ | 39 | if(creation_mode === false){ |
40 | document.querySelector(`#edit-${id}`).classList.add('hidden'); | 40 | document.querySelector(`#edit-${id}`).classList.add('hidden'); |
41 | document.querySelector(`#delete-${real_id}`).classList.add('hidden'); | ||
42 | if(page != 'article'){ | 41 | if(page != 'article'){ |
43 | document.querySelector(`#position_up-${id}`).classList.add('hidden'); | 42 | document.querySelector(`#position_up-${id}`).classList.add('hidden'); |
44 | document.querySelector(`#position_down-${id}`).classList.add('hidden'); | 43 | document.querySelector(`#position_down-${id}`).classList.add('hidden'); |
44 | document.querySelector(`#delete-${real_id}`).classList.add('hidden'); | ||
45 | } | 45 | } |
46 | } | 46 | } |
47 | else{ | 47 | else{ |
@@ -175,37 +175,75 @@ function closeEditor(id, page = '', restore_old = true) | |||
175 | 175 | ||
176 | } | 176 | } |
177 | 177 | ||
178 | function submitArticle(id, page = '', clone = null) { | 178 | function submitArticle(id, page = '', clone = null) |
179 | //var creation_mode; | 179 | { |
180 | if(id[0] === 'n'){ | 180 | /*if(id[0] === 'n' && clone == null){ |
181 | //creation_mode = true; | 181 | return; // sécurité |
182 | }*/ | ||
183 | var editor; | ||
184 | const params = new URL(document.location).searchParams; // "search" = ? et paramètres, searchParams = objet avec des getters | ||
182 | 185 | ||
183 | // sécurité | 186 | // clic sur "tout enregistrer" |
184 | if(clone == null){ | 187 | if(id[0] === 'n' && page === 'article'){ |
185 | return; | 188 | const prefixes = ['t', 'p', 'i', 'd']; |
186 | } | 189 | const allElemsWithId = document.querySelectorAll('[id]'); |
187 | } | 190 | var content = {}; |
188 | else{ | ||
189 | //creation_mode = false; | ||
190 | } | ||
191 | 191 | ||
192 | // Récupérer l'éditeur correspondant à l'article | 192 | allElemsWithId.forEach(element => { |
193 | const editor = editors[id]; | 193 | const first_letter = element.id.charAt(0).toLowerCase(); |
194 | if(!editor) { | 194 | if(prefixes.includes(first_letter)){ |
195 | console.error('Éditeur non trouvé pour l\'article:', id); | 195 | content[first_letter] = element.innerHTML; |
196 | } | ||
197 | }) | ||
198 | content['d'] = dateToISO(content['d']); | ||
199 | |||
200 | // Envoi AJAX au serveur | ||
201 | fetch('index.php?action=editor_submit', { | ||
202 | method: 'POST', | ||
203 | headers: { | ||
204 | 'Content-Type': 'application/json' | ||
205 | }, | ||
206 | body: JSON.stringify({id: id, content: content}) | ||
207 | }) | ||
208 | .then(response => response.json()) | ||
209 | .then(data => { | ||
210 | if (data.success) { | ||
211 | console.log('données envoyées au serveur avec succès.'); | ||
212 | |||
213 | // remplacer les boutons (Enregistrer => Supprimer) | ||
214 | } | ||
215 | else { | ||
216 | alert('Erreur lors de la sauvegarde de l\'article.'); | ||
217 | } | ||
218 | }) | ||
219 | .catch(error => { | ||
220 | console.error('Erreur:', error); | ||
221 | }); | ||
196 | return; | 222 | return; |
197 | } | 223 | } |
224 | // champs à remplir des nouvelles "news" | ||
225 | else if(page === 'article' && params != null && params.get("id")[0] === 'n'){ | ||
226 | closeEditor(id, page, false); | ||
227 | //makeNewArticleButtons(id, id, clone); | ||
228 | return; | ||
229 | } | ||
230 | // dans les autres cas, on doit pouvoir récupérer l'éditeur | ||
231 | else{ | ||
232 | // l'éditeur correspond à l'article OU page "article" à un élément: titre, aperçu, article | ||
233 | editor = editors[id]; | ||
234 | if(!editor) { | ||
235 | console.error('Éditeur non trouvé pour l\'article:', id); | ||
236 | return; | ||
237 | } | ||
238 | } | ||
198 | 239 | ||
199 | // Récupérer le contenu de l'éditeur | ||
200 | const html = editor.getContent(); | ||
201 | |||
202 | // Envoi AJAX au serveur | 240 | // Envoi AJAX au serveur |
203 | fetch('index.php?action=editor_submit', { | 241 | fetch('index.php?action=editor_submit', { |
204 | method: 'POST', | 242 | method: 'POST', |
205 | headers: { | 243 | headers: { |
206 | 'Content-Type': 'application/json' | 244 | 'Content-Type': 'application/json' |
207 | }, | 245 | }, |
208 | body: JSON.stringify({id: id, content: html}) | 246 | body: JSON.stringify({id: id, content: editor.getContent()}) |
209 | }) | 247 | }) |
210 | .then(response => response.json()) | 248 | .then(response => response.json()) |
211 | .then(data => { | 249 | .then(data => { |
@@ -213,48 +251,7 @@ function submitArticle(id, page = '', clone = null) { | |||
213 | // Fermer l'éditeur et mettre à jour le contenu de l'article | 251 | // Fermer l'éditeur et mettre à jour le contenu de l'article |
214 | closeEditor(id, page, false); | 252 | closeEditor(id, page, false); |
215 | if(id[0] === 'n'){ | 253 | if(id[0] === 'n'){ |
216 | var share_btn = document.querySelector(`.share.hidden`); // combinaison de deux classes | 254 | makeNewArticleButtons(id, data.article_id, clone); |
217 | var new_btn = document.querySelector(`#new-${id}`); | ||
218 | var edit_btn = document.querySelector(`#edit-${id}`); | ||
219 | var pos_up_btn = document.querySelector(`#position_up-${id}`); | ||
220 | var pos_down_btn = document.querySelector(`#position_down-${id}`); | ||
221 | var delete_btn = document.querySelector(`#delete-${id}`); | ||
222 | var cancel_btn = document.querySelector(`#cancel-${id}`); | ||
223 | var submit_btn = document.querySelector(`#submit-${id}`); | ||
224 | |||
225 | share_btn.classList.remove('hidden') | ||
226 | new_btn.classList.add('hidden'); | ||
227 | edit_btn.classList.remove('hidden'); | ||
228 | pos_up_btn.classList.remove('hidden'); | ||
229 | pos_down_btn.classList.remove('hidden'); | ||
230 | delete_btn.classList.remove('hidden'); | ||
231 | //cancel_btn.classList.add('hidden'); | ||
232 | //submit_btn.classList.add('hidden'); | ||
233 | |||
234 | var article = document.getElementById(id); | ||
235 | var parent = findParent(article, 'article'); | ||
236 | //share_btn.setAttribute('href', '#' + data.article_id); | ||
237 | share_btn.setAttribute('onclick', "copyInClipBoard('" + window.location.href + data.article_id + "')"); // # de l'ancre ajouté au clic sur le lien ouvrant l'éditeur | ||
238 | article.id = data.article_id; | ||
239 | edit_btn.id = 'edit-' + data.article_id; | ||
240 | edit_btn.querySelector('.action_icon').setAttribute('onclick', "openEditor('" + data.article_id + "')"); | ||
241 | pos_up_btn.id = 'position_up-' + data.article_id; | ||
242 | pos_up_btn.querySelector('.action_icon').setAttribute('onclick', "switchPositions('" + data.article_id + "', 'up')"); | ||
243 | pos_down_btn.id = 'position_down-' + data.article_id; | ||
244 | pos_down_btn.querySelector('.action_icon').setAttribute('onclick', "switchPositions('" + data.article_id + "', 'down')"); | ||
245 | delete_btn.id = 'delete-' + data.article_id; | ||
246 | delete_btn.querySelector('.action_icon').setAttribute('onclick', "deleteArticle('" + data.article_id + "')"); | ||
247 | cancel_btn.id = 'cancel-' + data.article_id; | ||
248 | cancel_btn.querySelector('button').setAttribute('onclick', "closeEditor('" + data.article_id + "')"); | ||
249 | submit_btn.id = 'submit-' + data.article_id; | ||
250 | submit_btn.querySelector('button').setAttribute('onclick', "submitArticle('" + data.article_id + "')"); | ||
251 | |||
252 | var next_div = parent.nextElementSibling.nextElementSibling; | ||
253 | parent.parentNode.replaceChild(clone.cloneNode(true), parent); // clone du squelette pour le garder intact | ||
254 | next_div.appendChild(parent); | ||
255 | } | ||
256 | else{ | ||
257 | //document.getElementById(id).innerHTML = html; | ||
258 | } | 255 | } |
259 | } | 256 | } |
260 | else { | 257 | else { |
@@ -264,4 +261,47 @@ function submitArticle(id, page = '', clone = null) { | |||
264 | .catch(error => { | 261 | .catch(error => { |
265 | console.error('Erreur:', error); | 262 | console.error('Erreur:', error); |
266 | }); | 263 | }); |
264 | } | ||
265 | |||
266 | function makeNewArticleButtons(id, article_id, clone) | ||
267 | { | ||
268 | var share_btn = document.querySelector(`.share.hidden`); // combinaison de deux classes | ||
269 | var new_btn = document.querySelector(`#new-${id}`); | ||
270 | var edit_btn = document.querySelector(`#edit-${id}`); | ||
271 | var pos_up_btn = document.querySelector(`#position_up-${id}`); | ||
272 | var pos_down_btn = document.querySelector(`#position_down-${id}`); | ||
273 | var delete_btn = document.querySelector(`#delete-${id}`); | ||
274 | var cancel_btn = document.querySelector(`#cancel-${id}`); | ||
275 | var submit_btn = document.querySelector(`#submit-${id}`); | ||
276 | |||
277 | share_btn.classList.remove('hidden') | ||
278 | new_btn.classList.add('hidden'); | ||
279 | edit_btn.classList.remove('hidden'); | ||
280 | pos_up_btn.classList.remove('hidden'); | ||
281 | pos_down_btn.classList.remove('hidden'); | ||
282 | delete_btn.classList.remove('hidden'); | ||
283 | //cancel_btn.classList.add('hidden'); | ||
284 | //submit_btn.classList.add('hidden'); | ||
285 | |||
286 | var article = document.getElementById(id); | ||
287 | var parent = findParent(article, 'article'); | ||
288 | |||
289 | share_btn.setAttribute('onclick', "copyInClipBoard('" + window.location.href + article_id + "')"); // # de l'ancre ajouté au clic sur le lien ouvrant l'éditeur | ||
290 | article.id = article_id; | ||
291 | edit_btn.id = 'edit-' + article_id; | ||
292 | edit_btn.querySelector('.action_icon').setAttribute('onclick', "openEditor('" + article_id + "')"); | ||
293 | pos_up_btn.id = 'position_up-' + article_id; | ||
294 | pos_up_btn.querySelector('.action_icon').setAttribute('onclick', "switchPositions('" + article_id + "', 'up')"); | ||
295 | pos_down_btn.id = 'position_down-' + article_id; | ||
296 | pos_down_btn.querySelector('.action_icon').setAttribute('onclick', "switchPositions('" + article_id + "', 'down')"); | ||
297 | delete_btn.id = 'delete-' + article_id; | ||
298 | delete_btn.querySelector('.action_icon').setAttribute('onclick', "deleteArticle('" + article_id + "')"); | ||
299 | cancel_btn.id = 'cancel-' + article_id; | ||
300 | cancel_btn.querySelector('button').setAttribute('onclick', "closeEditor('" + article_id + "')"); | ||
301 | submit_btn.id = 'submit-' + article_id; | ||
302 | submit_btn.querySelector('button').setAttribute('onclick', "submitArticle('" + article_id + "')"); | ||
303 | |||
304 | var next_div = parent.nextElementSibling.nextElementSibling; | ||
305 | parent.parentNode.replaceChild(clone.cloneNode(true), parent); // clone du squelette pour le garder intact | ||
306 | next_div.appendChild(parent); | ||
267 | } \ No newline at end of file | 307 | } \ No newline at end of file |