From 91ba06c50147d112e92300360137c262a68b84a1 Mon Sep 17 00:00:00 2001 From: Roberto Rosario Date: Fri, 7 Jul 2017 04:20:31 -0400 Subject: [PATCH] Remove animated spinners to lower browser memory usage and increase responsiveness. Render a document page place holder while the real document page loads. This change avoids "jumping" effect when loading many thumbnails. Increase lazy load thresholds. More thumbnails and document pages will be loaded and visible by default when a view loads. Signed-off-by: Roberto Rosario --- docs/releases/2.5.rst | 6 ++ .../appearance/static/appearance/js/base.js | 87 ++++++++++--------- mayan/apps/common/utils.py | 7 ++ mayan/apps/documents/widgets.py | 26 +++++- 4 files changed, 82 insertions(+), 44 deletions(-) diff --git a/docs/releases/2.5.rst b/docs/releases/2.5.rst index a408cd9cf9..1ae949b1a9 100644 --- a/docs/releases/2.5.rst +++ b/docs/releases/2.5.rst @@ -79,6 +79,12 @@ Other Changes - The trashed document deletion action is now a background task. This feature results is much faster trashed document deletion and trash can emptying. +- Remove animated spinners to lower browser memory usage and increase + responsiveness. +- Render a document page place holder while the real document page + loads. This change avoids "jumping" effect when loading many thumbnails. +- Increase lazy load thresholds. More thumbnails and document pages + will be loaded and visible by default when a view loads. Removals -------- diff --git a/mayan/apps/appearance/static/appearance/js/base.js b/mayan/apps/appearance/static/appearance/js/base.js index 52e5079c21..83ac822c96 100644 --- a/mayan/apps/appearance/static/appearance/js/base.js +++ b/mayan/apps/appearance/static/appearance/js/base.js @@ -58,10 +58,12 @@ App.prototype.setupSelect2 = function () { } App.prototype.setupFullHeightResizing = function () { + var self = this; + this.resizeFullHeight(); this.window.resize(function() { - app.resizeFullHeight(); + self.resizeFullHeight(); }); } @@ -69,45 +71,6 @@ App.prototype.resizeFullHeight = function () { $('.full-height').height(this.window.height() - $('.full-height').data('height-difference')); } -App.prototype.doMayanImages = function () { - $('a.fancybox').fancybox({ - beforeShow : function(){ - this.title = $(this.element).data('caption'); - }, - openEffect : 'elastic', - closeEffect : 'elastic', - prevEffect : 'none', - nextEffect : 'none', - titleShow : true, - type : 'image', - autoResize : true, - }); - - $('img.lazy-load').lazyload({ - appear: function(elements_left, settings) { - new MayanImage({element: $(this)}); - }, - }); - - $('img.lazy-load-carousel').lazyload({ - appear: function(elements_left, settings) { - new MayanImage({element: $(this)}); - }, - container: $('#carousel-container'), - threshold: 400 - }); - - $('.lazy-load').on('load', function() { - $(this).siblings('.spinner').remove(); - $(this).removeClass('lazy-load'); - }); - - $('.lazy-load-carousel').on('load', function() { - $(this).siblings('.spinner').remove(); - $(this).removeClass('lazy-load-carousel'); - }); -} - App.prototype.doToastrMessages = function () { toastr.options = { 'closeButton': true, @@ -165,11 +128,53 @@ App.prototype.doToastrMessages = function () { }); } +/* MayanImage class */ + var MayanImage = function (options) { this.element = options.element; this.load(); } +MayanImage.intialize = function () { + $('a.fancybox').fancybox({ + beforeShow : function(){ + this.title = $(this.element).data('caption'); + }, + openEffect : 'elastic', + closeEffect : 'elastic', + prevEffect : 'none', + nextEffect : 'none', + titleShow : true, + type : 'image', + autoResize : true, + }); + + $('img.lazy-load').lazyload({ + appear: function(elements_left, settings) { + new MayanImage({element: $(this)}); + }, + threshold: 400 + }); + + $('img.lazy-load-carousel').lazyload({ + appear: function(elements_left, settings) { + new MayanImage({element: $(this)}); + }, + container: $('#carousel-container'), + threshold: 2000 + }); + + $('.lazy-load').on('load', function() { + $(this).siblings('.spinner-container').remove(); + $(this).removeClass('lazy-load pull-left'); + }); + + $('.lazy-load-carousel').on('load', function() { + $(this).siblings('.spinner-container').remove(); + $(this).removeClass('lazy-load-carousel pull-left'); + }); +} + MayanImage.prototype.onImageError = function () { this.element.parent().parent().html(''); // Remove border to indicate non interactive image @@ -199,7 +204,7 @@ jQuery(document).ready(function() { app.setupFullHeightResizing(); - app.doMayanImages(); + MayanImage.intialize(); app.doToastrMessages(); diff --git a/mayan/apps/common/utils.py b/mayan/apps/common/utils.py index e24404368c..bcea9cb1dd 100644 --- a/mayan/apps/common/utils.py +++ b/mayan/apps/common/utils.py @@ -96,6 +96,13 @@ def get_descriptor(file_input, read=True): return file_input +def index_or_default(instance, index, default): + try: + return instance[index] + except IndexError: + return default + + def TemporaryFile(*args, **kwargs): kwargs.update({'dir': setting_temporary_directory.value}) return tempfile.TemporaryFile(*args, **kwargs) diff --git a/mayan/apps/documents/widgets.py b/mayan/apps/documents/widgets.py index 90e1695563..f4382dd695 100644 --- a/mayan/apps/documents/widgets.py +++ b/mayan/apps/documents/widgets.py @@ -8,6 +8,8 @@ from django.utils.http import urlencode from django.utils.safestring import mark_safe from django.utils.translation import ugettext, ugettext_lazy as _ +from common.utils import index_or_default + from .settings import ( setting_display_size, setting_preview_size, setting_thumbnail_size ) @@ -99,6 +101,8 @@ class InstanceImageWidget(object): preview_query_dict = {} image_class = 'lazy-load' title = None + width = None + height = None # Click view def get_click_view_kwargs(self, instance): @@ -221,10 +225,16 @@ class InstanceImageWidget(object): ) result.append( - ' ' - '' + '' + '' + '' + '' + '' + ' '.format( + '/> '.format( + width=self.width or '32', height=self.height or '32', image_class=self.image_class, preview_full_url=self.get_preview_view_url(instance=instance), alt_text=self.alt_text @@ -253,6 +263,11 @@ class BaseDocumentThumbnailWidget(InstanceImageWidget): preview_view_query_dict = { 'size': setting_thumbnail_size.value } + width = setting_thumbnail_size.value.split('x')[0] + height = index_or_default( + instance=setting_thumbnail_size.value.split('x'), + index=1, default=setting_thumbnail_size.value.split('x')[0] + ) def get_destination_url(self, instance): return instance.get_absolute_url() @@ -265,6 +280,11 @@ class CarouselDocumentPageThumbnailWidget(BaseDocumentThumbnailWidget): preview_view_query_dict = { 'size': setting_display_size.value } + width = setting_preview_size.value.split('x')[0] + height = index_or_default( + instance=setting_preview_size.value.split('x'), + index=1, default=setting_preview_size.value.split('x')[0] + ) class DocumentThumbnailWidget(BaseDocumentThumbnailWidget):