From e2676729b0e5b0a58e0d19b109deaf8e1983f791 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Fri, 13 Sep 2013 12:47:39 +0200
Subject: [PATCH 1/3] [REM] listing of existing attachments in base dialog

bzr revid: xmo@openerp.com-20130913104739-ma8kc0dum1ikvikd
---
 .../website/static/src/xml/website.editor.xml | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index fabf2185f2a..03d0cd19849 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -95,24 +95,19 @@
                       enctype="multipart/form-data"
                       target="fileframe"
                       class="col-sm-8">
+                    <div class="text-center">
+                        <input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
+                        <button type="button" class="btn btn-primary btn-lg filepicker">
+                            Upload an image from your computer
+                        </button>
+                        <p class="">— or —</p>
+                    </div>
                     <div class="well">
                         <!-- a href="#" class="pull-left">Find image</a -->
                         <h3 class="list-group-item-heading">Image URL</h3>
                         <input type="text" class="form-control url"
                                placeholder="http://openerp.com"/>
                     </div>
-                    <div class="text-center">
-                        <p class="">— or —</p>
-                        <input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
-                        <button type="button" class="btn btn-primary btn-lg filepicker">
-                            Upload an image from your computer
-                        </button>
-                    </div>
-                    <p class="text-center">— or —</p>
-                    <div class="well">
-                        <h3 class="list-group-item-heading">Pick an existing attachment</h3>
-                        <div class="existing-attachments"/>
-                    </div>
                     <input type="hidden" name="func"/>
                 </form>
                 <div class="col-sm-4">

From f16b61cbe61a77cf331a54ea11520322e7730739 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Fri, 13 Sep 2013 13:41:43 +0200
Subject: [PATCH 2/3] [ADD] separate attachment dialog selector

bzr revid: xmo@openerp.com-20130913114143-v799fvf08rpiox3r
---
 addons/website/static/src/css/editor.css      | 21 ++++++++-
 addons/website/static/src/css/editor.sass     | 21 +++++++++
 .../website/static/src/js/website.editor.js   | 43 ++++++++++++++++---
 .../website/static/src/xml/website.editor.xml | 10 ++++-
 4 files changed, 87 insertions(+), 8 deletions(-)

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index e895b1209ce..9607aef55db 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -100,6 +100,25 @@ table.editorbar-panel td.selected {
   user-select: auto;
 }
 
+.modal .existing-attachments a.thumbnail {
+  position: relative;
+}
+.modal .existing-attachments a.thumbnail.selected:before {
+  text-decoration: none;
+  font-size: 150%;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: #21dc0f;
+  content: "✔";
+  height: 2em;
+  width: 2em;
+  text-align: center;
+  padding: 5px;
+  border-radius: 4px 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 /* ---- SNIPPET EDITOR ---- */
 #oe_snippets {
   position: fixed;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 96c77108ff6..1dd71acefdc 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -91,6 +91,27 @@ table.editorbar-panel
     -o-user-select: auto
     user-select: auto
 
+.modal .existing-attachments a.thumbnail
+    position: relative
+
+    &.selected:before
+        text-decoration: none
+        font-size: 150%
+        background-color: rgba(0, 0, 0, 0.3)
+        color: #21dc0f
+        content: "✔"
+
+        height: 2em
+        width: 2em
+        text-align: center
+        padding: 5px
+        border-radius: 4px 0
+
+        position: absolute
+        top: 0
+        left: 0
+
+
 /* ---- SNIPPET EDITOR ---- */
 
 #oe_snippets
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 5a8801bba38..77bed2f9215 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -589,7 +589,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();
@@ -600,9 +600,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();
@@ -660,6 +658,29 @@
             this.$('img.image-preview').attr('src', image);
         },
 
+        browse_existing: function (e) {
+            e.preventDefault();
+            new website.editor.ExistingImageDialog(this).appendTo(document.body);
+        },
+    });
+
+    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',
+        }),
+        init: function (parent) {
+            this.image = null;
+            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', {
@@ -681,11 +702,21 @@
                 .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}));
         },
         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();
         },
     });
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 03d0cd19849..98a5af1c184 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -103,7 +103,7 @@
                         <p class="">— or —</p>
                     </div>
                     <div class="well">
-                        <!-- a href="#" class="pull-left">Find image</a -->
+                        <a href="#existing" class="pull-right">Browse your images</a>
                         <h3 class="list-group-item-heading">Image URL</h3>
                         <input type="text" class="form-control url"
                                placeholder="http://openerp.com"/>
@@ -120,6 +120,14 @@
         </t>
     </t>
     <t t-name="website.editor.dialog.image.existing">
+        <t t-call="website.editor.dialog">
+            <t t-set="title">Pick an existing attachment:</t>
+            <div class="well">
+                <div class="existing-attachments"/>
+            </div>
+        </t>
+    </t>
+    <t t-name="website.editor.dialog.image.existing.content">
         <div class="existing-attachments">
             <div class="row" t-foreach="rows" t-as="row">
                 <div class="col-md-4" t-foreach="row" t-as="attachment">

From 243a9c559b7c603ee1cffb9a186401771e35c871 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Fri, 13 Sep 2013 17:13:16 +0200
Subject: [PATCH 3/3] [ADD] paginated images

bzr revid: xmo@openerp.com-20130913151316-rzr3rcg1w7h3gw10
---
 .../website/static/src/js/website.editor.js   | 30 +++++++++++++++++--
 .../website/static/src/xml/website.editor.xml | 22 ++++++++------
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 6c14b29e3a9..c7e5155fcc9 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -666,13 +666,25 @@
         },
     });
 
+    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);
         },
@@ -684,7 +696,6 @@
         },
 
         fetch_existing: function () {
-            // FIXME: lazy load attachments?
             return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
                 model: 'ir.attachment',
                 method: 'search_read',
@@ -698,14 +709,29 @@
             });
         },
         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.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();
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 98a5af1c184..ff95dc2fb65 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -122,19 +122,23 @@
     <t t-name="website.editor.dialog.image.existing">
         <t t-call="website.editor.dialog">
             <t t-set="title">Pick an existing attachment:</t>
-            <div class="well">
-                <div class="existing-attachments"/>
-            </div>
+            <div class="existing-attachments"/>
         </t>
     </t>
     <t t-name="website.editor.dialog.image.existing.content">
         <div class="existing-attachments">
-            <div class="row" t-foreach="rows" t-as="row">
-                <div class="col-md-4" t-foreach="row" t-as="attachment">
-                    <t t-set="url">/website/attachment/<t t-esc="attachment.id"/></t>
-                    <a t-att-href="url" class="thumbnail">
-                        <img t-att-src="url" t-att-alt="attachment.name"/>
-                    </a>
+            <ul class="pager">
+                <li class="previous disabled"><a href="#">← Previous</a></li>
+                <li class="next disabled"><a href="#">Next →</a></li>
+            </ul>
+            <div class="well">
+                <div class="row" t-foreach="rows" t-as="row">
+                    <div class="col-md-4" t-foreach="row" t-as="attachment">
+                        <t t-set="url">/website/attachment/<t t-esc="attachment.id"/></t>
+                        <a t-att-href="url" class="thumbnail">
+                            <img t-att-src="url" t-att-alt="attachment.name"/>
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>