[IMP] website: snippet: remove data-snippet-id and add auto resize on resising option

bzr revid: chm@openerp.com-20140303142017-jcb3401wpiuvbc1n

diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 8abf901..6390050 100644 (file)
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -25,7 +25,7 @@
     <t t-set="additional_title">Partner Detail</t>
     <div id="wrap">
         <div class="oe_structure">
-            <section data-snippet-id="title">
+            <section>
                 <div class="container">
                     <div class="row">
                         <div class="col-md-12">
@@ -73,7 +73,7 @@ response = request.website.render("website.template_partner_post", values)
     <t t-set="additional_title">Partners</t>
     <div id="wrap">
         <div class="oe_structure">
-            <section data-snippet-id="title">
+            <section>
                 <div class="container">
                     <div class="row">
                         <div class="col-md-12">

diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index fe9c18c..3f5373e 100644 (file)
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -608,8 +608,3 @@
   height: 16px;
   display: inline-block;
 }
-
-[data-snippet-id] {
-  min-height: 10px;
-  min-width: 10px;
-}

diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index a06bba0..f9432b3 100644 (file)
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -483,10 +483,6 @@
             height: 16px
             display: inline-block
 
-[data-snippet-id] 
-    min-height: 10px
-    min-width: 10px
-
 
 
 

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index e47b7a4..78262bc 100644 (file)
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -280,12 +280,13 @@ ul.nav-stacked > li > a {
   background-size: 100%;
 }
 
-[data-snippet-id], .colmd, .hr, .blockquote {
+section, .carousel, .parallax, .row, .hr, .blockquote {
+  min-height: 30px;
   overflow: hidden;
 }
 
 @media (max-width: 400px) {
-  [data-snippet-id]:not([data-snippet-id="carousel"]) {
+  section, .parallax, .row, .hr, .blockquote {
     height: auto !important;
   }
 }
@@ -380,10 +381,10 @@ ul.nav-stacked > li > a {
 }
 
 /* Parallax Theme */
-div.carousel[data-snippet-id="slider"] .carousel-indicators li {
+div.carousel .carousel-indicators li {
   border: 1px solid grey;
 }
-div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
+div.carousel .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 3cdfe37..680f26c 100644 (file)
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -230,11 +230,12 @@ ul.nav-stacked > li > a
 .oe_img_bg
     background-size: 100%
 
-[data-snippet-id],.colmd,.hr,.blockquote
+section, .carousel, .parallax, .row, .hr, .blockquote
+    min-height: 30px
     overflow: hidden
 
 @media (max-width: 400px)
-    [data-snippet-id]:not([data-snippet-id="carousel"])
+    section, .parallax, .row, .hr, .blockquote
         height: auto !important
 
 .carousel-inner
@@ -312,7 +313,7 @@ ul.nav-stacked > li > a
 
 /* Parallax Theme */
 
-div.carousel[data-snippet-id="slider"]
+div.carousel
     .carousel-indicators
         li
             border: 1px solid grey

diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index 01e4c52..e07e58e 100644 (file)
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -8,9 +8,10 @@
     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+"']";
+            var selector = "";
             if (Animation.prototype.selector) {
-                selector += ", " + Animation.prototype.selector;
+                if (selector != "") selector += ", " 
+                selector += Animation.prototype.selector;
             }
             if ($target) {
                 if ($target.is(selector)) selector = $target;

diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 891ebc0..94035d2 100644 (file)
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -36,7 +36,6 @@
             // FIXME: call clean_for_save on all snippets of the page, not only modified ones
             // important for banner of parallax that changes data automatically.
             this.snippets.clean_for_save();
-            remove_added_snippet_id();
             this._super();
         },
     });
@@ -49,38 +48,13 @@
                 })) {
             return;
         }
-        hack_to_add_snippet_id()
-    });
-
-    // puts $el at the same absolute position as $target
-    function hack_to_add_snippet_id () {
-        _.each(website.snippet.selector, function (val) {
-            $(val[0]).each(function() {
-                if (!$(this).is("[data-snippet-id]") && $(this).parents("[data-oe-model]").length) {
-                    $(this).attr("data-snippet-id", val[1]);
-                }
-            });
-        });
-    }
-    function remove_added_snippet_id () {
-        _.each(website.snippet.selector, function (val) {
-            $(val[0]).each(function() {
-                if ($(this).data("snippet-id") === val[1]) {
-                    $(this).removeAttr("data-snippet-id");
-                }
-            });
-        });
-    }
-
-    $(document).ready(function() {
-        hack_to_add_snippet_id();
     });
 
     // 'snippet-dropped' is triggered on '#oe_snippets' whith $target as attribute when a snippet is dropped
     // 'snippet-activated' is triggered on '#oe_snippets' (and on snippet) when a snippet is activated
 
     if (!website.snippet) website.snippet = {};
-    website.snippet.styles = {};
+    website.snippet.templateOptions = {};
     website.snippet.selector = [];
     website.snippet.BuildingBlock = openerp.Widget.extend({
         template: 'website.snippets',
@@ -92,7 +66,6 @@
                 $("<div id='oe_manipulators'></div>").appendTo('body');
             }
             this.$active_snipped_id = false;
-            hack_to_add_snippet_id();
             this.snippets = [];
 
             observer.observe(document.body, {
@@ -159,12 +132,12 @@
                 .then(function (html) {
                     var $html = $(html);
 
-                    var $styles = $html.find("[data-snippet-style-id]");
+                    var $styles = $html.find("[data-snippet-option-id]");
                     $styles.each(function () {
                         var $style = $(this);
-                        var style_id = $style.data('snippet-style-id');
-                        website.snippet.styles[style_id] = {
-                            'snippet-style-id' : style_id,
+                        var style_id = $style.data('snippet-option-id');
+                        website.snippet.templateOptions[style_id] = {
+                            'snippet-option-id' : style_id,
                             'selector': $style.data('selector'),
                             '$el': $style,
                             'selector-siblings': $style.data('selector-siblings'),
@@ -223,8 +196,8 @@
                 }
                 snipped_event_flag = true;
                 var selector = [];
-                for (var k in website.snippet.styles) {
-                    selector.push(website.snippet.styles[k].selector);
+                for (var k in website.snippet.templateOptions) {
+                    selector.push(website.snippet.templateOptions[k].selector);
                 }
                 selector = selector.join(",");
 
@@ -336,15 +309,15 @@
                     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']);
+                    for (var k in website.snippet.templateOptions) {
+                        if ($toInsert.is(website.snippet.templateOptions[k].selector)) {
+                            selector.push(website.snippet.templateOptions[k].selector);
+                            if (website.snippet.templateOptions[k]['selector-siblings'])
+                                selector_siblings.push(website.snippet.templateOptions[k]['selector-siblings']);
+                            if (website.snippet.templateOptions[k]['selector-children'])
+                                selector_children.push(website.snippet.templateOptions[k]['selector-children']);
+                            if (website.snippet.templateOptions[k]['selector-vertical-children'])
+                                selector_vertical_children.push(website.snippet.templateOptions[k]['selector-vertical-children']);
                         }
                     }
 
@@ -418,8 +391,8 @@
                                 $target.data("snippet-editor").drop_and_build_snippet($target);
                             }
 
-                            for (var k in website.snippet.styles) {
-                                $target.find(website.snippet.styles[k].selector).each(function () {
+                            for (var k in website.snippet.templateOptions) {
+                                $target.find(website.snippet.templateOptions[k].selector).each(function () {
                                     var $snippet = $(this);
                                     self.create_overlay($snippet);
                                     if ($snippet.data("snippet-editor")) {
@@ -545,7 +518,7 @@
         // generate drop zones covering the elements selected by the selector
         // we generate overlay drop zones only to get an idea of where the snippet are, the drop
         activate_overlay_zones: function(selector){
-            var $targets = this.dom_filter(selector || '[data-snippet-id]');
+            var $targets = this.dom_filter(selector);
             var self = this;
 
             if (typeof selector !== 'string' && !$targets.length) {
@@ -590,18 +563,18 @@
     });
 
 
-    website.snippet.styleRegistry = {};
-    website.snippet.StyleEditor = openerp.Class.extend({
+    website.snippet.options = {};
+    website.snippet.Option = openerp.Class.extend({
         // initialisation (don't overwrite)
         init: function (BuildingBlock, $target, snippet_id) {
             this.BuildingBlock = BuildingBlock;
             this.$target = $target;
-            var styles = this.$target.data("snippet-style-ids") || {};
+            var styles = this.$target.data("snippet-option-ids") || {};
             styles[snippet_id] = this;
-            this.$target.data("snippet-style-ids", styles);
+            this.$target.data("snippet-option-ids", styles);
             this.$overlay = this.$target.data('overlay');
-            this['snippet-style-id'] = snippet_id;
-            this.$el = website.snippet.styles[snippet_id].$el.find(">li").clone();
+            this['snippet-option-id'] = snippet_id;
+            this.$el = website.snippet.templateOptions[snippet_id].$el.find(">li").clone();
 
             this.required = this.$el.data("required");
 
@@ -717,7 +690,7 @@
         }
     });
 
-    website.snippet.styleRegistry.background = website.snippet.StyleEditor.extend({
+    website.snippet.options.background = website.snippet.Option.extend({
         _get_bg: function () {
             return this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
         },
@@ -782,7 +755,7 @@
             this.$el.find('li:has(li[data-class].active)').addClass("active");
         }
     });
-    website.snippet.styleRegistry.slider = website.snippet.StyleEditor.extend({
+    website.snippet.options.slider = website.snippet.Option.extend({
         drop_and_build_snippet: function() {
             var id = $(".carousel").length;
             this.id = "myCarousel" + id;
@@ -869,7 +842,7 @@
             }
         },
     });
-    website.snippet.styleRegistry.carousel = website.snippet.styleRegistry.slider.extend({
+    website.snippet.options.carousel = website.snippet.options.slider.extend({
         getSize: function () {
             this.grid = this._super();
             this.grid.size = 8;
@@ -895,8 +868,8 @@
             };
             this.$target.on('snippet-style-change snippet-style-preview', function (event, style, np) {
                 var $active = self.$target.find(".item.active");
-                if (style['snippet-style-id'] === "size") return;
-                if (style['snippet-style-id'] === "background") {
+                if (style['snippet-option-id'] === "size") return;
+                if (style['snippet-option-id'] === "background") {
                     $active.css("background-image", self.$target.css("background-image"));
                 }
                 if (np.$prev) {
@@ -923,7 +896,7 @@
             var $clone = this._super();
 
             // choose an other background
-            var bg = this.$target.data("snippet-style-ids").background;
+            var bg = this.$target.data("snippet-option-ids").background;
             if (!bg) return $clone;
 
             var $styles = bg.$el.find("li[data-class]:not(.oe_custom_bg)");
@@ -946,7 +919,7 @@
         },
     });
 
-    website.snippet.styleRegistry.resize = website.snippet.StyleEditor.extend({
+    website.snippet.options.marginAndResize = website.snippet.Option.extend({
         start: function () {
             var self = this;
             this._super();
@@ -1111,7 +1084,7 @@
             this.change_cursor();
         }
     });
-    website.snippet.styleRegistry["margin-y"] = website.snippet.styleRegistry.resize.extend({
+    website.snippet.options["margin-y"] = website.snippet.options.marginAndResize.extend({
         getSize: function () {
             this.grid = this._super();
             var grid = [0,4,8,16,32,48,64,92,128];
@@ -1125,7 +1098,7 @@
             return this.grid;
         },
     });
-    website.snippet.styleRegistry["margin-x"] = website.snippet.styleRegistry.resize.extend({
+    website.snippet.options["margin-x"] = website.snippet.options.marginAndResize.extend({
         getSize: function () {
             this.grid = this._super();
             var width = this.$target.parents(".row:first").first().outerWidth();
@@ -1223,15 +1196,24 @@
             this._super(compass, beginClass, current);
         },
     });
-    website.snippet.styleRegistry["resize"] = website.snippet.styleRegistry.resize.extend({
+    website.snippet.options["resize"] = website.snippet.options.marginAndResize.extend({
         getSize: function () {
             this.grid = this._super();
             this.grid.size = 8;
             return this.grid;
         },
+        start: function () {
+            var self = this;
+            this._super();
+            this.$el.find(".js_size_auto").on('click', function (event){
+                self.$target.css("height", "");
+                self.BuildingBlock.cover_target(self.$overlay, self.$target);
+                return false;
+            });
+        },
     });
 
-    website.snippet.styleRegistry.parallax = website.snippet.StyleEditor.extend({
+    website.snippet.options.parallax = website.snippet.Option.extend({
         getSize: function () {
             this.grid = this._super();
             this.grid.size = 8;
@@ -1362,7 +1344,6 @@
                 children: self.selector_children,
                 vertical_children: self.selector_vertical_children,
             });
-            console.log(self);
 
             $("body").addClass('move-important');
 
@@ -1391,7 +1372,7 @@
             this.selector_siblings = [];
             this.selector_children = [];
             this.selector_vertical_children = [];
-            _.each(website.snippet.styles, function (val) {
+            _.each(website.snippet.templateOptions, function (val) {
                 if (!self.$target.is(val.selector)) {
                     return;
                 }
@@ -1399,8 +1380,8 @@
                 if (val['selector-children']) self.selector_children.push(val['selector-children']);
                 if (val['selector-vertical-children']) self.selector_vertical_children.push(val['selector-vertical-children']);
 
-                var style = val['snippet-style-id'];
-                var Editor = website.snippet.styleRegistry[style] || website.snippet.StyleEditor;
+                var style = val['snippet-option-id'];
+                var Editor = website.snippet.options[style] || website.snippet.Option;
                 var editor = self.styles[style] = new Editor(self.BuildingBlock, self.$target, style);
                 $ul.append(editor.$el.addClass("snippet-style-" + style));
             });

diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 1d4a0c0..97568e3 100644 (file)
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -47,7 +47,7 @@
                 },
                 {
                     waitFor:   '.oe_overlay_options .oe_options:visible',
-                    element:   '#wrap [data-snippet-id=carousel]:first .carousel-caption',
+                    element:   '#wrap .carousel:first .carousel-caption',
                     placement: 'top',
                     title:     _("Customize banner's text"),
                     content:   _("Click in the text and start editing it."),

diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 88f1c7a..e9cb694 100644 (file)
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -827,9 +827,9 @@
 
 </div>
 
-<div id="snippet_styles" class="hidden">
+<div id="snippet_options" class="hidden">
 
-    <div data-snippet-style-id='blog-style'
+    <div data-snippet-option-id='blog-style'
         data-selector="section:not(.carousel):not(.parallax)">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Style</a>
@@ -839,7 +839,7 @@
         </li>
     </div>
 
-    <div data-snippet-style-id='background'
+    <div data-snippet-option-id='background'
         data-selector="section, .carousel, .parallax">
         <li class="dropdown-submenu" data-required="true">
             <a tabindex="-1" href="#">Background</a>
@@ -896,7 +896,7 @@
         </li>
     </div>
 
-    <div data-snippet-style-id='carousel'
+    <div data-snippet-option-id='carousel'
         data-selector=".carousel">
         <li class="divider"></li>
         <li>
@@ -907,7 +907,7 @@
         </li>
     </div>
 
-    <div data-snippet-style-id='carousel-style'
+    <div data-snippet-option-id='carousel-style'
         data-selector="div[data-snippet-id='carousel']">
         <li class="dropdown-submenu" data-required="true">
             <a tabindex="-1" href="#">Layout</a>
@@ -919,27 +919,30 @@
         </li>
     </div>
 
-    <div data-snippet-style-id='margin-y'
+    <div data-snippet-option-id='margin-y'
         data-selector="section, .row > [class*='col-md-'], .carousel, .parallax, hr">
     </div>
 
-    <div data-snippet-style-id='resize'
+    <div data-snippet-option-id='resize'
         data-selector="section, .carousel, .parallax"
         data-selector-children=".oe_structure, [data-oe-type=html]">
+        <li>
+            <a href="#" class="button js_size_auto">Size Automatic</a>
+        </li>
     </div>
 
-    <div data-snippet-style-id='margin-x'
+    <div data-snippet-option-id='margin-x'
         data-selector=".row > [class*='col-md-']"
         data-selector-vertical-children='.row'>
     </div>
 
-    <div data-snippet-style-id='content'
+    <div data-snippet-option-id='content'
         data-selector="p, h1, h2, h3, blockquote, .well, .panel"
         data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel"
         data-selector-children=".content">
     </div>
 
-    <div data-snippet-style-id='parallax'
+    <div data-snippet-option-id='parallax'
         data-selector=".parallax">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Scroll Speed</a>