www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/blazy/js/blazy.load.js

   1 /**
   2  * @file
   3  * Provides bLazy loader.
   4  */
   5
   6 (function (Drupal, drupalSettings, _db, window, document) {
   7
   8   'use strict';
   9
  10   /**
  11    * Blazy public methods.
  12    *
  13    * @namespace
  14    */
  15   Drupal.blazy = Drupal.blazy || {
  16     init: null,
  17     windowWidth: 0,
  18     done: false,
  19     globals: function () {
  20       var me = this;
  21       var settings = drupalSettings.blazy || {};
  22       var commons = {
  23         success: me.clearing,
  24         error: me.clearing
  25       };
  26
  27       return _db.extend(settings, commons);
  28     },
  29
  30     clearing: function (el) {
  31       var ie = _db.hasClass(el, 'b-responsive') && el.hasAttribute('data-pfsrc');
  32
  33       // The .b-lazy element can be attached to IMG, or DIV as CSS background.
  34       el.className = el.className.replace(/(\S+)loading/, '');
  35
  36       // The .is-loading can be .grid, .slide__content, .box__content, etc.
  37       var loaders = [
  38         _db.closest(el, '.is-loading'),
  39         _db.closest(el, '[class*="loading"]')
  40       ];
  41
  42       // Also cleans up closest containers containing loading class.
  43       _db.forEach(loaders, function (wrapEl) {
  44         if (wrapEl !== null) {
  45           wrapEl.className = wrapEl.className.replace(/(\S+)loading/, '');
  46         }
  47       });
  48
  49       // @todo: Remove when Blazy library fixes this.
  50       // @see http://scottjehl.github.io/picturefill/
  51       if (window.picturefill && ie) {
  52         window.picturefill({
  53           reevaluate: true,
  54           elements: [el]
  55         });
  56       }
  57     }
  58   };
  59
  60   /**
  61    * Blazy utility functions.
  62    *
  63    * @param {HTMLElement} elm
  64    *   The Blazy HTML element.
  65    */
  66   function doBlazy(elm) {
  67     var me = Drupal.blazy;
  68     var dataAttr = elm.getAttribute('data-blazy');
  69     var empty = dataAttr === '' || dataAttr === '[]';
  70     var data = empty ? false : _db.parse(dataAttr);
  71     var opts = !data ? me.globals() : _db.extend({}, me.globals(), data);
  72     var ratios = elm.querySelectorAll('[data-dimensions]');
  73     var loopRatio = ratios.length > 0;
  74
  75     /**
  76      * Updates the dynamic multi-breakpoint aspect ratio.
  77      *
  78      * This only applies to multi-serving images with aspect ratio fluid if
  79      * each element contains [data-dimensions] attribute.
  80      * Static single aspect ratio, e.g. `media--ratio--169`, will be ignored,
  81      * and will use CSS instead.
  82      *
  83      * @param {HTMLElement} el
  84      *   The .media--ratio HTML element.
  85      */
  86     function updateRatio(el) {
  87       var dimensions = !el.getAttribute('data-dimensions') ? false : _db.parse(el.getAttribute('data-dimensions'));
  88
  89       if (!dimensions) {
  90         return;
  91       }
  92
  93       var keys = Object.keys(dimensions);
  94       var xs = keys[0];
  95       var xl = keys[keys.length - 1];
  96       var mw = function (w) {
  97         return w >= me.windowWidth;
  98       };
  99       var pad = keys.filter(mw).map(function (v) {
 100         return dimensions[v];
 101       }).shift();
 102
 103       if (pad === 'undefined') {
 104         pad = dimensions[me.windowWidth >= xl ? xl : xs];
 105       }
 106
 107       if (pad !== 'undefined') {
 108         el.style.paddingBottom = pad + '%';
 109       }
 110     }
 111
 112     // Initializes Blazy instance.
 113     me.init = new Blazy(opts);
 114
 115     // Reacts on resizing.
 116     if (!me.done) {
 117       me.init.revalidate();
 118
 119       _db.resize(function () {
 120         me.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 121
 122         if (loopRatio) {
 123           _db.forEach(ratios, updateRatio, elm);
 124         }
 125
 126         // Dispatch resizing event.
 127         _db.trigger(elm, 'resizing', {windowWidth: me.windowWidth});
 128       })();
 129
 130       me.done = true;
 131     }
 132
 133     elm.className += ' blazy--on';
 134   }
 135
 136   /**
 137    * Attaches blazy behavior to HTML element identified by [data-blazy].
 138    *
 139    * @type {Drupal~behavior}
 140    */
 141   Drupal.behaviors.blazy = {
 142     attach: function (context) {
 143       var me = Drupal.blazy;
 144       var el = context.querySelector('[data-blazy]');
 145
 146       // Runs basic Blazy if no [data-blazy] found, probably a single image.
 147       // Cannot use .contains(), as IE11 doesn't support method 'contains'.
 148       if (el === null) {
 149         me.init = new Blazy(me.globals());
 150         return;
 151       }
 152
 153       // Runs Blazy with multi-serving images, and aspect ratio supports.
 154       var blazies = context.querySelectorAll('.blazy:not(.blazy--on)');
 155       _db.once(_db.forEach(blazies, doBlazy));
 156     }
 157   };
 158
 159 }(Drupal, drupalSettings, dBlazy, this, this.document));