Skip to content

Commit

Permalink
Extended lazyLoad to affect default scrollbar #148 #196
Browse files Browse the repository at this point in the history
  • Loading branch information
@psolom
psolom committed Jul 15, 2017
1 parent 14f4248 commit 2b7b625
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 37 deletions.
15 changes: 7 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,20 +135,19 @@
<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>
</li>
<!-- /ko -->
</ul>


<table class="list" data-bind="visible: viewMode() === 'list'">
<thead>
<tr class="rowHeader" data-bind="with: tableViewModel">
Expand Down Expand Up @@ -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 -->
Expand Down
62 changes: 33 additions & 29 deletions scripts/filemanager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -473,7 +473,6 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
fmModel.ddModel.makeDroppable(valueAccessor(), element);
}
};


$wrapper.mousewheel(function(e) {
if (!fmModel.ddModel.dragHelper) {
Expand Down Expand Up @@ -530,7 +529,6 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
});
}
}

});

$viewItems.selectable({
Expand Down Expand Up @@ -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
}
}
},
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit 2b7b625

Please sign in to comment.