source: spip-zone/_plugins_/noizetier_layout/trunk/saisies/grid_rangeslider.html @ 113922

Last change on this file since 113922 was 113922, checked in by rastapopoulos@…, 16 months ago

Sous-plugin du Noizetier qui permet de déclarer une grille CSS au noizetier. Ce plugin ne fait rien en soit, il faut ensuite implémenter un framework de grille en déclarant des choses. Cela ajoute alors des nouvelles configurations automatiquement à toutes les noisettes, permettant de configurer des options d'agencement (le colonnage, etc).

File size: 2.4 KB
Line 
1[(#REM)
2
3        Grille : input range affiché sous forme de slider
4
5        Exemple d'appel :
6        #SAISIE{grid_radioslider,truc,
7                label=machin,
8                medias=oui,
9                data=#ARRAY{
10                        patate,#ARRAY{label,Patates,description,des jolies patates},
11                        poireaux,#ARRAY{label,Poireaux,description,des jolis poireaux},
12                },
13        }
14
15        Paramètres :
16                **obligatoires
17                *recommandés
18
19                - min** : nombre minimal
20                - max** : nombre maximal
21                - step* : pas
22                - debut : Valeur considérée comme le début
23                - medias : « oui » pour différencier par médias
24                          Dans ce cas on obtient des sous-valeurs name\[media\]
25                - obligatoire : « oui »
26                          S'il y a plusieurs médias, seul le 1er est obligatoire (mobile first oblige).
27]
28[(#SET{medias,#ARRAY{
29        '',#ARRAY{
30                label,<:noizetier:grid_media_mobile:>,
31                img,prive/themes/spip/images/grid-media-mobile.svg,
32        },
33        tablet,#ARRAY{
34                label,<:noizetier:grid_media_tablet:>,
35                img,prive/themes/spip/images/grid-media-tablet.svg,
36        },
37        desktop,#ARRAY{
38                label,<:noizetier:grid_media_desktop:>,
39                img,prive/themes/spip/images/grid-media-desktop.svg,
40        }
41}})]
42#SET{valeur,#ENV{valeur_forcee,#ENV{valeur,#ENV{defaut}}}}
43#SET{medias,#ENV{medias}|=={oui}|?{#GET{medias},#ARRAY{'',''}}}
44<BOUCLE_medias(DATA){source table, #GET{medias}}>
45#SET{media,#CLE}
46#SET{name,#ENV{nom}|concat{\[,#GET{media},\]}}
47<div class="grid-medias">
48
49        [<div class="grid-medias__media">
50                [<img src="(#CHEMIN{#VALEUR{img}})" class="icone_layout" width="32" heigh="32" alt="">]
51                <span>(#VALEUR{label})</span>
52        </div>]
53
54        <div class="grid-medias__inputs rangeslider-container">
55                #SET{value,#CLE|concat{#GET{media}|?{@#GET{media}}}}
56                #SET{checked,#GET{media}|?{
57                        #GET{value}|in_any{#GET{valeur/#GET{media}}},
58                        #GET{value}|=={#GET{valeur}}
59                }}
60                #SET{id,#VAL{champ_}|concat{#ENV{id,#ENV{nom}},_,#GET{media}}|saisie_nom2classe}
61                #SET{required,#ENV{obligatoire}|=={oui}|et{#_medias:COMPTEUR_BOUCLE|=={1}}}
62                #SET{disabled,#GET{required}|et{#CLE|non}}
63                <input
64                        type="range"
65                        min="#ENV{min}"
66                        max="#ENV{max}"
67                        step="#ENV{step,1}"
68                        name="#GET{name}"
69                        value="#GET{valeur}"
70                        class="rangeslider"
71                        id="#GET{id}"
72                        [(#GET{required}|oui)required="required"]
73                        [(#GET{disabled}|oui)disabled="disabled"]
74                />
75                <div class="rangeslider__labels">
76                        <BOUCLE_values(DATA){enum #ENV{min},#ENV{max},#ENV{step,1}}><span class="rangeslider__label">[(#VALEUR|sinon{<:noizetier:grid_null:>})]</span></BOUCLE_values>
77                </div>
78        </div>
79
80</div>
81</BOUCLE_medias>
Note: See TracBrowser for help on using the repository browser.