Discussion :

[ascito]

Bonjour, je voudrais faire ceci, j'ai pensé aux regex mais cela ne semble pas forcément évident, sinon parcours de l'arbre ... je voudrais avoir votre avis, sur le comment vous feriez

1) En entrée :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
1) En entrée :
<ul class="ul-composant">
    <li style="opacity: 1;" class="jusc-component-container lisort" name="S54" data-item-id="54" data-type-name="jusc-component-container">
       <div class="line">
           <div class="movable fa fa-arrows ">54 </div>
       </div>
       <div class="composant"> </div>
       <ul class="ul-composant">
           <li style="opacity: 1;" class="jusc-component-container lisort" name="S56" data-item-id="56" data-type-name="jusc-component-container">
               <div class="line">
                   <div class="movable fa fa-arrows ">56 </div>
               </div>
               <div class="composant">
                   <div class="row">
                       <div jusc-dragdrop-uid="uid-57" class="col-sm-4 jusc-dragdrop" data-accept="jusc-component-container">col-sm-4
                           <li style="opacity: 1;" class="jusc-component-container lisort" name="S60" data-item-id="60" data-type-name="jusc-component-container">
                               <div class="line">
                                   <div class="movable fa fa-arrows ">60 </div>
                               </div>
                               <div class="composant">
                                   <div class="row">
                                       <div jusc-dragdrop-uid="uid-61" class="col-sm-4 jusc-dragdrop" data-accept="jusc-component-container">col-sm-4</div>
                                       <div jusc-dragdrop-uid="uid-62" class="col-sm-4 jusc-dragdrop" data-accept="jusc-component-container">col-sm-4</div>
                                       <div jusc-dragdrop-uid="uid-63" data-accept="jusc-component-container" class="col-sm-4 jusc-dragdrop">col-sm-4</div>
                                   </div>
                               </div>
                               <ul class="ul-composant"></ul>
                           </li>
                       </div>
                       <div jusc-dragdrop-uid="uid-58" class="col-sm-4 jusc-dragdrop" data-accept="jusc-component-container">col-sm-4</div>
                       <div jusc-dragdrop-uid="uid-59" data-accept="jusc-component-container" class="col-sm-4 jusc-dragdrop">col-sm-4</div>
                   </div>
               </div>
               <ul class="ul-composant"></ul>
           </li>
       </ul>
    </li>
 </ul>

2) Fonctionnement :

2.a) logique du moteur de template
2.a) logique du moteur de template

- class="jusc-component-container" // node doit être suprimé (garder les enfants)
- class="line"// node doit être suprimé
- class="movable"// node doit être suprimé
- class="composant"// node doit être suprimé (garder les enfants)
- class="ul-composant"// node doit être suprimé (garder les enfants)
- class="jusc-dragdrop" récuperer node (garder les enfants) et supprimer les propriétés(jusc-dragdrop-uid , data-accept) ainsi que la class jusc-dragdrop

tous les li.jusc-component-container" on toujours 3 enfants
les ul.ul-composant penvent avoir 0 ou n li enfants


3) Sortie :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 <div class="row">
    <div  class="col-sm-4">col-sm-4
        <div class="row">
             <div class="col-sm-4" >col-sm-4</div>
             <div class="col-sm-4" >col-sm-4</div>
             <div class="col-sm-4" >col-sm-4</div> 
        </div> 
    </div>
    <div class="col-sm-4" >col-sm-4</div>
    <div class="col-sm-4" >col-sm-4</div> 
</div>

merci

[NoSmoking]

Bonjour,

...j'ai pensé aux regex mais cela ne semble pas forcément évident, sinon parcours de l'arbre...

dans ton cas il semblerait que la 2éme proposition soit le bon choix, mais pas un spécialiste des regExp.

Le but du jeu m'échappe quand même

[ascito]

alors j'ai trouvé une solution, en me servant de jQuery , cette première version fonctionne parfaitement pour mon exemple . Bon l'idée est surtout de vous montrer le processus utilisé et voir si vous auriez fait autrement pour le parcours et le rendu

Code js :

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
92
93
94
95
96
97
98
99
100
101
102
103
104
var composantToString = function(string){
 
            var enterString, sortie, prev, lastParent, lastParents, newParents, liste, clone, parent, iterator;     
 
            enterString = document.createElement('ul'); 
            enterString.innerHTML = string; 
 
            sortie = document.createElement('div');
 
            lastParents = []; 
            newParents = {}; 
            iterator=0;
 
            $(enterString).find('*').each(function(){
                $(this).attr('data-temp-id',iterator);
                iterator++;    
            });
 
 
            liste = $(enterString).find('*').each(function(){
 
                if ($(this).is('.composant')) {}
                else if ($(this).is('.ul-composant')){} 
                else if ($(this).is('.jusc-component-container')) {} 
                else if ($(this).is('.line')) {}  
                else if ($(this).is('.movable')) {}  
                else if ($(this).is('.jusc-dragdrop')) {
 
                    clone = $(this).clone();
                    clone.find('*').remove();
 
                    lastParents.push($(this)[0]);
 
                    prev = $(this)[0].parentNode;
 
                    while (prev && prev.nodeName) { 
                        for(var x in lastParents){ 
                            if (lastParents[x] === prev) {  
                                newParents[$(prev).attr('data-temp-id')] = newParents[$(prev).attr('data-temp-id')] || {};
                                newParents[$(prev).attr('data-temp-id')][$(clone[0]).attr('data-temp-id')] = '';
                                prev = null;
                            }        
                        } 
                        prev = prev === null ? null : prev.parentNode;
                    }    
                }  
                else{  
                    if (!lastParent) {
 
                        lastParents.push($(this)[0]); 
                        lastParent = $(this).clone();
                        lastParent.find('*').remove();
 
                    }else{
 
                        clone = $(this).clone();
                        clone.find('*').remove();    
                        lastParents.push($(this)[0]);
                        prev = $(this)[0].parentNode;
 
                        while (prev && prev.nodeName) { 
                            for(var x in lastParents){ 
                                if (lastParents[x] === prev) {  
                                    newParents[$(prev).attr('data-temp-id')] = newParents[$(prev).attr('data-temp-id')]||{};
                                    newParents[$(prev).attr('data-temp-id')][$(clone[0]).attr('data-temp-id')] = '';
                                    prev = null;
                                }        
                            } 
                            prev = prev === null ? null : prev.parentNode;
                        }   
                    }
 
                }
            }); 
 
            parent = sortie;
 
            for(var i in  newParents){
 
                    if (!$(sortie).find('[data-temp-id='+i+']')[0]) {
                        clone = $(enterString).find('[data-temp-id='+i+']').clone();
                        clone.find('*').remove(); 
                        $(parent).append(clone[0]) ;
                        parent = $(sortie).find('[data-temp-id='+i+']')[0];
                    }else{
                        parent = $(sortie).find('[data-temp-id='+i+']')[0];
                    }
 
                    for(var t in  newParents[i]){ 
                        clone = $(enterString).find('[data-temp-id='+t+']').clone();
                        clone.find('*').remove(); 
                        $(parent).append(clone[0]); 
                    }
            } 
 
            $(sortie).find('*').each(function(){
                     $(this).removeAttr('data-temp-id' );  
                     $(this).removeAttr('data-accept' );
                     $(this).removeAttr('jusc-dragdrop-uid' );
                     $(this).removeClass('jusc-dragdrop' );
            })
 
            return sortie;
        };

voilou

@NoSmoking

je suis en train de créer une interface qui permet à coup de drag and drop de générer du code avec tous les outils de bootstrap, donc de mon coté j'ai besoin d'avoir mes propres containers qui contiennent les containers "source finale", du coup c'est la fonction qui transforme le ui en code html final