Changeset 112579 in spip-zone


Ignore:
Timestamp:
Nov 30, 2018, 5:18:22 PM (2 years ago)
Author:
tcharlss@…
Message:

Petite amélioration ergo : pour le menu déroulant des noisettes, on se repose sur jQuery ui plutôt que de recoder ça nous-même. Le script positionne le sous-menu automatiquement afin qu'il soit toujours visible. Il y a un petit bug quand les textes des entrées de menu sont longs, pour contourner on met une largeur fixe (cf. ticket #15322 sur leur tracker).

Location:
_plugins_/noizetier/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r112573 r112579  
    3939        </div>
    4040
    41         <ul class="edition">
    42                 <li>
    43                         [(#GET{type_noisette_disponible}|oui)
    44                                 <a href="[(#URL_ECRIRE{noisette_edit}|parametre_url{id_noisette, #ID_NOISETTE})]" class="bouton-modifier" title="<:noizetier:formulaire_modifier_noisette|attribut_html:>">[(#CHEMIN_IMAGE{edit-24}|balise_img)]</a>
    45                         ]
    46                         <a class="bouton-edition"[ href="#bouton-(#ID_NOISETTE)"] title="<:noizetier:label_menu_ouvrir:>">
    47                                 [<img height="24" width="24" src="(#CHEMIN_IMAGE{menu-24.png})" alt="" />]
    48                         </a>
    49                         <ul class="menu-edition">
    50                                 [<li>
    51                                         <a href="(#URL_ACTION_AUTEUR{supprimer_noisette, [(#ID_NOISETTE)], #ENV{url_page}#bloc-#ENV{bloc}})">
    52                                                 <:noizetier:formulaire_supprimer_noisette:>
    53                                         </a>
    54                                 </li>]
    55                                 [<li>
    56                                         <a href="(#URL_ECRIRE{noisette_copy}
    57                                                 |parametre_url{id_noisette, #ID_NOISETTE}
    58                                                 |parametre_url{bloc, #ENV{bloc}})">
    59                                                 <:noizetier:formulaire_etendre_noisette:>
    60                                         </a>
    61                                 </li>]
    62                         [(#ENV{nb_noisettes}|>{1}|oui)
    63                                 [<li class="groupe">
    64                                         <a href="(#URL_ACTION_AUTEUR{deplacer_noisette, [haut:(#ID_NOISETTE):#ENV{nb_noisettes}], #ENV{url_page}})">
    65                                                 <:noizetier:formulaire_deplacer_haut:>
    66                                         </a>
    67                                 </li>]
    68                                 [<li>
    69                                         <a href="(#URL_ACTION_AUTEUR{deplacer_noisette, [bas:(#ID_NOISETTE):#ENV{nb_noisettes}], #ENV{url_page}})">
    70                                                 <:noizetier:formulaire_deplacer_bas:>
    71                                         </a>
    72                                 </li>]
    73                         ]
    74                         [(#EST_CONTENEUR|=={oui}|et{#GET{type_noisette_disponible}}|oui)
    75                                 #SET{conteneur, #CONTENEUR_IDENTIFIER{noizetier, #ARRAY{type_noisette, #TYPE_NOISETTE, id_noisette, #ID_NOISETTE}}
    76                                 [(#REM) Bouton d'ajout de noisette à un conteneur si profondeur ok ]
    77                                 #SET{profondeur_max,#VAL{_NOIZETIER_PROFONDEUR_MAX}|defined|?{#EVAL{_NOIZETIER_PROFONDEUR_MAX},#CONFIG{noizetier/profondeur_max}}}
    78                                 #SET{profondeur_ok,#GET{profondeur_max}|non|ou{#ENV{profondeur}|<={#GET{profondeur_max}}}}
    79                                 [(#GET{profondeur_ok}|oui)
    80                                         [<li class="groupe">
    81                                                 <a href="(#ENV{url_add}
    82                                                         |parametre_url{type_noisette, #TYPE_NOISETTE}
    83                                                         |parametre_url{id_noisette, #ID_NOISETTE}
    84                                                         |parametre_url{profondeur, #ENV{profondeur}})">
    85                                                         <:noizetier:formulaire_ajouter_noisette_conteneur:>
     41        <div class="edition">
     42                [(#REM) Le bouton principal affiché en parmanence ]
     43                [(#GET{type_noisette_disponible}|oui)
     44                        <a href="[(#URL_ECRIRE{noisette_edit}|parametre_url{id_noisette, #ID_NOISETTE})]" class="edition__main bouton-modifier" data-action="modifier" title="<:noizetier:formulaire_modifier_noisette|attribut_html:>">[(#CHEMIN_IMAGE{edit-24}|balise_img)]</a>
     45                ]
     46                [(#REM) Menu dépliant avec les autres boutons ]
     47                <ul class="edition__menu">
     48                        <li>
     49                                <div class="edition__toggle" title="<:noizetier:label_menu_ouvrir|attribut_html:>">
     50                                        [<img height="24" width="24" src="(#CHEMIN_IMAGE{menu-24.png})" alt="" />]
     51                                </div>
     52                                <ul>
     53                                        [<li>
     54                                                <a      href="(#URL_ACTION_AUTEUR{supprimer_noisette, [(#ID_NOISETTE)], #ENV{url_page}#bloc-#ENV{bloc}})">
     55                                                        <:noizetier:formulaire_supprimer_noisette:>
    8656                                                </a>
    8757                                        </li>]
    88                                 ]
    89                                 [<li>
    90                                         <a href="(#URL_ACTION_AUTEUR{vider_conteneur, [(#GET{conteneur})], #ENV{url_page}#bloc-#ENV{bloc}})">
    91                                                 <:noizetier:formulaire_supprimer_noisettes_noisette:>
    92                                         </a>
    93                                 </li>]
    94                         ]
    95                         </ul>
    96                 </li>
    97         </ul>
     58                                        [<li>
     59                                                <a href="(#URL_ECRIRE{noisette_copy}
     60                                                        |parametre_url{id_noisette, #ID_NOISETTE}
     61                                                        |parametre_url{bloc, #ENV{bloc}})">
     62                                                        <:noizetier:formulaire_etendre_noisette:>
     63                                                </a>
     64                                        </li>]
     65                                        [(#ENV{nb_noisettes}|>{1}|oui)
     66                                                [<li class="groupe">
     67                                                        <a href="(#URL_ACTION_AUTEUR{deplacer_noisette, [haut:(#ID_NOISETTE):#ENV{nb_noisettes}], #ENV{url_page}})">
     68                                                                ↑&nbsp;<:noizetier:formulaire_deplacer_haut:>
     69                                                        </a>
     70                                                </li>]
     71                                                [<li>
     72                                                        <a href="(#URL_ACTION_AUTEUR{deplacer_noisette, [bas:(#ID_NOISETTE):#ENV{nb_noisettes}], #ENV{url_page}})">
     73                                                                ↓&nbsp;<:noizetier:formulaire_deplacer_bas:>
     74                                                        </a>
     75                                                </li>]
     76                                        ]
     77                                        [(#EST_CONTENEUR|=={oui}|et{#GET{type_noisette_disponible}}|oui)
     78                                                #SET{conteneur, #CONTENEUR_IDENTIFIER{noizetier, #ARRAY{type_noisette, #TYPE_NOISETTE, id_noisette, #ID_NOISETTE}}
     79                                                [(#REM) Bouton d'ajout de noisette à un conteneur si profondeur ok ]
     80                                                #SET{profondeur_max,#VAL{_NOIZETIER_PROFONDEUR_MAX}|defined|?{#EVAL{_NOIZETIER_PROFONDEUR_MAX},#CONFIG{noizetier/profondeur_max}}}
     81                                                #SET{profondeur_ok,#GET{profondeur_max}|non|ou{#ENV{profondeur}|<={#GET{profondeur_max}}}}
     82                                                [(#GET{profondeur_ok}|oui)
     83                                                        [<li class="groupe">
     84                                                                <a href="(#ENV{url_add}
     85                                                                                |parametre_url{type_noisette, #TYPE_NOISETTE}
     86                                                                                |parametre_url{id_noisette, #ID_NOISETTE}
     87                                                                                |parametre_url{profondeur, #ENV{profondeur}})">
     88                                                                        <:noizetier:formulaire_ajouter_noisette_conteneur:>
     89                                                                </a>
     90                                                        </li>]
     91                                                ]
     92                                                [<li>
     93                                                        <a href="(#URL_ACTION_AUTEUR{vider_conteneur, [(#GET{conteneur})], #ENV{url_page}#bloc-#ENV{bloc}})">
     94                                                                <:noizetier:formulaire_supprimer_noisettes_noisette:>
     95                                                        </a>
     96                                                </li>]
     97                                        ]
     98                                </ul>
     99                        </li>
     100                </ul>
     101        </div>
     102
    98103</div>
    99104<input type="hidden" name="ordre[]" value="#ID_NOISETTE" />

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

    r112573 r112579  
    129129        <!--extra-->
    130130</form>
     131
    131132<script type="text/javascript">
    132133/*<!\[CDATA\[*/
    133         [(#REM) <!-- Affichage du menu des actions de chaque noisette -->]
    134         $(function() {
    135                 function afficherMenu (bouton) {
    136                         $(bouton).parents('ul').children('li').children('ul').addClass('visible');
    137                 }
    138 
    139                 function masquerMenu (bouton) {
    140                         $(bouton).parents('ul').children('li').children('ul').removeClass('visible');
    141                 }
    142 
    143                 function toggleMenu (bouton) {
    144                         $(bouton).parents('ul').children('li').children('ul').toggleClass('visible');
    145                 }
    146 
    147                 $('a.bouton-edition')
    148                         // .focusin(
    149                         //      function() {
    150                         //              afficherMenu(this);
    151                         //      }
    152                         // )
    153                         // .focusout(
    154                         //      function() {
    155                         //              masquerMenu(this);
    156                         //      }
    157                         // )
    158                         // .hover(
    159                         //      function() {
    160                         //              afficherMenu(this);
    161                         //      },
    162                         //      function() {
    163                         //              masquerMenu(this);
    164                         //      }
    165                         // )
    166                         .click(
    167                                 function(event) {
    168                                         event.preventDefault();
    169                                         toggleMenu(this);
    170                                 }
    171                         );
     134        // Affichage du menu des actions de chaque noisette
     135        $( function() {
     136                $( ".noisette .edition__menu" ).menu();
    172137        });
    173138/*\]\]>*/

  • _plugins_/noizetier/trunk/paquet.xml

    r112573 r112579  
    22        prefix="noizetier"
    33        categorie="maintenance"
    4         version="3.0.27"
     4        version="3.0.28"
    55        etat="dev"
    66        compatibilite="[3.0.0;3.2.*]"

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

    r112573 r112579  
    4848                 * Éditer les noisettes dans des modales
    4949                 */
    50                 jQuery('.liste-noisettes a.bouton-modifier').click(function(){
     50                jQuery('.noisette .bouton-modifier').click(function(){
    5151                        var noisette = jQuery(this).parents('.noisette').eq(0);
    5252                        jQuery(noisette).animateLoading();

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

    r112573 r112579  
    117117.liste-noisettes-bloc .noisette .edition {
    118118        flex: 0 1 auto;
     119        display: flex;
     120        align-items: center;
    119121}
    120 .liste-noisettes-bloc .noisette .edition li {
    121         position: relative;
     122.liste-noisettes-bloc .noisette .edition__main {
     123        margin-right: 0.5em;
    122124}
    123 .liste-noisettes-bloc .noisette .edition a {
    124         margin-left: 2px;
    125         text-decoration: none;
     125.liste-noisettes-bloc .noisette .edition__menu a {
     126        display: block;
     127        font-size: 0.9em;
    126128}
    127 .liste-noisettes-bloc .noisette .edition .menu-edition:not(.visible) {
     129.liste-noisettes-bloc .noisette .edition__menu.ui-menu {
     130        border: 0;
     131        background: none;
     132}
     133.liste-noisettes-bloc .noisette .edition__menu.ui-menu > li > ul {
     134        width: 20em;
     135}
     136.liste-noisettes-bloc .noisette .ui-menu .edition__toggle {
     137        display: flex;
     138        align-items: center;
     139        padding: 0;
     140}
     141.liste-noisettes-bloc .noisette [class*="ui-icon-caret"] {
    128142        display: none;
    129143}
    130 .liste-noisettes-bloc .noisette .edition .menu-edition.visible {
    131         position: absolute;
    132         top: -5px;
    133         right: 0;
    134         transform: translateX(calc(100% + 10px));
    135         /* left: 295px; */
    136         min-width: 250px;
    137         z-index: 5000;
    138         float: left;
    139         text-align: left;
    140         padding: 5px;
    141         /*border: 1px solid #ccc;*/
    142         background-color: white;
    143         box-shadow: 3px 3px 3px #ccc; -moz-box-shadow: 3px 3px 3px #ccc; -webkit-box-shadow: 3px 3px 3px #ccc;
    144         border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;
    145         font-size: 0.90em;
    146 }
    147 .liste-noisettes-bloc .noisette .edition .menu-edition.visible li {
    148         padding-top: 2px;
    149         padding-bottom: 2px;
    150 }
    151 .liste-noisettes-bloc .noisette .edition .menu-edition.visible li:hover {
    152         background-color: #eee;
    153         text-decoration: underline;
    154 }
    155 .liste-noisettes-bloc .noisette .edition .menu-edition.visible .groupe {
     144.liste-noisettes-bloc .noisette .edition__menu .groupe {
    156145        border-top: 1px solid #ccc;
    157 }
    158 .liste-noisettes-bloc .noisette .edition .menu-edition.visible a {
    159         color: #333;
    160146}
    161147/* Ajustements et aides visuelles glisser-déposer */
Note: See TracChangeset for help on using the changeset viewer.