Changeset 112547 in spip-zone


Ignore:
Timestamp:
Nov 28, 2018, 10:32:56 AM (2 years ago)
Author:
tcharlss@…
Message:

Rétablissement du drag and drop. Cela oblige à revoir le markup de la liste : les noisettes enfantes doivent obligatoirement être imbriquées dans le conteneur parent. Ajout des 2 fichiers d'actions correspondantes : ajouter et deplacer. Ils sont suffixés avec _ajax car ils sont spécifiquement destinés à être utilisés pour du js. Pour le déplacement, l'API ne prévoit pas de changement de conteneur, donc on ruse en attendant.

Location:
_plugins_/noizetier/trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed

  • _plugins_/noizetier/trunk/formulaires/inclure/inc-input_type_noisette.html

    r110235 r112547  
    1010]
    1111[(#ENV{input_type}|non)
    12         <li class="item noisette">
    13                 [(#ENV{nom})]
    14                 <div class="icone">
    15                         [(#CHEMIN_IMAGE{#ENV{icon}}|image_reduire{24}|extraire_attribut{src}|balise_img)]
     12        <li
     13                class="item noisette"
     14                data-type_noisette="[(#ENV{type_noisette}|attribut_html)]"
     15        >
     16                <div class="resume">
     17                        [(#CHEMIN_IMAGE{#ENV{icon}}|image_reduire{24}|inserer_attribut{class,resume__icone})]
     18                        [<span class="resume__nom">(#ENV{nom})</span>]
    1619                </div>
    1720                <input type="hidden" name="ordre\[\]" value="#ENV{type_noisette}" />

  • _plugins_/noizetier/trunk/formulaires/inclure/inc-resume_noisette.html

    r112417 r112547  
    1111        </BOUCLE_type_noisette>
    1212        [(#GET{type_noisette_disponible}|oui)
    13                 [<div class="nom">(#GET{type_noisette_nom})</div>]
    14                 [(#REM) Logo de la noisette ]
    15                 <div class="icone">
    16                         [(#CHEMIN_IMAGE{#GET{type_noisette_icone}}|image_reduire{24}|extraire_attribut{src}|balise_img)]
    17                 </div>
    18                 [(#NOISETTE_PREVIEW{#ID_NOISETTE, #GET{type_noisette_actif}, #GET{type_noisette_necessite}})]
     13                [(#CHEMIN_IMAGE{#GET{type_noisette_icone}}|image_reduire{24}|inserer_attribut{class,resume__icone})]
     14                [<strong class="resume__nom">(#GET{type_noisette_nom})</strong>]
     15                [<div class="resume__content">
     16                        (#NOISETTE_PREVIEW{#ID_NOISETTE, #GET{type_noisette_actif}, #GET{type_noisette_necessite}})
     17                </div>]
    1918        ]
    2019        [(#GET{type_noisette_disponible}|non)

  • _plugins_/noizetier/trunk/formulaires/lister_noisettes_bloc.html

    r110320 r112547  
    2222                [<p>(#GET{infos_bloc/description})</p>]
    2323                <B_noisettes>
    24                 <ul class="editer-groupe liste-items liste-noisettes liste-noisettes-bloc">
     24                <ul
     25                        class="editer-groupe liste-items liste-noisettes liste-noisettes-bloc"
     26                        [data-id_conteneur="(#ENV{id_conteneur}|attribut_html)"]
     27                >
    2528                <BOUCLE_noisettes(NOISETTES){plugin=noizetier}{id_conteneur?}{par rang_noisette}>
    2629                        #SET{profondeur, 0}
    27                         <li class="editer item noisette" id="noisette-#ID_NOISETTE">
     30                        #SET{conteneur, #CONTENEUR_IDENTIFIER{noizetier, #ARRAY{type_noisette, #TYPE_NOISETTE, id_noisette, #ID_NOISETTE}}}
     31                        <li
     32                                class="editer item noisette"
     33                                id="noisette-#ID_NOISETTE"
     34                                data-id_noisette="#ID_NOISETTE"
     35                                [data-rang="(#RANG_NOISETTE)"]
     36                                [data-est_conteneur="(#EST_CONTENEUR|attribut_html)"]
     37                                [data-conteneur="(#GET{conteneur}|attribut_html)"]
     38                                [data-profondeur="(#GET{profondeur})"]
     39                        >
    2840                                <INCLURE{fond=formulaires/inclure/inc-resume_noisette,
    2941                                        id_noisette,
    … …  
    3143                                        rang_noisette,
    3244                                        nb_noisettes=#TOTAL_BOUCLE,
     45                                        classe=noisette__content,
    3346                                        profondeur=#GET{profondeur},
    3447                                        url_page=#GET{self},
    3548                                        url_add=#GET{url_add},
    3649                                        bloc} />
    37                                 #SET{conteneur, #CONTENEUR_IDENTIFIER{noizetier, #ARRAY{type_noisette, #TYPE_NOISETTE, id_noisette, #ID_NOISETTE}}}
     50
     51                                [(#REM) Enfants ]
     52                                <B_noisettes_enfants>
     53                                <ul class="liste-noisettes-conteneur">
     54                                <BOUCLE_noisettes_enfants(NOISETTES){plugin=noizetier}{id_conteneur=#GET{conteneur}}{par rang_noisette}>
     55                                        #SET{profondeur, #GET{profondeur}|plus{1}}
     56                                        #SET{conteneur, #CONTENEUR_IDENTIFIER{noizetier, #ARRAY{type_noisette, #TYPE_NOISETTE, id_noisette, #ID_NOISETTE}}}
     57                                        <li
     58                                                class="editer item noisette"
     59                                                id="noisette-#ID_NOISETTE"
     60                                                data-id_noisette="#ID_NOISETTE"
     61                                                [data-rang="(#RANG_NOISETTE)"]
     62                                                [data-est_conteneur="(#EST_CONTENEUR|attribut_html)"]
     63                                                [data-conteneur="(#GET{conteneur}|attribut_html)"]
     64                                                [data-profondeur="(#GET{profondeur})"]
     65                                        >
     66                                                <INCLURE{fond=formulaires/inclure/inc-resume_noisette,
     67                                                        id_noisette,
     68                                                        id_conteneur,
     69                                                        rang_noisette,
     70                                                        nb_noisettes=#_noisettes_enfants:TOTAL_BOUCLE,
     71                                                        classe=noisette__content conteneur-#GET{profondeur},
     72                                                        profondeur=#GET{profondeur},
     73                                                        url_page=#GET{self},
     74                                                        url_add=#GET{url_add},
     75                                                        bloc} />
     76
     77                                                [(#REM) Petits enfants récursifs ]
     78                                                <BOUCLE_noisettes_petits_enfants(BOUCLE_noisettes_enfants)></BOUCLE_noisettes_petits_enfants>
     79                                        </li>
     80                                #SET{profondeur,#GET{profondeur}|moins{1}}
     81                                </BOUCLE_noisettes_enfants>
     82                                </ul>
     83                                </B_noisettes_enfants>
     84
     85                                [(#REM) Il faut toujours un li pour le drag & drop ]
     86                                [(#EST_CONTENEUR|=={oui}|oui)
     87                                <ul class="liste-noisettes-conteneur placebo">
     88                                        <li class="item noisette placebo"></li>
     89                                </ul>
     90                                ]
     91                                <//B_noisettes_enfants>
     92
    3893                        </li>
    3994
    40                         <B_noisettes_enfants>
    41                         <ul class="liste-noisettes-conteneur">
    42                         <BOUCLE_noisettes_enfants(NOISETTES){plugin=noizetier}{id_conteneur=#GET{conteneur}}{par rang_noisette}>
    43                                 #SET{profondeur, #GET{profondeur}|plus{1}}
    44                                 <li class="editer item noisette" id="noisette-#ID_NOISETTE">
    45                                         <INCLURE{fond=formulaires/inclure/inc-resume_noisette,
    46                                                 id_noisette,
    47                                                 id_conteneur,
    48                                                 rang_noisette,
    49                                                 nb_noisettes=#_noisettes_enfants:TOTAL_BOUCLE,
    50                                                 classe=conteneur-#GET{profondeur},
    51                                                 profondeur=#GET{profondeur},
    52                                                 url_page=#GET{self},
    53                                                 url_add=#GET{url_add},
    54                                                 bloc} />
    55                                         #SET{conteneur, #CONTENEUR_IDENTIFIER{noizetier, #ARRAY{type_noisette, #TYPE_NOISETTE, id_noisette, #ID_NOISETTE}}}
    56                                 </li>
    57                                 <BOUCLE_noisettes_petits_enfants(BOUCLE_noisettes_enfants)></BOUCLE_noisettes_petits_enfants>
    58                                 #SET{profondeur,#GET{profondeur}|moins{1}}
    59                         </BOUCLE_noisettes_enfants>
    60                         </ul>
    61                         </B_noisettes_enfants>
    6295                </BOUCLE_noisettes>
    6396                        <input type="hidden" name="nb_noisettes" value="#TOTAL_BOUCLE" />
    … …  
    6699                        |icone_verticale{<:noizetier:formulaire_supprimer_noisettes_bloc:>, noizetier-24, del, #LANG_LEFT})]
    67100                </B_noisettes>
    68                 <ul class="editer-groupe liste-items liste-noisettes liste-noisettes-bloc">
     101
     102                [(#REM) message aucun ]
     103                <ul
     104                        class="editer-groupe liste-items liste-noisettes liste-noisettes-bloc aucun"
     105                        [data-id_conteneur="(#ENV{id_conteneur}|attribut_html)"]
     106                >
    69107                        <li class="editer item">
    70                                 #BOITE_OUVRIR{'','notice'}<:noizetier:bloc_sans_noisette:>#BOITE_FERMER
     108                                <div class="notice"><:noizetier:bloc_sans_noisette:></span>
    71109                        </li>
    72110                        <input type="hidden" name="nb_noisettes" value="0" />
    73111                </ul>
    74112                <//B_noisettes>
     113
    75114                [(#GET{url_add}
    76115                        |icone_verticale{<:noizetier:formulaire_ajouter_noisette_bloc:>,noisette, add, right preload})]
    … …  
    82121<script type="text/javascript">
    83122/*<!\[CDATA\[*/
    84         [(#REM) <!-- Autoriser le tri des noisettes du bloc -->]
    85         // jQuery('ul.liste-noisettes-bloc').sortable({
    86         //      items: 'li.noisette',
    87         //      axis: 'y',
    88         //      opacity: 0.5,
    89         //      connectWith: 'ul.liste-noisettes-bloc',
    90         //      forcePlaceholderSize: true,
    91         //      cursor: 'move',
    92         //      update: function(event, ui) {
    93         //              form = $(this).closest('form');
    94         //              form.submit();
    95         //      }
    96         // });
    97 
    98123        [(#REM) <!-- Affichage du menu des actions de chaque noisette -->]
    99124        $(function() {

  • _plugins_/noizetier/trunk/lang/noizetier_fr.php

    r112434 r112547  
    138138        'installation_tables' => 'Tables du plugin noiZetier installées.<br />',
    139139        'item_titre_perso' => 'titre personnalisé',
     140        'info_1_noisette_ajoutee' => '1 noisette a été ajoutée',
     141        'info_nb_noisettes_ajoutees' => '@nb@ noisettes ont été ajoutées',
    140142
    141143        // L

  • _plugins_/noizetier/trunk/paquet.xml

    r112538 r112547  
    22        prefix="noizetier"
    33        categorie="maintenance"
    4         version="3.0.24"
     4        version="3.0.25"
    55        etat="dev"
    66        compatibilite="[3.0.0;3.2.*]"

  • _plugins_/noizetier/trunk/prive/squelettes/navigation/noizetier_page.html

    r110235 r112547  
    4242        <script type="text/javascript">/*<!\[CDATA\[*/
    4343                jQuery('.noisettes_disponibles').show();
    44                 jQuery('ul.liste-noisettes-disponibles li.noisette').draggable({
    45                         connectToSortable: 'ul.liste-noisettes-bloc',
    46                         containment: "ul.liste-noisettes-bloc",
    47                         helper: 'clone',
    48                         revert: 'invalid',
     44                // Rend les noisettes réordonnables
     45                jQuery('.liste-noisettes-bloc')
     46                .sortable({
     47                        items: '.noisette',
     48                        containment: '.liste-noisettes-bloc',
     49                        revert: true,
     50                        opacity: 0.66,
     51                        placeholder: 'ui-state-highlight',
     52                        forcePlaceholderSize: 1,
     53                        // Event : début de l'ordonnancement fini, DOM pas encore changé
     54                        // Noter le conteneur d'origine
     55                        start: function( event, ui ) {
     56                                var liste = $(this);
     57                                var noisette = ui.item;
     58                                liste.addClass('receptacle');
     59                                if (noisette.parents('.noisette[data-conteneur]').length) {
     60                                        id_conteneur = noisette.parents('.noisette[data-conteneur]').data('conteneur');
     61                                } else {
     62                                        id_conteneur = liste.data('id_conteneur');
     63                                }
     64                                noisette.data('id_conteneur_origine', id_conteneur);
     65                        },
     66                        // Event : stop
     67                        stop: function( event, ui ) {
     68                                var liste = $(this);
     69                                var noisette = ui.item;
     70                                liste.removeClass('receptacle');
     71                        },
     72                        // Event : ordonnancement fini, DOM modifié
     73                        // Changer le rang d'une noisette, ou bien en créer une nouvelle
     74                        update: function( event, ui ) {
     75                                var liste = $(this);
     76                                var noisette = ui.item;
     77                                var id_noisette = noisette.data('id_noisette');
     78                                var id_conteneur;
     79
     80                                // Conteneur où on a relaché la noisette (noisette ou racine)
     81                                if (noisette.parents('.noisette[data-conteneur]').length) {
     82                                        id_conteneur_destination = noisette.parents('.noisette[data-conteneur]').data('conteneur');
     83                                } else {
     84                                        id_conteneur_destination = liste.data('id_conteneur');
     85                                }
     86
     87                                // Trouver le nouveau rang
     88                                var rang;
     89                                if (noisette.prev('.noisette').length){
     90                                        rang = noisette.prev('.noisette').data('rang') + 1;
     91                                } else if (noisette.next('.noisette').length) {
     92                                        rang = noisette.next('.noisette').data('rang') - 1;
     93                                } else {
     94                                        rang = 0;
     95                                }
     96
     97                                // Actions
     98                                // On ajoute la noisette si c'est un clone issu de .draggable()
     99                                if (
     100                                        noisette.hasClass('clone')
     101                                        && typeof(id_conteneur != 'undefined')
     102                                ) {
     103                                        var type_noisette = noisette.data('type_noisette');
     104                                        var params = {
     105                                                _type_noisette: type_noisette,
     106                                                _id_conteneur: id_conteneur_destination,
     107                                                rang: rang,
     108                                        };
     109                                        //console.log(params);
     110                                        var action = '[(#VAL{ajouter_noisette_ajax}|generer_url_action{"",1})]';
     111                                        noisette.animateLoading(); // Animation
     112                                        $.ajax({
     113                                                url: action,
     114                                                data: params,
     115                                                dataType: 'json',
     116                                                cache: false,
     117                                        }).done(function(data) {
     118                                                noisette.endLoading(true).removeClass('clone');
     119                                                if (data.success.length) {
     120                                                        var id_noisette = data.success;
     121                                                        noisette.ajaxReload({
     122                                                                callback: function(){
     123                                                                        $('.noisette[data-id_noisette="'+id_noisette+'"]').animateAppend();
     124                                                                }
     125                                                        });
     126                                                }
     127                                                if (data.errors.length) {
     128                                                        noisette.animateRemove(function(){$(this).remove()});
     129                                                        console.log(data.errors);
     130                                                }
     131                                        });
     132
     133                                // Sinon on la déplace
     134                                } else {
     135                                        var id_conteneur_origine = noisette.data('id_conteneur_origine');
     136                                        var params = {
     137                                                _id_noisette: id_noisette,
     138                                                rang: rang,
     139                                                _id_conteneur_origine: id_conteneur_origine,
     140                                                _id_conteneur_destination: id_conteneur_destination,
     141                                        };
     142                                        console.log(params);
     143                                        var action = '[(#VAL{deplacer_noisette_ajax}|generer_url_action{"",1})]';
     144                                        $.ajax({
     145                                                url: action,
     146                                                data: params,
     147                                                dataType: 'json',
     148                                                cache: false,
     149                                        }).complete(function(data) {
     150                                                if (data.success.length) {
     151                                                        var id_noisette = data.success;
     152                                                        noisette.ajaxReload();
     153                                                }
     154                                                if (data.errors.length) {
     155                                                        liste.sortable('cancel');
     156                                                        console.log(data.errors);
     157                                                }
     158                                        });
     159                                }
     160                        }
     161                });
     162                // Rend les noisettes déplaçables par drag and drop
     163                // La traitement se fait dans .sortable()
     164                jQuery('.liste-noisettes-disponibles .noisette').draggable({
     165                        connectToSortable: '.liste-noisettes-bloc',
     166                        containment: '.liste-noisettes-bloc',
     167                        helper: 'clone', // Doit correspondre à ce qu'il y a dans .sortable()
    49168                        cursor: 'move',
    50                         opacity: 0.5
     169                        opacity: 0.66,
     170                        start: function( event, ui ) {
     171                                var liste = $(this);
     172                                liste.addClass('receptacle');
     173                        },
     174                        stop: function( event, ui ) {
     175                                var liste = $(this);
     176                                var noisette = ui.helper;
     177                                noisette.addClass('clone');
     178                                liste.removeClass('receptacle');
     179                        }
    51180                });
    52181                // Position fixe lors du scroll
    … …  
    62191                        });
    63192                }
    64 //              noisettes_dispos_sticky();
     193                //noisettes_dispos_sticky();
    65194        /*\]\]>*/</script>
    66195</BOUCLE_page_navigation>

  • _plugins_/noizetier/trunk/prive/style_prive_plugin_noizetier.html

    r112416 r112547  
    1313]
    1414#CACHE{3600*100,cache-client}
    15 #HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
     15#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
    1616#HTTP_HEADER{Vary: Accept-Encoding}
    1717
     18#SET{claire,##ENV{couleur_claire,edf3fe}}
     19#SET{foncee,##ENV{couleur_foncee,3874b0}}
    1820
    1921/* Styles de la liste des pages liées ou non à un objet et des objets configurés (noizetier_pages, noizetier_objets) */
    … …  
    5557        overflow-y: auto;
    5658}
    57 ul.liste-noisettes-disponibles li.noisette {padding-left: 30px; position:relative; min-height: 28px;}
    58 ul.liste-noisettes-disponibles li.noisette .icone {
    59         position: absolute;
    60         margin: 0;
    61         top: .6925em;
    62         left: 0;
    63         width: 24px;
    64         height: 24px;
    65         overflow: hidden;}
    66 ul.liste-noisettes-disponibles li.noisette label {float: none; margin-left: 0;}
     59.liste-noisettes-disponibles .noisette label {
     60        float: none; margin-left: 0;
     61}
    6762
    6863/* -- Liste des noisettes incluses dans un bloc */
    69 ul.liste-noisettes-bloc {overflow: visible;}
    70 ul.liste-noisettes-bloc li.noisette {padding-left: 30px; padding-right: 120px; position:relative; min-height: 36px; overflow: visible;}
    71 ul.liste-noisettes-bloc li.noisette .resume .icone {
    72         position: absolute;
     64.liste-noisettes-bloc {
     65        overflow: visible;
     66}
     67.liste-noisettes-bloc.aucun,
     68.liste-noisettes-bloc.aucun .item {
     69        border: 0;
     70}
     71.liste-noisettes-bloc .noisette {
     72        overflow: visible;
     73}
     74.liste-noisettes-bloc .noisette.ui-draggable {
     75        width: auto !important;
     76}
     77.liste-noisettes-conteneur {
     78        padding-left: 32px;
     79        margin-top: 0.6925em;
     80}
     81.liste-noisettes-conteneur.placebo {
    7382        margin: 0;
    74         top: .6925em;
    75         left: 0;
    76         width: 24px;
    77         height: 24px;
    78         overflow: hidden;}
    79 ul.liste-noisettes-bloc li.noisette .conteneur-1 {margin-left: 30px;}
    80 ul.liste-noisettes-bloc li.noisette .conteneur-1 .icone {left: 30px;}
    81 ul.liste-noisettes-bloc li.noisette .conteneur-2 {margin-left: 60px;}
    82 ul.liste-noisettes-bloc li.noisette .conteneur-2 .icone {left: 60px;}
    83 ul.liste-noisettes-bloc li.noisette .edition {
    84         position: absolute;
    85         right: 0;
    86         top: .6925em;
    87         text-align: right;}
    88 ul.liste-noisettes-bloc li.noisette .edition li {
     83}
     84.liste-noisettes-conteneur.placebo .noisette {
     85        padding: 0;
     86        border: none !important;
     87        height: 0.5em; /* Important, permet le drag and drop */
     88}
     89.liste-noisettes-conteneur > .noisette:first-child {
     90        border-top: 1px solid #ddd;
     91}
     92.liste-noisettes-conteneur > .noisette:last-child {
     93        border-bottom: 0;
     94}
     95.liste-noisettes-conteneur .noisette:last-child {
     96        padding-bottom: 0;
     97}
     98.liste-noisettes-bloc .noisette__content {
     99        display: flex;
     100}
     101.liste-noisettes-bloc .noisette .edition {
     102        flex: 0 1 auto;
     103}
     104.liste-noisettes-bloc .noisette .edition li {
    89105        position: relative;
    90106}
    91 ul.liste-noisettes-bloc li.noisette .edition a {margin-left: 2px; text-decoration: none;}
    92 ul.liste-noisettes-bloc li.noisette .edition ul.menu-edition:not(.visible) {display: none;}
    93 ul.liste-noisettes-bloc li.noisette .edition ul.menu-edition.visible {
     107.liste-noisettes-bloc .noisette .edition a {
     108        margin-left: 2px;
     109        text-decoration: none;
     110}
     111.liste-noisettes-bloc .noisette .edition .menu-edition:not(.visible) {
     112        display: none;
     113}
     114.liste-noisettes-bloc .noisette .edition .menu-edition.visible {
    94115        position: absolute;
    95116        top: -5px;
    … …  
    108129        font-size: 0.90em;
    109130}
    110 ul.liste-noisettes-bloc li.noisette .edition ul.menu-edition.visible li {padding-top: 2px; padding-bottom: 2px;}
    111 ul.liste-noisettes-bloc li.noisette .edition ul.menu-edition.visible li:hover {background-color: #eee; text-decoration: underline;}
    112 ul.liste-noisettes-bloc li.noisette .edition ul.menu-edition.visible li.groupe {border-top: 1px solid #ccc;}
    113 ul.liste-noisettes-bloc li.noisette .edition ul.menu-edition.visible a {color: #333;}
     131.liste-noisettes-bloc .noisette .edition .menu-edition.visible li {
     132        padding-top: 2px;
     133        padding-bottom: 2px;
     134}
     135.liste-noisettes-bloc .noisette .edition .menu-edition.visible li:hover {
     136        background-color: #eee;
     137        text-decoration: underline;
     138}
     139.liste-noisettes-bloc .noisette .edition .menu-edition.visible .groupe {
     140        border-top: 1px solid #ccc;
     141}
     142.liste-noisettes-bloc .noisette .edition .menu-edition.visible a {
     143        color: #333;
     144}
     145
     146/* résumés */
     147.liste-noisettes .noisette .resume {
     148        flex: 1 0 auto;
     149        display: flex;
     150        flex-flow: row wrap;
     151        align-items: center;
     152}
     153.liste-noisettes .noisette .resume__icone {
     154        margin-right: 0.5em;
     155}
     156.liste-noisettes .noisette .resume__content {
     157        flex: 1 0 100%;
     158        margin-left: calc(24px + 0.5em);
     159        margin-top: 0.5em;
     160}
    114161
    115162/* Styles du formulaire d'édition d'une page (editer_page) */
Note: See TracChangeset for help on using the changeset viewer.