[FIX] website: editor: pointer-events:none for ie doesn't work (because ie). Change snippet overlay to fix this ie bug

bzr revid: chm@openerp.com-20140226175558-2gyix2zgdawf87yz
2014-02-26 18:55:58 +01:00 · 2014-02-26 18:55:58 +01:00 · cfeac71d6a
parent a22379520c
commit cfeac71d6a
5 changed files with 107 additions and 77 deletions
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@ -80,10 +80,8 @@
  -moz-user-select: none;
  user-select: none;
  cursor: move;
-  pointer-events: none;
 }
 .oe_snippet .oe_snippet_thumbnail {
-  pointer-events: auto;
  text-align: center;
  height: 100%;
  background: transparent;
@ -200,6 +198,7 @@

 .oe_overlay {
  display: none;
+  height: 0;
  position: absolute;
  background: transparent;
  -webkit-border-radius: 3px;
@ -214,20 +213,12 @@
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
-  pointer-events: none;
 }
 .oe_overlay.oe_active {
  display: block;
-  border-style: dashed;
-  border-width: 1px;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  border-color: rgba(0, 0, 0, 0.5);
 }
 .oe_overlay .oe_handle {
  display: block !important;
-  pointer-events: auto;
  position: absolute;
  top: 50%;
  left: 50%;
@ -238,7 +229,18 @@
  height: 16px;
  margin: -2px;
 }
+.oe_overlay .oe_handle > div {
+  z-index: 1;
+  position: absolute;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: #666666;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+}
 .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
+  z-index: 2;
  position: relative;
  top: 50%;
  left: 50%;
@ -270,56 +272,70 @@
  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 }
+.oe_overlay .oe_handle.e, .oe_overlay .oe_handle.w {
+  top: 4px;
+  height: 100%;
+}
 .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before {
  content: "\f0d9-\f0da";
  line-height: 16px;
 }
+.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div {
+  width: 0;
+  height: 100%;
+  top: 2px;
+  left: 8px;
+}
 .oe_overlay .oe_handle.e {
  left: auto;
-  top: 2px;
-  height: 100%;
  right: -6px;
  cursor: w-resize;
 }
 .oe_overlay .oe_handle.w {
-  top: 2px;
-  height: 100%;
  left: -6px;
  cursor: e-resize;
 }
+.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n {
+  left: 2px;
+  width: 100%;
+}
 .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before {
-  z-index: 0;
  content: "\f07d";
  text-align: center;
  padding: 1px;
 }
+.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div {
+  width: 100%;
+  height: 0;
+  top: 7px;
+  left: 1px;
+}
 .oe_overlay .oe_handle.s {
  top: auto;
-  left: 2px;
-  width: 100%;
-  bottom: -6px;
  cursor: n-resize;
 }
 .oe_overlay .oe_handle.n {
-  left: 2px;
-  width: 100%;
-  top: -6px;
  cursor: s-resize;
 }
+.oe_overlay .oe_handle.n > div {
+  top: 5px;
+}
 .oe_overlay .oe_handle.size {
+  z-index: 3;
  top: auto;
-  left: 2px;
-  width: 100%;
+  left: 50%;
  bottom: -6px;
 }
 .oe_overlay .oe_handle.size .oe_handle_button {
-  z-index: 1;
+  z-index: 3;
  content: "Resize";
  width: 64px;
  text-align: center;
  margin-left: -32px;
  margin-top: -10px;
  cursor: row-resize;
+  left: 0px;
+  top: 9px;
 }
 .oe_overlay .oe_handle.size .oe_handle_button:hover {
  background: rgba(30, 30, 30, 0.8);
@ -328,25 +344,20 @@
  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 }
-.oe_overlay .oe_handle.size div {
-  border-style: dashed;
-  border-width: 0 0 1px 0;
-  border-color: rgba(0, 0, 0, 0.5);
-  position: relative;
-  top: 8px;
-}
 .oe_overlay .icon.btn {
  display: inline-block;
 }
 .oe_overlay .oe_overlay_options {
  position: absolute;
-  width: 100%;
+  left: 50% !important;
  text-align: center;
  top: -11px;
  z-index: 1002;
 }
+.oe_overlay .oe_overlay_options > .btn-group {
+  left: -50%;
+}
 .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
-  pointer-events: auto;
  cursor: pointer;
 }
 .oe_overlay .oe_overlay_options .dropdown {
@ -505,7 +516,6 @@
  box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
 }
 .oe_snippet_editor .oe_snippet > * {
-  pointer-events: none;
  margin-top: 16px;
  line-height: 1em;
  zoom: 0.6;
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@ -64,9 +64,7 @@
    overflow: hidden
    +user-select(none)
    cursor: move
-    pointer-events: none
    .oe_snippet_thumbnail
-        pointer-events: auto
        text-align: center
        height: 100%
        background: transparent
@ -150,22 +148,17 @@

 .oe_overlay
    display: none
+    height: 0
    position: absolute
    background: transparent
    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
    +border-radius(3px)
    @include transition(opacity 100ms linear)
    +box-sizing(border-box)
-    pointer-events: none
    &.oe_active
        display: block
-        border-style: dashed
-        border-width: 1px
-        +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
-        border-color: rgba(0, 0, 0, 0.5)
    .oe_handle
        display: block !important
-        pointer-events: auto
        position: absolute
        top: 50%
        left: 50%
@ -173,7 +166,15 @@
        width: 16px
        height: 16px
        margin: -2px
+        > div
+            z-index: 1
+            position: absolute
+            border-style: dashed
+            border-width: 1px
+            border-color: #666666
+            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
        &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
+            z-index: 2
            position: relative
            top: 50%
            left: 50%
@ -196,72 +197,74 @@
                color: #fff
                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
        &.e, &.w
+            top: 4px
+            height: 100%
            &:before
                content: "\f0d9-\f0da"
                line-height: 16px
+            > div
+                width: 0
+                height: 100%
+                top: 2px
+                left: 8px
        &.e
            left: auto
-            top: 2px
-            height: 100%
            right: -6px
            cursor: w-resize
        &.w
-            top: 2px
-            height: 100%
            left: -6px
            cursor: e-resize
        &.s, &.n
+            left: 2px
+            width: 100%
            &:before
-                z-index: 0
                content: "\f07d"
                text-align: center
                padding: 1px
+            > div
+                width: 100%
+                height: 0
+                top: 7px
+                left: 1px
        &.s
            top: auto
-            left: 2px
-            width: 100%
-            bottom: -6px
            cursor: n-resize
        &.n
-            left: 2px
-            width: 100%
-            top: -6px
            cursor: s-resize
+            > div
+                top: 5px
        &.size
+            z-index: 3
            top: auto
-            left: 2px
-            width: 100%
+            left: 50%
            bottom: -6px
            .oe_handle_button
-                z-index: 1
+                z-index: 3
                content: "Resize"
                width: 64px
                text-align: center
                margin-left: -32px
                margin-top: -10px
                cursor: row-resize
+                left: 0px
+                top: 9px
                &:hover
                    background: rgba(30, 30, 30, .8)
                    color: #fff
                    +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-            div
-                border-style: dashed
-                border-width: 0 0 1px 0
-                border-color: rgba(0, 0, 0, 0.5)
-                position: relative
-                top: 8px

    .icon.btn
        display: inline-block

    .oe_overlay_options
        position: absolute
-        width: 100%
+        left: 50% !important
        text-align: center
        top: -11px
        z-index: 1002
+        > .btn-group
+            left: -50%
        .btn, a
-            pointer-events: auto
            cursor: pointer
        .dropdown
            display: inline-block
@ -392,7 +395,6 @@
            border: 2px solid rgb(151, 137, 255)
            box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59)
        & > *
-            pointer-events: none
            margin-top: 16px
            line-height: 1em
            zoom: 0.6
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@ -839,7 +839,6 @@
                    document.execCommand("enableInlineTableEditing", false, "false");
                } catch (e) {}

-
                // detect & setup any CKEDITOR widget within a newly dropped
                // snippet. There does not seem to be a simple way to do it for
                // HTML not inserted via ckeditor APIs:
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@ -190,13 +190,14 @@
            var mt = parseInt($target.css("margin-top") || 0);
            var mb = parseInt($target.css("margin-bottom") || 0);
            $el.css({
-                'position': 'absolute',
                'width': $target.outerWidth(),
-                'height': $target.outerHeight() + mt + mb+1,
-                'top': pos.top - mt,
+                'top': pos.top - mt - 5,
                'left': pos.left
            });
-            $el.find(".oe_handle.size").css("bottom", (mb-7)+'px');
+            $el.find(">.e,>.w").css({'height': $target.outerHeight() + mt + mb+1});
+            $el.find(">.s").css({'top': $target.outerHeight() + mt + mb});
+            $el.find(">.size").css({'top': $target.outerHeight() + mt});
+            $el.find(">.s,>.n").css({'width': $target.outerWidth()-2});
        },
        show: function () {
            this.$el.removeClass("hidden");
@ -213,8 +214,8 @@

        bind_snippet_click_editor: function () {
            var self = this;
-            $(document).on('click', "#wrapwrap", function (event) {
-                var $target = $(event.srcElement);
+            $("#wrapwrap").on('click', function (event) {
+                var $target = $(event.srcElement || event.target);
                if (!$target.attr("data-snippet-id")) {
                    $target = $target.parents("[data-snippet-id]:first");
                }
@ -256,6 +257,9 @@
            }
            if (this.$active_snipped_id) {
                this.snippet_blur(this.$active_snipped_id);
+                this.$active_snipped_id.data("overlay").remove();
+                this.$active_snipped_id.removeData("overlay");
+                this.$active_snipped_id.removeData("snippet-editor");
                this.$active_snipped_id = false;
            }
            if ($snippet && $snippet.length) {
@ -571,6 +575,20 @@
                var $target = $(this);
                if (!$target.data('overlay')) {
                    var $zone = $(openerp.qweb.render('website.snippet_overlay'));
+
+                    // fix for pointer-events: none with ie9
+                    if (document.body && document.body.addEventListener) {
+                        $zone.on("click mousedown mousedown", function passThrough(event) {
+                            event.preventDefault();
+                            $target.each(function() {
+                               // check if clicked point (taken from event) is inside element
+                                event.srcElement = this;
+                                $(this).trigger(event.type);
+                            });
+                            return false;
+                        });
+                    }
+
                    $zone.appendTo('#oe_manipulators');
                    $zone.data('target',$target);
                    $target.data('overlay',$zone);
@ -783,6 +801,7 @@
            this.parent = parent;
            this.$target = $(dom);
            this.$overlay = this.$target.data('overlay');
+            this.$overlay.find('a[data-toggle="dropdown"]').dropdown();
            this.snippet_id = this.$target.data("snippet-id");
            this._readXMLData();
            this.load_style_options();
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@ -46,11 +46,11 @@
    <div t-name="website.snippets.resize" data-snippet-id='resize'>
        <!-- custom data for the widget -->
        <div class='oe_handles'>
-            <div class='oe_handle n'></div>
-            <div class='oe_handle e'></div>
-            <div class='oe_handle w'></div>
-            <div class='oe_handle size'><div class="oe_handle_button size">Resize</div><div class="oe_border"/></div>
-            <div class='oe_handle s'></div>
+            <div class='oe_handle n'><div></div></div>
+            <div class='oe_handle e'><div></div></div>
+            <div class='oe_handle w'><div></div></div>
+            <div class='oe_handle size'><div class="oe_handle_button size">Resize</div></div>
+            <div class='oe_handle s'><div></div></div>
        </div>
        <div class='oe_snippet_thumbnail'>Margin resize</div>
    </div>