From 2b7b62562257d31c979c9cf59e4609a7cf00e9f9 Mon Sep 17 00:00:00 2001
From: pavel <solomienko1802@gmail.com>
Date: Sat, 15 Jul 2017 11:32:01 +0300
Subject: [PATCH] Extended lazyLoad to affect default scrollbar #148 #196

---
 index.html             | 15 +++++-----
 scripts/filemanager.js | 62 ++++++++++++++++++++++--------------------
 2 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index b0c328a3..422604af 100644
--- a/index.html
+++ b/index.html
@@ -135,12 +135,12 @@
 								<div class="item-background"></div>
 								<div class="item-content" data-bind="draggableView: koItem">
 									<div class="clip">
-                    <!-- ko if: koItem.cdo.lazyload  -->
-										<img src="" data-bind="css: koItem.gridIconClass(), attr: {'data-original': koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}" />
-                    <!-- /ko -->     
-                    <!-- ko if: !koItem.cdo.lazyload -->                    
-                    <img src="" data-bind="css: koItem.gridIconClass(), attr: {src: koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}" />
-                    <!-- /ko -->                         
+										<!-- ko if: koItem.lazyPreview -->
+										<img src="" data-bind="css: koItem.gridIconClass(), attr: {'data-original': koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}"/>
+										<!-- /ko -->
+										<!-- ko if: !koItem.lazyPreview -->
+										<img src="" data-bind="css: koItem.gridIconClass(), attr: {src: koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}"/>
+										<!-- /ko -->
 									</div>
 									<p data-bind="text: koItem.rdo.attributes.name"></p>
 								</div>
@@ -148,7 +148,6 @@
 							<!-- /ko -->
 						</ul>
 
-
 						<table class="list" data-bind="visible: viewMode() === 'list'">
 							<thead>
 							<tr class="rowHeader" data-bind="with: tableViewModel">
@@ -418,7 +417,7 @@ <h1 data-bind="text: rdo().attributes.name, attr: {title: rdo().id}"></h1>
 		<script type="text/javascript" src="scripts/toast/lib/toast.min.js"></script>
 		<script type="text/javascript" src="scripts/purl/purl.min.js"></script>
 		<!-- Load filemanager script -->
-		<script type="text/javascript" src="scripts/filemanager.min.js"></script>
+		<script type="text/javascript" src="scripts/filemanager.js"></script>
 		<script type="text/javascript" src="config/filemanager.init.js"></script>
 
 		<!-- Start RichFilemanager plugin -->
diff --git a/scripts/filemanager.js b/scripts/filemanager.js
index 9f9b9994..e43315ff 100644
--- a/scripts/filemanager.js
+++ b/scripts/filemanager.js
@@ -338,12 +338,12 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
         // theme defined in configuration file
         primary.push('/themes/' + config.options.theme + '/styles/theme.css');
 
+        if(config.viewer.lazyLoad) {
+            primary.push('/scripts/lazyload/lazyload.transpiled.min.js');
+        }
         if(config.customScrollbar.enabled) {
             primary.push('/scripts/custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css');
             primary.push('/scripts/custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js');
-            if(config.viewer.lazyLoad) {
-                primary.push('/scripts/lazyload/lazyload.transpiled.min.js');
-            }
         }
 
         // add callback on loaded assets and inject primary ones
@@ -473,7 +473,6 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
                 fmModel.ddModel.makeDroppable(valueAccessor(), element);
 			}
 		};
-    
 
         $wrapper.mousewheel(function(e) {
             if (!fmModel.ddModel.dragHelper) {
@@ -530,7 +529,6 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
                     });
 				}
             }
-
         });
 
         $viewItems.selectable({
@@ -700,8 +698,9 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
                             var yIncrement = Math.abs(this.mcs.top) - Math.abs(this.yStartPosition);
                             $viewItems.selectable("repositionCssHelper", yIncrement, 0);
                         }
-                        if (config.viewer.lazyLoad) {
-                           fm.lazyload.main.handleScroll(); // use throttle 
+
+                        if (fmModel.itemsModel.lazyLoad) {
+                            fmModel.itemsModel.lazyLoad.handleScroll(); // use throttle
                         }
                     }
                 },
@@ -1436,6 +1435,28 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
 			this.isSelecting = ko.observable(false);
 			this.continiousSelection = ko.observable(false);
             this.descriptivePanel = new RenderModel();
+            this.lazyLoad = null;
+
+            if (config.viewer.lazyLoad) {
+                this.lazyLoad = new LazyLoad({
+                    container: $fileinfo[0], // work only for default scrollbar
+                    callback_load: function (element) {
+                        if(config.options.logger) {
+                            console.log(new Date().getTime(), "LOADED", element.getAttribute('data-original'));
+						}
+                    },
+                    callback_set: function (element) {
+                        if(config.options.logger) {
+                            console.log(new Date().getTime(), "SET", element.getAttribute('data-original'));
+                        }
+                    },
+                    callback_processed: function (elementsLeft) {
+                        if(config.options.logger) {
+                            console.log(new Date().getTime(), "PROCESSED", elementsLeft + " images left");
+                        }
+                    }
+                });
+			}
 
 			this.isSelecting.subscribe(function(state) {
 				if(!state) {
@@ -1487,26 +1508,9 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
                             model.currentPath(path);
                             model.breadcrumbsModel.splitCurrent();
                             model.itemsModel.setList(response.data);
-                            if (config.customScrollbar.enabled && config.viewer.lazyLoad) {
-                              fm.lazyload = fm.lazyload || {};
-                              fm.lazyload.logElementEvent = function(eventName, element) {
-                                console.log(new Date().getTime(), eventName, element.getAttribute('data-original'));
-                              }
-                              fm.lazyload.logEvent  = function(eventName, elementsLeft) {
-                                console.log(new Date().getTime(), eventName, elementsLeft + " images left");
-                              }    
-                              fm.lazyload.main = new LazyLoad({
-                                  //container: document.getElementById('file-viewer'),
-                                  /*callback_load: function (element) {
-                                    fm.lazyload.logElementEvent("LOADED", element);
-                                  },
-                                  callback_set: function (element) {
-                                    fm.lazyload.logElementEvent("SET", element);
-                                  },
-                                  callback_processed: function(elementsLeft) {
-                                    fm.lazyload.logEvent("PROCESSED", elementsLeft);
-                                  }*/
-                              });
+
+                            if (model.itemsModel.lazyLoad) {
+                                model.itemsModel.lazyLoad.update();
                             }
                         }
 						handleAjaxResponseErrors(response);
@@ -1676,12 +1680,12 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
                 dimensions: resourceObject.attributes.width ? resourceObject.attributes.width + 'x' + resourceObject.attributes.height : null,
                 cssItemClass: (resourceObject.type === 'folder') ? 'directory' : 'file',
                 imageUrl: createImageUrl(resourceObject, true, true),
-                previewWidth: previewWidth,
-                lazyload: (config.customScrollbar.enabled && config.viewer.lazyLoad)? true: false
+                previewWidth: previewWidth
             };
             this.visible = ko.observable(true);
             this.selected = ko.observable(false);
             this.dragHovered = ko.observable(false);
+            this.lazyPreview = (config.viewer.lazyLoad && this.cdo.imageUrl);
 
             this.selected.subscribe(function (value) {
                 if (value && model.treeModel.selectedNode() !== null) {