Changeset 80437 in spip-zone for _plugins_/adaptive_images/trunk


Ignore:
Timestamp:
Feb 3, 2014, 10:46:15 PM (5 years ago)
Author:
cedric@…
Message:

Mise a jour de la librairie AdaptiveImages? qui permet maintenant le lazyload
+ ajout de l'option lazyload dans la configuration
+ prise en charge du lazyload avec 2 scripts JS charges dans le head

Location:
_plugins_/adaptive_images/trunk
Files:
3 added
7 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/adaptive_images/trunk/adaptive_images_options.php

    r80411 r80437  
    9494        if (isset($settings['on_demand_production']) AND $settings['on_demand_production'])
    9595                $AdaptiveImages->onDemandImages = true;
     96
     97        if (isset($settings['lazy_load']) AND $settings['lazy_load'])
     98                $AdaptiveImages->lazyload = true;
     99
    96100}
    97101
     
    249253}
    250254
     255/**
     256 * Inserer jquery.lazyload.js si besoin
     257 * @param $texte
     258 * @return string
     259 */
     260function adaptive_images_insert_head($texte){
     261        $AdaptiveImages = SPIPAdaptiveImages::getInstance();
     262        if ($AdaptiveImages->lazyload){
     263                if ($js = find_in_path("javascript/jquery.lazyload.js"))
     264                        $texte .= "<script type='text/javascript' src='$js'></script>\n";
     265                if ($js = find_in_path("javascript/adaptive.lazyload.js"))
     266                        $texte .= "<script type='text/javascript' src='$js'></script>\n";
     267        }
     268        return $texte;
     269}
     270
    251271?>
  • _plugins_/adaptive_images/trunk/formulaires/configurer_adaptive_images.html

    r79891 r80437  
    5858                                <p class="explication"><:adaptive_images:explication_on_demand_production:></p>
    5959                        </li>
     60                        #SET{name,lazy_load}#SET{obli,''}#SET{defaut,'0'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
     61                        <li class="editer pleine_largeur editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">[
     62                                <span class='erreur_message'>(#GET{erreurs})</span>
     63                                ]
     64                                #SET{val,0}
     65                                <input type="hidden" name="#GET{name}" value="#GET{val}" />
     66                                #SET{val,1}
     67                                <div class="choix">
     68                                        <input type="checkbox" name="#GET{name}" class="checkbox" id="#GET{name}_#GET{val}" value="#GET{val}"[(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)checked="checked"] />
     69                                        <label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
     70                                </div>
     71                        </li>
    6072
    6173                        <li class="fieldset">
  • _plugins_/adaptive_images/trunk/lang/adaptive_images_fr.php

    r79892 r80437  
    2525        'label_default_bkpts' => '<i lang="en">Breakpoints</i> pour les variantes d\'image',
    2626        'label_on_demand_production_1' => 'Produire les variantes d\'images uniquement quand elles sont nécessaires',
     27        'label_lazy_load_1' => 'Ne charger les images adaptatives que lorsqu\'elles sont visibles',
    2728        'explication_on_demand_production' => 'En activant ce réglage, chaque variante d\'une image sera fabriquée la première fois qu\'un visiteur en a besoin.
    2829Evite de générer toutes les images d\'un coup ce qui peut produire des erreurs sur les pages avec beaucoup d\'images.',
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/AdaptiveImages.js

    r79891 r80437  
    88                        H.className = H.className+' '+c
    99                })(document.documentElement)
     10        }
     11
     12        // if adaptImgLazy add lazy class on <html>
     13        if (adaptImgLazy) {
     14                htmlAddClass('lazy');
    1015        }
    1116
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/AdaptiveImages.php

    r80410 r80437  
    33 * AdaptiveImages
    44 *
    5  * @version    1.6.1
     5 * @version    1.7.0
    66 * @copyright  2013
    77 * @author     Nursit
     
    119119
    120120        /**
     121         * Set to true to delay loading with .lazy class on <html>
     122         * need extra js to add .lazy on adapt-img-wrapper, remove .lazy on <html>
     123         * and then remove .lazy on each .adapt-img-wrapper when visible
     124         * @var int
     125         */
     126        protected $lazyload = false;
     127
     128
     129        /**
    121130         * Constructor
    122131         */
     
    148157      throw new InvalidArgumentException("Property {$property} doesn't exist");
    149158    }
    150                 if (in_array($property,array("nojsPngGifProgressiveRendering","onDemandImages"))){
     159                if (in_array($property,array("nojsPngGifProgressiveRendering","onDemandImages","lazyload"))){
    151160                        if (!is_bool($value))
    152161                                throw new InvalidArgumentException("Property {$property} needs a bool value");
     
    307316
    308317                        // Common styles for all adaptive images during loading
    309                         $ins = "<style type='text/css'>"."img.adapt-img{opacity:0.70;max-width:100%;height:auto;}"
     318                        $ins = "<style type='text/css'>"."img.adapt-img,.lazy img.adapt-img{opacity:0.70;max-width:100%;height:auto;}"
    310319                        .".adapt-img-wrapper,.adapt-img-wrapper:after{display:inline-block;max-width:100%;position:relative;-webkit-background-size:100% auto;background-size:100% auto;background-repeat:no-repeat;line-height:1px;}"
     320                        ."html body .adapt-img-wrapper.lazy,html.lazy body .adapt-img-wrapper,html body .adapt-img-wrapper.lazy:after,html.lazy body .adapt-img-wrapper:after{background-image:none}"
    311321                        .".adapt-img-wrapper:after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\"}"
    312322                        ."@media print{html .adapt-img-wrapper{background:none}html .adapt-img-wrapper img {opacity:1}html .adapt-img-wrapper:after{display:none}}"
     
    317327                        $length = strlen($html)+strlen($ins_style)+2000; // ~2000 bytes for CSS and minified JS we add here
    318328                        // minified version of AdaptiveImages.js (using http://closure-compiler.appspot.com/home)
    319                         $ins .= "<script type='text/javascript'>/*<![CDATA[*/var adaptImgDocLength=$length;adaptImgAsyncStyles=\"$async_style\";".<<<JS
    320 function adaptImgFix(d){var e=window.getComputedStyle(d.parentNode).backgroundImage.replace(/\W?\)$/,"").replace(/^url\(\W?|/,"");d.src=e&&"none"!=e?e:d.src} (function(){function d(a){var b=document.documentElement;b.className=b.className+" "+a}function e(a){var b=window.onload;window.onload="function"!=typeof window.onload?a:function(){b&&b();a()}}/android 2[.]/i.test(navigator.userAgent.toLowerCase())&&d("android2");var c=!1;if("undefined"!==typeof window.performance)c=window.performance.timing,c=(c=~~(adaptImgDocLength/(c.responseEnd-c.connectStart)))&&50>c;else{var f=navigator.connection||navigator.mozConnection||navigator.webkitConnection;"undefined"!== typeof f&&(c=3==f.type||4==f.type||/^[23]g$/.test(f.type))}c&&d("aislow");var h=function(){var a=document.createElement("style");a.type="text/css";a.innerHTML=adaptImgAsyncStyles;var b=document.getElementsByTagName("style")[0];b.parentNode.insertBefore(a,b);window.matchMedia||window.onbeforeprint||g()};"undefined"!==typeof jQuery?jQuery(function(){jQuery(window).load(h)}):e(h);var g=function(){for(var a=document.getElementsByClassName("adapt-img"),b=0;b<a.length;b++)adaptImgFix(a[b])};window.matchMedia&& window.matchMedia("print").addListener(function(a){g()});"undefined"!==typeof window.onbeforeprint&&(window.onbeforeprint=g)})();
     329                        $ins .= "<script type='text/javascript'>/*<![CDATA[*/var adaptImgDocLength=$length;adaptImgAsyncStyles=\"$async_style\";adaptImgLazy=".($this->lazyload?"true":"false").";".<<<JS
     330function adaptImgFix(d){var e=window.getComputedStyle(d.parentNode).backgroundImage.replace(/\W?\)$/,"").replace(/^url\(\W?|/,"");d.src=e&&"none"!=e?e:d.src} (function(){function d(a){var b=document.documentElement;b.className=b.className+" "+a}function e(a){var b=window.onload;window.onload="function"!=typeof window.onload?a:function(){b&&b();a()}}adaptImgLazy&&d("lazy");/android 2[.]/i.test(navigator.userAgent.toLowerCase())&&d("android2");var c=!1;if("undefined"!==typeof window.performance)c=window.performance.timing,c=(c=~~(adaptImgDocLength/(c.responseEnd-c.connectStart)))&&50>c;else{var f=navigator.connection||navigator.mozConnection||navigator.webkitConnection; "undefined"!==typeof f&&(c=3==f.type||4==f.type||/^[23]g$/.test(f.type))}c&&d("aislow");var h=function(){var a=document.createElement("style");a.type="text/css";a.innerHTML=adaptImgAsyncStyles;var b=document.getElementsByTagName("style")[0];b.parentNode.insertBefore(a,b);window.matchMedia||window.onbeforeprint||g()};"undefined"!==typeof jQuery?jQuery(function(){jQuery(window).load(h)}):e(h);var g=function(){for(var a=document.getElementsByClassName("adapt-img"),b=0;b<a.length;b++)adaptImgFix(a[b])}; window.matchMedia&&window.matchMedia("print").addListener(function(a){g()});"undefined"!==typeof window.onbeforeprint&&(window.onbeforeprint=g)})();
    321331JS;
    322332                        $ins .= "/*]]>*/</script>\n";
     
    685695                $cid = "c".crc32(serialize($bkptImages));
    686696                $style = "";
    687                 if ($class) $class = " $class";
    688                 $class = "$cid$class";
    689697                $img = $this->setTagAttribute($img,"class","adapt-img-ie $class");
    690698
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/README.md

    r79891 r80437  
    33
    44## What is it?
    5 This is the sandalone PHP implementation of "3-layer technique" for Adaptive Images generation.
     5This is the standalone PHP implementation of "3-layer technique" for Adaptive Images generation.
    66See <http://openweb.eu.org/277> for technical explanations and justifications (french version available : <openweb.eu.org/280>)
    77
  • _plugins_/adaptive_images/trunk/paquet.xml

    r80411 r80437  
    22        prefix="adaptive_images"
    33        categorie="multimedia"
    4         version="1.7.1"
     4        version="1.9.0"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.1.*]"
     
    1717        <pipeline nom="recuperer_fond" />
    1818        <pipeline nom="affichage_final" />
     19        <pipeline nom="insert_head" />
    1920
    2021</paquet>
Note: See TracChangeset for help on using the changeset viewer.