Merge branch 'feature/optimize_thumbnails' into development

Conflicts:
	mayan/apps/main/templates/base.html

mayan/apps/documents/widgets.py

@@ -119,7 +119,7 @@ def document_html_widget(document, click_view=None, page=DEFAULT_PAGE_NUMBER, zo
     if nolazyload:
         result.append(u'<img style="border: 1px solid black;" src="%s" alt="%s" />' % (preview_view, alt_text))
     else:
-        result.append(u'<img class="thin_border %s" data-original="%s" src="%simages/ajax-loader.gif" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
+        result.append(u'<img class="thin_border %s" data-src="%s" src="%simages/ajax-loader.gif" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
         result.append(u'<noscript><img style="border: 1px solid black;" src="%s" alt="%s" /></noscript>' % (preview_view, alt_text))
 
     if click_view:

mayan/apps/main/static/packages/jquery.scrollstop.js

@@ -0,0 +1,72 @@
+/* http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ */
+
+(function(){
+    
+    var special = jQuery.event.special,
+        uid1 = "D" + (+new Date()),
+        uid2 = "D" + (+new Date() + 1);
+        
+    special.scrollstart = {
+        setup: function() {
+            
+            var timer,
+                handler =  function(evt) {
+                    
+                    var _self = this,
+                        _args = arguments;
+                    
+                    if (timer) {
+                        clearTimeout(timer);
+                    } else {
+                        evt.type = "scrollstart";
+                        jQuery.event.dispatch.apply(_self, _args);
+                    }
+                    
+                    timer = setTimeout( function(){
+                        timer = null;
+                    }, special.scrollstop.latency);
+                    
+                };
+            
+            jQuery(this).bind("scroll", handler).data(uid1, handler);
+            
+        },
+        teardown: function(){
+            jQuery(this).unbind( "scroll", jQuery(this).data(uid1) );
+        }
+    };
+    
+    special.scrollstop = {
+        latency: 300,
+        setup: function() {
+            
+            var timer,
+                    handler = function(evt) {
+                    
+                    var _self = this,
+                        _args = arguments;
+                    
+                    if (timer) {
+                        clearTimeout(timer);
+                    }
+                    
+                    timer = setTimeout( function(){
+                        
+                        timer = null;
+                        evt.type = "scrollstop";
+                        jQuery.event.dispatch.apply(_self, _args);
+                        
+                        
+                    }, special.scrollstop.latency);
+                    
+                };
+            
+            jQuery(this).bind("scroll", handler).data(uid2, handler);
+            
+        },
+        teardown: function() {
+            jQuery(this).unbind( "scroll", jQuery(this).data(uid2) );
+        }
+    };
+    
+})();

mayan/apps/main/templates/main/base.html

@@ -399,6 +399,7 @@
 
         <script type="text/javascript" src="{% static 'packages/jquery.scrollview.js' %}"></script>
         <script type="text/javascript" src="{% static 'packages/jquery_lazyload-master/jquery.lazyload.min.js' %}"></script>
+        <script type="text/javascript" src="{% static 'packages/jquery.scrollstop.js' %}"></script>
         <script type="text/javascript" src="{% static 'packages/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js' %}"></script>
         <script type="text/javascript" src="{% static 'packages/fancyapps-fancyBox-18d1712/lib/jquery.mousewheel-3.0.6.pack.js' %}"></script>
 
@@ -494,10 +495,8 @@
                     container.html(html);
                 }
 
-                function load_document_image(image_tag) {
+                function load_document_image(image) {
-                    var image = image_tag;
+                    $.get( image.attr('data-src'), function( result ) {
-                    var container = image.parent();
-                    $.get( image.attr('data-original'), function( result ) {
                         if (result.status == 'success') {
                             image.attr('src', result.data);
                         } else if (result.detail == 'unknown_file_format') {
@@ -518,17 +517,16 @@
                     appear: function(elements_left, settings) {
                         load_document_image($(this));
                     },
-                    load: function(elements_left, settings) {
-                        console.log(this, elements_left, settings);
-                    }
                 });
 
                 $('img.lazy-load-carousel').lazyload({
                     container: $(".carousel-container"),
-
                     appear: function(elements_left, settings) {
-                        load_document_image($(this));
+                        var $this = $(this);
-                    }
+                        $this.removeClass('lazy-load-carousel');
+                        load_document_image($this);
+                    },
+                    event: 'scrollstop'
                 });
 
                 $('img.lazy-load-interactive').lazyload({

mayan/apps/sources/widgets.py

@@ -75,7 +75,7 @@ def staging_file_html_widget(staging_file, click_view=None, page=DEFAULT_PAGE_NU
     if nolazyload:
         result.append(u'<img style="border: 1px solid black;" src="%s" alt="%s" />' % (preview_view, alt_text))
     else:
-        result.append(u'<img class="thin_border %s" data-original="%s" src="%simages/ajax-loader.gif" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
+        result.append(u'<img class="thin_border %s" data-src="%s" src="%simages/ajax-loader.gif" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
         result.append(u'<noscript><img style="border: 1px solid black;" src="%s" alt="%s" /></noscript>' % (preview_view, alt_text))
 
     if click_view: