[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
This commit is contained in:
dbh
@@ -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) {
|
||||
|
||||
@@ -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($('<div class="alert alert-info css_editable_mode_display"/>').text(_t("Add Images from the 'Customize' menu")));
|
||||
var $addImg = $('<div>', {
|
||||
class: 'alert alert-info css_editable_mode_display text-center',
|
||||
});
|
||||
var $text = $('<span>', {
|
||||
class: 'o_add_images',
|
||||
style: 'cursor: pointer;',
|
||||
text: _t(" Add Images"),
|
||||
});
|
||||
var $icon = $('<i>', {
|
||||
class: ' fa fa-plus-circle',
|
||||
});
|
||||
this.replace($addImg.append($icon).append($text));
|
||||
},
|
||||
sizing : function () { // done via css, keep it to avoid undefined error
|
||||
},
|
||||
|
||||
@@ -280,7 +280,7 @@
|
||||
<template id="s_image_gallery" name="Image Gallery">
|
||||
<section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;">
|
||||
<div class="container">
|
||||
<div class="alert alert-info css_editable_mode_display">Add Images from the 'Customize' menu</div>
|
||||
<div class="alert alert-info css_editable_mode_display text-center" ><span class="o_add_images" style="cursor: pointer;"><i class="fa fa-plus-circle"/> Add Images</span></div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -735,59 +735,10 @@
|
||||
<template id="snippet_options">
|
||||
<t t-call="web_editor.snippet_options"/>
|
||||
|
||||
<div data-js='background'
|
||||
data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax, .s_banner .carousel-content">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-picture-o"/>Background Image</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li data-background=""><a href="#">None</a></li>
|
||||
<li class="divider"></li>
|
||||
<li data-choose_image="choose_image"><a href="#"><b>Set Custom Image...</b></a></li>
|
||||
<li class="divider"></li>
|
||||
<li data-background="/web/image/website.s_background_image_01"><a href="#">Peak</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_02"><a href="#">Downtown</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_03"><a href="#">Panama Sky</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_04"><a href="#">Cubes</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_05"><a href="#">Building Profile</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_06"><a href="#">Type</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_07"><a href="#">People</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_08"><a href="#">City</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_09"><a href="#">Sails</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div data-js='background_position'
|
||||
data-selector="section, :not(.o_gallery > .container) > .carousel, .s_banner .carousel-content">
|
||||
<li class="background_position_li" data-background_position="background_position">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-arrows"/>Background Image Sizing</a>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div data-js="colorpicker"
|
||||
data-selector="section:not(.parallax), :not(.o_gallery > .container) > .carousel, .s_comparisons .panel, .s_faq_collapse .panel-body, .s_faq_collapse .panel-heading">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li></li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
<div data-js="colorpicker"
|
||||
data-selector=".s_text_block_image_fw .row > div, .s_banner .carousel-content"
|
||||
data-palette-exclude="grayscale"
|
||||
data-palette-default="transparent_grayscale"
|
||||
data-palette-title="Overlay Color">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Overlay color</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li></li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
|
||||
<div data-js='gallery' data-selector=".o_gallery">
|
||||
<li data-images_add="true"><a href="#"><i class="fa fa-plus-circle"/>Add images</a></li>
|
||||
<li data-images_rm="true"><a href="#"><i class="fa fa-trash"/>Remove all images</a></li>
|
||||
<li class="separator"/>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-2" href="#"><i class="fa fa-magic"/>Mode</a>
|
||||
<ul class="dropdown-menu">
|
||||
@@ -839,9 +790,58 @@
|
||||
<li data-styling="shadow"><a href="#">Shadows</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="separator"></li>
|
||||
<li data-images_add="true"><a href="#"><i class="fa fa-plus-circle"/>Add images</a></li>
|
||||
<li data-images_rm="true"><a href="#"><i class="fa fa-trash"/>Remove all images</a></li>
|
||||
<li class="separator"/>
|
||||
</div>
|
||||
|
||||
<div data-js='background'
|
||||
data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax, .s_banner .carousel-content">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-picture-o"/>Background Image</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li data-background="" class="none"><a href="#">None</a></li>
|
||||
<li class="divider"></li>
|
||||
<li data-choose_image="choose_image"><a href="#"><b>Set Custom Image...</b></a></li>
|
||||
<li class="divider"></li>
|
||||
<li data-background="/web/image/website.s_background_image_01"><a href="#">Peak</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_02"><a href="#">Downtown</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_03"><a href="#">Panama Sky</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_04"><a href="#">Cubes</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_05"><a href="#">Building Profile</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_06"><a href="#">Type</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_07"><a href="#">People</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_08"><a href="#">City</a></li>
|
||||
<li data-background="/web/image/website.s_background_image_09"><a href="#">Sails</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div data-js='background_position'
|
||||
data-selector="section, :not(.o_gallery > .container) > .carousel, .s_banner .carousel-content">
|
||||
<li class="background_position_li" data-background_position="background_position">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-arrows"/>Background Image Sizing</a>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div data-js="colorpicker"
|
||||
data-selector="section:not(.parallax), :not(.o_gallery > .container) > .carousel">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li></li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
<div data-js="colorpicker"
|
||||
data-selector=".s_text_block_image_fw .row > div, .s_banner .carousel-content"
|
||||
data-palette-exclude="grayscale"
|
||||
data-palette-default="transparent_grayscale"
|
||||
data-palette-title="Overlay Color">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Overlay color</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li></li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div data-js='gallery_img' data-selector=".o_gallery img">
|
||||
|
||||
Reference in New Issue
Block a user