source: spip-zone/_plugins_/noizetier_layout/trunk/saisies/grid_offset.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.5 KB
Line 
1[(#REM)
2
3        Grille : décalage
4
5        La valeur retournée est un tableau contenant plusieurs clés :
6        - ''        : décalage de base -> nombre
7        - {media}   : décalage pour un média -> nombre
8        - direction : direction du décalage -> push | pull
9        - mode      : décalage absolu ou relatif -> absolute | relative
10
11        Exemple d'appel :
12        #SAISIE{grid_offset,truc,
13                label=machin,
14                medias=oui,
15        }
16
17        Paramètres :
18                **obligatoires
19                *recommandés
20
21                - medias : « oui » pour différencier par médias
22                - obligatoire : « oui »
23                                                                                S'il y a plusieurs médias, seul le 1er est obligatoire (mobile first oblige).
24
25]
26#SET{valeur,      #ENV{valeur_forcee,#ENV{valeur,#ENV{defaut}}}}
27#SET{grille,      #REM|noizetier_layout_decrire_grille}
28#SET{medias,      #ENV{medias}|=={oui}|?{#GET{grille/medias},#ARRAY{'',''}}}
29#SET{nb_colonnes, #GET{grille/nb_colonnes}}
30
31[(#REM) Valeur du décalage ]
32<BOUCLE_medias(DATA){source table, #GET{medias}}>
33<div class="gridedit">
34
35        [<div class="gridedit__item gridedit__item_media">
36                [<img src="(#CHEMIN{#VALEUR{img}})" width="32" heigh="32" alt="">]
37                <span>(#VALEUR{label})</span>
38        </div>]
39
40        <div class="gridedit__item gridedit__item_slider">
41                #SET{name,#ENV{nom}|concat{\[,#CLE,\]}}
42                #SET{id,#VAL{champ_}|concat{#ENV{id,#ENV{nom}},_,#CLE}|saisie_nom2classe}
43                #SET{required,#ENV{obligatoire}|=={oui}|et{#COMPTEUR_BOUCLE|=={1}}}
44                #SET{disabled,#GET{required}|et{#CLE|non}}
45                <input
46                        type="range"
47                        min="-#GET{nb_colonnes}"
48                        max="#GET{nb_colonnes}"
49                        step="1"
50                        name="#GET{name}"
51                        value="#GET{valeur}"
52                        class="rangeslider"
53                        id="#GET{id}"
54                        [(#GET{required}|oui)required="required"]
55                        [(#GET{disabled}|oui)disabled="disabled"]
56                />
57                <div class="rangeslider__labels">
58                        <BOUCLE_values(DATA){enum -#GET{nb_colonnes},#GET{nb_colonnes},1}><span class="rangeslider__label">[(#VALEUR|sinon{<:gridle:grid_null:>})]</span></BOUCLE_values>
59                </div>
60        </div>
61
62</div>
63</BOUCLE_medias>
64
65[(#REM) Sens et mode du décalage ]
66#SET{cle,relative}
67#SET{name,#ENV{nom}|concat{\[,#GET{cle},\]}}
68#SET{id,#VAL{champ_}|concat{#ENV{id,#ENV{nom}},_,#GET{cle},_,#CLE}|saisie_nom2classe}
69#SET{checked,#GET{value}|in_any{#GET{valeur/#GET{cle}}}|ou{#COMPTEUR_BOUCLE|=={1}}}
70#SET{required,#ENV{obligatoire}|=={oui}}
71<div class="choix">
72        <input
73                type="checkbox"
74                name="#GET{name}"
75                value="oui"
76                class="checkbox"
77                id="#GET{id}"
78                [(#GET{checked}|oui)checked="checked"]
79                [(#GET{required}|oui)required="required"]
80                [(#GET{disabled}|oui)disabled="disabled"]
81        />
82        <label for="#GET{id}">
83                Affecter les autres colonnes
84        </label>
85</div>
Note: See TracBrowser for help on using the repository browser.