update dynamic images

dashboard-ui/thirdparty/jquery.unveil-custom.js

@@ -1,4 +1,73 @@
-/**
+(function ($) {
+
+    /**
+     * Copyright 2012, Digital Fusion
+     * Licensed under the MIT license.
+     * http://teamdf.com/jquery-plugins/license/
+     *
+     * @author Sam Sehnert
+     * @desc A small plugin that checks whether elements are within
+     *       the user visible viewport of a web browser.
+     *       only accounts for vertical position, not horizontal.
+     */
+    var $w = $(window);
+    $.fn.visibleInViewport = function (partial, hidden, direction, threshold) {
+
+        if (this.length < 1)
+            return;
+
+        var $t = this.length > 1 ? this.eq(0) : this,
+            t = $t.get(0),
+            vpWidth = $w.width(),
+            vpHeight = $w.height(),
+            direction = (direction) ? direction : 'both',
+            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
+
+        if (typeof t.getBoundingClientRect === 'function') {
+
+            // Use this native browser method, if available.
+            var rec = t.getBoundingClientRect(),
+                tViz = rec.top >= 0 && rec.top < vpHeight + threshold,
+                bViz = rec.bottom > 0 && rec.bottom <= vpHeight + threshold,
+                lViz = rec.left >= 0 && rec.left < vpWidth + threshold,
+                rViz = rec.right > 0 && rec.right <= vpWidth + threshold,
+                vVisible = partial ? tViz || bViz : tViz && bViz,
+                hVisible = partial ? lViz || rViz : lViz && rViz;
+
+            if (direction === 'both')
+                return clientSize && vVisible && hVisible;
+            else if (direction === 'vertical')
+                return clientSize && vVisible;
+            else if (direction === 'horizontal')
+                return clientSize && hVisible;
+        } else {
+
+            var viewTop = $w.scrollTop(),
+                viewBottom = viewTop + vpHeight,
+                viewLeft = $w.scrollLeft(),
+                viewRight = viewLeft + vpWidth,
+                offset = $t.offset(),
+                _top = offset.top,
+                _bottom = _top + $t.height(),
+                _left = offset.left,
+                _right = _left + $t.width(),
+                compareTop = partial === true ? _bottom : _top,
+                compareBottom = partial === true ? _top : _bottom,
+                compareLeft = partial === true ? _right : _left,
+                compareRight = partial === true ? _left : _right;
+
+            if (direction === 'both')
+                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
+            else if (direction === 'vertical')
+                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
+            else if (direction === 'horizontal')
+                return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
+        }
+    };
+
+})(jQuery);
+
+/**
  * jQuery Unveil
  * A very lightweight jQuery plugin to lazy load images
  * http://luis-almeida.github.com/unveil
@@ -12,7 +81,6 @@
 
     var unveilId = 0;
 
-
     function getThreshold() {
 
         // If less than 100, the search window ends up not getting images
@@ -29,38 +97,34 @@
         return Math.max(screen.availHeight * screens, 1000);
     }
 
+    var threshold = getThreshold();
+
+    function isVisible() {
+        return $(this).visibleInViewport(true, false, 'both', threshold);
+    }
+
+    function fillImage() {
+        var elem = this;
+        var source = elem.getAttribute('data-src');
+        if (source) {
+            ImageStore.setImageInto(elem, source);
+            elem.setAttribute("data-src", '');
+        }
+    }
+
     $.fn.unveil = function () {
 
         var $w = $(window),
-            th = getThreshold(),
-            attrib = "data-src",
             images = this,
             loaded;
 
         unveilId++;
         var eventNamespace = 'unveil' + unveilId;
 
-        this.one("unveil", function () {
-            var elem = this;
-            var source = elem.getAttribute(attrib);
-            if (source) {
-                ImageStore.setImageInto(elem, source);
-                elem.setAttribute("data-src", '');
-            }
-        });
+        this.one("unveil", fillImage);
 
         function unveil() {
-            var inview = images.filter(function () {
-                var $e = $(this);
-
-                if ($e.is(":hidden")) return;
-                var wt = $w.scrollTop(),
-                    wb = wt + $w.height(),
-                    et = $e.offset().top,
-                    eb = et + $e.height();
-
-                return eb >= wt - th && et <= wb + th;
-            });
+            var inview = images.filter(isVisible);
 
             loaded = inview.trigger("unveil");
             images = images.not(loaded);
@@ -80,6 +144,11 @@
 
     };
 
+    $.fn.fillImages = function () {
+
+        return this.each(fillImage);
+    };
+
     $.fn.lazyChildren = function () {
 
         var lazyItems = $(".lazy", this);
@@ -93,7 +162,7 @@
 
     $.fn.lazyImage = function (url) {
 
-        return this.attr('data-src', url).unveil();
+        return this.attr('data-src', url).fillImages();
     };
 
 })(window.jQuery || window.Zepto);