From e011d58bee140411ccfb1ef9115dddc090d573c3 Mon Sep 17 00:00:00 2001 From: dbh Date: Tue, 10 Jan 2017 16:12:29 +0530 Subject: [PATCH] [IMP] website, web_editor: improve the gallery snippet - Change the info message "Add Images from Customize menu" to "Add Images" and make it clickable - Reorganize snippet options menu - Improve the image dialog to be able to select/unselect - Make sure previews are adapted when changing gallery images --- addons/web_editor/static/src/js/widgets.js | 15 ++- .../static/src/js/website.snippets.gallery.js | 21 +++- addons/website/views/snippets.xml | 112 +++++++++--------- 3 files changed, 86 insertions(+), 62 deletions(-) diff --git a/addons/web_editor/static/src/js/widgets.js b/addons/web_editor/static/src/js/widgets.js index aa1d3123db6..02fb4267239 100644 --- a/addons/web_editor/static/src/js/widgets.js +++ b/addons/web_editor/static/src/js/widgets.js @@ -199,6 +199,7 @@ var MediaDialog = Dialog.extend({ this.final_data = [media, self.old_media]; $(document.body).trigger("media-saved", this.final_data); + $(self.old_media).trigger("save", this.final_data); // Update editor bar after image edition (in case the image change to icon or other) _.defer(function () { @@ -305,11 +306,12 @@ var ImageDialog = Widget.extend({ var img = _.select(this.images, function (v) { return v.id === attachment.id; }); if (img.length) { this.images.splice(this.images.indexOf(img[0]),1); + } else { + this.images.push(attachment); } } else { - this.images = []; + this.images = [attachment]; } - this.images.push(attachment); }, save: function () { if (this.options.select_images) { @@ -370,6 +372,7 @@ var ImageDialog = Widget.extend({ this.push(attachment); this.$('input.url').val(''); this.search(); + this.images = []; }, form_submit: function (event) { var self = this; @@ -482,20 +485,24 @@ var ImageDialog = Widget.extend({ }, select_existing: function (e) { var $img = $(e.currentTarget); + if (!this.options.select_images) { + this.$('.o_existing_attachment_cell.o_selected').removeClass("o_selected"); + $img.closest('.o_existing_attachment_cell').addClass('o_selected'); + } else { + $img.closest('.o_existing_attachment_cell').toggleClass('o_selected'); + } var attachment = _.find(this.records, function (record) { return record.id === $img.data('id'); }); this.push(attachment); this.selected_existing(); }, selected_existing: function () { var self = this; - this.$('.o_existing_attachment_cell.o_selected').removeClass("o_selected"); var $select = this.$('.o_existing_attachment_cell [data-src]').filter(function () { var $img = $(this); return !!_.find(self.images, function (v) { return (v.url === $img.data("src") || ($img.data("url") && v.url === $img.data("url")) || v.id === $img.data("id")); }); }); - $select.closest('.o_existing_attachment_cell').addClass("o_selected"); return $select; }, try_remove: function (e) { diff --git a/addons/website/static/src/js/website.snippets.gallery.js b/addons/website/static/src/js/website.snippets.gallery.js index 265424f4d51..26b8d09c00b 100644 --- a/addons/website/static/src/js/website.snippets.gallery.js +++ b/addons/website/static/src/js/website.snippets.gallery.js @@ -36,6 +36,12 @@ options.registry.gallery = options.Class.extend({ this._temp_mode = this.$el.find("data-mode").data("mode"); this._temp_col = this.$el.find("data-columns").data("columns"); + + var self = this; + this.$target.on('click', '.o_add_images', function (e) { + e.stopImmediatePropagation(); + self.images_add('click'); + }); }, drop_and_build_snippet: function () { var uuid = new Date().getTime(); @@ -70,7 +76,7 @@ options.registry.gallery = options.Class.extend({ return this.$target.find("img").off('save').on('save', function (event, img) { var $parent = $(img).parent(); $parent.addClass("saved_active"); - var index = self.$target.find(".item.saved_active").index(); + var index = self.$target.find(".item.active").index(); $parent.removeClass("saved_active"); self.$target.find(".carousel:first li[data-target]:eq("+index+")").css("background-image", "url("+$(img).attr("src")+")"); }); @@ -245,7 +251,18 @@ options.registry.gallery = options.Class.extend({ }, images_rm : function (type) { if(type !== "click") return; - this.replace($('
').text(_t("Add Images from the 'Customize' menu"))); + var $addImg = $('
', { + class: 'alert alert-info css_editable_mode_display text-center', + }); + var $text = $('', { + class: 'o_add_images', + style: 'cursor: pointer;', + text: _t(" Add Images"), + }); + var $icon = $('', { + class: ' fa fa-plus-circle', + }); + this.replace($addImg.append($icon).append($text)); }, sizing : function () { // done via css, keep it to avoid undefined error }, diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index 762ff8af7dd..c3b47b4c686 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -280,7 +280,7 @@ @@ -735,59 +735,10 @@