[IMP] website.snippet: create automatically the thumbnail; data-option became data-js; add data-eval method; rename check_class into toggle_class

13 files changed, 268 insertions, 237 deletions

diff --git a/addons/mass_mailing/views/snippets.xml b/addons/mass_mailing/views/snippets.xml
index 8641ebf6be0..7ed0739daa2 100644
--- a/addons/mass_mailing/views/snippets.xml
+++ b/addons/mass_mailing/views/snippets.xml
@@ -29,7 +29,7 @@
     </xpath>
 
     <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-option='mailing_list_subscribe'
+        <div data-js='mailing_list_subscribe'
             data-selector=".js_subscribe"
             data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel">
             <li data-choose_mailing_list=""><a>Change Newsletter</a></li>
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index ebe87769794..db9664bd930 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -105,9 +105,8 @@
 }
 .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
   height: 74px;
-  -webkit-box-shadow: inset 0px 0px 0px 3px #333333;
-  -moz-box-shadow: inset 0px 0px 0px 3px #333333;
-  box-shadow: inset 0px 0px 0px 3px #333333;
+  width: 92px;
+  background-size: cover;
   -webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
   -ms-transform: scale(1, 1);
@@ -692,3 +691,74 @@
 .cke_panel_container table.colorpicker tr:last-child td {
   padding-bottom: 6px;
 }
+
+/* ---- thumbnail ----  {{{ */
+.oe_snippet.o_block_banner .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_banner.png");
+}
+.oe_snippet.o_block_text_image .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_text_image.png");
+}
+.oe_snippet.o_block_image_text .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_image_text.png");
+}
+.oe_snippet.o_block_jumbotron .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_jumbotron.png");
+}
+.oe_snippet.o_block_text_block .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_text_block.png");
+}
+.oe_snippet.o_block_title .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_title.png");
+}
+.oe_snippet.o_block_features .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_features.png");
+}
+.oe_snippet.o_block_big_picture .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_big_picture.png");
+}
+.oe_snippet.o_block_three_columns .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_three_columns.png");
+}
+.oe_snippet.o_block_well .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_well.png");
+}
+.oe_snippet.o_block_quote .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_quote.png");
+}
+.oe_snippet.o_block_panel .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_panel.png");
+}
+.oe_snippet.o_block_separator .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_separator.png");
+}
+.oe_snippet.o_block_button .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_button.png");
+}
+.oe_snippet.o_block_image_gallery .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_image_gallery.png");
+}
+.oe_snippet.o_block_comparison .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_comparison.png");
+}
+.oe_snippet.o_block_button .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_button.png");
+}
+.oe_snippet.o_block_faq .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_faq.png");
+}
+.oe_snippet.o_block_references .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_references.png");
+}
+.oe_snippet.o_block_quotes_slider .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_quotes_slider.png");
+}
+.oe_snippet.o_block_features .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_features.png");
+}
+.oe_snippet.o_block_parallax .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_parallax.png");
+}
+.oe_snippet.o_block_quotes_slider .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_quotes_slider.png");
+}
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index a94b8665e0c..4b00c892437 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -82,7 +82,8 @@
             +text-shadow(0 0 2px rgb(0,0,0))
         .oe_snippet_thumbnail_img
             height: 74px
-            +box-shadow(inset 0px 0px 0px 3px #333333)
+            width: 92px
+            background-size: cover
             @include transform( scale(1,1))
         span, div
             line-height: 18px
@@ -549,3 +550,57 @@
         padding-bottom: 6px
 
 // }}}
+
+/* ---- thumbnail ----  {{{ */
+
+.oe_snippet
+    &.o_block_banner .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_banner.png')
+    &.o_block_text_image .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_text_image.png')
+    &.o_block_image_text .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_image_text.png')
+    &.o_block_jumbotron .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_jumbotron.png')
+    &.o_block_text_block .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_text_block.png')
+    &.o_block_title .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_title.png')
+    &.o_block_features .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_features.png')
+    &.o_block_big_picture .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_big_picture.png')
+    &.o_block_three_columns .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_three_columns.png')
+
+    &.o_block_well .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_well.png')
+    &.o_block_quote .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_quote.png')
+    &.o_block_panel .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_panel.png')
+    &.o_block_separator .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_separator.png')
+    &.o_block_button .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_button.png')
+
+    &.o_block_image_gallery .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_image_gallery.png')
+    &.o_block_comparison .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_comparison.png')
+    &.o_block_button .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_button.png')
+    &.o_block_faq .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_faq.png')
+    &.o_block_references .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_references.png')
+    &.o_block_quotes_slider .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_quotes_slider.png')
+    &.o_block_features .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_features.png')
+
+    &.o_block_parallax .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_parallax.png')
+    &.o_block_quotes_slider .oe_snippet_thumbnail_img
+        background-image: url('/website/static/src/img/blocks/block_quotes_slider.png')
+// }}}
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index fc06f4e6aaa..c560a6c6a2f 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -183,11 +183,11 @@
                     var $html = $(html);
 
                     var selector = [];
-                    var $styles = $html.find("[data-option], [data-selector]");
+                    var $styles = $html.find("[data-js], [data-selector]");
                     $styles.each(function () {
                         var $style = $(this);
                         var no_check = $style.data('no-check');
-                        var option_id = $style.data('option');
+                        var option_id = $style.data('js');
                         var option = {
                             'option' : option_id,
                             'base_selector': $style.data('selector'),
@@ -195,7 +195,6 @@
                             '$el': $style,
                             'drop-near': $style.data('drop-near') && self._add_check_selector($style.data('drop-near'), no_check),
                             'drop-in': $style.data('drop-in') && self._add_check_selector($style.data('drop-in'), no_check),
-                            'drop-in-vertical': $style.data('drop-in-vertical') && self._add_check_selector($style.data('drop-in-vertical'), no_check),
                             'data': $style.data()
                         };
                         website.snippet.templateOptions.push(option);
@@ -204,7 +203,20 @@
                     $styles.addClass("hidden");
                     website.snippet.globalSelector = selector.join(",");
 
-                    self.$snippets = $html.find(".tab-content > div > div").addClass("oe_snippet");
+                    self.$snippets = $html.find(".tab-content > div > div")
+                        .addClass("oe_snippet")
+                        .each(function () {
+                            if (!$('.oe_snippet_thumbnail', this).size()) {
+                                var $div = $(
+                                    '<div class="oe_snippet_thumbnail">'+
+                                        '<div class="oe_snippet_thumbnail_img"/>'+
+                                        '<span class="oe_snippet_thumbnail_title"></span>'+
+                                    '</div>');
+                                $div.find('span').text($(this).attr("name"));
+                                $(this).prepend($div);
+                            }
+                            $("> *:not(.oe_snippet_thumbnail)", this).addClass('oe_snippet_body');
+                        });
 
                     self.$el.append($html);
 
@@ -320,7 +332,7 @@
         // activate drag and drop for the snippets in the snippet toolbar
         make_snippet_draggable: function($snippets){
             var self = this;
-            var $tumb = $snippets.find(".oe_snippet_thumbnail:first");
+            var $tumb = $snippets.find(".oe_snippet_thumbnail_img:first");
             var left = $tumb.outerWidth()/2;
             var top = $tumb.outerHeight()/2;
             var $toInsert, dropped, $snippet, action, snipped_id;
@@ -339,22 +351,21 @@
                 start: function(){
                     self.hide();
                     dropped = false;
-                    // snippet_selectors => to get drop-near, drop-in, drop-in-vertical
+                    // snippet_selectors => to get drop-near, drop-in
                     $snippet = $(this);
                     var $base_body = $snippet.find('.oe_snippet_body');
                     var selector = [];
                     var selector_siblings = [];
                     var selector_children = [];
-                    var selector_vertical_children = [];
-                    for (var k in website.snippet.templateOptions) {
-                        if ($base_body.is(website.snippet.templateOptions[k].base_selector)) {
-                            selector.push(website.snippet.templateOptions[k].base_selector);
-                            if (website.snippet.templateOptions[k]['drop-near'])
-                                selector_siblings.push(website.snippet.templateOptions[k]['drop-near']);
-                            if (website.snippet.templateOptions[k]['drop-in'])
-                                selector_children.push(website.snippet.templateOptions[k]['drop-in']);
-                            if (website.snippet.templateOptions[k]['drop-in-vertical'])
-                                selector_vertical_children.push(website.snippet.templateOptions[k]['drop-in-vertical']);
+                    var vertical = false;
+                    var temp = website.snippet.templateOptions;
+                    for (var k in temp) {
+                        if ($base_body.is(temp[k].base_selector)) {
+                            selector.push(temp[k].base_selector);
+                            if (temp[k]['drop-near'])
+                                selector_siblings.push(temp[k]['drop-near']);
+                            if (temp[k]['drop-in'])
+                                selector_children.push(temp[k]['drop-in']);
                         }
                     }
 
@@ -362,15 +373,13 @@
                     action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate';
 
                     if( action === 'insert'){
-                        if (!selector_siblings.length && !selector_children.length && !selector_vertical_children.length) {
-                            console.debug($snippet.find(".oe_snippet_thumbnail_title").text() + " have not insert action: "+
-                                "data-drop-near, data-drop-in or data-drop-in-vertical");
+                        if (!selector_siblings.length && !selector_children.length) {
+                            console.debug($snippet.find(".oe_snippet_thumbnail_title").text() + " have not insert action: data-drop-near or data-drop-in");
                             return;
                         }
                         self.activate_insertion_zones({
                             siblings: selector_siblings.join(","),
                             children: selector_children.join(","),
-                            vertical_children: selector_vertical_children.join(","),
                         });
 
                     } else if( action === 'mutate' ){
@@ -482,57 +491,48 @@
             var self = this;
             var child_selector = selector.children;
             var sibling_selector = selector.siblings;
-            var vertical_child_selector   =  selector.vertical_children;
 
-            var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
+            var zone_template = $("<div class='oe_drop_zone oe_insert'></div>");
 
             if(child_selector){
                 self.$wrapwrap.find(child_selector).each(function (){
                     var $zone = $(this);
-                    $zone.find('> *:not(.oe_drop_zone):visible').after(zone_template);
-                    $zone.prepend(zone_template);
-                });
-            }
-
-            if(vertical_child_selector){
-                self.$wrapwrap.find(vertical_child_selector).each(function (){
-                    var $zone = $(this);
-                    var $template = $(zone_template).addClass("oe_vertical");
-                    var nb = 0;
-                    var $lastinsert = false;
-                    var left = 0;
-                    var temp_left = 0;
-                    $zone.find('> *:not(.oe_drop_zone):visible').each(function () {
-                        var $col = $(this);
-                        $template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")))+'px');
-                        $lastinsert = $template.clone();
-                        $(this).after($lastinsert);
-
-                        temp_left = $col.position().left;
-                        if (left === temp_left) {
-                            $col.prev(".oe_drop_zone.oe_vertical").remove();
-                            $col.before($template.clone().css("clear", "left"));
-                        }
-                        else if (!nb) {
-                            $col.before($template.clone());
-                        }
-                        left = temp_left;
-                        nb ++;
-                    });
-                    if (!nb) {
-                        $zone.prepend($template.css('height', $zone.outerHeight()+'px'));
+                    var vertical;
+                    var float = window.getComputedStyle(this).float;
+                    if (float === "left" || float === "right") {
+                        vertical = $zone.parent().outerHeight()+'px';
                     }
+                    var $drop = zone_template.clone();
+                    if (vertical) {
+                        $drop.addClass("oe_vertical").css('height', vertical);
+                    }
+                    $zone.find('> *:not(.oe_drop_zone):visible').after($drop);
+                    $zone.prepend($drop.clone());
                 });
             }
 
             if(sibling_selector){
                 self.$wrapwrap.find(sibling_selector, true).each(function (){
                     var $zone = $(this);
+                    var $drop, vertical;
+                    var float = window.getComputedStyle(this).float;
+                    if (float === "left" || float === "right") {
+                        vertical = $zone.parent().outerHeight()+'px';
+                    }
+
                     if($zone.prev('.oe_drop_zone:visible').length === 0){
-                        $zone.before(zone_template);
+                        $drop = zone_template.clone();
+                        if (vertical) {
+                            $drop.addClass("oe_vertical").css('height', vertical);
+                        }
+                        $zone.before($drop);
                     }
                     if($zone.next('.oe_drop_zone:visible').length === 0){
-                        $zone.after(zone_template);
+                        $drop = zone_template.clone();
+                        if (vertical) {
+                            $drop.addClass("oe_vertical").css('height', vertical);
+                        }
+                        $zone.after($drop);
                     }
                 });
             }
@@ -699,11 +699,11 @@
         */
         set_active: function () {
             var classes = _.uniq((this.$target.attr("class") || '').split(/\s+/));
-            this.$el.find('[data-check_class], [data-select_class]')
+            this.$el.find('[data-toggle_class], [data-select_class]')
                 .add(this.$el)
-                .filter('[data-check_class], [data-select_class]')
+                .filter('[data-toggle_class], [data-select_class]')
                 .removeClass("active")
-                .filter('[data-check_class="' + classes.join('"], [data-check_class="') + '"] ,'+
+                .filter('[data-toggle_class="' + classes.join('"], [data-toggle_class="') + '"] ,'+
                     '[data-select_class="' + classes.join('"], [data-select_class="') + '"]')
                 .addClass("active");
         },
@@ -797,11 +797,11 @@
         },
 
         // default method for snippet
-        check_class: function (type, value, $li) {
-            var $lis = this.$el.find('[data-check_class]').add(this.$el).filter('[data-check_class]');
+        toggle_class: function (type, value, $li) {
+            var $lis = this.$el.find('[data-toggle_class]').add(this.$el).filter('[data-toggle_class]');
 
             function map ($lis) {
-                return $lis.map(function () {return $(this).data("check_class");}).get().join(" ");
+                return $lis.map(function () {return $(this).data("toggle_class");}).get().join(" ");
             }
             var classes = map($lis);
             var active_classes = map($lis.filter('.active, :has(.active)'));
@@ -821,6 +821,10 @@
             this.$target.removeClass(classes.join(" "));
             if(value) this.$target.addClass(value);
         },
+        eval: function (type, value, $li) {
+            var fn = new Function("node", "type", "value", "$li", value);
+            fn.call(this, this, type, value, $li);
+        },
 
         clean_for_save: dummy
     });
@@ -1561,7 +1565,6 @@
             self.BuildingBlock.activate_insertion_zones({
                 siblings: self.selector_siblings,
                 children: self.selector_children,
-                vertical_children: self.selector_vertical_children,
             });
 
             $("body").addClass('move-important');
@@ -1590,14 +1593,12 @@
             this.styles = {};
             this.selector_siblings = [];
             this.selector_children = [];
-            this.selector_vertical_children = [];
             _.each(website.snippet.templateOptions, function (val, option_id) {
                 if (!self.$target.is(val.selector)) {
                     return;
                 }
                 if (val['drop-near']) self.selector_siblings.push(val['drop-near']);
                 if (val['drop-in']) self.selector_children.push(val['drop-in']);
-                if (val['drop-in-vertical']) self.selector_vertical_children.push(val['drop-in-vertical']);
 
                 var option = val['option'];
                 var Editor = website.snippet.options[option] || website.snippet.Option;
@@ -1610,11 +1611,8 @@
             this.selector_children = this.selector_children.join(",");
             if (this.selector_children === "")
                 this.selector_children = false;
-            this.selector_vertical_children = this.selector_vertical_children.join(",");
-            if (this.selector_vertical_children === "")
-                this.selector_vertical_children = false;
 
-            if (!this.selector_siblings && !this.selector_children && !this.selector_vertical_children) {
+            if (!this.selector_siblings && !this.selector_children) {
                 this.$overlay.find(".oe_snippet_move, .oe_snippet_clone, .oe_snippet_remove").addClass('hidden');
             }
 
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index ba64ca0ef17..926bf5bfd32 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -13,12 +13,8 @@
 
 <div id="snippet_structure" class="tab-pane active">
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_banner.png"/>
-            <span class="oe_snippet_thumbnail_title">Banner</span>
-        </div>
-        <div id="myCarousel" class="oe_snippet_body carousel slide mb32" data-interval="10000" style="height: 320px;">
+    <div name="Banner" class="o_block_banner">
+        <div id="myCarousel" class="carousel slide mb32" data-interval="10000" style="height: 320px;">
             <!-- Indicators -->
             <ol class="carousel-indicators hidden">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
@@ -46,12 +42,8 @@
         </div>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
-            <span class="oe_snippet_thumbnail_title">Text-Image</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Text-Image" class="o_block_text_image">
+        <section>
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 mt16">
@@ -74,12 +66,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_text.png"/>
-            <span class="oe_snippet_thumbnail_title">Image-Text</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Image-Text" class="o_block_image_text">
+        <section>
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 mt16">
@@ -102,12 +90,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
-            <span class="oe_snippet_thumbnail_title">Big Message</span>
-        </div>
-        <section class="oe_snippet_body jumbotron mt16 mb16">
+    <div name="Big Message" class="o_block_jumbotron">
+        <section class="jumbotron mt16 mb16">
             <div class="container">
                 <h1>Sell Online. Easily.</h1>
                 <p>
@@ -123,12 +107,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_block.png"/>
-            <span class="oe_snippet_thumbnail_title">Text Block</span>
-        </div>
-        <section class="oe_snippet_body mt16 mb16">
+    <div name="Text Block" class="o_block_text_block">
+        <section class="mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt16 mb32">
@@ -161,12 +141,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_title.png"/>
-            <span class="oe_snippet_thumbnail_title">Title</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Title" class="o_block_title">
+        <section>
             <div class="container">
                 <div class="row">
                     <div class="col-md-12">
@@ -178,12 +154,8 @@
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_features.png"/>
-            <span class="oe_snippet_thumbnail_title">Features</span>
-        </div>
-        <section class="oe_snippet_body mb16">
+    <div name="Features" class="o_block_features">
+        <section class="mb16">
             <div class="container">
                 <div class="row mt16 mb16">
                     <div class="col-md-4 text-center">
@@ -209,12 +181,8 @@
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
-            <span class="oe_snippet_thumbnail_title">Big Picture</span>
-        </div>
-        <section class="oe_snippet_body oe_dark mt16 mb16">
+    <div name="Big Picture" class="o_block_big_picture">
+        <section class="oe_dark mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt32 mb32">
@@ -241,12 +209,8 @@
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_three_columns.png"/>
-            <span class="oe_snippet_thumbnail_title">Three Columns</span>
-        </div>
-        <section class="oe_snippet_body mt16 mb16">
+    <div name="Three Columns" class="o_block_three_columns">
+        <section class="mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-4">
@@ -286,24 +250,16 @@
 
 <div id="snippet_content" class="tab-pane">
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_well.png"/>
-            <span class="oe_snippet_thumbnail_title">Well</span>
-        </div>
-        <div class="oe_snippet_body well">
+    <div name="Well" class="o_block_well">
+        <div class="well">
             Explain the benefits you offer. Don't write about products or
             services here, write about solutions.
         </div>
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quote.png"/>
-            <span class="oe_snippet_thumbnail_title">Quote</span>
-        </div>
-        <blockquote class="oe_snippet_body">
+    <div name="Quote" class="o_block_quote">
+        <blockquote>
             <p>
                 Write a quote here from one of your customers. Quotes are a
                 great way to build confidence in your products or services.
@@ -313,12 +269,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_panel.png"/>
-            <span class="oe_snippet_thumbnail_title">Panel</span>
-        </div>
-        <div class="oe_snippet_body panel panel-default">
+    <div name="Panel" class="o_block_panel">
+        <div class="panel panel-default">
             <div class="panel-heading">
                 <h3 class="panel-title">Feature Title</h3>
             </div>
@@ -330,21 +282,13 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
-            <span class="oe_snippet_thumbnail_title">Separator</span>
-        </div>
-        <hr class="oe_snippet_body"/>
+    <div name="Separator" class="o_block_separator">
+        <hr/>
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
-            <span class="oe_snippet_thumbnail_title">Share</span>
-        </div>
-        <div class="oe_snippet_body oe_share">
+    <div name="Share" class="o_block_button">
+        <div class="oe_share">
             <h3>
                 Share 
                 <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}"><i class="fa fa-facebook-square"></i></a>
@@ -360,12 +304,8 @@
 
 <div id="snippet_feature" class="tab-pane">
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_gallery.png"/>
-            <span class="oe_snippet_thumbnail_title">Image Gallery</span>
-        </div>
-        <section class="oe_snippet_body o_gallery o_nomode o_spc-none">
+    <div name="Image Gallery" class="o_block_image_gallery">
+        <section class="o_gallery o_nomode o_spc-none">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6">
@@ -398,12 +338,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_comparison.png"/>
-            <span class="oe_snippet_thumbnail_title">Comparisons</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Comparisons" class="o_block_comparison">
+        <section>
             <div class="container">
               <div class="row">
                 <div class="col-md-12 text-center mt16 mb32">
@@ -504,12 +440,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
-            <span class="oe_snippet_thumbnail_title">Button</span>
-        </div>
-        <section class="oe_snippet_body jumbotron">
+    <div name="Button" class="o_block_button">
+        <section class="jumbotron">
             <div class="container">
                 <div class="row">
                     <div class="col-md-9 text-muted">
@@ -531,12 +463,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_faq.png"/>
-            <span class="oe_snippet_thumbnail_title">FAQ</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="FAQ" class="o_block_faq">
+        <section>
             <div class="container">
                 <h2 class="page-header">
                     Point of Sale Questions <small>v7</small>
@@ -578,12 +506,8 @@
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_references.png"/>
-            <span class="oe_snippet_thumbnail_title">References</span>
-        </div>
-        <section class="oe_snippet_body mb32 mt16">
+    <div name="References" class="o_block_references">
+        <section class="mb32 mt16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12">
@@ -632,12 +556,8 @@
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
-            <span class="oe_snippet_thumbnail_title">Quotes Slider</span>
-        </div>
-        <div id="myQuoteCarousel" class="oe_snippet_body carousel quotecarousel slide mb0" data-interval="10000">
+    <div name="Quotes Slider" class="o_block_quotes_slider">
+        <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
             <!-- Indicators -->
             <ol class="carousel-indicators mb0">
                 <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
@@ -685,12 +605,8 @@
         </div>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_features.png"/>
-            <span class="oe_snippet_thumbnail_title">Feature Grid</span>
-        </div>
-        <section class="oe_snippet_body mb16">
+    <div name="Feature Grid" class="o_block_features">
+        <section class="mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-5 text-center">
@@ -745,24 +661,16 @@
 
 <div id="snippet_effect" class="tab-pane">
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_parallax.png"/>
-            <span class="oe_snippet_thumbnail_title">Parallax</span>
-        </div>
-        <section class="oe_snippet_body parallax"
+    <div name="Parallax" class="o_block_parallax">
+        <section class="parallax"
                 style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
                 data-scroll-background-ratio="0.3">
                 <div><div class="oe_structure"/></div>
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
-            <span class="oe_snippet_thumbnail_title">Parallax Slider</span>
-        </div>
-        <section class="oe_snippet_body parallax"
+    <div name="Parallax Slider" class="o_block_quotes_slider">
+        <section class="parallax"
                  style="background-image: url('/website/static/src/img/parallax/quote.png')"
                 data-scroll-background-ratio="0.3">
             <div><div><div class="oe_structure">
@@ -830,18 +738,18 @@
 
 <template id="snippet_options">
 
-    <div data-option='blog-style'
+    <div data-js='blog-style'
         data-selector="section:not(.carousel):not(.parallax):not(.o_gallery)">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Style</a>
             <ul class="dropdown-menu">
-                <li data-check_class="para_large"><a>Bigger Text</a></li>
-                <li data-check_class="readable"><a>Narrow</a></li>
+                <li data-toggle_class="para_large"><a>Bigger Text</a></li>
+                <li data-toggle_class="readable"><a>Narrow</a></li>
             </ul>
         </li>
     </div>
 
-    <div data-option='background'
+    <div data-js='background'
         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
         <li class="dropdown-submenu" data-select_class="oe_img_bg" data-background="">
             <a tabindex="-1" href="#">Background</a>
@@ -870,7 +778,7 @@
         </li>
     </div>
      
-    <div data-option='gallery' data-selector=".o_gallery">
+    <div data-js='gallery' data-selector=".o_gallery">
         <li class="dropdown-submenu">
             <a tabindex="-2" href="#">Mode</a>
             
@@ -935,7 +843,7 @@
         </li>
     </div>
 
-    <div data-option='colorpicker'
+    <div data-js='colorpicker'
         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Color</a>
@@ -945,7 +853,7 @@
         </li>
     </div>
      
-    <div data-option='gallery' data-selector=".gallery">
+    <div data-js='gallery' data-selector=".gallery">
         <li class="dropdown-submenu">
             <a tabindex="-2" href="#">Mode</a>
             
@@ -1010,7 +918,7 @@
         </li>
     </div>
 
-    <div data-option='carousel'
+    <div data-js='carousel'
         data-selector=":not(.o_gallery > .container) > .carousel">
         <li class="dropdown-submenu">
             <a tabindex="-2" href="#">Slideshow speed</a>
@@ -1028,32 +936,32 @@
         <li data-remove_slide="true"> <a href="#" >Remove Slide</a></li>
     </div>
 
-    <div data-option='margin-y'
+    <div data-js='margin-y'
         data-selector="section, .row > [class*='col-md-'], :not(.o_gallery > .container) > .carousel, .parallax, hr">
     </div>
 
-    <div data-option='resize'
+    <div data-js='resize'
         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax"
         data-drop-in=".oe_structure, [data-oe-type=html]">
     </div>
 
-    <div data-option='margin-x'
+    <div data-js='margin-x'
         data-selector=".row > [class*='col-md-']"
-        data-drop-in-vertical='.row'>
+        data-drop-near=".row > [class*='col-md-']">
     </div>
 
-    <div data-option='content'
+    <div data-js='content'
         data-selector="blockquote, .well, .panel, .oe_share"
         data-drop-near="p, h1, h2, h3, blockquote, .well, .panel, .oe_share"
         data-drop-in=".content">
     </div>
 
-    <div data-option='separator'
+    <div data-js='separator'
         data-selector="hr"
         data-drop-in=".oe_structure, [data-oe-type=html]">
     </div>
 
-    <div data-option='parallax'
+    <div data-js='parallax'
         data-selector=".parallax">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Scroll Speed</a>
@@ -1068,12 +976,12 @@
         </li>
     </div>
 
-    <div data-option='media'
+    <div data-js='media'
         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa, .glyphicon">
         <li data-edition="edition"><a>Change...</a></li>
     </div>
 
-    <div data-option='transform'
+    <div data-js='transform'
         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Style</a>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 00e412b5948..52322bc0f18 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -237,7 +237,7 @@
 <template id="footer_custom" inherit_id="website.layout" name="Footer">
     <xpath expr="//div[@id='footer_container']" position="replace">
         <div class="oe_structure" id="footer">
-            <section data-option='three-columns' class="mt16 mb16">
+            <section class="mt16 mb16">
                 <div class="container">
                     <div class="row">
                         <div class="col-md-4">
diff --git a/addons/website_event/views/website_event.xml b/addons/website_event/views/website_event.xml
index c13fe18b0ef..e3e40bb80b2 100644
--- a/addons/website_event/views/website_event.xml
+++ b/addons/website_event/views/website_event.xml
@@ -382,7 +382,7 @@
         </div>
     </xpath>
     <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-option='country_events'
+        <div data-js='country_events'
             data-selector=".oe_country_events"
             data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel"
             data-selector-children=".content"
diff --git a/addons/website_event_track/controllers/event.py b/addons/website_event_track/controllers/event.py
index 7a58ca86427..3872f5a7be8 100644
--- a/addons/website_event_track/controllers/event.py
+++ b/addons/website_event_track/controllers/event.py
@@ -151,7 +151,7 @@ class website_event(http.Controller):
                 tags.append(tag.id)
 
         e = openerp.tools.escape
-        track_description = '''<section data-option="text-block">
+        track_description = '''<section>
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
diff --git a/addons/website_mail/views/snippets.xml b/addons/website_mail/views/snippets.xml
index 04dcf0f72e3..12892f50434 100644
--- a/addons/website_mail/views/snippets.xml
+++ b/addons/website_mail/views/snippets.xml
@@ -481,7 +481,7 @@
 </div>
 
 <div id="snippet_options" class="hidden">
-    <div data-option='content'
+    <div data-js='content'
         data-selector="[data-oe-field='body_html'] > div, .oe_snippet_body"
         data-selector-siblings="[data-oe-field='body_html'] > *"
         data-selector-children="[data-oe-field='body_html']">
diff --git a/addons/website_mail_group/views/snippets.xml b/addons/website_mail_group/views/snippets.xml
index 8bdcb52e971..902dd890a28 100644
--- a/addons/website_mail_group/views/snippets.xml
+++ b/addons/website_mail_group/views/snippets.xml
@@ -37,7 +37,7 @@
 
 
     <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-option='subscribe'
+        <div data-js='subscribe'
             data-selector=".js_follow_alias"
             data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel"
            >
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index 5de5b899095..b10f53257b7 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -39,7 +39,7 @@
                         var $ul = self.$el.find('ul[name="style"]');
                         for (var k in data) {
                             $ul.append(
-                                $('<li data-style="'+data[k]['id']+'" data-check_class="'+data[k]['html_class']+'"/>')
+                                $('<li data-style="'+data[k]['id']+'" data-toggle_class="'+data[k]['html_class']+'"/>')
                                     .append( $('<a/>').text(data[k]['name']) ));
                         }
                     });
diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml
index ed2bec63bad..e4a65d5e043 100644
--- a/addons/website_sale/views/snippets.xml
+++ b/addons/website_sale/views/snippets.xml
@@ -4,7 +4,7 @@
 <template id="website_sale" inherit_id="website.snippets" name="Snippet Ecommerce">
 
     <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-option='website_sale'
+        <div data-js='website_sale'
             data-selector=".oe_product.oe_grid"
             data-no-check="true">
 
diff --git a/addons/website_twitter/views/twitter_snippet.xml b/addons/website_twitter/views/twitter_snippet.xml
index 66c6d50b3da..66f1a1f5e1f 100644
--- a/addons/website_twitter/views/twitter_snippet.xml
+++ b/addons/website_twitter/views/twitter_snippet.xml
@@ -16,7 +16,7 @@
     </template>
     <template id="website_twitter_options" name="Twitter Options" inherit_id="website.snippet_options">
         <xpath expr="//div" position="after">
-            <div data-option='twitter'
+            <div data-js='twitter'
                 data-selector=".twitter"
                 data-selector-children=".oe_structure, [data-oe-type=html]">
             </div>