diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 9da978caa01..494931d9af0 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 81e82361d13..9b6bf982116 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 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(); }, }); diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index fabf2185f2a..ff95dc2fb65 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -95,23 +95,18 @@ enctype="multipart/form-data" target="fileframe" class="col-sm-8"> -
- -

Image URL

- -
-

— or —

+

— or —

-

— or —

-

Pick an existing attachment

-
+ Browse your images +

Image URL

+
@@ -125,13 +120,25 @@ + + Pick an existing attachment: +
+ + +
-
-
- /website/attachment/ - - - + +
+
+
+ /website/attachment/ + + + +