danielhagnoul

Dans les billets précédents, Form2 et Form3, nous avons souvent utilisé des codes JS qui ont une base commune :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
dvjhUtilitiesBoolDebug = true;
 
const elemForm = k$('#myForm');
 
if (kFormNameUnique(elemForm)) {
    const oElemForm = kCreateFormDOMObject(elemForm);
 
    console.log(kLogVars `L'objet oElemForm contient les propriétés : ${ oElemForm }`);
 
    elemForm.addEventListener('submit', ev => {
        ev.stopPropagation();
        ev.preventDefault();
 
        // récupérations des données au format JSON
        let oDatas = kFromToDatas(elemForm);
 
        oDatas['dateTime'] = (new kDvjhDate()).toString(); // ex : 2018-05-18T17:35:02.757+0200
 
        console.log(oDatas);
    }, {
        capture: false,
        passive: false,
        once: false
    });
}

C'est un bon candidat pour en faire un extrait de code utilisateur (un snippet).

Nous allons inclure notre extrait de code dans le fichier : Fichier > Préférences > Extraits de code utilisateur > javascript.json.

Si c'est votre premier snippet, remplacer le contenu du fichier par le contenu suivant :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Traitement du formulaire": {
		"prefix": "elemForm",
		"body": [
			"dvjhUtilitiesBoolDebug = true;",
			"",
			"const elemForm = k$('#myForm');",
			"",
			"if (kFormNameUnique(elemForm)) {",
				"const oElemForm = kCreateFormDOMObject(elemForm);",
				"",
				"console.log(kLogVars `L'objet oElemForm contient les propriétés : ${ oElemForm }`);",
				"",
				"elemForm.addEventListener('submit', ev => {",
					"ev.stopPropagation();",
					"ev.preventDefault();",
					"",
					"// récupérations des données au format JSON",
					"let oDatas = kFromToDatas(elemForm);",
					"",
					"oDatas['dateTime'] = (new kDvjhDate()).toString(); // ex : 2018-05-18T17:35:02.757+0200",
					"",
					"console.log(oDatas);",
				"}, {",
					"capture: false,",
					"passive: false,",
					"once: false",
				"});",
			"}"
		],
		"description": "Base pour kCreateFormDomObject"
	}
}

Sauvegarder et fermer le fichier javascript.json.

Pour utiliser ce snippet, dans un fichier JS, il suffit de commencer à taper elemForm pour pouvoir inclure le snippet d'un appui sur la touche Tab.

Ensuite, un clic droit sur le code et sélectionné l'option du menu contextuel Metter en forme le document vous restituera le code voulu.

Licence Creative Commons Attribution 2.0 Belgique