[IMP] website snippet: test with cache and highlight

bzr revid: chm@openerp.com-20130920184211-t7aa6e2nna1th6yi

addons/website/static/src/css/editor.css

@@ -129,6 +129,18 @@ table.editorbar-panel td.selected {
 }
 
 /* ---- SNIPPET EDITOR ---- */
+#oe_snippet_cache {
+  background: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  width: 100%;
+  height: 100%;
+  display: none;
+  pointer-events: none;
+}
+
 #oe_snippets {
   position: fixed;
   left: 0px;
@@ -272,7 +284,7 @@ table.editorbar-panel td.selected {
 }
 .oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
   background: rgba(0, 255, 133, 0.22);
-  z-index: 1001;
+  z-index: 1002;
 }
 
 .oe_drop_zone_style {
@@ -282,6 +294,12 @@ table.editorbar-panel td.selected {
 }
 
 /* ---- SNIPPET MANIPULATOR ---- */
+.oe_snippet_overlay_activate {
+  position: relative;
+  z-index: 1003;
+  background: white;
+}
+
 .oe_overlay {
   display: none;
   position: absolute;
@@ -290,6 +308,7 @@ table.editorbar-panel td.selected {
   transition: opacity 100ms linear;
   box-sizing: border-box;
   pointer-events: none;
+  z-index: 1003;
 }
 .oe_overlay.oe_active {
   display: block;
@@ -343,7 +362,7 @@ table.editorbar-panel td.selected {
   width: 100%;
   text-align: center;
   top: -11px;
-  z-index: 1002;
+  z-index: 1003;
 }
 .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
   pointer-events: auto;

addons/website/static/src/css/editor.sass

@@ -116,6 +116,17 @@ table.editorbar-panel
 
 /* ---- SNIPPET EDITOR ---- */
 
+#oe_snippet_cache
+    background: rgba(0,0,0,.4)
+    position: fixed
+    top: 0
+    left: 0
+    z-index: 1001
+    width: 100%
+    height: 100%
+    display: none
+    pointer-events: none
+
 #oe_snippets
     position: fixed
     left: 0px
@@ -239,7 +250,7 @@ table.editorbar-panel
     border-radius: 3px
     &.oe_hover
         background: rgba(0, 255, 133, 0.22)
-        z-index: 1001
+        z-index: 1002
 
 .oe_drop_zone_style
     color: white
@@ -248,6 +259,11 @@ table.editorbar-panel
 
 /* ---- SNIPPET MANIPULATOR ---- */
 
+.oe_snippet_overlay_activate
+    position: relative
+    z-index: 1003
+    background: rgba(255,255,255,1)
+
 .oe_overlay
     display: none
     position: absolute
@@ -256,6 +272,7 @@ table.editorbar-panel
     transition: opacity 100ms linear
     box-sizing: border-box
     pointer-events: none
+    z-index: 1003
     &.oe_active
         display: block
         border-style: dashed
@@ -301,7 +318,7 @@ table.editorbar-panel
         width: 100%
         text-align: center
         top: -11px
-        z-index: 1002
+        z-index: 1003
         .btn, a
             pointer-events: auto
             cursor: pointer

addons/website/static/src/js/website.snippets.js

@@ -28,6 +28,7 @@
             return this._super.apply(this, arguments);
         },
         save: function () {
+            this.snippets.make_active(false);
             remove_added_snippet_id();
             this._super();
         },
@@ -77,9 +78,6 @@
         init: function (parent) {
             this.parent = parent;
             this._super.apply(this, arguments);
-            if(!$('#oe_manipulators').length){
-                $("<div id='oe_manipulators'></div>").appendTo('body');
-            }
             this.$active_snipped_id = false;
             hack_to_add_snippet_id();
             $("body").on('DOMNodeInserted', hack_to_add_snippet_id);
@@ -104,6 +102,10 @@
         start: function() {
             var self = this;
 
+            if(!$('#oe_manipulators').length){
+                $("<div id='oe_snippet_cache'></div><div id='oe_manipulators'></div>").appendTo('body');
+            }
+
             var $ul = this.parent.$("#website-top-edit ul");
 
             var $button = $(openerp.qweb.render('website.snippets_button'))
@@ -196,23 +198,20 @@
         bind_snippet_click_editor: function () {
             var self = this;
             var snipped_event_flag = false;
-            $("body").on('click', "[data-snippet-id]", function (event) {
-                    if (snipped_event_flag) {
-                        return;
-                    }
-                    snipped_event_flag = true;
-                    setTimeout(function () {snipped_event_flag = false;}, 0);
-                    var $target = $(event.currentTarget);
-                    if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
-                        return;
-                    }
+            $("body").on('click', "[data-oe-model], > header, > footer", function (event) {
+                if (snipped_event_flag) {
+                    return;
+                }
+                var $target = $(event.srcElement).parents("[data-snippet-id]:first");
+                snipped_event_flag = true;
+                setTimeout(function () {snipped_event_flag = false;}, 0);
+
+                if (!$target.length) {
+                    self.make_active(false);
+                } else if (!self.$active_snipped_id || !self.$active_snipped_id.is($target)) {
                     self.make_active($target);
-                });
-            $("[data-oe-model]").on('click', function (ev) {
-                    if (!snipped_event_flag && self.$active_snipped_id && !self.$active_snipped_id.parents("[data-snippet-id]:first")) {
-                        self.make_active(false);
-                    }
-                });
+                }
+            });
         },
         snippet_blur: function ($snipped_id) {
             if ($snipped_id) {
@@ -245,7 +244,9 @@
                 this.$active_snipped_id = $snipped_id;
                 this.create_overlay(this.$active_snipped_id);
                 this.snippet_focus($snipped_id);
+                $("#oe_snippet_cache").show();
             } else {
+                $("#oe_snippet_cache").hide();
                 self.$active_snipped_id = false;
             }
         },
@@ -777,6 +778,7 @@
         */
         onFocus : function () {
             this.$overlay.addClass('oe_active');
+            this.$target.addClass('oe_snippet_overlay_activate');
         },
 
         /* onFocus
@@ -784,6 +786,7 @@
         */
         onBlur : function () {
             this.$overlay.removeClass('oe_active');
+            this.$target.removeClass('oe_snippet_overlay_activate');
         },
 
         /* setOptions

addons/website/static/src/xml/website.snippets.xml

@@ -87,10 +87,6 @@
         </div>
     </t>
 
-    <t t-name="website.snippet_manipulator">
-        <div class='oe_snippet_manipulator'></div>
-    </t>
-
     <!-- snippet objects -->
 
     <div t-name="website.snippets.resize" data-snippet-id='resize'>