source: spip-zone/_plugins_/plan/trunk/prive/squelettes/contenu/plan.html @ 91527

Last change on this file since 91527 was 91527, checked in by marcimat@…, 6 years ago

Permettre de déplacer des objets depuis la page plan (si on est administrateur).

On recharge la page après chaque déplacement (et cela recharge le script jstree).
C'est un peu lourd, mais on est sûr d'avoir toutes les données à jour comme cela.

File size: 5.9 KB
Line 
1
2<script type="text/javascript">
3(function($){
4$(document).ready(function(){
5
6        var $mytree = $('body.plan #contenu #racine');
7        var $mytree_source = $mytree.clone();
8        // $mytree.after($mytree_source);
9
10        $mytree.jstree({
11                "plugins" : [ "types", "search", "state"[(#AUTORISER{configurer}|oui), "dnd"] ],
12                "core" : {
13                        "animation" : 0,
14                        "check_callback" : true,
15                        "data" : function (node, cb) {
16                                // on est obligé de tout charger en ajax (même la racine)
17                                // donc on charge 1 fois la racine avec le html d'origine
18                                if (node.id === '#') {
19                                        cb($mytree_source.html());
20                                }
21
22                                // et pour ce qu'on ne connait pas (classe css 'jstree-closed' sur un LI, et pas de UL à l'intérieur)
23                                // on fait un appel ajax pour obtenir la liste correspondant à l'objet souhaité, lorsque c'est demandé.
24                                else {
25                                        var id_rubrique = node.parent.split('-')[1];
26                                        var params = {
27                                                "id_rubrique": id_rubrique,
28                                                "objet": node.data.jstree.objet
29                                        };
30                                        if ("#ENV{statut}") {
31                                                params.statut = "#ENV{statut}";
32                                        }
33                                        $.ajax({
34                                                url: "[(#VAL{plan}|generer_url_action{"", 1})]",
35                                                data: params,
36                                                dataType: 'html',
37                                                cache: false,
38                                        }).done(function(data) {
39                                                cb(data);
40                                        });
41                                }
42                        }
43                },
44                "search" : {
45                        "show_only_matches" : true,
46                },
47                "types" : {
48                        "#" : {
49                                "icon" : "[(#VAL{rubrique}|objet_icone{16}|extraire_attribut{src})]",
50                                "valid_children" : ["default"]
51                        },
52                        "default" : {
53                                "icon" : "[(#VAL{rubrique}|objet_icone{16}|extraire_attribut{src})]",
54                                "valid_children" : [
55                                        "default"
56                                        <BOUCLE_childs(DATA){source table,#REM|plan_lister_objets_rubrique}>, "[(#VALEUR|objet_type)]", "box_[(#VALEUR|objet_type)]"</BOUCLE_childs>
57                                ]
58                        }
59                        [(#REM) On déclare les listes d'éléments qui ne peuvent pas avoir d'enfants ici (articles, sites...) ]
60                        <BOUCLE_objets(DATA){source table,#REM|plan_lister_objets_rubrique}>
61                        ,"[(#VALEUR|objet_type)]" : {
62                                "icon" : "[(#VALEUR|objet_icone{16}|extraire_attribut{src})]",
63                                "max_children" : 0,
64                                "max_depth" : 0
65                        }
66                        </BOUCLE_objets>
67                        [(#REM) Leur conteneur parent indique le nombre d'item, tel que "23 articles" et est de type 'box_xx' ]
68                        <BOUCLE_box_objets(DATA){source table,#REM|plan_lister_objets_rubrique}>
69                        ,"box_[(#VALEUR|objet_type)]" : {
70                                "icon" : "[(#VALEUR|objet_icone{16}|extraire_attribut{src})]",
71                                "max_depth" : 1,
72                                "valid_children" : ["[(#VALEUR|objet_type)]"]
73                        }
74                        </BOUCLE_box_objets>
75                }
76        });
77
78        // un clic d'une feuille amène sur son lien
79        // mais… éviter que le plugin 'state' clique automatiquement lorsqu'il restaure
80        // la sélection précédente !
81        $mytree.one("restore_state.jstree", function () {
82                $(this).on("changed.jstree", function (e, data) {
83                        data.instance.save_state();
84                        var node = data.instance.get_node(data.node, true);
85                        if (node) {
86                                location.href = node.children('a').attr('href');
87                        }
88                });
89        });
90
91        // lorsqu'on déplace un nœud
92        $mytree.on("move_node.jstree", function(event, data) {
93                // si les parents sont identiques : pas de changement,
94                // on ne peut/veut pas gérer ici les positionnements
95                console.log(data);
96
97                if (data.old_parent == data.parent) {
98                        // data.instance.refresh();
99                        return true;
100                }
101
102                // il existe 2 cas de boites :
103                // - un item (rubrique, article, site) a été déplacé
104                // - un conteneur (box_xx) a été déplacé (ie: tous les articles qu'il contient par exemple)
105                //   dans ce cas on retrouve tous les identifiants déplacés
106                var box = (data.node.type.substring(0, 4) == 'box_');
107                var infos = data.node.id.split('-'); // articles-rubrique-30 (box) ou article-30 (item)
108
109                if (box) {
110                        var ids = [];
111                        $.each(data.node.children, function(key, val) {
112                                ids.push( val.split('-')[1] );
113                        });
114                        var params = {
115                                objet: infos[0],
116                                id_objet: ids, 
117                                id_rubrique_source: infos[2],
118                                id_rubrique_destination: data.parent.split('-')[1]
119                        }
120                } else if (infos[0] == 'rubrique') {
121                        // les rubriques n'ont pas de 'box_' et sont directement dans les sous rubriques
122                        var params = {
123                                objet: infos[0],
124                                id_objet: [ infos[1] ],
125                                id_rubrique_source: (data.old_parent == '#' ? 0 : data.old_parent.split('-')[1]),
126                                id_rubrique_destination: (data.parent == '#' ? 0 : data.parent.split('-')[1])
127                        }
128                } else {
129                        // un item, sa destination est soit une box (de même type) soit une rubrique
130                        var dest = data.parent.split('-'); // articles-rubrique-30 (box) ou rubrique-30
131                        console.log(dest, dest.length);
132                        var params = {
133                                objet: infos[0],
134                                id_objet: [ infos[1] ],
135                                id_rubrique_source: data.old_parent.split('-')[2],
136                                id_rubrique_destination: (dest.length == 3 ? dest[2] : dest[1]),
137                        }
138                }
139
140                console.log(params, data);
141
142                $.ajax({
143                        url: "[(#VAL{deplacer_objets}|generer_url_action{"", 1})]",
144                        data: params,
145                        dataType: 'json',
146                        cache: false,
147                }).done(function(response) {
148                        // console.log('done', response);
149                        ajaxReload('contenu');
150                });
151
152                return true;
153        });
154
155
156        // recherche automatique
157        $mytree_search = $("#mytree_search");
158
159        var to = false;
160        $mytree_search.keyup(function () {
161                if (to) { clearTimeout(to); }
162                to = setTimeout(function () {
163                        var v = $mytree_search.val();
164                        $mytree.jstree(true).search(v);
165                }, 250);
166        });
167
168
169});
170})(jQuery);
171</script>
172
173<div id="mytree_actions">
174        <input id="mytree_search" class="input" type="text" value="" placeholder="<:info_rechercher|attribut_html:>">
175
176        <span class='pliage'>
177                <a href="#" onClick="jQuery('#racine').jstree('open_all'); return false;"><:lien_tout_deplier:></a> |
178                <a href="#" onClick="jQuery('#racine').jstree('close_all'); return false;"><:lien_tout_replier:></a>
179        </span>
180
181        <span class='statut'>
182                Statuts :
183                <a [(#ENV{statut}|non)class='on' ]href="[(#SELF|parametre_url{statut,''})]">Tous</a> |
184                <a [(#ENV{statut}|=={publie}|oui)class='on' ]href="[(#SELF|parametre_url{statut,publie})]">Publiés uniquement</a> 
185        </span>
186</div>
187
188#BOITE_OUVRIR{'', simple}
189<div id="racine">
190<INCLURE{fond=prive/squelettes/inclure/plan2-rubriques, id_parent=0, statut}>
191</div>
192#BOITE_FERMER
Note: See TracBrowser for help on using the repository browser.