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

   1 /**
   2  * @file
   3  */
   4
   5 (function ($, Drupal, drupalSettings, window) {
   6
   7   'use strict';
   8
   9   var cboxTimer;
  10   var $body = $('body');
  11
  12   /**
  13    * Blazy Colorbox utility functions.
  14    *
  15    * @param {int} i
  16    *   The index of the current element.
  17    * @param {HTMLElement} box
  18    *   The colorbox HTML element.
  19    */
  20   function blazyColorbox(i, box) {
  21     var $box = $(box);
  22     var media = $box.data('media') || {};
  23     var isMedia = media.type !== 'image' ? true : false;
  24     var runtimeOptions = {
  25       rel: media.rel || null,
  26       iframe: isMedia,
  27       title: function () {
  28         var $caption = $box.next('.litebox-caption');
  29         return $caption.length ? $caption.html() : '';
  30       },
  31       onComplete: function () {
  32         removeClasses();
  33         $body.addClass('colorbox-on colorbox-on--' + media.type);
  34
  35         if (isMedia) {
  36           resizeBox();
  37           $body.addClass('colorbox-on--media');
  38         }
  39       },
  40       onClosed: function () {
  41         removeClasses();
  42       }
  43     };
  44
  45     /**
  46      * Remove the custom colorbox classes.
  47      */
  48     function removeClasses() {
  49       $body.removeClass(function (index, css) {
  50         return (css.match(/(^|\s)colorbox-\S+/g) || []).join(' ');
  51       });
  52     }
  53
  54     /**
  55      * Resize the colorbox.
  56      */
  57     function resizeBox() {
  58       window.clearTimeout(cboxTimer);
  59
  60       var o = {
  61         width: media.width || drupalSettings.colorbox.maxWidth,
  62         height: media.height || drupalSettings.colorbox.maxHeight
  63       };
  64
  65       cboxTimer = window.setTimeout(function () {
  66         if ($('#cboxOverlay').is(':visible')) {
  67           var $container = $('#cboxLoadedContent');
  68           var $iframe = $('.cboxIframe', $container);
  69
  70           if ($iframe.length) {
  71             $container.addClass('media media--ratio');
  72             $iframe.attr('width', o.width).attr('height', o.height).addClass('media__element');
  73             $container.css({paddingBottom: (o.height / o.width) * 100 + '%', height: 0});
  74
  75             $.colorbox.resize({
  76               innerWidth: o.width,
  77               innerHeight: o.height
  78             });
  79           }
  80           else {
  81             $container.removeClass('media media--ratio');
  82             $container.css({paddingBottom: '', height: o.height}).removeClass('media__element');
  83           }
  84         }
  85       }, 10);
  86     }
  87
  88     $box.colorbox($.extend({}, drupalSettings.colorbox, runtimeOptions));
  89   }
  90
  91   /**
  92    * Attaches blazy colorbox behavior to HTML element.
  93    *
  94    * @type {Drupal~behavior}
  95    */
  96   Drupal.behaviors.blazyColorbox = {
  97     attach: function (context) {
  98       if (drupalSettings.colorbox.mobiledetect && window.matchMedia) {
  99         // Disable Colorbox for small screens.
 100         var mq = window.matchMedia('(max-device-width: ' + drupalSettings.colorbox.mobiledevicewidth + ')');
 101         if (mq.matches) {
 102           return;
 103         }
 104       }
 105
 106       $('[data-colorbox-trigger]', context).once('blazy-colorbox').each(blazyColorbox);
 107     }
 108   };
 109
 110 })(jQuery, Drupal, drupalSettings, this);