Permalink
Browse files

MDL-31901 Implemented lazy loading of thumbnails in filemanager

  • Loading branch information...
1 parent 04e3b00 commit 469a53a0537747638e6ae58dcf7b1e450ac70626 @marinaglancy marinaglancy committed May 15, 2012
Showing with 33 additions and 14 deletions.
  1. +33 −14 lib/form/filemanager.js
View
@@ -116,6 +116,8 @@ M.form_filemanager.init = function(Y, options) {
this.setup_select_file();
// setup buttons onclick events
this.setup_buttons();
+ // set event handler for lazy loading of thumbnails
+ this.filemanager.one('.fp-content').on(['scroll','resize'], this.content_scrolled, this);
// display files
this.viewmode = 1; // TODO take from cookies?
this.filemanager.all('.fp-vb-icons,.fp-vb-tree,.fp-vb-details').removeClass('checked')
@@ -213,6 +215,7 @@ M.form_filemanager.init = function(Y, options) {
scope.filecount = obj.filecount;
scope.check_buttons();
scope.options = obj;
+ scope.lazyloading = {};
scope.render(obj);
}
}, true);
@@ -375,19 +378,7 @@ M.form_filemanager.init = function(Y, options) {
el.one('.fp-path-folder-name').setContent(p[i].name).
on('click', function(e, path) {
e.preventDefault();
- var scope = this;
- this.currentpath = path;
- this.request({
- action: 'list',
- scope: scope,
- params: {filepath:path},
- callback: function(id, obj, args) {
- scope.filecount = obj.filecount;
- scope.check_buttons();
- scope.options = obj;
- scope.render(obj);
- }
- }, true);
+ this.refresh(path);
}, this, p[i].path);
}
this.pathbar.removeClass('empty');
@@ -448,10 +439,37 @@ M.form_filemanager.init = function(Y, options) {
// invoke callback requested by TreeView component
cb();
}
- //scope.content_scrolled();
+ scope.content_scrolled();
}
}, false);
},
+ content_scrolled: function(e) {
+ setTimeout(Y.bind(function() {
+ if (this.processingimages) {return;}
+ this.processingimages = true;
+ var scope = this,
+ fpcontent = this.filemanager.one('.fp-content'),
+ fpcontenty = fpcontent.getY(),
+ fpcontentheight = fpcontent.getStylePx('height'),
+ is_node_visible = function(node) {
+ var offset = node.getY()-fpcontenty;
+ if (offset <= fpcontentheight && (offset >=0 || offset+node.getStylePx('height')>=0)) {
+ return true;
+ }
+ return false;
+ };
+ // replace src for visible images that need to be lazy-loaded
+ if (scope.lazyloading) {
+ fpcontent.all('img').each( function(node) {
+ if (node.get('id') && scope.lazyloading[node.get('id')] && is_node_visible(node)) {
+ node.set('src', scope.lazyloading[node.get('id')]);
+ delete scope.lazyloading[node.get('id')];
+ }
+ });
+ }
+ this.processingimages = false;
+ }, this), 200)
+ },
view_files: function(appendfiles) {
this.filemanager.removeClass('fm-updating').removeClass('fm-noitems');
if ((appendfiles == null) && (!this.options.list || this.options.list.length == 0) && this.viewmode != 2) {
@@ -530,6 +548,7 @@ M.form_filemanager.init = function(Y, options) {
}
if (!this.lazyloading) {this.lazyloading={};}
this.filemanager.one('.fp-content').fp_display_filelist(options, list, this.lazyloading);
+ this.content_scrolled();
},
populate_licenses_select: function(node) {
if (!node) {return;}

0 comments on commit 469a53a

Please sign in to comment.