MDL-31901 Implemented lazy loading of thumbnails in filemanager

moodle · May 21, 2012 · 469a53a · 469a53a
1 parent 04e3b00
commit 469a53a
Showing 1 changed file with 33 additions and 14 deletions.
diff --git a/lib/form/filemanager.js b/lib/form/filemanager.js
@@ -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;}