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

Last change on this file since 113922 was 113922, checked in by rastapopoulos@…, 18 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.8 KB
Line 
1[(#REM)
2
3        Saisie radio
4
5        De base, renvoie un valeur unique.
6        Avec l'option medias, renvoie un tableau.
7
8        Différences avec la saisie normale :
9        - radios affichées en inline
10        - affichage possible par médias
11        - option slider
12        - dans le data, les valeurs peuvent être des tableaux avec label, image, explication.
13        - possibilité d'exposer certaines valeurs
14
15        Paramètres :
16                **obligatoire
17                *recommandé
18
19                - data** : tableau associatif des valeurs
20                - medias : « oui » pour ajouter une ligne par média
21                  Dans ce cas on renvoie un tableau avec une sous-valeur pour chaque média
22                - obligatoire : « oui »
23                        S'il y a plusieurs médias et que la grille est mobile-first,
24                        seul le 1er est obligatoire.
25                - slider : « oui » pour afficher sous forme de slider
26                - taille_img : dimension des images dans les labels
27                - exposer : tableau de valeurs à exposer
28
29]
30#SET{valeur, #ENV{valeur_forcee,#ENV{valeur,#ENV{defaut}}}}
31#SET{grille, #REM|noizetier_layout_decrire_grille}
32#SET{medias, #ENV{medias}|=={oui}|?{#GET{grille/medias},#ARRAY{'',''}}}
33#SET{slider, #ENV{slider}|=={oui}}
34
35<BOUCLE_medias(DATA){source table, #GET{medias}}>
36#SET{media, #CLE}
37#SET{name,  #ENV{nom}|concat{#ENV{medias}|?{\[#GET{media}\]}}}
38<B_radio>
39<div class="gridedit[ gridedit_(#GET{media}|attribut_html)][ (#ENV{class}|attribut_html)]">
40
41        [<div class="gridedit__item gridedit__item_media">
42                [<img src="(#CHEMIN{#VALEUR{img}})" width="32" heigh="32" alt="">]
43                <label>(#VALEUR{label})</label>
44        </div>]
45
46        [(#GET{slider}|oui)
47        <div class="gridedit__item gridedit__item_slider radioslider">
48        ]
49        <BOUCLE_radio(POUR){tableau #ENV*{data}}>
50        #SET{value,    #CLE|noizetier_layout_creer_classe_media{#GET{media}}}
51        #SET{checked,  #GET{valeur}|is_array|?{
52                #GET{value}|in_any{#GET{valeur}},
53                #GET{value}|=={#GET{valeur}}
54        }}
55        #SET{id,       #VAL{champ_}|concat{#ENV{id,#ENV{nom}},_,#GET{media},_,#COMPTEUR_BOUCLE}|saisie_nom2classe}
56        #SET{required, #ENV{obligatoire}|=={oui}|et{#GET{grille/mobile_first}|?{#_medias:COMPTEUR_BOUCLE|=={1},oui}}}
57        #SET{disabled, #ENV{disable}|sinon{#GET{required}|et{#CLE|non}}}
58        #SET{exposer, #GET{value}|in_any{#ENV{exposer}}}
59        [(#GET{slider}|non)
60        <div class="gridedit__item gridedit__item_radio[ (#GET{exposer}|oui)gridedit__item_exposer]">
61        ]
62                <input
63                        type="radio"
64                        name="#GET{name}"
65                        value="#GET{value}"
66                        class="radio"
67                        id="#GET{id}"
68                        [(#GET{checked}|oui)checked="checked"]
69                        [(#GET{required}|oui)required="required"]
70                        [(#GET{disabled}|oui)disabled="disabled"]
71                        [readonly="(#ENV{readonly})"]
72                        [aria-describedby="(#ENV{describedby})"]
73                />
74                <label for="#GET{id}" class="[(#GET{checked}|oui)on][ (#GET{required}|oui)obligatoire]">
75                        [(#VALEUR{img}|oui)[<img src="(#CHEMIN{#VALEUR{img}})" width="#ENV{taille_img,50}">]]
76                        [(#VALEUR{label}|sinon{#VALEUR})]
77                </label>
78        [(#GET{slider}|non)
79        </div>
80        ]
81        </BOUCLE_radio>
82        [(#GET{slider}|oui)
83        </div>
84        ]
85</div>
86</B_radio>
87</BOUCLE_medias>
Note: See TracBrowser for help on using the repository browser.