aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/css/head.css2
-rw-r--r--public/js/Fetcher.js51
-rw-r--r--public/js/Input.js105
-rw-r--r--public/js/main.js21
4 files changed, 119 insertions, 60 deletions
diff --git a/public/css/head.css b/public/css/head.css
index b5f1bd1..1844f93 100644
--- a/public/css/head.css
+++ b/public/css/head.css
@@ -87,7 +87,7 @@ header a
87 gap: 4px; 87 gap: 4px;
88 flex-wrap: wrap; 88 flex-wrap: wrap;
89} 89}
90#header_social_content img 90#header_social_content a img
91{ 91{
92 width: 28px; 92 width: 28px;
93 background-color: #ffffffb3; 93 background-color: #ffffffb3;
diff --git a/public/js/Fetcher.js b/public/js/Fetcher.js
new file mode 100644
index 0000000..0f56628
--- /dev/null
+++ b/public/js/Fetcher.js
@@ -0,0 +1,51 @@
1class Fetcher{
2 constructor(options = {}) {
3 this.endpoint = options.endpoint || 'index.php';
4 this.method = options.method || 'POST'; // normalement c'est GET par défaut
5
6 // Callbacks optionnels
7 this.onSuccess = options.onSuccess || null;
8 this.onFailure = options.onFailure || null;
9 //this.onError = options.onError || null; // Pour les erreurs réseau/parsing
10 }
11
12 send(body){
13 const options = { method: this.method };
14
15 if(this.method !== 'GET'){ // si GET, ni body ni headers
16 if(body instanceof FormData){ // pas de headers
17 options.body = body;
18 }
19 else if(body !== null && typeof body === 'object'){ // objet => json
20 options.headers = { 'Content-Type': 'application/json' };
21 options.body = JSON.stringify(body);
22 }
23 else{ // blob?
24 options.body = body;
25 }
26 }
27
28 return fetch(this.endpoint, options)
29 .then(response => response.json())
30 .then(data => this.onResponse(data))
31 .catch(error => {
32 console.error('Erreur:', error);
33 });
34 }
35
36 onResponse(data){
37 if(data.success){
38 if(this.onSuccess){
39 this.onSuccess(data);
40 }
41 return{ success: true, data };
42 }
43 else{
44 if(this.onFailure){
45 this.onFailure(data);
46 }
47 console.error(data.message || "Erreur serveur");
48 return { success: false, data };
49 }
50 }
51} \ No newline at end of file
diff --git a/public/js/Input.js b/public/js/Input.js
index 54872d1..0ebbbbb 100644
--- a/public/js/Input.js
+++ b/public/js/Input.js
@@ -1,9 +1,10 @@
1// mère
1class InputToggler{ 2class InputToggler{
2 constructor(name, options = {}){ 3 constructor(name, options = {}){
3 this.name = name; 4 this.name = name;
4 this.parent = document.getElementById(name); 5 this.parent = document.getElementById(name);
5 6
6 // ids alternatifs optionnels 7 // des ids alternatifs sont possibles
7 this.content_elem = this.parent.querySelector(options.content_selector || `#${name}_content`); 8 this.content_elem = this.parent.querySelector(options.content_selector || `#${name}_content`);
8 this.input_elem = this.parent.querySelector(options.input_selector || `#${name}_input`); 9 this.input_elem = this.parent.querySelector(options.input_selector || `#${name}_input`);
9 this.open_elem = this.parent.querySelector(options.open_selector || `#${name}_open`); 10 this.open_elem = this.parent.querySelector(options.open_selector || `#${name}_open`);
@@ -39,34 +40,26 @@ class InputToggler{
39 } 40 }
40} 41}
41 42
43
44// enfants
42class InputText extends InputToggler{ 45class InputText extends InputToggler{
43 constructor(name, options = {}){ 46 constructor(name, options = {}){
44 super(name, options); 47 super(name, options);
45 this.fetch_endpoint = options.endpoint || 'index.php'; 48 this.fetcher = new Fetcher({
46 this.fetch_key = options.fetch_key || 'head_foot_text'; 49 endpoint: (options.endpoint || 'index.php?') + (options.fetch_key || 'head_foot_text=') + this.name,
50 method: 'POST',
51 onSuccess: (data) => this.onSuccess(data)
52 });
47 } 53 }
48 submit(){ 54 submit(){
49 fetch(this.fetch_endpoint + '?' + this.fetch_key + '=' + this.name, { 55 this.fetcher.send({new_text: this.input_elem.value})
50 method: 'POST', 56 .then(result => {
51 headers: { 'Content-Type': 'application/json' }, 57 toastNotify(result.success ? 'texte modifié avec succès' : "erreur: la modification des données côté serveur a échoué");
52 body: JSON.stringify({new_text: this.input_elem.value}) 58 });
53 })
54 .then(response => response.json())
55 .then(data => {
56 if(data.success){
57 this.onSuccess(data);
58 this.close();
59 }
60 else{
61 console.error("Erreur: le serveur n'a pas enregistré le nouveau texte.");
62 }
63 })
64 .catch(error => {
65 console.error('Erreur:', error);
66 });
67 } 59 }
68 onSuccess(data){ 60 onSuccess(data){
69 this.content_elem.innerHTML = this.input_elem.value; 61 this.content_elem.innerHTML = this.input_elem.value;
62 this.close();
70 } 63 }
71 cancel(){ 64 cancel(){
72 this.input_elem.value = this.content_elem.innerHTML; 65 this.input_elem.value = this.content_elem.innerHTML;
@@ -74,29 +67,15 @@ class InputText extends InputToggler{
74 } 67 }
75} 68}
76 69
77class InputTextSocialNetwork extends InputText{
78 open(){
79 const elem_parent = this.content_elem.parentNode;
80 if(elem_parent.tagName.toLowerCase() === 'a'){
81 this.input_elem.value = elem_parent.href;
82 }
83 super.open();
84 }
85 onSuccess(data){
86 if(this.input_elem.value){
87 this.content_elem.parentNode.href = this.input_elem.value;
88 }
89 else{
90 this.content_elem.parentNode.removeAttribute('href');
91 }
92 }
93}
94
95class InputFile extends InputToggler{ 70class InputFile extends InputToggler{
96 constructor(name, options = {}){ 71 constructor(name, options = {}){
97 super(name, options); 72 super(name, options);
98 this.fetch_endpoint = options.endpoint || 'index.php'; 73 this.fetcher = new Fetcher({
99 this.fetch_key = options.fetch_key || 'head_foot_image'; 74 endpoint: (options.endpoint || 'index.php?') + (options.fetch_key || 'head_foot_image=') + this.name,
75 method: 'POST',
76 onSuccess: (data) => this.onSuccess(data),
77 onFailure: (data) => this.onFailure(data)
78 });
100 } 79 }
101 submit(){ 80 submit(){
102 const file = this.input_elem.files[0]; 81 const file = this.input_elem.files[0];
@@ -108,27 +87,14 @@ class InputFile extends InputToggler{
108 const form_data = new FormData(); 87 const form_data = new FormData();
109 form_data.append('file', file); 88 form_data.append('file', file);
110 89
111 fetch(this.fetch_endpoint + '?' + this.fetch_key + '=' + this.name, { 90 this.fetcher.send(form_data)
112 method: 'POST', // apparemment il faudrait utiliser PUT 91 .then(result => {
113 body: form_data 92 toastNotify(result.success ? 'fichier téléchargé avec succès' : "erreur: la modification des données côté serveur a échoué");
114 }) 93 });
115 .then(response => response.json())
116 .then(data => {
117 if(data.success){
118 this.onSuccess(data);
119 this.close();
120 }
121 else{
122 this.onFailure(data);
123 console.error(data.message);
124 }
125 })
126 .catch(error => {
127 console.error('Erreur:', error);
128 });
129 } 94 }
130 onSuccess(data){ 95 onSuccess(data){
131 this.content_elem.src = data.location; 96 this.content_elem.src = data.location;
97 this.close();
132 } 98 }
133 onFailure(data){ 99 onFailure(data){
134 if(data.format === 'ico'){ 100 if(data.format === 'ico'){
@@ -137,6 +103,8 @@ class InputFile extends InputToggler{
137 } 103 }
138} 104}
139 105
106
107// petits enfants
140class InputFileFavicon extends InputFile{ 108class InputFileFavicon extends InputFile{
141 onSuccess(data){ 109 onSuccess(data){
142 const link = document.querySelector('link[rel="icon"]'); 110 const link = document.querySelector('link[rel="icon"]');
@@ -150,4 +118,23 @@ class InputFileHeaderBackground extends InputFile{
150 document.querySelector('header').style.backgroundImage = `url('${data.location}')`; 118 document.querySelector('header').style.backgroundImage = `url('${data.location}')`;
151 super.onSuccess(data); 119 super.onSuccess(data);
152 } 120 }
121}
122
123class InputTextSocialNetwork extends InputText{
124 open(){
125 const elem_parent = this.content_elem.parentNode;
126 if(elem_parent.tagName.toLowerCase() === 'a'){
127 this.input_elem.value = elem_parent.href;
128 }
129 super.open();
130 }
131 onSuccess(data){
132 if(this.input_elem.value){
133 this.content_elem.parentNode.href = this.input_elem.value;
134 }
135 else{
136 this.content_elem.parentNode.removeAttribute('href');
137 }
138 this.close(); // vu qu'on n'appelle pas super.onSuccess
139 }
153} \ No newline at end of file 140} \ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index 59a9331..3cc144a 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -199,6 +199,27 @@ function findParentByTagName(element, tag_name){
199 return null; 199 return null;
200} 200}
201 201
202function checkSocialNetwork(id){
203 const checkbox = document.getElementById(id).querySelector('input[type="checkbox"]');
204
205 new Fetcher({
206 endpoint: 'index.php?head_foot_social_check=' + id,
207 method: 'POST',
208 onSuccess: (data) => {
209 console.log(data);
210
211 checkbox.checked = data.checked;
212
213 /*const color = checkbox.checked ? "#ff1d04" : "grey";
214 clicked_menu_entry.querySelector("button").style.color = color;*/
215 },
216 onFailure: (data) => {
217 console.log(data);
218 }
219 })
220 .send({checked: checkbox.checked});
221}
222
202 223
203/* -- fonctions spécifiques à la gestion des dates -- */ 224/* -- fonctions spécifiques à la gestion des dates -- */
204 225