[WIP] website: snippets: work carousel insert and vomify

bzr revid: chm@openerp.com-20130909153251-9ixd50vy4ulyecgq

3 files changed, 63 insertions, 37 deletions

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index c6d6f6c9f20..00ee14aac00 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -31,34 +31,6 @@
         return def;
     };
 
-    website.mutations = {
-        darken: function($el){
-            var $parent = $el.parent();
-            if($parent.hasClass('dark')){
-                $parent.replaceWith($el);
-            }else{
-                $el.replaceWith($("<div class='dark'></div>").append($el.clone()));
-            }
-        },
-        vomify: function($el){
-            var hue=0;
-            var beat = false;
-            var a = setInterval(function(){
-                $el.css({'-webkit-filter':'hue-rotate('+hue+'deg)'}); hue += 5;
-            }, 10);
-            setTimeout(function(){
-                clearInterval(a);
-                setInterval(function(){
-                    var filter =  'hue-rotate('+hue+'deg)'+ (beat ? ' invert()' : '');
-                    $(document.documentElement).css({'-webkit-filter': filter}); hue += 5;
-                    if(hue % 35 === 0){
-                        beat = !beat;
-                    }
-                }, 10);
-            },5000);
-            $('<iframe width="1px" height="1px" src="http://www.youtube.com/embed/WY24YNsOefk?autoplay=1" frameborder="0"></iframe>').appendTo($el);
-        },
-    };
 
     var all_ready = null;
     var dom_ready = website.dom_ready = $.Deferred();
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 00874741fdf..fa806f16f88 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -42,7 +42,7 @@
             var self = this;
             var $snipped_id = false;
             var snipped_event_flag = false;
-            $("[data-snippet-id]").on('click', function (event) {
+            $("body").on('click', "[data-snippet-id]", function (event) {
                     if (snipped_event_flag) {
                         return;
                     }
@@ -188,14 +188,25 @@
                             $(this).removeClass("oe_hover");
                         },
                         drop:   function(){
-                            if( action === 'insert' ){
+                            var snipped_id = $snippet.data('snippet-id');
+                            if($snippet.find('.oe_snippet_body').size()){
                                 var $toInsert = $snippet.find('.oe_snippet_body').clone();
                                 $toInsert.removeClass('oe_snippet_body');
                                 $toInsert.addClass('oe_snippet_instance');
-                                $toInsert.data('snippet-id',$snippet.data('snippet-id'));
+                                $toInsert.attr('data-snippet-id', snipped_id);
                                 $(".oe_drop_zone.oe_hover").replaceWith($toInsert);
-                            }else if( action === 'mutate' ){
-                                self.path_eval($snippet.data('action-function'))( $(".oe_drop_zone.oe_hover").data('target') );
+                                var $target = $toInsert;
+
+                                self.deactivate_snippet_manipulators();
+                                self.activate_snippet_manipulators();
+                            } else {
+                                var $target = $(".oe_drop_zone.oe_hover").data('target');
+                            }
+
+                            if (website.snippet.editorRegistry[snipped_id]) {
+                                var snippet = new website.snippet.editorRegistry[snipped_id](this.parent, $target);
+                                snippet.build_snippet($target);
+                                $target.click();
                             }
                         },
                     });
@@ -449,6 +460,11 @@
             this.replaceElement($el);
         },
 
+        // create the snippet into the view
+        build_snippet: function () {
+
+        },
+
         /* onFocus
         *  called when the user click inside the snippet dom
         */
@@ -572,6 +588,11 @@
 
     website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.box.extend({
         template : "website.snippets.carousel",
+        build_snippet: function($target) {
+            var id = "myCarousel" + $("body .carousel").size();
+            $target.attr("id", id);
+            $target.find(".carousel-control").attr("href", "#"+id);
+        },
         start : function () {
             var self = this;
 
@@ -640,4 +661,37 @@
         },
     });
 
-})();
+    website.snippet.editorRegistry.darken = website.snippet.Editor.extend({
+        build_snippet: function($target) {
+            $target.toggleClass('dark');
+            var $parent = $target.parent();
+            if($parent.hasClass('dark')){
+                $parent.replaceWith($target);
+            }else{
+                $target.replaceWith($("<div class='dark'></div>").append($target.clone()));
+            }
+        }
+    });
+
+    website.snippet.editorRegistry.vomify = website.snippet.Editor.extend({
+        build_snippet: function($target) {
+            var hue=0;
+            var beat = false;
+            var a = setInterval(function(){
+                $target.css({'-webkit-filter':'hue-rotate('+hue+'deg)'}); hue += 5;
+            }, 10);
+            setTimeout(function(){
+                clearInterval(a);
+                setInterval(function(){
+                    var filter =  'hue-rotate('+hue+'deg)'+ (beat ? ' invert()' : '');
+                    $(document.documentElement).css({'-webkit-filter': filter}); hue += 5;
+                    if(hue % 35 === 0){
+                        beat = !beat;
+                    }
+                }, 10);
+            },5000);
+            $('<iframe width="1px" height="1px" src="http://www.youtube.com/embed/WY24YNsOefk?autoplay=1" frameborder="0"></iframe>').appendTo($target);
+        }
+    });
+
+})();
\ No newline at end of file
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 406212fa78e..41b955cffbf 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -64,7 +64,7 @@
             <!-- Carousel items -->
             <div class="carousel-inner">
                 <div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;">
-                    <div class="container">
+                    <div class="container" data-snippet-id="container">
                         <div class="content" style="padding-top: 90px; padding-bottom:45px;">
                             <h1>Create Awesome Websites</h1>
                             <h3>Super easy, fully flexible</h3>
@@ -90,11 +90,11 @@
         </div>
     </div>
 
-    <div t-name="website.snippets.darken" data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.darken'>
+    <div t-name="website.snippets.darken" data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container'>
         <div class='oe_snippet_thumbnail oe_label'>Darken</div>
     </div>
 
-    <div t-name="website.snippets.surprise" data-snippet-id='surprise' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.vomify'>
+    <div t-name="website.snippets.surprise" data-snippet-id='vomify' data-action='mutate' data-selector='#wrap .container'>
         <div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
     </div>