diff --git a/CHANGELOG.txt b/CHANGELOG.txt index d09ca07..46de053 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -1,6 +1,10 @@ Slick 7.x-2.0-dev, 2015-8-7 --------------------------- +- Simplified slick.colorbox.css to use "colorbox-on--media" rather than + separte "colorbox-on--audio" + "colorbox-on--video" for the video/audio + colorbox body classes. +- #2546614 by stefan.korn: Colorbox integration iframe width? - Removed 'slick-nav' classes since 'slick-arrow' was added at v1.5.6. If you use 'slick-nav', be sure to update it to 'slick-arrow'. - Removed useless 'respondTo' option from responsive since it is always ignored/ diff --git a/css/components/slick.colorbox.css b/css/components/slick.colorbox.css index e95cab4..d132981 100644 --- a/css/components/slick.colorbox.css +++ b/css/components/slick.colorbox.css @@ -3,48 +3,36 @@ * Provides colorbox integration. */ -.colorbox-on--video #colorbox, -.colorbox-on--video #colorbox * { +.colorbox-on--media #colorbox, +.colorbox-on--media #colorbox * { box-sizing: border-box; max-width: 100%; } -.colorbox-on--video #cboxBottomCenter, -.colorbox-on--video #cboxBottomRight, -.colorbox-on--video #cboxBottomLeft, -.colorbox-on--video #cboxTopCenter, -.colorbox-on--video #cboxTopRight, -.colorbox-on--video #cboxTopLeft, -.colorbox-on--video #cboxMiddleLeft, -.colorbox-on--video #cboxMiddleRight, -.colorbox-on--audio #cboxBottomCenter, -.colorbox-on--audio #cboxBottomRight, -.colorbox-on--audio #cboxBottomLeft, -.colorbox-on--audio #cboxTopCenter, -.colorbox-on--audio #cboxTopRight, -.colorbox-on--audio #cboxTopLeft, -.colorbox-on--audio #cboxMiddleLeft, -.colorbox-on--audio #cboxMiddleRight { +.colorbox-on--media #cboxBottomCenter, +.colorbox-on--media #cboxBottomRight, +.colorbox-on--media #cboxBottomLeft, +.colorbox-on--media #cboxTopCenter, +.colorbox-on--media #cboxTopRight, +.colorbox-on--media #cboxTopLeft, +.colorbox-on--media #cboxMiddleLeft, +.colorbox-on--media #cboxMiddleRight { display: none !important; } -.colorbox-on--video #cboxWrapper, -.colorbox-on--video #cboxContent, -.colorbox-on--audio #cboxWrapper, -.colorbox-on--audio #cboxContent { +.colorbox-on--media #cboxWrapper, +.colorbox-on--media #cboxContent { background: none; border-radius: 0; } -.colorbox-on--video #cboxContent, -.colorbox-on--video #cboxLoadedContent, -.colorbox-on--audio #cboxContent, -.colorbox-on--audio #cboxLoadedContent { +.colorbox-on--media #cboxWrapper, +.colorbox-on--media #cboxContent, +.colorbox-on--media #cboxLoadedContent { overflow: visible !important; } -.colorbox-on--video #cboxLoadedContent .cboxIframe, -.colorbox-on--audio #cboxLoadedContent .cboxIframe { +.colorbox-on--media #cboxLoadedContent .cboxIframe { background-clip: padding-box; border-radius: 0; border: 8px solid #37465b; diff --git a/js/slick.colorbox.js b/js/slick.colorbox.js index d2f59e2..616c638 100644 --- a/js/slick.colorbox.js +++ b/js/slick.colorbox.js @@ -28,7 +28,8 @@ // Including slick-cloned. var $slickColorbox = $(".slick__slide .slick__colorbox", context); - $slickColorbox.once("slick-colorbox", function () { + $(".slick__slide .slick__colorbox", context) + .once("slick-colorbox", function () { var t = $(this), id = t.closest(".slick").attr("id"), isSlick = $("#" + id).length, @@ -43,18 +44,23 @@ onOpen: function () { $body.addClass("colorbox-on colorbox-on--" + media.type); $body.data("mediaHeight", ""); + $body.data("mediaWidth", ""); if (isSlick) { $slider.slick("slickPause"); } }, onLoad: function () { + Drupal.slickColorbox.removeClasses(); + // Rebuild media data based on the current active box. - media = $(this).data("media"); - if (media.type !== "image") { + if (isMedia) { $body.data("mediaHeight", media.height); + $body.data("mediaWidth", media.width); + $body.addClass("colorbox-on--media"); + } else { + $body.removeClass("colorbox-on--media"); } - Drupal.slickColorbox.removeClasses(); $body.addClass("colorbox-on colorbox-on--" + media.type); // Remove these lines to disable slider scrolling under colorbox. @@ -76,12 +82,15 @@ if (media.type !== "image") { Drupal.slickColorbox.resize(context, Drupal.settings); } + // Overrides colorbox_style.js when Plain style enabled. + $('#cboxPrevious, #cboxNext', context).removeClass('element-invisible'); }, onClosed: function () { // 120 offset is to play safe for possible fixed header. Drupal.slickColorbox.jumpScroll("#" + id, 120); Drupal.slickColorbox.removeClasses(); $body.data("mediaHeight", ""); + $body.data("mediaWidth", ""); } }; @@ -99,7 +108,9 @@ }; Drupal.slickColorbox.removeClasses = function () { - $("body").removeClass("colorbox-on colorbox-on--image colorbox-on--video colorbox-on--audio"); + $("body").removeClass(function (index, css) { + return (css.match(/(^|\s)colorbox-\S+/g) || []).join(' '); + }); }; Drupal.slickColorbox.jumpScroll = function (id, o) { @@ -110,39 +121,36 @@ } }; - // Colorbox has no responsive support so far. + // Colorbox has no responsive support so far, drop them all when it does. Drupal.slickColorbox.resize = function (context, settings) { if (cboxResizeTimer) { clearTimeout(cboxResizeTimer); } - var mw = settings.colorbox.maxWidth, - mh = settings.colorbox.maxHeight, + var mw = $('body').data("mediaWidth") || settings.colorbox.maxWidth, + mh = $('body').data("mediaHeight") || settings.colorbox.maxHeight, o = { - width: "98%", - height: "98%", + width: settings.colorbox.maxWidth || "98%", + height: settings.colorbox.maxHeight || "98%", maxWidth: mw.indexOf("px") > 0 ? parseInt(mw) : mw, maxHeight: mh.indexOf("px") > 0 ? parseInt(mh) : mh }; cboxResizeTimer = setTimeout(function () { if ($("#cboxOverlay").is(":visible")) { - var $container = $("#cboxLoadedContent"), - $content = $("> img, > iframe, > .node", $container); + var $container = $("#cboxLoadedContent"); + + if ($(".cboxIframe").length) { + $container.addClass("media"); + $(".cboxIframe", $container).attr("width", o.maxWidth).attr("height", o.maxHeight); + } else { + $container.removeClass("media"); + } $.colorbox.resize({ - width: window.innerWidth > o.maxWidth ? o.maxWidth : o.width + innerWidth: o.maxWidth, + innerHeight: o.maxHeight }); - - $content.css({ - width: $container.innerWidth(), - height: $("body").data("mediaHeight") !== "undefined" ? $("body") - .data("mediaHeight") : "auto" - }); - - $container.height($content.height()); - - $.colorbox.resize(); } }, 0); }; diff --git a/js/slick.colorbox.min.js b/js/slick.colorbox.min.js index ae783f1..e73d44e 100644 --- a/js/slick.colorbox.min.js +++ b/js/slick.colorbox.min.js @@ -3,4 +3,4 @@ * Provides Colorbox integration for Image and Media fields. */ -!function(o,i,e){"use strict";i.slickColorbox=i.slickColorbox||{};var t,l=o(e);i.behaviors.slickColorbox={attach:function(t,s){if(o.isFunction(o.colorbox)){if(s.colorbox.mobiledetect&&e.matchMedia){var c=s.colorbox.mobiledevicewidth,a=e.matchMedia("(max-device-width: "+c+")");if(a.matches)return}var n=o(".slick__slide .slick__colorbox",t);n.once("slick-colorbox",function(){var e,l=o(this),c=l.closest(".slick").attr("id"),a=o("#"+c).length,n=o("body"),r=l.data("media")||{},d=l.closest(".slick__slider","#"+c+".slick"),x="image"!==r.type?!0:!1,b={iframe:x,rel:r.rel||null,onOpen:function(){n.addClass("colorbox-on colorbox-on--"+r.type),n.data("mediaHeight",""),a&&d.slick("slickPause")},onLoad:function(){if(r=o(this).data("media"),"image"!==r.type&&n.data("mediaHeight",r.height),i.slickColorbox.removeClasses(),n.addClass("colorbox-on colorbox-on--"+r.type),a){if(e=parseInt(l.closest(".slick__slide:not(.slick-cloned)").data("slickIndex")),d.parent().next(".slick").length){var t=d.parent().next(".slick").find(".slick__slider");t.slick("slickGoTo",e)}d.slick("slickGoTo",e)}},onCleanup:function(){i.slickColorbox.removeClasses()},onComplete:function(){"image"!==r.type&&i.slickColorbox.resize(t,i.settings)},onClosed:function(){i.slickColorbox.jumpScroll("#"+c,120),i.slickColorbox.removeClasses(),n.data("mediaHeight","")}};l.colorbox(o.extend({},s.colorbox,b))}),l.bind("resize",function(){i.slickColorbox.resize(t,i.settings)}),o(t).bind("cbox_complete",function(){i.attachBehaviors("#cboxLoadedContent")})}}},i.slickColorbox.removeClasses=function(){o("body").removeClass("colorbox-on colorbox-on--image colorbox-on--video colorbox-on--audio")},i.slickColorbox.jumpScroll=function(i,e){o(i).length&&o("html, body").stop().animate({scrollTop:o(i).offset().top-e},800)},i.slickColorbox.resize=function(i,l){t&&clearTimeout(t);var s=l.colorbox.maxWidth,c=l.colorbox.maxHeight,a={width:"98%",height:"98%",maxWidth:s.indexOf("px")>0?parseInt(s):s,maxHeight:c.indexOf("px")>0?parseInt(c):c};t=setTimeout(function(){if(o("#cboxOverlay").is(":visible")){var i=o("#cboxLoadedContent"),t=o("> img, > iframe, > .node",i);o.colorbox.resize({width:e.innerWidth>a.maxWidth?a.maxWidth:a.width}),t.css({width:i.innerWidth(),height:"undefined"!==o("body").data("mediaHeight")?o("body").data("mediaHeight"):"auto"}),i.height(t.height()),o.colorbox.resize()}},0)}}(jQuery,Drupal,this); +!function(o,i,e){"use strict";i.slickColorbox=i.slickColorbox||{};var t,l=o(e);i.behaviors.slickColorbox={attach:function(t,s){if(o.isFunction(o.colorbox)){if(s.colorbox.mobiledetect&&e.matchMedia){var a=s.colorbox.mobiledevicewidth,c=e.matchMedia("(max-device-width: "+a+")");if(c.matches)return}{o(".slick__slide .slick__colorbox",t)}o(".slick__slide .slick__colorbox",t).once("slick-colorbox",function(){var e,l=o(this),a=l.closest(".slick").attr("id"),c=o("#"+a).length,n=o("body"),r=l.data("media")||{},d=l.closest(".slick__slider","#"+a+".slick"),x="image"!==r.type?!0:!1,b={iframe:x,rel:r.rel||null,onOpen:function(){n.addClass("colorbox-on colorbox-on--"+r.type),n.data("mediaHeight",""),n.data("mediaWidth",""),c&&d.slick("slickPause")},onLoad:function(){if(i.slickColorbox.removeClasses(),x?(n.data("mediaHeight",r.height),n.data("mediaWidth",r.width),n.addClass("colorbox-on--media")):n.removeClass("colorbox-on--media"),n.addClass("colorbox-on colorbox-on--"+r.type),c){if(e=parseInt(l.closest(".slick__slide:not(.slick-cloned)").data("slickIndex")),d.parent().next(".slick").length){var o=d.parent().next(".slick").find(".slick__slider");o.slick("slickGoTo",e)}d.slick("slickGoTo",e)}},onCleanup:function(){i.slickColorbox.removeClasses()},onComplete:function(){"image"!==r.type&&i.slickColorbox.resize(t,i.settings),o("#cboxPrevious, #cboxNext",t).removeClass("element-invisible")},onClosed:function(){i.slickColorbox.jumpScroll("#"+a,120),i.slickColorbox.removeClasses(),n.data("mediaHeight",""),n.data("mediaWidth","")}};l.colorbox(o.extend({},s.colorbox,b))}),l.bind("resize",function(){i.slickColorbox.resize(t,i.settings)}),o(t).bind("cbox_complete",function(){i.attachBehaviors("#cboxLoadedContent")})}}},i.slickColorbox.removeClasses=function(){o("body").removeClass(function(o,i){return(i.match(/(^|\s)colorbox-\S+/g)||[]).join(" ")})},i.slickColorbox.jumpScroll=function(i,e){o(i).length&&o("html, body").stop().animate({scrollTop:o(i).offset().top-e},800)},i.slickColorbox.resize=function(i,e){t&&clearTimeout(t);var l=o("body").data("mediaWidth")||e.colorbox.maxWidth,s=o("body").data("mediaHeight")||e.colorbox.maxHeight,a={width:e.colorbox.maxWidth||"98%",height:e.colorbox.maxHeight||"98%",maxWidth:l.indexOf("px")>0?parseInt(l):l,maxHeight:s.indexOf("px")>0?parseInt(s):s};t=setTimeout(function(){if(o("#cboxOverlay").is(":visible")){var i=o("#cboxLoadedContent");o(".cboxIframe").length?(i.addClass("media"),o(".cboxIframe",i).attr("width",a.maxWidth).attr("height",a.maxHeight)):i.removeClass("media"),o.colorbox.resize({innerWidth:a.maxWidth,innerHeight:a.maxHeight})}},0)}}(jQuery,Drupal,this);