Changeset 114702 in spip-zone


Ignore:
Timestamp:
Apr 2, 2019, 9:53:17 AM (8 months ago)
Author:
arnaud.berard@…
Message:

maj de la lib en dernière version 4.1.7

Location:
_plugins_/lazysizes/trunk/javascript
Files:
1 added
8 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/lazysizes/trunk/javascript/addons/aspectratio/README.md

    r105556 r114702  
    33This plugin helps to pre-occupy the space needed for an image by calculating the height from the image width or the width from the height (This means the width or height has to be calculable before the image is loaded). This can serve as an alternative to the different CSS intrinsic ratio patterns.
    44
    5 Note: The CSS patterns are recommended, but especially in case of different ratio's for art directed images not so convenient.
     5Note: The CSS patterns are recommended, but especially in case of different ratio's for art directed images not so convenient. This plugin removes the ``data-aspectratio`` attribute after processing each image and my not play well with other plugins that rely on this attribute.
    66
    77## Markup API:
    88
    9 The value of the ``data-aspectratio`` has to be defined as the *width* divided by the *height*  of the image.
     9The value of the ``data-aspectratio`` has to be defined as the *width* divided by the *height*  of the image and can be represented as a ratio or a floating point number.
    1010
    11 Example values for an image with a width of 400 and a height of 200 (all mean the same): ``"400/200"``, ``"4/2"``, ``"2/1"``, ``"2"``
     11Example values for an image with a width of 400 and a height of 200 (all mean the same): ``"400/200"``, ``"4/2"``, ``"2/1"``, ``"2"``, ``"2.0"``
    1212
    1313```html
  • _plugins_/lazysizes/trunk/javascript/addons/attrchange/README.md

    r105556 r114702  
    33In case you are changing the ``data-src``/``data-srcset`` attributes of already transformed lazyload elements dynamically, you normally also must re-add the ``lazyload`` class to the element.
    44
    5 This extension automatically detects changes to your ``data-*`` attributes and adds the class for you.
     5This extension automatically detects changes to your ``data-*`` attributes and adds the class for you. This is very comfortable in case you are using highly dynamic or reactive View libraries like React, Angular, Ember etc..
    66
    77In case you are using React you can also try the following [react-lazysizes](https://www.npmjs.com/package/react-lazysizes) module as another possible alternative.
  • _plugins_/lazysizes/trunk/javascript/addons/blur-up/README.md

    r112214 r114702  
    6060                <img
    6161                        class="mediabox-img lazyload"
    62                         src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    6362                        data-srcset="https://picsum.photos/400/600?image=1074 600w 400h,
    6463                                https://picsum.photos/800/1200?image=1074 1200w"
  • _plugins_/lazysizes/trunk/javascript/addons/blur-up/ls.blur-up.js

    r112214 r114702  
    1818
    1919        var slice = [].slice;
    20         var regBlurUp = /blur-up["']*\s*:\s*["']*(always|auto|unobtrusive)/;
     20        var regBlurUp = /blur-up["']*\s*:\s*["']*(always|auto)/;
    2121        var regType = /image\/(jpeg|png|gif|svg\+xml)/;
    2222        var transSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
     
    7272                        blurImg.className = 'ls-blur-up-img';
    7373                        blurImg.src = src;
     74                        blurImg.alt = '';
     75                        blurImg.setAttribute('aria-hidden', 'true');
    7476
    7577                        blurImg.className += ' ls-inview';
     
    135137                img.addEventListener('error', onload);
    136138
    137 
    138                 if(blurUp == 'unobtrusive'){
    139                         setStateUp();
    140                 } else {
    141                         var parentUnveil = function (e) {
    142                                 if(parent != e.target){
    143                                         return;
    144                                 }
    145 
    146                                 lazySizes.aC(blurImg || img, 'ls-inview');
    147 
    148                                 setStateUp();
    149 
    150                                 parent.removeEventListener('lazybeforeunveil', parentUnveil);
    151                         };
    152 
    153                         if(!parent.getAttribute('data-expand')){
    154                                 parent.setAttribute('data-expand', -1);
     139                var parentUnveil = function (e) {
     140                        if(parent != e.target){
     141                                return;
    155142                        }
    156143
    157                         parent.addEventListener('lazybeforeunveil', parentUnveil);
     144                        lazySizes.aC(blurImg || img, 'ls-inview');
    158145
    159                         lazySizes.aC(parent, lazySizes.cfg.lazyClass);
     146                        setStateUp();
     147
     148                        parent.removeEventListener('lazybeforeunveil', parentUnveil);
     149                };
     150
     151                if(!parent.getAttribute('data-expand')){
     152                        parent.setAttribute('data-expand', -1);
    160153                }
     154
     155                parent.addEventListener('lazybeforeunveil', parentUnveil);
     156
     157                lazySizes.aC(parent, lazySizes.cfg.lazyClass);
    161158
    162159        };
     
    187184                if(!match && !img.getAttribute('data-lowsrc')){return;}
    188185
    189                 detail.blurUp = match && match[1] || 'always';
     186                detail.blurUp = match && match[1] || lazySizes.cfg.blurupMode || 'always';
    190187        });
    191188}));
  • _plugins_/lazysizes/trunk/javascript/addons/include/ls.include.js

    r112214 r114702  
    371371
    372372                        uniqueUrls[url] = [];
    373                         uniqueUrls[elem.href] = true;
     373                        uniqueUrls[elem.href] = uniqueUrls[url];
    374374
    375375                        if(cb){
     
    390390
    391391                                        uniqueUrls[url] = true;
     392                                        uniqueUrls[elem.href] = true;
    392393
    393394                                        while(cbs.length){
     
    395396                                        }
    396397                                };
     398
     399                                uniqueUrls[elem.href][0] = cb;
    397400
    398401                                if(!isScript){
     
    409412                                elem.addEventListener('loadcssdefined', load);
    410413
    411                                 uniqueUrls[url][0] = cb;
    412414                        }
    413415
  • _plugins_/lazysizes/trunk/javascript/addons/rias/ls.rias.js

    r105556 r114702  
    4242                        modifyOptions: noop,
    4343                        widthmap: {},
    44                         ratio: false
     44                        ratio: false,
     45                        traditionalRatio: false,
     46                        aspectratio: false,
    4547                };
    4648
     
    160162                options.widths.forEach(function(width){
    161163                        var widthAlias = options.widthmap[width] || width;
     164                        var ratio = options.aspectratio || options.ratio;
     165                        var traditionalRatio = !options.aspectratio && riasCfg.traditionalRatio;
    162166                        var candidate = {
    163167                                u: url.replace(regWidth, widthAlias)
    164                                                 .replace(regHeight, options.ratio ? Math.round(width * options.ratio) : ''),
     168                                                .replace(regHeight, ratio ?
     169                                                        traditionalRatio ?
     170                                                                Math.round(width * ratio) :
     171                                                                Math.round(width / ratio)
     172                                                        : ''),
    165173                                w: width
    166174                        };
  • _plugins_/lazysizes/trunk/javascript/addons/unload/ls.unload.js

    r105556 r114702  
    1717        'use strict';
    1818        if(!document.addEventListener){return;}
    19         var config, checkElements, expand;
     19        var config, checkElements;
    2020
    2121        var unloadElements = [];
     
    2525                        var i, len, box;
    2626
     27                        var expand = (lazySizes._defEx + 99) * 1.1;
    2728                        var vTop = expand * -1;
    2829                        var vLeft = vTop;
     
    144145                lazySizes.unloader = unloader;
    145146
    146                 expand = ((config.expand * config.expFactor) + 99) * 1.1;
    147147                checkElements = document.getElementsByClassName([config.unloadClass, config.loadedClass].join(' '));
    148148
  • _plugins_/lazysizes/trunk/javascript/lazysizes.js

    r112214 r114702  
    289289                var preloadElems, isCompleted, resetPreloadingTimer, loadMode, started;
    290290
    291                 var eLvW, elvH, eLtop, eLleft, eLright, eLbottom;
    292 
    293                 var defaultExpand, preloadExpand, hFac;
     291                var eLvW, elvH, eLtop, eLleft, eLright, eLbottom, isBodyHidden;
    294292
    295293                var regImg = /^img$/i;
     
    306304                var resetPreloading = function(e){
    307305                        isLoading--;
    308                         if(e && e.target){
    309                                 addRemoveLoadEvents(e.target, resetPreloading);
    310                         }
    311 
    312306                        if(!e || isLoading < 0 || !e.target){
    313307                                isLoading = 0;
    314308                        }
     309                };
     310
     311                var isVisible = function (elem) {
     312                        if (isBodyHidden == null) {
     313                                isBodyHidden = getCSS(document.body, 'visibility') == 'hidden';
     314                        }
     315
     316                        return isBodyHidden || (getCSS(elem.parentNode, 'visibility') != 'hidden' && getCSS(elem, 'visibility') != 'hidden');
    315317                };
    316318
     
    318320                        var outerRect;
    319321                        var parent = elem;
    320                         var visible = getCSS(document.body, 'visibility') == 'hidden' || (getCSS(elem.parentNode, 'visibility') != 'hidden' && getCSS(elem, 'visibility') != 'hidden');
     322                        var visible = isVisible(elem);
    321323
    322324                        eLtop -= elemExpand;
     
    342344
    343345                var checkElements = function() {
    344                         var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal, beforeExpandVal;
    345 
     346                        var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal,
     347                                beforeExpandVal, defaultExpand, preloadExpand, hFac;
    346348                        var lazyloadElems = lazysizes.elements;
    347349
     
    352354                                lowRuns++;
    353355
    354                                 if(preloadExpand == null){
    355                                         if(!('expand' in lazySizesConfig)){
    356                                                 lazySizesConfig.expand = docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370;
    357                                         }
    358 
    359                                         defaultExpand = lazySizesConfig.expand;
    360                                         preloadExpand = defaultExpand * lazySizesConfig.expFactor;
    361                                 }
     356                                defaultExpand = (!lazySizesConfig.expand || lazySizesConfig.expand < 1) ?
     357                                        docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370 :
     358                                        lazySizesConfig.expand;
     359
     360                                lazysizes._defEx = defaultExpand;
     361
     362                                preloadExpand = defaultExpand * lazySizesConfig.expFactor;
     363                                hFac = lazySizesConfig.hFac;
     364                                isBodyHidden = null;
    362365
    363366                                if(currentExpand < preloadExpand && isLoading < 1 && lowRuns > 2 && loadMode > 2 && !document.hidden){
     
    394397                                                (eLleft = rect.left) <= eLvW &&
    395398                                                (eLbottom || eLright || eLleft || eLtop) &&
    396                                                 (lazySizesConfig.loadHidden || getCSS(lazyloadElems[i], 'visibility') != 'hidden') &&
     399                                                (lazySizesConfig.loadHidden || isVisible(lazyloadElems[i])) &&
    397400                                                ((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){
    398401                                                unveilElement(lazyloadElems[i]);
     
    416419
    417420                var switchLoadingClass = function(e){
    418                         addClass(e.target, lazySizesConfig.loadedClass);
    419                         removeClass(e.target, lazySizesConfig.loadingClass);
    420                         addRemoveLoadEvents(e.target, rafSwitchLoadingClass);
    421                         triggerEvent(e.target, 'lazyloaded');
     421                        var elem = e.target;
     422
     423                        if (elem._lazyCache) {
     424                                delete elem._lazyCache;
     425                                return;
     426                        }
     427
     428                        resetPreloading(e);
     429                        addClass(elem, lazySizesConfig.loadedClass);
     430                        removeClass(elem, lazySizesConfig.loadingClass);
     431                        addRemoveLoadEvents(elem, rafSwitchLoadingClass);
     432                        triggerEvent(elem, 'lazyloaded');
    422433                };
    423434                var rafedSwitchLoadingClass = rAFIt(switchLoadingClass);
     
    473484                                event = {target: elem};
    474485
     486                                addClass(elem, lazySizesConfig.loadingClass);
     487
    475488                                if(firesLoad){
    476                                         addRemoveLoadEvents(elem, resetPreloading, true);
    477489                                        clearTimeout(resetPreloadingTimer);
    478490                                        resetPreloadingTimer = setTimeout(resetPreloading, 2500);
    479 
    480                                         addClass(elem, lazySizesConfig.loadingClass);
    481491                                        addRemoveLoadEvents(elem, rafSwitchLoadingClass, true);
    482492                                }
     
    507517
    508518                        rAF(function(){
     519                                // Part of this can be removed as soon as this fix is older: https://bugs.chromium.org/p/chromium/issues/detail?id=7731 (2015)
    509520                                if( !firesLoad || (elem.complete && elem.naturalWidth > 1)){
    510                                         if(firesLoad){
    511                                                 resetPreloading(event);
    512                                         } else {
    513                                                 isLoading--;
    514                                         }
    515521                                        switchLoadingClass(event);
     522                                        elem._lazyCache = true;
     523                                        setTimeout(function(){
     524                                                if ('_lazyCache' in elem) {
     525                                                        delete elem._lazyCache;
     526                                                }
     527                                        }, 9);
    516528                                }
    517529                        }, true);
     
    572584                                lazysizes.elements = document.getElementsByClassName(lazySizesConfig.lazyClass);
    573585                                preloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass + ' ' + lazySizesConfig.preloadClass);
    574                                 hFac = lazySizesConfig.hFac;
    575586
    576587                                addEventListener('scroll', throttledCheckElements, true);
Note: See TracChangeset for help on using the changeset viewer.