[WHATEVER] make snippet editor do stuff

bzr revid: xmo@openerp.com-20130731102248-kl5upc2w48h9bisv

2 files changed, 38 insertions, 30 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');
         });
 
     },