Folding comme dans les éditeurs de programmes

Version imprimable

04/11/2010, 21h59
rambc

Folding comme dans les éditeurs de programmes
Bonjour,
existe-t-il un plug-in, ou à défaut un moyen simple, d'avoir un effet de rétractation/extension comme dans les éditeurs de programmes ?

Par exemple, j'aimerais passer du 1er code au 2nd par simple clic sur la ligne commençant par "def".

Code "développé" :
Code:

1 2 3 4 5 6 7 8 9 x = 5 def function(bidon): """ Un petit commentaire... """ print('Cette fonction est bidon...') y = 2
Code "réduit" :
Code:

1 2 3 4 x = 5 def function(bidon): y = 2
Le problème de trouver les parties à réduire ou développer n'est pas ma préoccupation, je me débrouillerais, c'est surtout l'effet de rétractation/extension qui m'intéresse.
05/11/2010, 08h06
Bovino

Mais... tu parles de quoi là ? :koi:

Dans le navigateur ? Quel serait l'intérêt ? Le code n'est pas visible dans la page.
05/11/2010, 09h54
rambc

Bonjour,
en fait ce serait pour mettre des codes en ligne comme par exemple on peut le faire ici via :

Code:

[ CODE ]...[ /CODE ]

Le "folding" rendrait plus pratique la lecture de ces codes.
05/11/2010, 12h10
Bovino

Ben, oui, dans l'absolu, c'est possible, maintenant, reste à le coder, ce qui est autre chose. Il faut déjà déterminer comment sont composés les blocs supposés être "repliables" et tester sur des expressions régulières pour afficher / masquer les portions en fonction de la structure.
05/11/2010, 18h10
rambc

Citation:

Envoyé par Bovino

Ben, oui, dans l'absolu, c'est possible, maintenant, reste à le coder, ce qui est autre chose. Il faut déjà déterminer comment sont composés les blocs supposés être "repliables" et tester sur des expressions régulières pour afficher / masquer les portions en fonction de la structure.

En fait, c'est juste la partie "on replie-on déplie" via JQuery qui m'intéresse, et qui me pose aussi souci. Pour ce qui est de repérer les parties à plier-déplier, je le ferais en amont via Python.
08/11/2010, 16h21
Bovino

Citation:

Envoyé par rambc

En fait, c'est juste la partie "on replie-on déplie" via JQuery qui m'intéresse, et qui me pose aussi souci. Pour ce qui est de repérer les parties à plier-déplier, je le ferais en amont via Python.

Il suffit de placer tes parties à afficher / cacher dans des balises dont tu modifieras le display en fonction de l'action souhaitée.

C'est un truc comme cela qu'il te faut ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
	$(document).ready(function(){
		// Si on clique sur un extrait
		$(".extrait").click(function(){
			// On cache l'extrait et on affiche le texte complet
			$(this).hide();
			$(this).next().show();
		});
		// Si on clique sur un extrait complet
		$(".extrait_entier").click(function(){
			// On cache le texte complet et on affiche l'extrait
			$(this).hide();
			$(this).prev().show();
		});
	});
</script>
<div class="extrait" style="cursor:pointer;">bla bla bla ...</div>
<div class="extrait_entier" style="display:none;">bla bla bla bla bla bla</div>

08/11/2010, 17h31
rambc

Pas vraiment mais il y a un début. Disons que pouvoir avoir un div affiché-caché quand on clique sur la ligne qui précède serait bien.

Là où cela me dépasse, c'est qu'il faudrait une fonction qui agit indépendamment sur les div autorisés à être réduits ou agrandis. Je ne peux pas faire une fonction par div dépliable.

J'espère être un peu plus clair.
08/11/2010, 18h35
Bovino

Citation:

Pas vraiment mais il y a un début. Disons que pouvoir avoir un div affiché-caché quand on clique sur la ligne qui précède serait bien.

Euh... à ce point, tu devrais pouvoir adapter toi-même :roll:

Citation:

Là où cela me dépasse, c'est qu'il faudrait une fonction qui agit indépendamment sur les div autorisés à être réduits ou agrandis. Je ne peux pas faire une fonction par div dépliable.

C'est bien ce que fait le code de scourjean : pour tous les éléments dont la classe est celle donnée, il affiche ou masque les éléments lorsqu'on clique dessus :?
08/11/2010, 20h30
rambc

Oui mais il faudrait que je nomme chaque div. Ne pourrait-on pas créer une classe "folding" par exemple, et avoir ensuite un code qui n'agisse que le div concerné ?

J'espère être un peu plus clair.
08/11/2010, 21h13
Bovino

Citation:

Envoyé par rambc

Ne pourrait-on pas créer une classe "folding" par exemple, et avoir ensuite un code qui n'agisse que le div concerné ?

Code:

$(".extrait").click(function()

C'est bien une classe qui défini les éléments à prendre en compte...
08/11/2010, 21h21
rambc

Et que ce passera-t-il si j'ai deux div de type "extrait". La fonction va-t-elle agir indépendamment suivant chaque div ?
08/11/2010, 21h27
Bovino

Oui, c'est comme ça que fonctionne jQuery...

Citation:

Envoyé par Bovino

Oui, c'est comme ça que fonctionne jQuery...

Merci. Je viens de tester et c'est nickel. On obtient une ébauche parfaite pour débuter :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
 
        <script type="text/javascript">
            $(document).ready(function(){
                // Si on clique sur un extrait
                $(".extrait").click(function(){
                    // On cache l'extrait et on affiche le texte complet
                    $(this).hide();
                    $(this).next().show();
                });
                // Si on clique sur un extrait complet
                $(".extrait_entier").click(function(){
                    // On cache le texte complet et on affiche l'extrait
                    $(this).hide();
                    $(this).prev().show();
                });
            });
        </script>
    </head>
 
    <body>
Un exemple vite fait.
<br/><br/>
x = 5
<br/><br/>
<div class="extrait" style="cursor:pointer;">+ def function(bidon):</div>
<div class="extrait_entier" style="display:none;">
def function(bidon):
<br/>    """
<br/>    Un petit commentaire...
<br/>    """
<br/>    print('Cette fonction est bidon...')
</div>
<br/>y = 2
 
</html>

Voici une version plus fonctionnelle obtenue grâce à certains messages sur ce forum :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!--
Sources :
    http://www.developpez.net/forums/d995664/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/folding-editeurs-programmes/#post5578498
    http://www.developpez.net/forums/d999768/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/debutant-acceder-sous-div-div/#post5591994
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" />
 
        <script type="text/javascript">
            $(document).ready(function(){
                // Si on clique sur un extrait
                $('span[class^="fold"]').click(function(){
                    // On cache l'extrait et on affiche le texte complet
                    $(this).next().toggle();
                });
            });
        </script>
    </head>
 
    <body>
 
<code>
    <span class="fold_1" style="cursor:pointer;">+ def function(bidon):</span>
    <div class="content_fold_1">
        &nbsp;&nbsp;&nbsp;&nbsp;"""
        <br/>&nbsp;&nbsp;&nbsp;&nbsp;Un petit commentaire...
        <br/>&nbsp;&nbsp;&nbsp;&nbsp;"""
        <br/>&nbsp;&nbsp;&nbsp;&nbsp;print('Cette fonction est bidon...')
        <br/>&nbsp;&nbsp;&nbsp;&nbsp;<span class="fold_2" style="cursor:pointer;">+ for i in range(5):</span>
        <div class="content_fold_2">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(i)
        <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print(i**2)
        </div>
    </div>
</code>
 
    </body>
</html>

Petite amélioration du code pour ne plus utiliser   :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!--
Sources :
    http://www.developpez.net/forums/d995664/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/folding-editeurs-programmes/#post5578498
    http://www.developpez.net/forums/d999768/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/debutant-acceder-sous-div-div/#post5591994
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"/>
 
        <script type="text/javascript">
            $(document).ready(function(){
// We catch the event "click on a span with class starting with ''fold''".
                $('span[class^="fold"]').click(function(){
// We hide/show the div giving the subblock just after the line clicked.
                    $(this).next().toggle();
// We change "+" en "-" at the start of the line clicked.
                    newText = $(this).text();
 
                    if(newText[0] == '+'){
                        foldSymbol = '-'
                    }else{
                        foldSymbol = '+'
                    }
 
                    newText = foldSymbol + newText.substring(1,newText.lenght);
 
                    $(this).text(newText);
                });
            });
        </script>
    </head>
 
    <body>
 
<code>
    <pre><span class="fold_1" style="cursor:pointer;">- def function(bidon):</span>
    <div class="content_fold_1">    """
    Un petit commentaire...
    """
    print('Cette fonction est bidon...')
 
    <span class="fold_2" style="cursor:pointer;">- for i in range(5):</span>
    <div class="content_fold_2">        print(i)
        print(i**2)</div>
    </div></pre>
</code>
 
    </body>
</html>

Il resterait à mettre le signe + ou - dans une marge à gauche par rapport au bloc principal du code. je ne sais pas si c'est faisable, ou bien s'il faut envisager de passer par des tableaux.