Changeset 91532 in spip-zone for _plugins_/plan


Ignore:
Timestamp:
Aug 29, 2015, 10:54:06 AM (6 years ago)
Author:
marcimat@…
Message:

Séparer le javascript en 2 parties :
L'une passe toutes les options (calculées avec des squelettes SPIP),
l'autre est entièrement en js (et utilise les options transmises).

Ça rend au moins le js plus lisible (coloration syntaxique).

Location:
_plugins_/plan/trunk/prive
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/plan/trunk/prive/squelettes/contenu/plan.html

    r91529 r91532  
    33(function($){
    44$(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                         }
     5        $('body.plan #contenu #racine').spiptree({
     6                drag: [(#AUTORISER{configurer}|?{true,false})],
     7                statut: "#ENV{statut}",
     8                urls: {
     9                        plan: "[(#VAL{plan}|generer_url_action{"", 1})]",
     10                        deplacer: "[(#VAL{deplacer_objets}|generer_url_action{"", 1})]"
    4311                },
    44                 "search" : {
    45                         "show_only_matches" : true,
     12                default: {
     13                        icon: "[(#VAL{rubrique}|objet_icone{16}|extraire_attribut{src})]"
    4614                },
    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
     15                objets: [
     16                        <BOUCLE_objets(DATA){source table,#REM|plan_lister_objets_rubrique}{", "}>
     17                        {
     18                                icon: "[(#VALEUR|objet_icone{16}|extraire_attribut{src})]",
     19                                type: "[(#VALEUR|objet_type)]"
    6520                        }
    6621                        </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                 }
     22                ]
    7623        });
    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 
    16924});
    17025})(jQuery);
     
    18136        <span class='statut'>
    18237                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</a> |
    185                 <a [(#ENV{statut}|=={prop}|oui)class='on' ]href="[(#SELF|parametre_url{statut,prop})]">en attente de validation</a> |
    186                 <a [(#ENV{statut}|=={prepa}|oui)class='on' ]href="[(#SELF|parametre_url{statut,prepa})]">en cours de rédaction</a>
    187                 [(#REM) TODO : faire une boucle pour générer la liste des status, éventuellement remplacer les noms par les puces de couleur (pour gagner de la place) ]
     38                <a [(#ENV{statut}|non)class='on' ]href="[(#SELF|parametre_url{statut,''})]"><:lien_tout_afficher:></a> |
     39                <a [(#ENV{statut}|=={publie}|oui)class='on' ]href="[(#SELF|parametre_url{statut,publie})]"><:texte_statut_publie:></a>
    18840        </span>
    18941</div>
  • _plugins_/plan/trunk/prive/squelettes/head/plan.html

    r91527 r91532  
    33[<link rel="stylesheet" href="(#CHEMIN{lib/jstree/dist/themes/default/style.min.css})" />]
    44[<script src="(#CHEMIN{lib/jstree/dist/jstree.min.js})"></script>]
     5[<script src="(#CHEMIN{prive/javascript/spiptree.js})"></script>]
    56
    67
Note: See TracChangeset for help on using the changeset viewer.