Browse Source

Adding the labels setting

Brendan Abolivier 8 years ago
parent
commit
1acd9578a1
Signed by: Brendan Abolivier <contact@brendanabolivier.com> GPG key ID: 8EF1500759F70623
4 changed files with 30 additions and 9 deletions
  1. 5
    2
      README.md
  2. 9
    4
      front/form.js
  3. 14
    2
      server.js
  4. 2
    1
      settings.example.json

+ 5
- 2
README.md View File

79
         "someone.else@example.com"
79
         "someone.else@example.com"
80
     ],
80
     ],
81
     "formOrigin": "https://example.tld",
81
     "formOrigin": "https://example.tld",
82
-    "language": "en"
82
+    "language": "en",
83
+    "labels": true
83
 }
84
 }
84
 ```
85
 ```
85
 
86
 
89
 
90
 
90
 The `formOrigin` part is a string containing the origin of the page you'll include the contact form into. This allows SMAM to work with the [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) security most browser use. For more info on how to fill this field, and what is an origin, please give a look at [the MDN's definition](https://developer.mozilla.org/en-US/docs/Glossary/origin).
91
 The `formOrigin` part is a string containing the origin of the page you'll include the contact form into. This allows SMAM to work with the [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) security most browser use. For more info on how to fill this field, and what is an origin, please give a look at [the MDN's definition](https://developer.mozilla.org/en-US/docs/Glossary/origin).
91
 
92
 
92
-Finally, the `language` string tells SMAM in which language you want your form served. Possible values are all the files in `locales/`'s names (without the `.json`). To create your own translation, please read the section below.
93
+The `language` string tells SMAM in which language you want your form served. Possible values are all the files in `locales/`'s names (without the `.json`). To create your own translation, please read the section below.
94
+
95
+Finally, the `labels` setting is a boolean to set whether or not labels will be displayed in the `<form></form>` block. If set to `false`, the form will still display the front-end strings ("Your name", "Your e-mail address"...), but only as placeholders in the text fields. If set to true, the said strings will appear as text fields' placeholders but also as labels outside of the fields. If not set, defaults to `true`.
93
 
96
 
94
 ## Templating
97
 ## Templating
95
 
98
 

+ 9
- 4
front/form.js View File

6
 };
6
 };
7
 
7
 
8
 var server  = getServer();
8
 var server  = getServer();
9
-var token = "";
10
-var lang = {};
9
+var token   = "";
10
+var labels  = true;
11
+var lang    = {};
11
 
12
 
12
 var xhr = {
13
 var xhr = {
13
     lang: new XMLHttpRequest(),
14
     lang: new XMLHttpRequest(),
25
 
26
 
26
 xhr.lang.onreadystatechange = function() {
27
 xhr.lang.onreadystatechange = function() {
27
     if(xhr.lang.readyState == XMLHttpRequest.DONE) {
28
     if(xhr.lang.readyState == XMLHttpRequest.DONE) {
28
-        lang = JSON.parse(xhr.lang.responseText);
29
+        let response = JSON.parse(xhr.lang.responseText);
30
+        lang = response.translations;
31
+        labels = response.labels;
29
     }
32
     }
30
 };
33
 };
31
 
34
 
115
     var field = document.createElement('div');
118
     var field = document.createElement('div');
116
     
119
     
117
     field.setAttribute('id', id); // TODO: configurable prefix
120
     field.setAttribute('id', id); // TODO: configurable prefix
118
-    field.appendChild(getLabel(id, placeholder, type));
121
+    if(labels) {
122
+        field.appendChild(getLabel(id, placeholder, type));
123
+    }
119
     field.appendChild(getInputField(id, placeholder, email, type));
124
     field.appendChild(getInputField(id, placeholder, email, type));
120
     
125
     
121
     return field;
126
     return field;

+ 14
- 2
server.js View File

121
 
121
 
122
 
122
 
123
 // A request on /lang sends translated strings (according to the locale set in
123
 // A request on /lang sends translated strings (according to the locale set in
124
-// the app settings)
124
+// the app settings), alongside the boolean for the display of labels in the
125
+// form block.
125
 app.get('/lang', function(req, res, next) {
126
 app.get('/lang', function(req, res, next) {
126
     // Response will be JSON
127
     // Response will be JSON
127
     res.header('Access-Control-Allow-Headers', 'Content-Type');
128
     res.header('Access-Control-Allow-Headers', 'Content-Type');
128
-    res.status(200).send(locale.client);
129
+
130
+    // Preventing un-updated settings file
131
+    let labels = true;
132
+    if(settings.labels !== undefined) {
133
+        labels = settings.labels;
134
+    }
135
+    
136
+    // Send the infos
137
+    res.status(200).send({
138
+        'labels': labels,
139
+        'translations': locale.client
140
+    });
129
 });
141
 });
130
 
142
 
131
 
143
 

+ 2
- 1
settings.example.json View File

14
         "someone.else@example.com"
14
         "someone.else@example.com"
15
     ],
15
     ],
16
     "formOrigin": "https://example.tld",
16
     "formOrigin": "https://example.tld",
17
-    "language": "en"
17
+    "language": "en",
18
+    "labels": true
18
 }
19
 }