From 0ac8f8d12f117e458271c961b303d3c47f4ead9d Mon Sep 17 00:00:00 2001 From: polo Date: Tue, 28 Oct 2025 10:11:08 +0100 Subject: =?UTF-8?q?classes=20Input=20plus=20adaptables,=20s=C3=A9paration?= =?UTF-8?q?=20des=20r=C3=B4les?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/Input.js | 132 ++++++++++++++++++++++++++++++++--------------------- 1 file changed, 81 insertions(+), 51 deletions(-) (limited to 'public/js') diff --git a/public/js/Input.js b/public/js/Input.js index 0b6912b..9a131c8 100644 --- a/public/js/Input.js +++ b/public/js/Input.js @@ -1,96 +1,126 @@ -class Input{ - constructor(name){ +class InputToggler{ + constructor(name, options = {}){ this.name = name; - /*const name_array = name.split('_'); - this.node = name_array[0]; - this.what = name_array[1];*/ this.parent = document.getElementById(name); + + // ids alternatifs optionnels + this.content_elem = this.parent.querySelector(options.content_selector || `#${name}_content`); + this.input_elem = this.parent.querySelector(options.input_selector || `#${name}_input`); + this.open_elem = this.parent.querySelector(options.open_selector || `#${name}_open`); + this.submit_elem = this.parent.querySelector(options.submit_selector || `#${name}_submit`); + this.cancel_elem = this.parent.querySelector(options.cancel_selector || `#${name}_cancel`); + + // balises à ne pas gérer (fonctionne mais inutilisé pour l'instant) + this.ignored_tags = { + has_content: options.has_content !== false, // => true sauf si le paramètre vaut false + has_input: options.has_input !== false, + has_open_button: options.has_open_button !== false, + has_submit_button: options.has_submit_button !== false, + has_cancel_button: options.has_cancel_button !== false + } } open(){ - this.parent.querySelector('#' + this.name + '_content').classList.add('hidden'); - this.parent.querySelector('#' + this.name + '_input').classList.remove('hidden'); - this.parent.querySelector('#' + this.name + '_open').classList.add('hidden'); - this.parent.querySelector('#' + this.name + '_submit').classList.remove('hidden'); - this.parent.querySelector('#' + this.name + '_cancel').classList.remove('hidden'); + this.toggleVisibility(true); } close(){ - this.parent.querySelector('#' + this.name + '_content').classList.remove('hidden'); - this.parent.querySelector('#' + this.name + '_input').classList.add('hidden'); - this.parent.querySelector('#' + this.name + '_open').classList.remove('hidden'); - this.parent.querySelector('#' + this.name + '_submit').classList.add('hidden'); - this.parent.querySelector('#' + this.name + '_cancel').classList.add('hidden'); + this.toggleVisibility(false); + } + toggleVisibility(show_input = false){ + // avec && si la partie de gauche est "false", on traite la partie de droite + // ?. est l'opérateur de chainage optionnel + this.ignored_tags.has_content && this.content_elem.classList.toggle('hidden', show_input); + this.ignored_tags.has_input && this.input_elem.classList.toggle('hidden', !show_input); + this.ignored_tags.has_open_button && this.open_elem.classList.toggle('hidden', show_input); + this.ignored_tags.has_submit_button && this.submit_elem.classList.toggle('hidden', !show_input); + this.ignored_tags.has_cancel_button && this.cancel_elem.classList.toggle('hidden', !show_input); } cancel(){ this.close(); } } -class InputFile extends Input{ +class InputText extends InputToggler{ + constructor(name, options = {}){ + super(name, options); + this.fetch_endpoint = options.endpoint || 'index.php'; + this.fetch_key = options.fetch_key || 'head_foot_text'; + } submit(){ - const file = this.parent.querySelector('#' + this.name + '_input').files[0]; - if(!file){ - console.error("Erreur: aucun fichier sélectionné."); - toastNotify("Erreur: aucun fichier sélectionné."); - return; - } - const form_data = new FormData(); - form_data.append('file', file); - - fetch('index.php?head_foot_image=' + this.name, { - method: 'POST', // apparemment il faudrait utiliser PUT - body: form_data + fetch(this.fetch_endpoint + '?' + this.fetch_key + '=' + this.name, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({new_text: this.input_elem.value}) }) .then(response => response.json()) .then(data => { if(data.success){ - // cas particuliers - if(this.name === 'head_favicon'){ - const link = document.querySelector('link[rel="icon"]'); - link.type = data.mime_type; - link.href = data.location; - } - else if(this.name === 'header_background'){ - document.querySelector('header').style.backgroundImage = "url('" + data.location + "')"; - } - - this.parent.querySelector('#' + this.name + '_content').src = data.location; + this.content_elem.innerHTML = this.input_elem.value; this.close(); } else{ - console.error("Erreur: le serveur n'a pas enregistré l'image'."); + console.error("Erreur: le serveur n'a pas enregistré le nouveau texte."); } }) .catch(error => { console.error('Erreur:', error); }); } + cancel(){ + this.input_elem.value = this.content_elem.innerHTML; + super.cancel(); + } } -class InputText extends Input{ +class InputFile extends InputToggler{ + constructor(name, options = {}){ + super(name, options); + this.fetch_endpoint = options.endpoint || 'index.php'; + this.fetch_key = options.fetch_key || 'head_foot_image'; + } submit(){ - const new_text = this.parent.querySelector('#' + this.name + '_input').value; + const file = this.input_elem.files[0]; + if(!file){ + console.error("Erreur: aucun fichier sélectionné."); + toastNotify("Erreur: aucun fichier sélectionné."); + return; + } + const form_data = new FormData(); + form_data.append('file', file); - fetch('index.php?head_foot_text=' + this.name, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({new_text: new_text}) + fetch(this.fetch_endpoint + '?' + this.fetch_key + '=' + this.name, { + method: 'POST', // apparemment il faudrait utiliser PUT + body: form_data }) .then(response => response.json()) .then(data => { if(data.success){ - this.parent.querySelector('#' + this.name + '_content').innerHTML = new_text; + this.onSuccess(data); this.close(); } else{ - console.error("Erreur: le serveur n'a pas enregistré le nouveau texte."); + console.error("Erreur: le serveur n'a pas enregistré l'image'."); } }) .catch(error => { console.error('Erreur:', error); }); } - cancel(){ // surcharge - this.parent.querySelector('#' + this.name + '_input').value = this.parent.querySelector('#' + this.name + '_content').innerHTML; - this.close(); + onSuccess(data){ + this.content_elem.src = data.location; } +} + +class InputFileFavicon extends InputFile{ + onSuccess(data){ + const link = document.querySelector('link[rel="icon"]'); + link.type = data.mime_type; + link.href = data.location; + super.onSuccess(data); + } +} +class InputFileHeaderBackground extends InputFile{ + onSuccess(data){ + document.querySelector('header').style.backgroundImage = `url('${data.location}')`; + super.onSuccess(data); + } } \ No newline at end of file -- cgit v1.2.3