diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index c7fa9cadf85..71f030a8bec 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -254,6 +254,13 @@ footer { content: "Drag Building Blocks Here"; } +.oe_structure.oe_editable [data-snippet-id]:empty { + background: rgba(255, 0, 0, 0.1); +} +.oe_structure.oe_editable [data-snippet-id]:empty:before { + content: "Please Edit This Empty Block"; +} + /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */ .navbar .nav > li > p { margin-bottom: 0px; @@ -406,14 +413,14 @@ ul.nav-stacked > li > a { } /* Parallax Theme */ -.parallax_quote { +.parallax_quote, [data-snippet-id="slider"] { background: center center no-repeat fixed; background-size: contain; } -.parallax_quote .carousel-indicators li { +.parallax_quote .carousel-indicators li, [data-snippet-id="slider"] .carousel-indicators li { border: 1px solid grey; } -.parallax_quote .carousel-indicators .active { +.parallax_quote .carousel-indicators .active, [data-snippet-id="slider"] .carousel-indicators .active { background-color: grey; } diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index faa17d01968..157fd19148c 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -171,6 +171,11 @@ footer .oe_structure.oe_editable.oe_empty:empty:before, .oe_editable[data-oe-type=html]:empty:before, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before content: 'Drag Building Blocks Here' +.oe_structure.oe_editable [data-snippet-id]:empty + background: rgba(255,0,0,0.1) + &:before + content: 'Please Edit This Empty Block' + /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */ .navbar .nav > li > p @@ -304,7 +309,7 @@ ul.nav-stacked > li > a /* Parallax Theme */ -.parallax_quote +.parallax_quote, [data-snippet-id="slider"] background: center center no-repeat fixed background-size: contain .carousel-indicators diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index c50ad392887..c1d31bcd7cc 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -104,6 +104,7 @@ left: $el.width() / 2 + image_left - $btn.outerWidth() / 2, }); }).on('mouseleave', 'img', function (e) { + if (!previousSelection) { return; } var $previous = $(previousSelection.$); var $button = $previous.next('button'); $button.css('visibility', 'hidden'); diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js index e491912da15..1dbb2d7426e 100644 --- a/addons/website/static/src/js/website.snippets.animation.js +++ b/addons/website/static/src/js/website.snippets.animation.js @@ -51,7 +51,8 @@ }, }); - website.snippet.animationRegistry.carousel = website.snippet.Animation.extend({ + website.snippet.animationRegistry.carousel = + website.snippet.animationRegistry.slider = website.snippet.Animation.extend({ start: function () { this.$target.carousel({interval: 10000}); }, diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js index e296850e54b..ebbe0bf5dd8 100644 --- a/addons/website/static/src/js/website.snippets.editor.js +++ b/addons/website/static/src/js/website.snippets.editor.js @@ -350,7 +350,18 @@ website.snippet.start_animation(); self.create_overlay($target); - $target.data("snippet-editor").drop_and_build_snippet($target); + if ($snippet.data("snippet-editor")) { + $target.data("snippet-editor").drop_and_build_snippet($target); + } + + $target.find("[data-snippet-id]").each(function () { + var $snippet = $(this); + var snippet_id = $snippet.data("data-snippet-id"); + self.create_overlay($snippet); + if ($snippet.data("snippet-editor")) { + $snippet.data("snippet-editor").drop_and_build_snippet($snippet); + } + }); } else { $target = $(this).data('target'); @@ -837,15 +848,6 @@ setTimeout(function () {self.parent.create_overlay(self.$target);},0); }, - _clone: function () { - var self = this; - this.$overlay.on('click', '.oe_snippet_clone', function () { - var $clone = self.$target.clone(false); - self.$target.after($clone); - return false; - }); - }, - load_style_options: function () { var self = this; var $styles = this.$overlay.find('.oe_options'); @@ -887,16 +889,24 @@ */ start: function () { var self = this; - this.$overlay.on('click', '.oe_snippet_remove', function () { - self.onBlur(); - var index = _.indexOf(self.parent.snippets, self.$target.get(0)); - delete self.parent.snippets[index]; - self.$target.remove(); - self.$overlay.remove(); - return false; - }); + this.$overlay.on('click', '.oe_snippet_clone', _.bind(this.on_clone, this)); + this.$overlay.on('click', '.oe_snippet_remove', _.bind(this.on_remove, this)); this._drag_and_drop(); - this._clone(); + }, + + on_clone: function () { + var $clone = this.$target.clone(false); + this.$target.after($clone); + return false; + }, + + on_remove: function () { + this.onBlur(); + var index = _.indexOf(this.parent.snippets, this.$target.get(0)); + delete this.parent.snippets[index]; + this.$target.remove(); + this.$overlay.remove(); + return false; }, /* @@ -925,7 +935,7 @@ * function called just before save vue */ clean_for_save: function () { - + this.$target.find(".row:empty").remove(); }, }); @@ -1059,7 +1069,6 @@ return this.grid; }, - _drag_and_drop_after_insert_dropzone: function(){ var self = this; var $zones = $(".row:has(> .oe_drop_zone)").each(function () { @@ -1088,7 +1097,24 @@ this.$target.addClass("col-md-offset-" + this.$target.prevAll(".oe_drop_to_remove").length); this._super(); }, - + onFocus : function () { + this._super(); + this.$overlay.find('.oe_snippet_remove').toggleClass("hidden", !this.$target.siblings().length); + }, + on_clone: function () { + var $clone = this.$target.clone(false); + var _class = $clone.attr("class").replace(/\s*(col-md-|col-lg-offset-|col-md-offset-)([0-9-]+)/g, ''); + _class += ' col-md-1'; + $clone.attr("class", _class); + this.$target.after($clone); + return false; + }, + on_remove: function () { + if (!this.$target.siblings().length){ + return false; + } + return this._super(); + }, on_resize: function (compass, beginClass, current) { if (compass !== 'w') return; @@ -1113,12 +1139,12 @@ } }, }); - - website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.resize.extend({ + + website.snippet.editorRegistry.slider = website.snippet.editorRegistry.resize.extend({ drop_and_build_snippet: function() { var id = 0; - $("body .carousel").each(function () { - var _id = +$(this).attr("id").replace(/^myCarousel/, ''); + $(".carousel").each(function () { + var _id = +$(this).attr("id").replace(/^[^a-z]+/i, ''); if (id <= _id) { id = _id + 1; } @@ -1126,10 +1152,30 @@ this.id = "myCarousel" + id; this.$target.attr("id", this.id); this.$target.find(".carousel-control").attr("href", "#myCarousel" + id); - this.$target.find("[data-target='#myCarousel']").attr("data-target", "#myCarousel" + id); + this.$target.find("[data-target]").attr("data-target", "#myCarousel" + id); this.rebind_event(); }, + // rebind event to active carousel on edit mode + rebind_event: function () { + var self = this; + this.$target.find('.carousel-indicators [data-target]').off('click').on('click', function () { + self.$target.carousel(+$(this).data('slide-to')); }); + + this.$target.attr('contentEditable', 'false') + .find('.oe_structure, blockquote').attr('contentEditable', 'true'); + + this.$target.carousel('pause'); + }, + clean_for_save: function () { + this._super(); + this.$target.find(".item").removeClass("next prev left right"); + if(!this.$target.find(".item.active").length) { + this.$target.find(".item:first").addClass("active"); + } + this.$target.removeAttr('contentEditable') + .find('*').removeAttr('contentEditable'); + }, onFocus: function () { this._super(); this.$target.carousel('pause'); @@ -1138,33 +1184,77 @@ this._super(); this.$target.carousel('cycle'); }, + start : function () { + this._super(); + this.id = this.$target.attr("id"); + this.$inner = this.$target.find('.carousel-inner'); + this.$indicators = this.$target.find('.carousel-indicators'); + + this.$editor.find(".js_add").on('click', _.bind(this.on_add_slide, this)); + this.$editor.find(".js_remove").on('click', _.bind(this.on_remove_slide, this)); + + this.rebind_event(); + }, + on_add_slide: function () { + var self = this; + var cycle = this.$inner.find('.item').length; + var $active = this.$inner.find('.item.active, .item.prev, .item.next').first(); + var index = $active.index(); + this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden"); + this.$indicators.append('
  • '); + + var $clone = this.$el.find(".item.active").clone(); + + // insert + $clone.removeClass('active').insertAfter($active); + setTimeout(function() { + self.$target.carousel().carousel(++index); + self.rebind_event(); + },0); + return $clone; + }, + on_remove_slide: function () { + if (this.remove_process) { + return; + } + var self = this; + var new_index = 0; + var cycle = this.$inner.find('.item').length - 1; + var index = this.$inner.find('.item.active').index(); + + if (cycle > 0) { + this.remove_process = true; + var $el = this.$inner.find('.item.active'); + self.$target.on('slid.bs.carousel', function (event) { + $el.remove(); + self.$indicators.find("li:last").remove(); + self.$target.off('slid.bs.carousel'); + self.rebind_event(); + self.remove_process = false; + if (cycle == 1) { + self.on_remove_slide(event); + } + }); + setTimeout(function () { + self.$target.carousel( index > 0 ? --index : cycle ); + }, 500); + } else { + this.$target.find('.carousel-control, .carousel-indicators').addClass("hidden"); + } + }, + }); + + website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.slider.extend({ clean_for_save: function () { this._super(); - this.$target.find(".item").removeClass("next prev left right"); - if(!this.$target.find(".item.active").length) { - this.$target.find(".item:first").addClass("active"); - } this.$target.css("background-image", ""); - console.log(this._class); this.$target.removeClass(this._class); - this.$target.removeAttr('contentEditable') - .find('.content, .carousel-image img') - .removeAttr('contentEditable'); + this.$target.find('.content, .carousel-image img').attr('contentEditable', 'true'); }, start : function () { var self = this; this._super(); - this.id = this.$target.attr("id"); - - this.$inner = this.$target.find('.carousel-inner'); - this.$indicators = this.$target.find('.carousel-indicators'); - - this.$editor.find(".js_add").on('click', _.bind(this.on_add, this)); - this.$editor.find(".js_remove").on('click', _.bind(this.on_remove, this)); - - this.rebind_event(); - // set background and prepare to clean for save var add_class = function (c){ if (c) self._class = (self._class || "").replace(new RegExp("[ ]+" + c.replace(" ", "|[ ]+")), '') + ' ' + c; @@ -1196,27 +1286,8 @@ }); this.$target.trigger('slid'); }, - // rebind event to active carousel on edit mode - rebind_event: function () { - var self = this; - this.$target.off('click').on('click', '.carousel-control', function () { - self.$target.carousel($(this).data('slide')); }); - this.$target.off('click').on('click', '.carousel-indicators [data-target]', function () { - self.$target.carousel(+$(this).data('slide-to')); }); - - this.$target.attr('contentEditable', 'false') - .find('.content, .carousel-image img') - .attr('contentEditable', 'true'); - }, - on_add: function (e) { - e.preventDefault(); - var cycle = this.$inner.find('.item').length; - var $active = this.$inner.find('.item.active, .item.prev, .item.next').first(); - var index = $active.index(); - this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden"); - this.$indicators.append('
  • '); - - var $clone = this.$el.find(".item.active").clone(); + on_add_slide: function () { + var $clone = this._super(); // choose an other background var $styles = this.$target.data("snippet-style-ids").background.$el.find("li[data-class]:not(.oe_custom_bg)"); @@ -1225,40 +1296,14 @@ $clone.css("background-image", $select.data("src") ? "url('"+ $select.data("src") +"')" : ""); $clone.addClass($select.data("class") || ""); - // insert - $clone.removeClass('active').insertAfter($active); - this.$target.carousel().carousel(++index); - this.rebind_event(); + return $clone; }, - on_remove: function (e) { - e.preventDefault(); - if (this.remove_process) { - return; - } + // rebind event to active carousel on edit mode + rebind_event: function () { var self = this; - var new_index = 0; - var cycle = this.$inner.find('.item').length - 1; - var index = this.$inner.find('.item.active').index(); - - if (cycle > 0) { - this.remove_process = true; - var $el = this.$inner.find('.item.active'); - self.$target.on('slid.bs.carousel', function (event) { - $el.remove(); - self.$indicators.find("li:last").remove(); - self.$target.off('slid.bs.carousel'); - self.rebind_event(); - self.remove_process = false; - if (cycle == 1) { - self.on_remove(e); - } - }); - setTimeout(function () { - self.$target.carousel( index > 0 ? --index : cycle ); - }, 500); - } else { - this.$target.find('.carousel-control, .carousel-indicators').addClass("hidden"); - } + this.$target.find('.carousel-control').off('click').on('click', function () { + self.$target.carousel( $(this).data('slide')); }); + this._super(); }, }); @@ -1300,7 +1345,8 @@ * Don't need to add data-snippet-id="..." into the views */ - website.snippet.selector.push([".row > div[class*='col-md-']", 'colmd']); + website.snippet.selector.push([".row > [class*='col-md-']", 'colmd']); website.snippet.selector.push(['hr', 'hr']); + website.snippet.selector.push(['blockquote', 'quote']); })(); diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js index 3c812b00268..0632eab3cc9 100644 --- a/addons/website/static/src/js/website.tour.banner.js +++ b/addons/website/static/src/js/website.tour.banner.js @@ -76,7 +76,7 @@ element: '.oe_overlay_options .oe_options', placement: 'left', title: "Customize the banner", - content: "You can customize characteristic of any blocks through the Customize menu. For instance, change the background of the banner.", + content: "Customize any block through this menu. Try to change the background of the banner.", template: self.popover({ next: "Continue" }), }, { diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index 17f8dbd5d89..4ff2384d222 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -36,7 +36,7 @@ -