Discussion :

[linwan]

Bonjour.

J'ai créé une syntaxe pour générer des listes en HTML plus rapidement qu'en HTML.

La voici (les chiffres en fin de lignes sont juste là pour abréger l'écriture HTML dans le second code, ils ne servent à rien autrement) :

Code :

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

1
2
3
4
5
6
7
1- Item 1 - liste A ordonnée (1)
-- Sous-item 1 - liste B non-ordonnée (2)
-- Sous-item 2 - liste B non-ordonnée (3)
1--- Sous-sous-item 1 - liste C ordonnée (4)
--- Sous-sous-item 2 - liste C ordonnée (5)
- Item 2 - liste A ordonnée (6)
- Item 3 - liste A ordonnée (7)

Ce qui est censé donner ceci en HTML :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ol>
    <li>1
        <ul>
            <li>2</li>
            <li>3
                <ol>
                    <li>4</li>
                    <li>5</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>6</li>
    <li>7</li>
</ol>

Petite explication :

• quand il y a un 1, on a une liste ordonnée (mais attention, on ne le met que pour le premier élément de cette liste puisqu'une liste ne peut être ordonnée et non-ordonnée à la fois);
• le nombre de tirets indique le niveau d'imbrication de la liste.

J'ai cependant un problème lorsque j'ai une liste de niveau 3 et que le prochain élément appartient à la liste de niveau 1.
J'ai réalisé ce JSFiddle pour y voir plus clair : https://jsfiddle.net/fa2qn54q/
On y voit que l'élément nommé "2" se place deux fois, dont une fois au mauvais endroit.

Quelqu'un peut-il m'aider ?
Merci.

[Beginner.]

Bonjour,

Je n'ai pas encore regardé votre code mais ce que vous voulez faire me fait penser à Emmet (https://emmet.io/), vous connaissez ?

[linwan]

Bonjour.
Je connais un peu. Ce que je veux faire est un peu comme ce que propose le Markdown, Textile ou SkrivML.

[mathieu]

je ne connais pas toute les subtilités de Babel donc voilà un hybride avec du JavaScript préhistorique qui fonctionne et je vous laisse faire l'optimisation

Code :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
const
  decoupage = (lines) => {
    let i = 0, l, id, parent,
    decoupage = {
      0 : {
        "type" : "ol",
        "enfants" : [],
      },
    },
    parentParNiveau = {
      1 : 0,
    },
    niveauPrecedent = 0
 
 
    while (i < lines.length) {
      l = lines[i]
      id = i+1
 
      const
      type = l[0] === '-' ? 'ul' : 'ol',
      level = l.split(' ')[0].length - (type === 'ul' ? 0 : 1),
      name = l.substring(level + 1).trim()
 
      if (level !== niveauPrecedent) {
        parent = parentParNiveau[level]
      }
 
      decoupage[parent]["enfants"].push(id)
 
      parentParNiveau[level + 1] = id;
 
      decoupage[id] = {
        "type" : type,
        "texte" : name,
        "enfants" : [],
      }
 
      niveauPrecedent = level
      i++
    }
 
 
    return decoupage
  } 
 
 
let lines = [
  '- A',
  '-- A.1',
  '1--- A.1.a',
  '---- A.1.a.1',
  '---- A.1.a.2',
  '--- A.1.b',
  '- B',
]
 
const res = decoupage(lines) //Objet qui contient le résultat, non formaté en HTML
 
 
// Le code suivant convertit l'objet "res" en HTML (ce code fonctionne bien)
const
  getHTML = id => {
 
    const e = res[id]
    let html = ""
 
    if (e["texte"]) {
      html += e["texte"]
    }
 
    if (e["enfants"]) {
      html += "<" + e["type"] + ">"
 
      for (let idEnfant of e["enfants"]) {
        html += "<li>"
        html += getHTML(idEnfant)
        html += "</li>"
      }
 
      html += "</" + e["type"] + ">"
 
    }
 
    return html
  },
  html = getHTML(0)
 
document.body.innerHTML = html

[linwan]

Merci Mathieu.

JSFiddle semble ne pas comprendre le javascript en version ES6, mais ça reste du javascript.
Merci beaucoup pour cette solution. J'ai juste un petit problème :

Comme le 1 dans votre exemple est sur la ligne A.1.a, cela veut dire que A.1.a est ordonné (avec A.1.b). Or, avec ce code, il se trouve que c'est la liste de niveau 4 qui est ordonnée alors qu'elle ne devrait pas.

Pouvez-vous y voir ?

[mathieu]

Comme le 1 dans votre exemple est sur la ligne A.1.a, cela veut dire que A.1.a est ordonné (avec A.1.b). Or, avec ce code, il se trouve que c'est la liste de niveau 4 qui est ordonnée alors qu'elle ne devrait pas.

c'est un peu bizarre comme fonctionnement puisque ça voudrait dire que s'il y a un "1" c'est le type de l'élément parent qui ordonné
donc vous devriez avoir une de ces 2 configurations :

Code :

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

1
2
3
4
5
6
pour une liste ordonnée
  '1--- A.1.a',
  '1--- A.1.b',
ou alors pour une liste non ordonnée
  '--- A.1.a',
  '--- A.1.b',

mais avec un "1" sur une seule de ces lignes ce n'est pas logique puisqu'une ligne dit que le parent est ordonné et l'autre dit le contraire.

[linwan]

Non, c'est plutôt logique puisqu'une liste ne peut pas être à la fois ordonnée et non-ordonnée. Le premier item prend la marque (1), mais il est inutile de la mettre aux autres.

Pour obtenir ce que l'on obtient dans l'exemple, il aurait fallut faire ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
let lines = [
  '- A',
  '-- A.1',
  '--- A.1.a',
  '1---- A.1.a.1',
  '---- A.1.a.2',
  '--- A.1.b',
  '- B',
]

[psychadelic]

oui, ta boucle est mal pensée.
la fermeture des sous-listes précédentes ne peut être déterminé que par la ligne suivante qui n'est pas encore lue (ou la fin).


avant d'écrire la ligne N, il faut connaître son écart d'indentation avec la ligne N-1

et donc de fermer les "</ul>" ou "</ol>" autant de fois qu'il faut pour se retrouver au même niveau d'indentation

ton code avec

Code :

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

1
2
while (i < lines.length) {
      next = lines[i+1]    // --> devient hors table si i ==  lines.length-1

[linwan]

Merci Psychadelic.
J'ai du mal à comprendre ce qu'il faut faire.
Avec le dernier "else" de la boucle "while", j'arrête la boucle qui ajoutent des li à lis. Et ensuite, les lis sont retournés. SI on enlève l'élément de niveau 3, le programme fonctionne bien (il comprend donc qu'il est face à un niveau d'imbrication inférieur).
Peux-tu m'en dire un peu plus ?

[Beginner.]

Ce qui est censé donner ceci en HTML :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ol>
    <li>1
        <ul>
            <li>2</li>
            <li>3
                <ol>
                    <li>4</li>
                    <li>5</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>6</li>
    <li>7</li>
</ol>

J'ai regardé certains éditeurs et il ne mettent pas de ul ou ol dans un li, les enfants d'un ol/ul sont des li ou/et des ul/ol...

Pour le rendu de votre exemple j'ai cela :



Mais dans les éditeurs cela correspond à ça :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol>
      <li>1</li>
      <ul>
        <li>2</li>
        <li>3</li>
        <ol>
          <li>4</li>
          <li>5</li>
        </ol>
      </ul>
      <li>6</li>
      <li>7</li>
</ol>

Je pense que c'est comme ça car ça facilite la gestion (notamment de la tabulation pour "descendre" ou "monter" )...

[linwan]

Beginner : La bonne façon de faire en HTML est de mettre les listes imbriquées dans les "li". Cela permet également aussi, avec un peu de CSS, de numéroter les "ol" de cette façon : 1.1.1, 1.1.2, ...

https://developer.mozilla.org/en-US/...amentals#Lists

Je ne parviens toujours pas à résoudre mon problème. Je vois bien qu'il faut faire quelque chose pour vérifier dans quel niveau on se trouve, mais je n'y arrive pas.

[Beginner.]

Ah bon c'est étrange, ce n'est pas ce que font les éditeurs...
Du coup j'ai fait un code (en partant en partie du votre) qui correspond à ce que font les éditeurs :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
L = l => { //l = line
    const
        type = l[0] === '-' ? 'ul' : 'ol',
        level = l.split(' ')[0].length - (type === 'ul' ? 0 : 1),
        content = l.substring(level + 1).trim()
    return {
        type,
        level,
        content
    };
};
 
 
 
function getList(lines) {
    let res = [],
        tabOlOrUl = [],
        currentLevel,
        precedentLevel,
        currentOlorUl;
 
    addOlorUl(res, lines[0]);
    currentOlorUl = tabOlOrUl[0] = res[0];
 
    for (let i = 1, l = lines.length; i < l; i++) {
 
        currentLevel = lines[i].level;
        precedentLevel = lines[i - 1].level;
 
        if (currentLevel === precedentLevel) { // si true on ajoute un li au parent courant      
 
            currentOlorUl = tabOlOrUl[currentLevel - 1];
            currentOlorUl.children.push({
                type: "li",
                content: lines[i].content,
                children: []
            });
 
        } else if (currentLevel > precedentLevel) { // si true on ajoute un ol/ul à l'enfant du parent courant
 
            currentOlorUl = tabOlOrUl[precedentLevel - 1].children;
            addOlorUl(currentOlorUl, lines[i]);
            tabOlOrUl.push(currentOlorUl[currentOlorUl.length - 1]);
 
        } else { // sinon on remonte au ol/ul correspondant au currentLevel...
 
            currentOlorUl = tabOlOrUl[currentLevel - 1];
            currentOlorUl.children.push({
                type: "li",
                content: lines[i].content,
                children: []
            });
        }
    }
    return res;
}
 
function addOlorUl(parent, elem) { // Ajoute un ol ou un ul...
    parent.push({
        type: elem.type,
        level: elem.level,
        children: [{
            type: "li",
            content: elem.content,
            children: []
        }]
    });
}
 
let lines = [
    '1- 1',
    '-- 1.1',
    '--- 1.1.1',
    '- 2'
].map(l => L(l));
console.log(lines);
console.log(getList(lines));
 
lines = [
    '1- 1',
    '-- 1.1',
    '--- 1.1.1',
    '--- 1.1.2',
    '--- 1.1.3',
    '- 2',
    '- 3'
 
].map(l => L(l));
console.log(lines);
console.log(getList(lines));

Il y a deux tests et ça fonctionne bien apparemment...

[linwan]

Merci pour ce code, mais j''étais déjà parvenu à placer des u/ol sous des li.
Je ne sais pas de quels éditeurs tu parles, mais Stackedit.io ou SkrivML insèrent bien des u/ol dans des li.
J'ai cherché dans le code de Stackedit, mais pas moyen de mettre la main sur le code qui génère les listes

[Beginner.]

Par exemple openOffice et bluegriffon... Mais je viens de voir CKEditor et effectivement il ne fait pas pareil...

[linwan]

Je viens de trouver.
Merci à tous

[Beginner.]

C'était quoi le problème alors ?

[linwan]

J'ai repris mon ancien code où je glissais un u/ol sous une liste. Et avec la méthode array.pop(), j'injecte l'ul/ol dans le dernier li de mon tableau plutot que dans un nouvel élément de tableau.

Code :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
const
	createUOL = ({type = 'ul', lis = []} = {}) => ({type, lis}),
	createLI = ({name = ''} = {}) => ({name}), //+ uol (0,1)
	L = l => { //l = line
		const
			type = l[0] === '-' ? 'ul' : 'ol',
			level = l.split(' ')[0].length - (type === 'ul' ? 0 : 1),
			name = htmlize(l.substring(level + 1).trim())
		return {type, level, name}
	},
	getUOL = lines => {
		const lis = getLIs(lines)
		return [
			createUOL({type: lines[0].type, lis: lis[0]}),
			lis[1]
		]
	},
	getLIs = lines => {
		let lis = [], li, i = 0, l1 = lines[0]
		while (i < lines.length) {
			let l = lines[i]
			const li = createLI({name: l.name})
			if (l.level > l1.level) {
				let uol = getUOL(lines.slice(i))
				let myLi = lis.pop()
				myLi.uol = uol[0]
				lis.push(myLi)
				i += uol[1]
			} else if (l.level === l1.level) {
				lis.push(li)
				i ++
			} else break
		}
		return [lis, i]
	}
 
let lines = [
	'1- elt1',
	'-- EL1',
	'-- EL2',
	'1--- ele1',
	'--- ele2',
	'- elt2',
	'- elt3',
	'-- EL1',
	'-- EL2',
	'1--- ele1',
	'--- ele2',
	'- elt4',
].map(l => L(l))
 
const res = getUOL(lines)[0] //Objet qui contient le résultat, non formaté en HTML
console.log(JSON.stringify(res))
 
// Le code suivant convertit l'objet "res" en HTML
const
	getHTML = uol => {
		const uol1 = document.createElement(uol.type)
		for (let li of uol.lis) {
			const
				li1 = document.createElement('li'),
				name = document.createTextNode(li.name)
			li1.appendChild(name)
			if (li.uol) li1.appendChild(getHTML(li.uol))
			uol1.appendChild(li1)
		}
		return uol1
	},
	html = getHTML(res).outerHTML
 
document.body.innerHTML = html

[Beginner.]

Ok merci je vais regarder votre code...


Entre temps j'étais en train d'essayer d'adapter mon code précédent afin qu'il corresponde à ce vous souhaitiez et j'obtiens cette fonction :

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
function getList(lines) {
    let res = {}, tabUol = [], currentLevel, precedentLevel , currentUol;
 
    res = {
        type: lines[0].type,
        lis: [{name: lines[0].name, uol: undefined}]        
    };
    currentUol = tabUol[0] = res; 
 
    for (let i = 1, l = lines.length; i < l; i++) {
 
        currentLevel = lines[i].level;
        precedentLevel = lines[i - 1].level;
 
        if (currentLevel === precedentLevel) { // si true on ajoute un li au uol courant 
            currentUol = tabUol[currentLevel - 1];
            addLiToLisOfUol(currentUol.lis, lines[i]);
 
        } else if (currentLevel > precedentLevel) { // si true on affecte* un uol au dernier li (du lis) du uol courant. *(ou plutôt on le défini)            
            currentUol = addUolToLi(currentUol.lis[currentUol.lis.length - 1], lines[i]);            
            tabUol.push(currentUol);
 
        } else { // sinon on remonte au uol correspondant au currentLevel...
            currentUol = tabUol[currentLevel - 1];
            addLiToLisOfUol(currentUol.lis, lines[i]);
        }
    }
    return res;
}
 
function addLiToLisOfUol(lisOfUol, elem) {
    lisOfUol.push({name: elem.name, uol: undefined });
}
function addUolToLi(li, elem) { 
    li.uol = {
        type: elem.type,
        lis: [{name: elem.name, uol: undefined}]       
    };
    return li.uol;
}

Voici un lien pour tester : http://jsbin.com/capavesozo/1/edit?js,output (il y a trois exemples (listes) de tests).

Est-ce que vous pouvez me dire si cela correspond bien à ce que vous vouliez ?
Merci.

[linwan]

C'est le bon résultat
C'est chouette d'arriver au même résultat avec deux codes différents. Merci pour ton implication.
Je réalise ceci pour une petite application aide-mémoire / liste de tâches qui est disponible ici en opensource : https://bitbucket.org/svenseitan/memolist
(je n'ai pas encore mis à jour les listes).

[Beginner.]

Oui c'est vrai, un code classique et un autre avec fonction récursive...Ce n'est pas simple les fonctions récursives, c'était un problème plus difficile qu'il ne parait...

Merci pour le lien je vais regarder ça...