Changeset 112238 in spip-zone


Ignore:
Timestamp:
Oct 31, 2018, 3:51:23 PM (12 months ago)
Author:
arnaud.berard@…
Message:

Ajout d'une configuration permettant de gérer des rêgles media-queries pour lazysizes

Chaque rêgle est définie comme habituellement dans les saisies de array

--small|(max-width: 480px)
--medium|(max-width: 800px)

utilisable ensuite comme des raccourcis dans le markup

ex avec l'addon bgset

`
<div class="box cover ratio-container lazyload"

data-sizes="auto"
data-bgset="[(#GET{cover_small})] [--small] | [(#GET{cover_medium})] [--medium] | [(#GET{cover_large})]"></div>

`

extrait de la doc :
L'option 'customMedia' est une carte d'alias pour différentes requêtes media-queries.

Cette option peut être utilisée pour séparer / centraliser l'implémentation de plusieurs media-queires spécifiques (présentation) de l'attribut source [media] (contenu / structure) en créant des requêtes multimédia étiquetées.

ces rêgles sont aussi utilisables avec d'autres addons, et notamment comme le souligne la doc avec picture>source[media]

ou le addon customMedia permettant d'utiliser les mêmes raccourcis depuis css/scss (mais c'est pour après…)

Location:
_plugins_/lazysizes/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/lazysizes/trunk/formulaires/configurer_lazysizes_options.html

    r105521 r112238  
    44<form method="post" action="#ENV{action}"><div>
    55        #ACTION_FORMULAIRE{#ENV{action}}
    6        
     6
    77        <fieldset>
    88                <legend>LazySize Options</legend>
     
    6969                                <input type="text" class="text" name="srcset_attr" id="srcset_attr" value="#ENV{srcset_attr}" />
    7070                        </div>
     71                        <div class="editer editer_custom_media">
     72                                <label for="custom_media">Custom Media rules</label>
     73                                <p class="explication">
     74                                        <code>(data-srcset !default)</code>
     75                                        Raccourcis et Media queries pour
     76                                </p>
     77                                <textarea class="textarea" name="custom_media" id="custom_media">[(#ENV{custom_media}|trim)]</textarea>
     78                        </div>
    7179                </div>
    7280        </fieldset>
    73        
    7481        <input type="hidden" name="_meta_casier" value="lazysizes/options" />
    7582        <p class="boutons">
  • _plugins_/lazysizes/trunk/lazysizes_config.js.html

    r112217 r112238  
    1717//console.log(lazySizesConfig);
    1818 DEFAULT-->]
     19#SET{custom_media, #GET{options/custom_media}}
     20window.lazySizesConfig.customMedia = [(#GET{custom_media}|lazysizes_string2array|json_encode)];
    1921window.lazySizesConfig.init = false;
  • _plugins_/lazysizes/trunk/lazysizes_fonctions.php

    r112216 r112238  
    6565        return $flux;
    6666}
    67 
    68 
     67/*
     68 * lazysizes_string2array
     69 *
     70 *  Pour ne pas necessiter Saisie juste pour saisies_chaine2tableau
     71 * ne gère que des cle|valeur
     72 *
     73 * @param string $string
     74 *   cle|valeur
     75 *   cle|valeur
     76 */
     77function lazysizes_string2array($string){
     78        // récupérer les lignes
     79        $res = array();
     80        $lignes = explode("\n",$string);
     81        foreach($lignes as $i => $ligne){
     82                list($cle,$valeur) = explode('|', $ligne, 2);
     83                $res[$cle] = trim($valeur);
     84        }
     85        return $res;
     86}
    6987
    7088/**
     
    7290 *
    7391 * supprime les data-src des modèles documents pour rétablir le src du $fichier
    74  * utilisé dans les gabarrits de newsletter
     92 * utilisé dans les gabarits de newsletter
    7593 *
    7694 */
Note: See TracChangeset for help on using the changeset viewer.