From af66abaf57d61f203f38c0c2dffbeec1eb55b934 Mon Sep 17 00:00:00 2001
From: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>
Date: Mon, 13 Aug 2018 23:35:33 -0400
Subject: [PATCH] Speed up document image fade in reveal. Use reseteable timer
 to ensure more document panels heights are matched.

Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>
---
 HISTORY.rst                                   |  6 ++++-
 .../static/appearance/js/mayan_image.js       | 16 +++++++++---
 .../generic_list_items_subtemplate.html       | 25 ++++++++-----------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/HISTORY.rst b/HISTORY.rst
index 9a542af126..080125badc 100644
--- a/HISTORY.rst
+++ b/HISTORY.rst
@@ -21,7 +21,11 @@
   document (document stub that has no document version).
 - Add support for client side caching of document page images. The time
   the images are cached is controlled by the new setting
-  DOCUMENTS_PAGE_IMAGE_CACHE_TIME which defaults to 3600 seconds (1 hour).
+  DOCUMENTS_PAGE_IMAGE_CACHE_TIME which defaults to 31556926 seconds (1 year).
+- Include querystring when force reload of a bare template view.
+- Speed up document image fade in reveal.
+- Use reseteable timer to ensure more document panels heights are matched.
+
 
 3.0.1 (2018-07-08)
 =================
diff --git a/mayan/apps/appearance/static/appearance/js/mayan_image.js b/mayan/apps/appearance/static/appearance/js/mayan_image.js
index 1d9103364e..333e1df518 100644
--- a/mayan/apps/appearance/static/appearance/js/mayan_image.js
+++ b/mayan/apps/appearance/static/appearance/js/mayan_image.js
@@ -9,7 +9,7 @@ MayanImage.intialize = function () {
     var app = this;
 
     this.fancybox = $().fancybox({
-        animationDuration : 400,
+        animationDuration : 300,
         buttons : [
             'fullScreen',
             'close',
@@ -41,14 +41,14 @@ MayanImage.intialize = function () {
 
     $('.lazy-load').on('load', function() {
         $(this).hide();
-        $(this).fadeIn();
+        $(this).fadeIn(300);
         $(this).siblings('.spinner-container').remove();
         $(this).removeClass('lazy-load pull-left');
     });
 
     $('.lazy-load-carousel').on('load', function() {
         $(this).hide();
-        $(this).fadeIn();
+        $(this).fadeIn(300);
         $(this).siblings('.spinner-container').remove();
         $(this).removeClass('lazy-load-carousel pull-left');
     });
@@ -56,6 +56,12 @@ MayanImage.intialize = function () {
 
 MayanImage.templateInvalidDocument = $('#template-invalid-document').html();
 
+MayanImage.timer = setTimeout(null);
+
+MayanImage.timerFunction = function () {
+    $.fn.matchHeight._maintainScroll = true;
+    $.fn.matchHeight._update();
+}
 
 MayanImage.prototype.load = function () {
     var self = this;
@@ -66,6 +72,8 @@ MayanImage.prototype.load = function () {
     }));
 
     this.element.attr('src', this.element.attr('data-url'));
-    $.fn.matchHeight._update();
     $.fn.matchHeight._maintainScroll = true;
+
+    clearTimeout(MayanImage.timer);
+    MayanImage.timer = setTimeout(MayanImage.timerFunction, 100);
 };
diff --git a/mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html b/mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html
index 063ffe7111..93bf83dbec 100644
--- a/mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html
+++ b/mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html
@@ -4,18 +4,6 @@
 {% load common_tags %}
 {% load navigation_tags %}
 
-<script>
-    'use strict';
-
-    waitForJQuery(function() {
-        $(function() {
-            $('.panel-item').matchHeight({
-                byRow: false,
-            });
-        });
-    });
-</script>
-
 <div class="row">
     <div class="col-xs-12">
         <h4>
@@ -53,12 +41,11 @@
                 <hr style="border-bottom: 1px solid lightgrey;">
             {% endif %}
 
-            <div class="row">
+            <div class="row row-items">
                 {% for object in object_list %}
                     <div class="{{ column_class|default:'col-xs-12 col-sm-4 col-md-3 col-lg-2' }}">
                         <div class="panel panel-primary panel-item">
                             <div class="panel-heading">
-
                                 <div class="form-group">
                                     <div class="checkbox">
                                         <label for="id_indexes_0">
@@ -125,3 +112,13 @@
         </div>
     </div>
 </div>
+
+<script>
+    'use strict';
+
+    $(function() {
+        $('.row-items > [class*="col"] .panel-item .panel-heading').matchHeight();
+        $('.row-items > [class*="col"] .panel-item .panel-body').matchHeight();
+        $('.row-items > [class*="col"] .panel-item').matchHeight();
+    });
+</script>