source: spip-zone/_plugins_/gridle/trunk/grille/gridle.php @ 113940

Last change on this file since 113940 was 113940, checked in by tcharlss@…, 8 months ago

Ajout des sources SCSS et des trucs gulp pour la compilation (uniquement pour le dev), mis à jour du descriptif, broutilles.

File size: 12.5 KB
Line 
1<?php
2/**
3 * Fonctions utiles à la grille « Gridle ».
4 *
5 * @note
6 * Ne pas utiliser ces fonctions directement, faire appel à l'API
7 *
8 * @plugin    Grille Gridle
9 * @copyright 2019
10 * @author    Mukt
11 * @licence   GNU/GPL
12 * @package   SPIP\Gridle\Fonctions
13 */
14
15// Sécurité
16if (!defined('_ECRIRE_INC_VERSION')) {
17        return;
18}
19
20/**
21 * Description de la grille : nom, breakpoints etc.
22 *
23 * @return array
24 *     Tableau associatif
25 */
26function grille_gridle_decrire_grille_dist() {
27
28        $grille = array(
29                'nom'           => _T('gridle:grid_nom'),
30                'description'   => _T('gridle:grid_description'),
31                'logo'          => 'gridle-32.png',
32                'documentation' => 'https://github.com/Coffeekraken/gridle/',
33                'demo'          => 'http://gridle.org/demo/demo-flex.html',
34                'mobile_first'  => true,
35                'nb_colonnes'   => 12,
36                'css_public'    => 'css/gridle.min.css',
37                'css_prive'     => 'css/gridle.min.css',
38                'js'            => array('css/gridle.min.js'),
39                'medias' => array(
40                        '' => array(
41                                'label'       => _T('gridle:grid_media_base'),
42                                'img'         => 'images/grid-media-all.svg',
43                                'breakpoints' => array(
44                                        'min' => '',
45                                        'max' => '',
46                                ),
47                        ),
48                        'tablet' => array(
49                                'label'       => _T('gridle:grid_media_tablet'),
50                                'img'         => 'images/grid-media-tablet.svg',
51                                'breakpoints' => array(
52                                        'min' => '480px',
53                                        'max' => '',
54                                ),
55                        ),
56                        'desktop' => array(
57                                'label'       => _T('gridle:grid_media_desktop'),
58                                'img'         => 'images/grid-media-desktop.svg',
59                                'breakpoints' => array(
60                                        'min' => '768px',
61                                        'max' => '',
62                                ),
63                        ),
64                        /*
65                        'large' => array(
66                                'label'       => _T('gridle:grid_media_large'),
67                                'img'         => 'images/grid-media-large.svg',
68                                'breakpoints' => array(
69                                        'min' => '1440px',
70                                        'max' => '',
71                                ),
72                        ),*/
73                ),
74                'classes_base' => array(
75                        'container' => '',
76                        'row'       => 'row',
77                        'column'    => 'gr-12',
78                ),
79        );
80
81        return $grille;
82}
83
84
85/**
86 * Liste des saisies relatives à la grille
87 *
88 * @param int $id_noisette
89 *     N° d'une noisette (optionnel)
90 * @return array
91 *     Description des saisies, rangées par type d'élément de la grille
92 *     container => [saisies]
93 *     row       => [saisies]
94 *     column    => [saisies]
95 */
96function grille_gridle_lister_saisies_dist($id_noisette = 0) {
97
98        include_spip('inc/noizetier_layout');
99        $saisies     = array();
100        $nb_colonnes = intval(noizetier_layout_decrire_grille('nb_colonnes'));
101        $medias      = array_keys(noizetier_layout_decrire_grille('medias'));
102
103        // CONTAINER
104        $saisies['container'] = array(
105                array(
106                        'saisie' => 'grid_radio',
107                        'options' => array(
108                                'nom' => 'grille_container',
109                                'label' => _T('noizetier_layout:grid_container_label'),
110                                //'explication' => _T('noizetier_layout:grid_container_explication'),
111                                // 'li_class' => 'choix_inline',
112                                'defaut' => '',
113                                'cacher_option_intro' => 'oui',
114                                'data' => array(
115                                        ''                => array(
116                                                'label' => _T('gridle:grid_null'),
117                                                'img' => 'images/grid-null.svg',
118                                        ),
119                                        'container'       => array(
120                                                'label' => _T('gridle:grid_container'),
121                                                'img' => 'images/grid-container.svg',
122                                        ),
123                                        'container_fluid' => array(
124                                                'label' => _T('gridle:grid_container_fluid'),
125                                                'img' => 'images/grid-container-fluid.svg',
126                                        ),
127                                ),
128                        ),
129                        'grille' => array(
130                                'multiple' => false,
131                        ),
132                ),
133        );
134
135        // ROW
136        $saisies['row'] = array(
137                // Alignement horizontal
138                array(
139                        'saisie' => 'grid_radio',
140                        'options' => array(
141                                'nom'      => 'gridle_align_horizontal',
142                                'label'    => _T('gridle:grid_align_horizontal_label'),
143                                // 'li_class' => 'choix_inline',
144                                'defaut'   => '',
145                                'cacher_option_intro' => 'oui',
146                                'data' => array(
147                                        '' => array(
148                                                'label' => _T('gridle:grid_null'),
149                                                'img'   => 'images/grid-null.svg',
150                                        ),
151                                        'row-align-left' => array(
152                                                'label' => _T('gridle:grid_align_left'),
153                                                'img'   => 'images/grid-align-left.svg',
154                                        ),
155                                        'row-align-center'  => array(
156                                                'label' => _T('gridle:grid_align_center'),
157                                                'img'   => 'images/grid-align-center.svg',
158                                        ),
159                                        'row-align-right'   => array(
160                                                'label' => _T('gridle:grid_align_right'),
161                                                'img'   => 'images/grid-align-right.svg'
162                                        ),
163                                        'row-align-between' => array(
164                                                'label' => _T('gridle:grid_align_between'),
165                                                'img'   => 'images/grid-align-between.svg'
166                                        ),
167                                        'row-align-around'  => array(
168                                                'label' => _T('gridle:grid_align_around'),
169                                                'img'   => 'images/grid-align-around.svg'
170                                        ),
171                                ),
172                        ),
173                        'grille' => array(
174                                'multiple' => false,
175                        ),
176                ),
177                // Alignement vertical
178                array(
179                        'saisie' => 'grid_radio',
180                        'options' => array(
181                                'nom'      => 'gridle_align_vertical',
182                                'label'    => _T('gridle:grid_align_vertical_label'),
183                                // 'li_class' => 'choix_inline',
184                                'defaut'   => '',
185                                'cacher_option_intro' => 'oui',
186                                'data' => array(
187                                        '' => array(
188                                                'label' => _T('gridle:grid_null'),
189                                                'img'   => 'images/grid-null.svg',
190                                        ),
191                                        'row-align-top' => array(
192                                                'label' => _T('gridle:grid_align_top'),
193                                                'img'   => 'images/grid-align-top.svg',
194                                        ),
195                                        'row-align-middle' => array(
196                                                'label' => _T('gridle:grid_align_middle'),
197                                                'img'   => 'images/grid-align-middle.svg',
198                                        ),
199                                        'row-align-bottom' => array(
200                                                'label' => _T('gridle:grid_align_bottom'),
201                                                'img'   => 'images/grid-align-bottom.svg',
202                                        ),
203                                ),
204                        ),
205                        'grille' => array(
206                                'multiple' => false,
207                        ),
208                ),
209                // Gouttière
210                array(
211                        'saisie' => 'case',
212                        'options' => array(
213                                'nom'        => 'gridle_no_gutter',
214                                'label'      => _T('gridle:grid_no_gutter_label'),
215                                'label_case' => _T('gridle:grid_no_gutter_label_case'),
216                                'valeur_oui' => 'row-no-gutter',
217                        ),
218                        'grille' => array(
219                                'multiple' => false,
220                                'data' => array(
221                                        'row-no-gutter',
222                                ),
223                        ),
224                ),
225                // Ordre inverse
226                array(
227                        'saisie' => 'case',
228                        'options' => array(
229                                'nom'        => 'gridle_reverse',
230                                'label'      => _T('gridle:grid_reverse_label'),
231                                'label_case' => _T('gridle:grid_reverse_label_case'),
232                                'valeur_oui' => 'row-reverse',
233                        ),
234                        'grille' => array(
235                                'multiple' => false,
236                                'data' => array(
237                                        'row-reverse',
238                                ),
239                        ),
240                ),
241        );
242
243        // COLUMN
244        // Construire certains datas en fonction des médias et du nombre de colonnes
245        $data_grille  = array(); // Liste complète des classes (avec @media)
246        $data_saisies = array(); // Liste réduite
247        $data_exposer = array(); // Pour exposer certaines valeurs
248        $colonnables  = array(
249                'column' => 'gr',
250                'push'   => 'push',
251                'pull'   => 'pull',
252                'prefix' => 'prefix',
253                'suffix' => 'suffix',
254        );
255        foreach($colonnables as $champ => $classe) {
256                // D'abord des valeurs nulles
257                switch ($champ) {
258                        default:
259                                $data_saisies[$champ][''] = _T('gridle:grid_null');
260                                break;
261                }
262                // Ensuite d'autres valeurs éventuelles
263                switch ($champ) {
264                        case 'column':
265                                $data_saisies[$champ]['gr-adapt'] = _T('gridle:grid_column_adapt');
266                                $data_saisies[$champ]['gr-grow'] = _T('gridle:grid_column_grow');
267                                break;
268                }
269                // Puis les valeurs selon les colonnes/médias
270                switch ($champ) {
271                        default:
272                                for ($i=1; $i<=$nb_colonnes; $i++) {
273                                        $data_saisies[$champ][$classe.'-'.$i] = $i;
274                                        foreach($medias as $media) {
275                                                $data_grille[$champ][] = $classe.'-'.$i.($media?'@'.$media:'');
276                                        }
277                                }
278                                break;
279                }
280        }
281        // Ordre : trouver le rang de la noisette et le nombre de siblings
282        if (
283                intval($id_noisette)
284                and $noisette = sql_fetsel('rang_noisette,id_conteneur', 'spip_noisettes', 'id_noisette='.intval($id_noisette))
285        ) {
286                $nb_noisettes_conteneur = sql_countsel('spip_noisettes', 'id_conteneur='.sql_quote($noisette['id_conteneur']));
287                for ($i=1; $i<=$nb_noisettes_conteneur; $i++) {
288                        $data_saisies['order'][''] = _T('gridle:grid_null');
289                        $data_saisies['order']['order-'.$i] = $i;
290                        foreach($medias as $media) {
291                                $value = 'order-'.$i.($media?'@'.$media:'');
292                                $data_grille['order'][] = $value;
293                                if ($i == $noisette['rang_noisette']) {
294                                        $data_exposer['order'][] = $value;
295                                }
296                        }
297                }
298        }
299
300        $saisies['column'] = array(
301                // Largeur
302                array(
303                        'saisie' => 'grid_radio',
304                        'options' => array(
305                                'nom'         => 'gridle_column',
306                                'label'       => _T('gridle:grid_column_label'),
307                                'defaut'      => 'gr-12',
308                                'medias'      => 'oui',
309                                'obligatoire' => 'oui',
310                                'li_class'    => 'pleine_largeur',
311                                'slider'      => 'oui',
312                                'data'        => $data_saisies['column'],
313                        ),
314                        'grille' => array(
315                                'multiple' => true,
316                                'data'     => $data_grille['column'],
317                        ),
318                ),
319                // Décalage
320                /*
321                array(
322                        'saisie' => 'grid_offset',
323                        'options' => array(
324                                'nom'      => 'gridle_offfset',
325                                'label'    => _T('gridle:grid_offset_label'),
326                                'li_class' => 'pleine_largeur',
327                        ),
328                ),
329                */
330                /*
331                // Choix du décalage
332                array(
333                        'saisie' => 'selection',
334                        'options' => array(
335                                'nom'        => 'gridle_offset',
336                                'label'      => _T('gridle:grid_offset_label'),
337                                'data' => array(
338                                        'push'   => _T('gridle:grid_push_label'),
339                                        'pull'   => _T('gridle:grid_pull_label'),
340                                        'prefix' => _T('gridle:grid_prefix_label'),
341                                        'suffix' => _T('gridle:grid_suffix_label'),
342                                ),
343                        ),
344                ),
345                // Décalage en avant absolu
346                array(
347                        'saisie' => 'grid_radio',
348                        'options' => array(
349                                'nom'         => 'gridle_push',
350                                'label'       => _T('gridle:grid_push_label'),
351                                'defaut'      => '',
352                                'medias'      => 'oui',
353                                'li_class'    => 'pleine_largeur',
354                                'slider'      => 'oui',
355                                'data'        => $data_saisies['push'],
356                                'afficher_si' => '@gridle_offset@ == "push"'
357                        ),
358                        'grille' => array(
359                                'multiple' => true,
360                                'data'     => $data_grille['push'],
361                        ),
362                ),
363                // Décalage en arrière absolu
364                array(
365                        'saisie' => 'grid_radio',
366                        'options' => array(
367                                'nom'         => 'gridle_pull',
368                                'label'       => _T('gridle:grid_pull_label'),
369                                'defaut'      => '',
370                                'medias'      => 'oui',
371                                'li_class'    => 'pleine_largeur',
372                                'slider'      => 'oui',
373                                'data'        => $data_saisies['pull'],
374                                'afficher_si' => '@gridle_offset@ == "pull"'
375                        ),
376                        'grille' => array(
377                                'multiple' => true,
378                                'medias'   => true,
379                                'data'     => $data_grille['pull'],
380                        ),
381                ),
382                // Décalage en avant relatif
383                array(
384                        'saisie' => 'grid_radio',
385                        'options' => array(
386                                'nom'         => 'gridle_prefix',
387                                'label'       => _T('gridle:grid_prefix_label'),
388                                'defaut'      => '',
389                                'medias'      => 'oui',
390                                'li_class'    => 'pleine_largeur',
391                                'slider'      => 'oui',
392                                'data'        => $data_saisies['prefix'],
393                                'afficher_si' => '@gridle_offset@ == "prefix"'
394                        ),
395                        'grille' => array(
396                                'multiple' => true,
397                                'medias'   => true,
398                                'data'     => $data_grille['prefix'],
399                        ),
400                ),
401                // Décalage en arrière relatif
402                array(
403                        'saisie' => 'grid_radio',
404                        'options' => array(
405                                'nom'         => 'gridle_suffix',
406                                'label'       => _T('gridle:grid_suffix_label'),
407                                'defaut'      => '',
408                                'medias'      => 'oui',
409                                'li_class'    => 'pleine_largeur',
410                                'slider'      => 'oui',
411                                'data'        => $data_saisies['suffix'],
412                                'afficher_si' => '@gridle_offset@ == "suffix"'
413                        ),
414                        'grille' => array(
415                                'multiple' => true,
416                                'medias'   => true,
417                                'data'     => $data_grille['suffix'],
418                        ),
419                ),
420                */
421                // Ordre
422                array(
423                        'saisie' => 'grid_radio',
424                        'options' => array(
425                                'nom'         => 'gridle_order',
426                                'label'       => _T('gridle:grid_order_label'),
427                                // 'explication' => _T('gridle:grid_order_explication'),
428                                'medias'      => 'oui',
429                                //'defaut'      => 'order-'.$noisette['rang_noisette'],
430                                'data'        => $data_saisies['order'],
431                                'exposer'     => $data_exposer['order'],
432                        ),
433                        'grille' => array(
434                                'multiple' => true,
435                                'data'     => $data_grille['order'],
436                        ),
437                ),
438                /*
439                // Centrer
440                array(
441                        'saisie' => 'case',
442                        'options' => array(
443                                'nom'        => 'gridle_centered',
444                                'label'      => _T('gridle:grid_align_label'),
445                                'label_case' => _T('gridle:grid_align_horizontal_label_case'),
446                                'valeur_oui' => 'gr-centered',
447                        ),
448                        'grille' => array(
449                                'multiple' => false,
450                        ),
451                ),
452                */
453        );
454
455        // COMMUNES
456        $saisies['*'] = array(
457                // Visibilité
458                /*
459                array(
460                        'saisie' => 'grid_visibility',
461                        'options' => array(
462                                'nom' => 'grid_visibiity',
463                                'label' => _T('gridle:grid_visibility_label'),
464                        ),
465                ),
466                */
467        );
468
469        return $saisies;
470}
471
472
473/**
474 * Créer la variante d'une classe pour un média
475 *
476 * Par exemple gr-6 => gr-6@desktop
477 *
478 * @param string $classe
479 *     Classe à modifier
480 * @param string $media
481 *     Le media
482 * @return string
483 *     La classe modifiée
484 */
485function grille_gridle_creer_classe_media_dist($classe, $media) {
486
487        $classe_media = $classe;
488        if ($classe and $media) {
489                $classe_media = $classe . '@' . $media;
490        }
491
492        return $classe_media;
493}
Note: See TracBrowser for help on using the repository browser.