1 files changed, 65 insertions, 8 deletions

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index e9ec06859d0..c7e5155fcc9 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -591,7 +591,7 @@
             },
             'change input[type=file]': 'file_selection',
             'change input.url': 'preview_image',
-            'click .existing-attachments a': 'select_existing',
+            'click a[href=#existing]': 'browse_existing',
         }),
         start: function () {
             var selection = this.editor.getSelection();
@@ -602,9 +602,7 @@
                 this.set_image(el.getAttribute('src'));
             }
 
-            return $.when(
-                this._super(),
-                this.fetch_existing().then(this.proxy('fetched_existing')));
+            return this._super();
         },
         save: function () {
             var url = this.$('input.url').val();
@@ -662,8 +660,42 @@
             this.$('img.image-preview').attr('src', image);
         },
 
+        browse_existing: function (e) {
+            e.preventDefault();
+            new website.editor.ExistingImageDialog(this).appendTo(document.body);
+        },
+    });
+
+    var IMAGES_PER_ROW = 3;
+    var IMAGES_ROWS = 3;
+    website.editor.ExistingImageDialog = website.editor.Dialog.extend({
+        template: 'website.editor.dialog.image.existing',
+        events: _.extend({}, website.editor.Dialog.prototype.events, {
+            'click .existing-attachments a': 'select_existing',
+            'click .pager > li': function (e) {
+                e.preventDefault();
+                var $target = $(e.currentTarget);
+                if ($target.hasClass('disabled')) {
+                    return;
+                }
+                this.page += $target.hasClass('previous') ? -1 : 1;
+                this.display_attachments();
+            },
+        }),
+        init: function (parent) {
+            this.image = null;
+            this.page = 0;
+            this.parent = parent;
+            this._super(parent.editor);
+        },
+
+        start: function () {
+            return $.when(
+                this._super(),
+                this.fetch_existing().then(this.proxy('fetched_existing')));
+        },
+
         fetch_existing: function () {
-            // FIXME: lazy load attachments?
             return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
                 model: 'ir.attachment',
                 method: 'search_read',
@@ -677,17 +709,42 @@
             });
         },
         fetched_existing: function (records) {
+            this.records = records;
+            this.display_attachments();
+        },
+        display_attachments: function () {
+            var per_screen = IMAGES_PER_ROW * IMAGES_ROWS;
+
+            var from = this.page * per_screen;
+            var records = this.records;
+
             // Create rows of 3 records
             var rows = _(records).chain()
-                .groupBy(function (_, index) { return Math.floor(index / 3); })
+                .slice(from, from + per_screen)
+                .groupBy(function (_, index) { return Math.floor(index / IMAGES_PER_ROW); })
                 .values()
                 .value();
+
             this.$('.existing-attachments').replaceWith(
-                openerp.qweb.render('website.editor.dialog.image.existing', {rows: rows}));
+                openerp.qweb.render(
+                    'website.editor.dialog.image.existing.content', {rows: rows}));
+            this.$('.pager')
+                .find('li.previous').toggleClass('disabled', (from === 0)).end()
+                .find('li.next').toggleClass('disabled', (from + per_screen >= records.length));
+
         },
         select_existing: function (e) {
             e.preventDefault();
-            this.set_image(e.currentTarget.getAttribute('href'));
+            this.$('a.thumbnail.selected').removeClass('selected');
+
+            $(e.currentTarget).addClass('selected');
+        },
+        save: function () {
+            var link = this.$('a.thumbnail.selected').attr('href');
+            if (link) {
+                this.parent.set_image(link);
+            }
+            this._super();
         },
     });