From 0f90334b7af847a41cb835cfd1b0625ea10eb242 Mon Sep 17 00:00:00 2001 From: Benjamin Kott Date: Mon, 27 Apr 2015 22:35:52 +0200 Subject: [PATCH] [TASK] Refactor jquery.responsiveimages.js --- .../Libs/jquery.responsiveimages.js | 191 ++++++++++-------- .../Libs/jquery.responsiveimages.min.js | 2 +- Resources/Public/JavaScript/main.js | 7 - Resources/Public/JavaScript/main.min.js | 25 +-- 4 files changed, 112 insertions(+), 113 deletions(-) diff --git a/Resources/Public/JavaScript/Libs/jquery.responsiveimages.js b/Resources/Public/JavaScript/Libs/jquery.responsiveimages.js index 346503d20..d3106b083 100644 --- a/Resources/Public/JavaScript/Libs/jquery.responsiveimages.js +++ b/Resources/Public/JavaScript/Libs/jquery.responsiveimages.js @@ -1,95 +1,124 @@ -/** +/* ======================================================================== * This is a adjusted version of Luís Almeida jQuery Unveil Script * http://luis-almeida.github.com/unveil - */ - -; -(function ($) { - - // RESPONSIVEIMAGES PLUGIN DEFINITION - // ================================= - $.fn.responsiveimages = function (options, callback) { - - var defaults = { - threshold: 0, - breakpoints: { - 320: 'small', - 720: 'medium', - 940: 'large', - 1140: 'bigger' - }, - container:window, - skip_invisible: true - }, - options = $.extend({}, defaults, options), - $window = $(window), - breakpoints = options.breakpoints, - attrib = "data-src", - images = this, - originimages = this, - loaded; - - this.on("responsiveimages", function () { - var source = this.getAttribute(attrib); - source = source || this.getAttribute("data-src"); - if (source) { - this.setAttribute("src", source); - if (typeof callback === "function") callback.call(this); + * ======================================================================== */ + ++function($) { + + // RESPONSIVE IMAGES CLASS DEFINITION + // ================================== + var ResponsiveImage = function(element, options) { + this.$element = $(element); + this.options = $.extend({}, ResponsiveImage.DEFAULTS, options); + this.attrib = "data-src"; + this.$container = $(this.options.container) + .on('scroll.bk2k.responsiveimage', $.proxy(this.checkviewport, this)) + .on('resize.bk2k.responsiveimage', $.proxy(this.checkviewport, this)); + this.checkviewport(); + }; + + ResponsiveImage.DEFAULTS = { + threshold: 0, + breakpoints: { + 0: 'small', + 768: 'medium', + 992: 'large', + 1200: 'bigger' + }, + attrib: "data-src", + container: window, + skip_invisible: true + }; + + ResponsiveImage.prototype.checkviewport = function() { + var containerWidth = this.$container.width(); + var attrib = this.attrib; + var old_attrib = this.attrib; + $.each(this.options.breakpoints, function (breakpoint, datakey) { + if (containerWidth >= breakpoint) { + attrib = "data-" + datakey; } }); + if (old_attrib !== attrib) { + this.attrib = attrib; + } + this.unveil(); + }; - function checkviewport() { - old_attrib = attrib; - var ww = $window.width(); - $.each(breakpoints, function (breakpoint, datakey) { - if (ww >= breakpoint) { - attrib = "data-" + datakey; - } - }); - if (old_attrib !== attrib) { - images = originimages; - } - responsiveimages(); + ResponsiveImage.prototype.inviewport = function() { + var elementWidth = this.$element.width(), + elementHeight = this.$element.height(), + elementLeft = this.$element.offset().left, + elementTop = this.$element.offset().top, + containerWidth = this.$container.width(), + containerHeight, + containerLeft, + containerTop; + if (this.options.container === undefined || this.options.container === window){ + containerHeight = $(window).innerHeight() ? $(window).innerHeight() : $(window).height(); + containerLeft = $(window).scrollLeft(); + containerTop = $(window).scrollTop(); + } else { + containerHeight = this.$container.height(); + containerLeft = this.$container.offset().left; + containerTop = this.$container.offset().top; } - function inviewport($el, options){ - var $c = $(options.container), - ew = $el.width(), - eh = $el.height(), - el = $el.offset().left, - et = $el.offset().top, - cw = $c.width(), - ch, - cl, - ct; - if (options.container === undefined || options.container === window){ - ch = window.innerHeight ? window.innerHeight : $window.height(); - cl = $window.scrollLeft(); - ct = $window.scrollTop(); - } else { - ch = $c.height(); - cl = $c.offset().left; - ct = $c.offset().top; + return containerLeft + containerWidth > elementLeft - this.options.threshold + && containerLeft < elementLeft + elementWidth + this.options.threshold + && containerTop + containerHeight > elementTop - this.options.threshold + && containerTop < elementTop + elementHeight + this.options.threshold; + }; + + ResponsiveImage.prototype.unveil = function() { + if (this.options.skip_invisible && this.$element.is(":hidden")) return; + var inview = this.inviewport(); + if(inview){ + var source = this.$element.attr(this.attrib); + source = source || this.$element.attr("data-src"); + if (source) { + this.$element.attr("src", source); + this.$element.css("opacity", 1); } - return cl + cw > el - options.threshold && cl < el + ew + options.threshold && ct + ch > et - options.threshold && ct < et + eh + options.threshold; } + }; - function responsiveimages() { - var inview = images.filter(function () { - var $element = $(this); - if (options.skip_invisible && $element.is(":hidden")) return; - return inviewport($element, options); - }); - loaded = inview.trigger("responsiveimages"); - images = images.not(loaded); - } - $(options.container).scroll(checkviewport); - $window.resize(checkviewport); - $.fn.responsiveimages.update = checkviewport; - checkviewport(); + // RESPONSIVE IMAGES PLUGIN DEFINITION + // =================================== + function Plugin(option) { + return this.each(function() { + var $this = $(this); + var data = $this.data('bk2k.responsiveimage'); + var options = typeof option === 'object' && option; - return this; + if (!data) $this.data('bk2k.responsiveimage', (data = new ResponsiveImage(this, options))); + if (typeof option === 'string') data[option](); + }); + }; + + var old = $.fn.responsiveimages; + + $.fn.responsiveimage = Plugin; + $.fn.responsiveimage.Constructor = ResponsiveImage; + + // RESPONSIVE IMAGES NO CONFLICT + // ============================= + $.fn.responsiveimage.noConflict = function() { + $.fn.responsiveimage = old; + return this; }; -})(window.jQuery); + + // RESPONSIVE IMAGES API + // ===================== + $(window).on('load', function() { + $('img.lazyload').each(function() { + var $image = $(this); + var data = $image.data(); + + Plugin.call($image, data); + }); + }); + +}(jQuery); diff --git a/Resources/Public/JavaScript/Libs/jquery.responsiveimages.min.js b/Resources/Public/JavaScript/Libs/jquery.responsiveimages.min.js index ebd03528c..49af6caff 100644 --- a/Resources/Public/JavaScript/Libs/jquery.responsiveimages.min.js +++ b/Resources/Public/JavaScript/Libs/jquery.responsiveimages.min.js @@ -1 +1 @@ -!function(t){t.fn.responsiveimages=function(i,e){function n(){old_attrib=f;var i=a.width();t.each(d,function(t,e){i>=t&&(f="data-"+e)}),old_attrib!==f&&(l=c),o()}function r(i,e){var n,r,o,s=t(e.container),h=i.width(),d=i.height(),f=i.offset().left,l=i.offset().top,c=s.width();return void 0===e.container||e.container===window?(n=window.innerHeight?window.innerHeight:a.height(),r=a.scrollLeft(),o=a.scrollTop()):(n=s.height(),r=s.offset().left,o=s.offset().top),r+c>f-e.threshold&&rl-e.threshold&&o=t&&(e="data-"+n)}),n!==e&&(this.attrib=e),this.unveil()},e.prototype.inviewport=function(){var i,e,n,o=this.$element.width(),s=this.$element.height(),r=this.$element.offset().left,h=this.$element.offset().top,a=this.$container.width();return void 0===this.options.container||this.options.container===window?(i=t(window).innerHeight()?t(window).innerHeight():t(window).height(),e=t(window).scrollLeft(),n=t(window).scrollTop()):(i=this.$container.height(),e=this.$container.offset().left,n=this.$container.offset().top),e+a>r-this.options.threshold&&eh-this.options.threshold&&n 0) { - var a = " "; - $("body").append(a), $(".lightbox").click(function (a) { - a.preventDefault(); - var o = $("#lightbox"), i = o.find(".modal-body"), l = o.find(".modal-dialog"); - i.empty(), i.append(''); - var n = $(this).attr("href"), t = '', d = new Image; - d.onload = function () { - l.width(d.width), l.css({"max-width": "95%"}) - }, d.src = n, i.append(t); - var s = $(this).attr("title"), e = $(this).parent().find(".caption").html(); - (s || e) && (i.append('
'), s && i.find(".modal-caption").append('' + s + ""), e && i.find(".modal-caption").append(e)), $("#lightbox").modal({show: !0}) - }) - } -}); +$(function(){if($(".navbar-collapse").on("show.bs.collapse",function(){toggleIcon=$(".navbar-toggle-menu .glyphicon"),toggleIcon.addClass("glyphicon-remove").removeClass("glyphicon-list")}),$(".navbar-collapse").on("hide.bs.collapse",function(){toggleIcon=$(".navbar-toggle-menu .glyphicon"),toggleIcon.removeClass("glyphicon-remove").addClass("glyphicon-list")}),$("a.lightbox").length>0){var a=" ";$("body").append(a),$(".lightbox").click(function(a){a.preventDefault();var o=$("#lightbox"),i=o.find(".modal-body"),l=o.find(".modal-dialog");i.empty(),i.append('');var n=$(this).attr("href"),d='',t=new Image;t.onload=function(){l.width(t.width),l.css({"max-width":"95%"})},t.src=n,i.append(d);var e=$(this).attr("title"),s=$(this).parent().find(".caption").html();(e||s)&&(i.append('
'),e&&i.find(".modal-caption").append(''+e+""),s&&i.find(".modal-caption").append(s)),$("#lightbox").modal({show:!0})})}});