From 2569e07191422bbd3535ded11825425de4247dd1 Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Mon, 3 Mar 2014 12:39:46 +0100 Subject: [PATCH 01/56] [IMP] website: snippet don't use snipet id bzr revid: chm@openerp.com-20140303113946-d70yd8nmew1k3z37 --- .../src/js/website.snippets.animation.js | 11 +- .../static/src/js/website.snippets.editor.js | 899 +++++++++--------- .../website/static/src/xml/website.editor.xml | 2 +- addons/website/views/snippets.xml | 178 ++-- 4 files changed, 553 insertions(+), 537 deletions(-) diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js index bc2ea064731..01e4c5239cb 100644 --- a/addons/website/static/src/js/website.snippets.animation.js +++ b/addons/website/static/src/js/website.snippets.animation.js @@ -5,13 +5,18 @@ if (!website.snippet) website.snippet = {}; website.snippet.readyAnimation = []; - website.snippet.start_animation = function () { + website.snippet.start_animation = function ($target) { for (var k in website.snippet.animationRegistry) { var Animation = website.snippet.animationRegistry[k]; var selector = "[data-snippet-id='"+k+"']"; if (Animation.prototype.selector) { selector += ", " + Animation.prototype.selector; } + if ($target) { + if ($target.is(selector)) selector = $target; + else continue; + } + $(selector).each(function() { var $snipped_id = $(this); if ( !$snipped_id.parents("#oe_snippets").length && @@ -32,7 +37,7 @@ } }); }; - $(document).ready(website.snippet.start_animation); + $(document).ready(function () {website.snippet.start_animation();}); website.snippet.animationRegistry = {}; @@ -67,7 +72,7 @@ }); website.snippet.animationRegistry.parallax = website.snippet.Animation.extend({ - parallax: ".parallax", + selector: ".parallax", start: function () { var self = this; setTimeout(function () {self.set_values();}); diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js index 23c5956ebf4..addd610e47b 100644 --- a/addons/website/static/src/js/website.snippets.editor.js +++ b/addons/website/static/src/js/website.snippets.editor.js @@ -167,6 +167,9 @@ 'snippet-style-id' : style_id, 'selector': $style.data('selector'), '$el': $style, + 'selector-siblings': $style.data('selector-siblings'), + 'selector-children': $style.data('selector-children'), + 'selector-vertical-children': $style.data('selector-vertical-children') }; }); $styles.addClass("hidden"); @@ -219,12 +222,19 @@ return; } snipped_event_flag = true; + var selector = []; + for (var k in website.snippet.styles) { + selector.push(website.snippet.styles[k].selector); + } + selector = selector.join(","); + setTimeout(function () {snipped_event_flag = false;}, 0); var $target = $(event.srcElement); - if (!$target.attr("data-snippet-id")) { - $target = $target.parents("[data-snippet-id]:first"); + + if (!$target.is(selector)) { + $target = $target.parents(selector).first(); } - if (!$target.attr("data-oe-model") && !$target.parents("[data-oe-model]:first").length) { + if (!self.dom_filter($target).length) { $target = false; } if (self.$active_snipped_id && self.$active_snipped_id.is($target)) { @@ -281,8 +291,7 @@ if (typeof $snippet.data("snippet-editor") === 'undefined') { var $targets = this.activate_overlay_zones($snippet); if (!$targets.length) return; - var editor = website.snippet.editorRegistry[$snippet.data("snippet-id")] || website.snippet.editorRegistry.resize; - $snippet.data("snippet-editor", new editor(this, $snippet)); + $snippet.data("snippet-editor", new website.snippet.Editor(this, $snippet)); } this.cover_target($snippet.data('overlay'), $snippet); }, @@ -318,36 +327,50 @@ start: function(){ self.hide(); dropped = false; + // snippet_selectors => to get selector-siblings, selector-children, selector-vertical-children $snippet = $(this); - snipped_id = $snippet.data('snippet-id'); + $toInsert = $snippet.find('.oe_snippet_body').clone(); + $toInsert.removeClass('oe_snippet_body'); + + var selector = []; + var selector_siblings = []; + var selector_children = []; + var selector_vertical_children = []; + for (var k in website.snippet.styles) { + if ($toInsert.is(website.snippet.styles[k].selector)) { + selector.push(website.snippet.styles[k].selector); + if (website.snippet.styles[k]['selector-siblings']) + selector_siblings.push(website.snippet.styles[k]['selector-siblings']); + if (website.snippet.styles[k]['selector-children']) + selector_children.push(website.snippet.styles[k]['selector-children']); + if (website.snippet.styles[k]['selector-vertical-children']) + selector_vertical_children.push(website.snippet.styles[k]['selector-vertical-children']); + } + } + action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate'; + if( action === 'insert'){ - if (!$snippet.data('selector-siblings') && !$snippet.data('selector-children') && !$snippet.data('selector-vertical-children')) { + if (!selector_siblings.length && !selector_children.length && !selector_vertical_children.length) { console.debug($snippet.data("snippet-id") + " have oe_snippet_body class and have not for insert action"+ "data-selector-siblings, data-selector-children or data-selector-vertical-children tag for mutate action"); return; } + console.log(selector_siblings); + console.log(selector_children); + console.log(selector_vertical_children); self.activate_insertion_zones({ - siblings: $snippet.data('selector-siblings'), - children: $snippet.data('selector-children'), - vertical_children: $snippet.data('selector-vertical-children') + siblings: selector_siblings.join(","), + children: selector_children.join(","), + vertical_children: selector_vertical_children.join(","), }); - $toInsert = $snippet.find('.oe_snippet_body').clone(); - $toInsert.removeClass('oe_snippet_body'); - $toInsert.data('src-snippet-id', snipped_id); - if (!$toInsert.data('snippet-id')) { - $toInsert.attr('data-snippet-id', snipped_id); - } else { - snipped_id = $toInsert.data('snippet-id'); - } - } else if( action === 'mutate' ){ if (!$snippet.data('selector')) { console.debug($snippet.data("snippet-id") + " have not oe_snippet_body class and have not data-selector tag"); return; } - var $targets = self.activate_overlay_zones($snippet.data('selector')); + var $targets = self.activate_overlay_zones(selector_children.join(",")); $targets.each(function(){ var $clone = $(this).data('overlay').clone(); $clone.addClass("oe_drop_zone").data('target', $(this)); @@ -382,56 +405,31 @@ } $('.oe_drop_zone').droppable('destroy').remove(); + if (dropped) { var $target = false; - if(action === 'insert'){ - $target = $toInsert; + $target = $toInsert; - website.snippet.start_animation(); + setTimeout(function () { + $("#oe_snippets").trigger('snippet-dropped', $target); + + // after rte + website.snippet.start_animation($target); self.create_overlay($target); if ($target.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'); - - self.create_overlay($target); - if (website.snippet.editorRegistry[snipped_id]) { - var snippet = new website.snippet.editorRegistry[snipped_id](self, $target); - snippet.drop_and_build_snippet($target); + for (var k in website.snippet.styles) { + $target.find(website.snippet.styles[k].selector).each(function () { + var $snippet = $(this); + self.create_overlay($snippet); + if ($snippet.data("snippet-editor")) { + $snippet.data("snippet-editor").drop_and_build_snippet($snippet); + } + }); } - } - setTimeout(function () { - $("#oe_snippets").trigger('snippet-dropped', $target); - - // reset snippet for rte - $target.removeData("snippet-editor"); - if ($target.data("overlay")) { - $target.data("overlay").remove(); - $target.removeData("overlay"); - } - self.create_overlay($target); - $target.find("[data-snippet-id]").each(function () { - var $snippet = $(this); - $snippet.removeData("snippet-editor"); - if ($snippet.data("overlay")) { - $snippet.data("overlay").remove(); - $snippet.removeData("overlay"); - } - self.create_overlay($snippet); - }); - // end self.make_active($target); },0); @@ -598,8 +596,8 @@ website.snippet.styleRegistry = {}; website.snippet.StyleEditor = openerp.Class.extend({ // initialisation (don't overwrite) - init: function (parent, $target, snippet_id) { - this.parent = parent; + init: function (BuildingBlock, $target, snippet_id) { + this.BuildingBlock = BuildingBlock; this.$target = $target; var styles = this.$target.data("snippet-style-ids") || {}; styles[snippet_id] = this; @@ -664,6 +662,13 @@ // start is call just after the init start: function () { }, + /* + * drop_and_build_snippet + * This method is called just after that a thumbnail is drag and dropped into a drop zone + * (after the insertion of this.$body, if this.$body exists) + */ + drop_and_build_snippet: function ($target) { + }, /* select * called when a user select an item * variables: np = {$next, $prev} @@ -715,7 +720,6 @@ } }); - website.snippet.styleRegistry.background = website.snippet.StyleEditor.extend({ _get_bg: function () { return this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, ""); @@ -781,217 +785,171 @@ this.$el.find('li:has(li[data-class].active)').addClass("active"); } }); + website.snippet.styleRegistry.slider = website.snippet.StyleEditor.extend({ + drop_and_build_snippet: function() { + var id = $(".carousel").length; + this.id = "myCarousel" + id; + this.$target.attr("id", this.id); + this.$target.find(".carousel-control").attr("href", "#myCarousel" + id); + this.$target.find("[data-target]").attr("data-target", "#myCarousel" + id); - - website.snippet.editorRegistry = {}; - website.snippet.Editor = openerp.Class.extend({ - init: function (parent, dom) { - this.parent = parent; - this.$target = $(dom); - this.$overlay = this.$target.data('overlay'); - this.snippet_id = this.$target.data("snippet-id"); - this._readXMLData(); - this.load_style_options(); - this.get_parent_block(); - this.start(); + this.rebind_event(); }, - - /* - * _readXMLData - * Read data XML and set value into: - * this.$el : - * all xml data - * this.$overlay : - * Dom hover the $target who content options - * this.$editor : - * content of .oe_snippet_options - * Displayed into the overlay options on focus - */ - _readXMLData: function() { + // rebind event to active carousel on edit mode + rebind_event: function () { var self = this; - this.$el = this.parent.$snippets.filter(function () { return $(this).data("snippet-id") == self.snippet_id; }).clone(); - this.$editor = this.$el.find(".oe_snippet_options"); - var $options = this.$overlay.find(".oe_overlay_options"); - this.$editor.prependTo($options.find(".oe_options ul")); - if ($options.find(".oe_options ul li").length) { - $options.find(".oe_options").removeClass("hidden"); - } + this.$target.find('.carousel-indicators [data-target]').off('click').on('click', function () { + self.$target.carousel(+$(this).data('slide-to')); }); + + this.$target.attr('contentEditable', 'false'); + this.$target.find('.oe_structure, .content>.row').attr('contentEditable', 'true'); }, - - - // activate drag and drop for the snippets in the snippet toolbar - _drag_and_drop: function(){ - var self = this; - this.dropped = false; - this.$overlay.draggable({ - greedy: true, - appendTo: 'body', - cursor: "move", - handle: ".oe_snippet_move", - cursorAt: { - left: 18, - top: 14 - }, - helper: function() { - var $clone = $(this).clone().css({width: "24px", height: "24px", border: 0}); - $clone.find(".oe_overlay_options >:not(:contains(.oe_snippet_move)), .oe_handle").remove(); - $clone.find(":not(.glyphicon)").css({position: 'absolute', top: 0, left: 0}); - $clone.appendTo("body").removeClass("hidden"); - return $clone; - }, - start: _.bind(self._drag_and_drop_start, self), - stop: _.bind(self._drag_and_drop_stop, self) - }); - }, - _drag_and_drop_after_insert_dropzone: function (){}, - _drag_and_drop_active_drop_zone: function ($zones){ - var self = this; - $zones.droppable({ - over: function(){ - $(".oe_drop_zone.hide").removeClass("hide"); - $(this).addClass("hide").first().after(self.$target); - self.dropped = true; - }, - out: function(){ - $(this).removeClass("hide"); - self.$target.detach(); - self.dropped = false; - }, - }); - }, - _drag_and_drop_start: function (){ - var self = this; - self.parent.hide(); - self.parent.editor_busy = true; - self.size = { - width: self.$target.width(), - height: self.$target.height() - }; - self.$target.after("