[MERGE] website: mutation snippets

bzr revid: fva@openerp.com-20130823083843-bky4qugrnb8jnidm

5 files changed, 136 insertions, 24 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index e8e69a3a9ca..cd9ecc8f8a0 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 .oe_hidden {
   display: none !important;
 }
@@ -80,7 +79,6 @@
   border-radius: 3px;
   margin: 10px;
   margin-right: 0px;
-  cursor: move;
   position: relative;
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
   overflow: hidden;
@@ -146,6 +144,16 @@
   border-top: dashed 2px rgba(116, 255, 161, 0.72);
 }
 
+.oe_hover_zone {
+  position: absolute;
+  background: rgba(153, 0, 255, 0.17);
+  border-radius: 3px;
+}
+.oe_hover_zone.oe_hover {
+  background: rgba(0, 255, 133, 0.22);
+  z-index: 100000;
+}
+
 .oe_stop_scrolling {
   height: 100%;
   overflow: hidden;
@@ -157,7 +165,6 @@
   border: 2px solid;
   border-radius: 10px;
   margin: auto;
-  position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index f324cabc348..3c54a0d0aaf 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -71,7 +71,6 @@
     border-radius: 3px
     margin: 10px
     margin-right: 0px
-    cursor: move
     position: relative
     box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
     overflow: hidden
@@ -128,6 +127,15 @@
     &.oe_hover:before
         border-top: dashed 2px rgba(116, 255, 161, 0.72)
 
+.oe_hover_zone
+    position: absolute
+    background: rgba(153, 0, 255, 0.17)
+    border-radius: 3px
+
+    &.oe_hover
+        background: rgba(0, 255, 133, 0.22)
+        z-index: 100000
+
 .oe_stop_scrolling
     height: 100%
     overflow: hidden
@@ -138,7 +146,6 @@
     border: 2px solid
     border-radius: 10px
     margin: auto
-    position: absolute
     top: 0
     left: 0
     bottom: 0
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index eea25bea19d..2ba763f402e 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -159,3 +158,9 @@ header.navbar-fixed-top {
   min-height: 300px;
   color: white;
 }
+
+.dark {
+  background: #eff8f8;
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 13037deb2d7..0440a71624f 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -119,4 +119,9 @@ header.navbar-fixed-top
     min-height: 300px
     color: white
 
+.dark
+    background: rgb(239, 248, 248)
+    padding-top: 32px
+    padding-bottom: 32px
+
 
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 361cbd6bb8a..ed95981f1d4 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -307,6 +307,34 @@
         }
     });
 
+    website.mutations = {
+        darken: function($el){
+            if($el.parent().hasClass('dark')){
+                $el.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()' : '');
+                    $('html').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);
+        },
+    };
+
     /* ----- SNIPPET SELECTOR ---- */
     website.Snippets = openerp.Widget.extend({
         template: 'website.snippets',
@@ -327,11 +355,20 @@
             });
 
         },
+        path_eval: function(path){
+            var obj = window;
+            path = path.split('.');
+            do{
+                obj = obj[path.shift()];
+            }while(path.length && obj);
+            return obj;
+        },
+
         // setup widget and drag and drop
         start_snippets: function(){
             var self = this;
-
-            this.$('.oe_snippet').draggable({
+            
+            this.$('.oe_snippet[data-action="insert"]').draggable({
                 helper: 'clone',
                 appendTo: 'body',
                 start: function(){
@@ -363,6 +400,32 @@
                     self.deactivate_drop_zones();
                 },
             });
+
+            this.$('.oe_snippet[data-action="mutate"]').draggable({
+                helper: 'clone',
+                appendTo: 'body',
+                start: function(){
+                    var snippet = $(this);
+
+                    self.activate_hover_zones(snippet.data('selector'));
+
+                    $('.oe_hover_zone').droppable({
+                        over: function(){
+                            $(".oe_hover_zone.oe_hover").removeClass("oe_hover");
+                            $(this).addClass("oe_hover");
+                        },
+                        out: function(){
+                            $(this).removeClass("oe_hover");
+                        },
+                        drop: function(){
+                            self.path_eval(snippet.data('action-function'))( $(".oe_hover_zone.oe_hover").data('target') );
+                        },
+                    });
+                },
+                stop: function(){
+                    self.deactivate_hover_zones();
+                },
+            });
         },
         // A generic drop zone generator. two css selectors can be provided
         // selector.childs -> will insert drop zones as direct child of the selected elements
@@ -413,7 +476,7 @@
                 $zones.remove();
             }while(count > 0);
 
-            // Cleaning up zones placed between floating or inline elements
+            // Cleaning up zones placed between floating or inline elements. We do not like these kind of zones.
             var $zones = $('.oe_drop_zone');
             for( var i = 0, len = $zones.length; i < len; i++ ){
                 var zone = $zones.eq(i);
@@ -427,11 +490,10 @@
                     &&  (float_next === 'left' || float_next === 'right')  ){
                     zone.remove();
                     continue;
-                }else if( !(    disp_prev === null
-                             || disp_next === null
-                             || disp_prev === 'block'
-                             || disp_next === 'block'
-                            ) ){
+                }else if( !( disp_prev === null
+                          || disp_next === null
+                          || disp_prev === 'block'
+                          || disp_next === 'block' )){
                     zone.remove();
                     continue;
                 }
@@ -440,6 +502,42 @@
         deactivate_drop_zones: function(){
             $('.oe_drop_zone').remove();
         },
+        activate_hover_zones: function(selector){
+            var $targets = $(selector);
+            
+            function is_visible($el){
+                return     $el.css('display')    != 'none'
+                        && $el.css('opacity')    != '0'
+                        && $el.css('visibility') != 'hidden';
+            }
+
+            // filter out invisible elements
+            $targets = $targets.filter(function(){ return is_visible($(this)); });
+
+            // filter out elements with invisible parents
+            $targets = $targets.filter(function(){
+                var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
+                return parents.length === 0;
+            });
+            
+            var zone_template = "<div class='oe_hover_zone'></div>";
+            $('.oe_hover_zone').remove();
+
+            for(var i = 0, len = $targets.length; i < len; i++){
+                var $target = $targets.eq(i);
+                var $zone = $(zone_template);
+                $zone.css({
+                        'width': $target.outerWidth(),
+                        'height': $target.outerHeight(),
+                });
+                $zone.css($target.offset());
+                $zone.appendTo('body');
+                $zone.data('target',$target);
+            }
+        },
+        deactivate_hover_zones: function(selector){
+            $('.oe_hover_zone').remove();
+        },
         toggle: function(){
             if(this.$el.hasClass('oe_hidden')){
                 this.$el.removeClass('oe_hidden');
@@ -447,16 +545,6 @@
                 this.$el.addClass('oe_hidden');
             }
         },
-        snippet_start: function () {
-            var self = this;
-            $('.oe_snippet').draggable().click(function(ev) {
-                self.setup_droppable();
-                $(".oe_snippet_drop").show();
-                $('.oe_selected').removeClass('oe_selected');
-                $(ev.currentTarget).addClass('oe_selected');
-            });
-
-        },
     });
 
     function noop() {}