From c5f28af3fef490d6ea4a33e0b102d5912683bed0 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Wed, 31 Jul 2013 12:22:48 +0200
Subject: [PATCH] [WHATEVER] make snippet editor do stuff

bzr revid: xmo@openerp.com-20130731102248-kl5upc2w48h9bisv
---
 addons/website/static/src/css/snippets.css | 26 ++++++++------
 addons/website/static/src/js/website.js    | 42 ++++++++++++----------
 addons/website/views/views.xml             |  8 ++---
 3 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 65a6e714f97..2cbf2fb16ba 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -42,14 +42,12 @@
 .oe_snippet_editor{
     position: fixed;    
     z-index: 1000;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
+    bottom: 0;
+    left: 0;
+    right: 0;
     height: 214px;
     background: rgb(160,160,160);
-    box-shadow: 0px 1px 3px rgb(100,100,100) inset;
-    overflow-y: hidden;
-    overflow-x: scroll;
+    box-shadow: 0 1px 3px rgb(100,100,100) inset;
 }
 
 .oe_snippet_list{
@@ -64,14 +62,12 @@
     height: 160px;
     border-radius: 3px;
     background: white;
-    margin: 20px;
-    margin-left: 0px;
+    margin: 20px 20px 20px 0;
     cursor: pointer;
     border: 2px solid transparent;
-    box-shadow: 0px 1px 3px rgb(100,100,100);
+    box-shadow: 0 1px 3px rgb(100,100,100);
     position: relative;
-    top: 0px;
-    -webkit-transition: all 150ms linear;
+    top: 0;
     overflow: hidden;
     vertical-align: top;
     user-select: none;
@@ -161,6 +157,14 @@
     line-height: 160px;
     padding: 0px;
 }
+
+.oe_snippet_drop {
+    border: 1px dashed black;
+    min-height: 25px;
+}
+.oe_snippet_drop.oe_accepting {
+    border: 1px dashed #24ff0f;
+}
 /*
 [class*="span"]{
     margin-left: 0px !important;
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 277c9b4143f..9a274c6b99d 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -104,27 +104,31 @@ instance.website.EditorBar = instance.web.Widget.extend({
     cancel: function () {
         window.location.reload();
     },
-    snippet_start: function () {
+    setup_droppable: function () {
         var self = this;
-        $('.oe_snippet').click(function(ev) {
+        $('.oe_snippet_drop').remove();
+        var droppable = '<div class="oe_snippet_drop"></div>';
+        var $zone = $('section.container');
+        $zone.before(droppable).after(droppable);
+
+        $(".oe_snippet_drop").droppable({
+            hoverClass: 'oe_accepting',
+            drop: function( event, ui ) {
+                console.log(event, ui, "DROP");
+
+                $(event.target).replaceWith($(ui.draggable).html());
+                $('.oe_selected').remove();
+                self.setup_droppable();
+            }
+        }).hide();
+    },
+    snippet_start: function () {
+        this.setup_droppable();
+
+        $('.oe_snippet').draggable().click(function(ev) {
+            $(".oe_snippet_drop").show();
             $('.oe_selected').removeClass('oe_selected');
-            var $snippet = $(ev.currentTarget);
-            $snippet.addClass('oe_selected');
-            $snippet.draggable();
-            var selector = $snippet.data("selector");
-            var $zone = $(".oe_website_body " + selector);
-            var droppable = '<div class="oe_snippet_drop" style="border:1px solid red;">.<br/>.<br/>.<br/>.<br/>.<br/></div>';
-            $zone.before(droppable);
-            $zone.after(droppable);
-            $(".oe_snippet_drop").droppable({
-                drop: function( event, ui ) {
-                    console.log(event, ui, "DROP");
-                    var $target = $(event.target);
-                    $target.before($snippet.html());
-                    $('.oe_selected').remove();
-                    $('.oe_snippet_drop').remove();
-                }
-            });
+            $(ev.currentTarget).addClass('oe_selected');
         });
 
     },
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 38582837ad2..7028fcdf820 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -99,7 +99,7 @@
                         <div class='oe_snippet_editor' style="display: none;">
                             <div class='oe_snippet_list'>
 
-                            <div class='oe_snippet' name='Screenshot' selafter='.span6' selinside='.row'>
+                            <div class='oe_snippet' name='Screenshot' data-selector="section.container">
                                 <div class="span6">
                                     <div class="oe_demo oe_picture oe_screenshot">
                                         <a href="#">
@@ -108,7 +108,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class='oe_snippet' name='Introduction' data-selector=".container"> 
+                            <div class='oe_snippet' name='Introduction' data-selector="section.container">
                                 <section class="container">
                                     <div class="row oe_spaced">
                                         <div class="span12">
@@ -138,12 +138,12 @@
                                     </div>
                                 </section>
                             </div>
-                            <div class='oe_snippet' name='Call To Action' selafter='p,h1,h2,h3,h4,h5,ul,ol' selinside='.span6'>
+                            <div class='oe_snippet' name='Call To Action' data-selector="section.container">
                                     <div class="oe_centeralign oe_websiteonly">
                                         <a href="http://www.openerp.com/start" class="oe_button oe_big oe_tacky">Start your <span class="oe_emph">free</span> trial</a>
                                     </div>
                             </div>
-                            <div class='oe_snippet' name='Alternate Paragraph' data-selector=".container"> 
+                            <div class='oe_snippet' name='Alternate Paragraph' data-selector="section.container">
                                 <section class="container oe_dark">
                                     <div class="row oe_spaced">
                                         <div class="span12">