Changeset 79882 in spip-zone


Ignore:
Timestamp:
Jan 7, 2014, 11:24:49 AM (6 years ago)
Author:
cedric@…
Message:

Mise a jour de la librairie AdaptiveImages? : meilleure minification du JS, support de l'impression (Nicolas Hoizey)

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

Legend:

Unmodified
Added
Removed
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/AdaptiveImages.php

    r79262 r79882  
    33 * AdaptiveImages
    44 *
    5  * @version    1.3.0
     5 * @version    1.4.0
    66 * @copyright  2013
    77 * @author     Nursit
     
    284284                // if there is adapted images in the page, add the necessary CSS and JS
    285285                if (strpos($html,"adapt-img-wrapper")!==false){
     286                        $ins_style = "";
     287                        // collect all adapt-img <style> in order to put it in the <head>
     288                        preg_match_all(",<!--\[if !IE\]><!-->.*<style[^>]*>(.*)</style>.*<!--<!\[endif\]-->,Ums",$html,$matches);
     289                        if (count($matches[1])){
     290                                $html = str_replace($matches[1],"",$html);
     291                                $ins_style .= "\n<style>".implode("\n",$matches[1])."\n</style>";
     292                        }
     293
    286294                        // Common styles for all adaptive images during loading
    287295                        $ins = "<style type='text/css'>"."img.adapt-img{opacity:0.70;max-width:100%;height:auto;}"
    288296                        ."span.adapt-img-wrapper,span.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;}"
    289297                        ."span.adapt-img-wrapper:after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\"}"
     298                        ."@media print{html span.adapt-img-wrapper{background:none}html span.adapt-img-wrapper img {opacity:1}html span.adapt-img-wrapper:after{display:none}}"
    290299                        ."</style>\n";
    291300                        // JS that evaluate connection speed and add a aislow class on <html> if slow connection
    292301                        // and onload JS that adds CSS to finish rendering
    293302                        $async_style = "html img.adapt-img{opacity:0.01}html span.adapt-img-wrapper:after{display:none;}";
    294                         $length = strlen($html)+2000; // ~2000 pour le JS qu'on va inserer
    295                         $ins .= "<script type='text/javascript'>/*<![CDATA[*/"
    296                                 ."function adaptImgFix(n){var i=window.getComputedStyle(n.parentNode).backgroundImage.replace(/\W?\)$/,'').replace(/^url\(\W?|/,'');n.src=(i&&i!='none'?i:n.src);}"
    297                                 ."(function(){function hAC(c){(function(H){H.className=H.className+' '+c})(document.documentElement)}"
    298                                 // Android 2 media-queries bad support workaround
    299                                 // muliple rules = multiples downloads : put .android2 on <html>
    300                                 // use with simple css without media-queries and send compressive image
    301                                 ."var android2 = (/android 2[.]/i.test(navigator.userAgent.toLowerCase()));"
    302                                 ."if (android2) {hAC('android2');}\n"
    303                                 // slowConnection detection
    304                                 ."var slowConnection = false;"
    305                                 ."if (typeof window.performance!==\"undefined\"){"
    306                                 ."var perfData = window.performance.timing;"
    307                                 ."var speed = ~~($length/(perfData.responseEnd - perfData.connectStart));" // approx, *1000/1024 to be exact
    308                                 //."console.log(speed);"
    309                                 ."slowConnection = (speed && speed<50);" // speed n'est pas seulement une bande passante car prend en compte la latence de connexion initiale
    310                                 ."}else{"
    311                                 //https://github.com/Modernizr/Modernizr/blob/master/feature-detects/network/connection.js
    312                                 ."var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;"
    313                                 ."if (typeof connection!==\"undefined\") slowConnection = (connection.type == 3 || connection.type == 4 || /^[23]g$/.test(connection.type));"
    314                                 ."}"
    315                                 //."console.log(slowConnection);"
    316                                 ."if(slowConnection) {hAC('aislow');}\n"
    317                                 // injecter async style async after images are loaded
    318                           // in order to hide 2 top layers and show only lower one
    319                                 ."var adaptImg_onload = function(){"
    320                           ."var sa = document.createElement('style'); sa.type = 'text/css';"
    321                           ."sa.innerHTML = '$async_style';"
    322                           ."var s = document.getElementsByTagName('style')[0]; s.parentNode.insertBefore(sa, s);};"
    323                                 // http://www.webreference.com/programming/javascript/onloads/index.html
    324                                 ."function addLoadEvent(func){var oldol=window.onload;if (typeof oldol != 'function'){window.onload=func;}else{window.onload=function(){if (oldol){oldol();} func();}}}"
    325                                 ."if (typeof jQuery!=='undefined') jQuery(function(){jQuery(window).load(adaptImg_onload)}); else addLoadEvent(adaptImg_onload);"
    326                           ."})();/*]]>*/</script>\n";
     303                        $length = strlen($html)+strlen($ins_style)+2000; // ~2000 bytes for CSS and minified JS we add here
     304                        // minified version of AdaptiveImages.js (using http://closure-compiler.appspot.com/home)
     305                        $ins .= "<script type='text/javascript'>/*<![CDATA[*/var adaptImgDocLength=$length;adaptImgAsyncStyles=\"$async_style\";".<<<JS
     306function 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)})();
     307JS;
     308                        $ins .= "/*]]>*/</script>\n";
    327309                        // alternative noscript if no js (to de-activate progressive rendering on PNG and GIF)
    328310                        if (!$this->nojsPngGifProgressiveRendering)
    329311                                $ins .= "<noscript><style type='text/css'>.png img.adapt-img,.gif img.adapt-img{opacity:0.01}span.adapt-img-wrapper.png:after,span.adapt-img-wrapper.gif:after{display:none;}</style></noscript>";
    330312
    331                         // collect all adapt-img <style> in order to put it in the <head>
    332                         preg_match_all(",<!--\[if !IE\]><!-->.*(<style[^>]*>.*</style>).*<!--<!\[endif\]-->,Ums",$html,$matches);
    333                         if (count($matches[1])){
    334                                 $html = str_replace($matches[1],"",$html);
    335                                 $ins .= implode("\n",$matches[1]);
    336                         }
     313                        $ins .= $ins_style;
     314
    337315                        // insert before first <script or <link
    338316                        if ($p = strpos($html,"<link") OR $p = strpos($html,"<script") OR $p = strpos($html,"</head"))
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/README.md

    r79262 r79882  
    44## What is it?
    55This is the sandalone PHP implementation of "3-layer technique" for Adaptive Images generation.
    6 See <http://blog.nursit.net/Adaptive-Images-et-Responsive-Web.html> for technical explanations and justifications.
     6See <http://openweb.eu.org/277> for technical explanations and justifications (french version available : <openweb.eu.org/280>)
    77
    88## Requirements
     
    165165## Real-life use case
    166166
    167 See the implementation in SPIP CMS :
    168 http://zone.spip.org/trac/spip-zone/browser/_plugins_/adaptive_images/trunk/adaptive_images_options.php
     167This library is already available through plugins in:
     168
     169* SPIP CMS <http://contrib.spip.net/Adaptive-Images-4458> [See the implementation](http://zone.spip.org/trac/spip-zone/browser/_plugins_/adaptive_images/trunk/adaptive_images_options.php)
     170* DotClear blog engine <http://open-time.net/post/2013/12/10/Plugin-adaptiveImages-05-pour-Dotclear>
  • _plugins_/adaptive_images/trunk/paquet.xml

    r79262 r79882  
    22        prefix="adaptive_images"
    33        categorie="multimedia"
    4         version="1.4.2"
     4        version="1.5.0"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.0.*]"
Note: See TracChangeset for help on using the changeset viewer.