X-Git-Url: http://aleph1.co.uk/gitweb/?a=blobdiff_plain;f=web%2Fmodules%2Fcontrib%2Fblazy%2Fjs%2Fblazy.colorbox.js;fp=web%2Fmodules%2Fcontrib%2Fblazy%2Fjs%2Fblazy.colorbox.js;h=e994b9e8cad37aad107dabe83c99c67a9044c1da;hb=a2bd1bf0c2c1f1a17d188f4dc0726a45494cefae;hp=0000000000000000000000000000000000000000;hpb=57c063afa3f66b07c4bbddc2d6129a96d90f0aad;p=yaffs-website diff --git a/web/modules/contrib/blazy/js/blazy.colorbox.js b/web/modules/contrib/blazy/js/blazy.colorbox.js new file mode 100644 index 000000000..e994b9e8c --- /dev/null +++ b/web/modules/contrib/blazy/js/blazy.colorbox.js @@ -0,0 +1,110 @@ +/** + * @file + */ + +(function ($, Drupal, drupalSettings, window) { + + 'use strict'; + + var cboxTimer; + var $body = $('body'); + + /** + * Blazy Colorbox utility functions. + * + * @param {int} i + * The index of the current element. + * @param {HTMLElement} box + * The colorbox HTML element. + */ + function blazyColorbox(i, box) { + var $box = $(box); + var media = $box.data('media') || {}; + var isMedia = media.type !== 'image' ? true : false; + var runtimeOptions = { + rel: media.rel || null, + iframe: isMedia, + title: function () { + var $caption = $box.next('.litebox-caption'); + return $caption.length ? $caption.html() : ''; + }, + onComplete: function () { + removeClasses(); + $body.addClass('colorbox-on colorbox-on--' + media.type); + + if (isMedia) { + resizeBox(); + $body.addClass('colorbox-on--media'); + } + }, + onClosed: function () { + removeClasses(); + } + }; + + /** + * Remove the custom colorbox classes. + */ + function removeClasses() { + $body.removeClass(function (index, css) { + return (css.match(/(^|\s)colorbox-\S+/g) || []).join(' '); + }); + } + + /** + * Resize the colorbox. + */ + function resizeBox() { + window.clearTimeout(cboxTimer); + + var o = { + width: media.width || drupalSettings.colorbox.maxWidth, + height: media.height || drupalSettings.colorbox.maxHeight + }; + + cboxTimer = window.setTimeout(function () { + if ($('#cboxOverlay').is(':visible')) { + var $container = $('#cboxLoadedContent'); + var $iframe = $('.cboxIframe', $container); + + if ($iframe.length) { + $container.addClass('media media--ratio'); + $iframe.attr('width', o.width).attr('height', o.height).addClass('media__element'); + $container.css({paddingBottom: (o.height / o.width) * 100 + '%', height: 0}); + + $.colorbox.resize({ + innerWidth: o.width, + innerHeight: o.height + }); + } + else { + $container.removeClass('media media--ratio'); + $container.css({paddingBottom: '', height: o.height}).removeClass('media__element'); + } + } + }, 10); + } + + $box.colorbox($.extend({}, drupalSettings.colorbox, runtimeOptions)); + } + + /** + * Attaches blazy colorbox behavior to HTML element. + * + * @type {Drupal~behavior} + */ + Drupal.behaviors.blazyColorbox = { + attach: function (context) { + if (drupalSettings.colorbox.mobiledetect && window.matchMedia) { + // Disable Colorbox for small screens. + var mq = window.matchMedia('(max-device-width: ' + drupalSettings.colorbox.mobiledevicewidth + ')'); + if (mq.matches) { + return; + } + } + + $('[data-colorbox-trigger]', context).once('blazy-colorbox').each(blazyColorbox); + } + }; + +})(jQuery, Drupal, drupalSettings, this);