From f97a237b4becb4302ffa04d7a79e0ad53aa2bc05 Mon Sep 17 00:00:00 2001
From: "chm@openerp.com" <>
Date: Mon, 31 Mar 2014 11:52:53 +0200
Subject: [PATCH] [WIP] website: media editor

bzr revid: chm@openerp.com-20140331095253-zftyl4uvd56mpovj
---
 .../website/static/src/js/jQuery.transfo.js   | 52 +++++++++++--------
 .../static/src/js/website.snippets.editor.js  | 44 ++++------------
 addons/website/views/snippets.xml             |  5 +-
 3 files changed, 45 insertions(+), 56 deletions(-)

diff --git a/addons/website/static/src/js/jQuery.transfo.js b/addons/website/static/src/js/jQuery.transfo.js
index 19fb85d0b1b..5d0c8dc32b7 100644
--- a/addons/website/static/src/js/jQuery.transfo.js
+++ b/addons/website/static/src/js/jQuery.transfo.js
@@ -85,21 +85,25 @@ OTHER DEALINGS IN THE SOFTWARE.
             var transfo = {};
             $this.data('transfo', transfo);
 
-
             // generate all the controls markup
             var css = "box-sizing: border-box; position: absolute; background-color: #fff; border: 1px solid #ccc; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px;";
             transfo.$markup = $(''
                 + '<div class="transfo-controls">'
-                +         '<div style="cursor: crosshair; position: absolute; background-color: #ccc; width: 16px; height: 16px; margin-left: -8px; margin-top: -8px; top: -15px; left: 50%; padding: 1px 0 0 1px;" class="transfo-rotator fa fa-repeat"></div>'
-                +         '<div style="' + css + 'top: 0%; left: 0%; cursor: nw-resize;" class="transfo-scaler-tl"></div>'
-                +         '<div style="' + css + 'top: 0%; left: 100%; cursor: ne-resize;" class="transfo-scaler-tr"></div>'
-                +         '<div style="' + css + 'top: 100%; left: 100%; cursor: se-resize;" class="transfo-scaler-br"></div>'
-                +         '<div style="' + css + 'top: 100%; left: 0%; cursor: sw-resize;" class="transfo-scaler-bl"></div>'
-                +         '<div style="' + css + 'top: 0%; left: 50%; cursor: n-resize;" class="transfo-scaler-tc"></div>'
-                +         '<div style="' + css + 'top: 100%; left: 50%; cursor: s-resize;" class="transfo-scaler-bc"></div>'
-                +         '<div style="' + css + 'top: 50%; left: 0%; cursor: w-resize;" class="transfo-scaler-ml"></div>'
-                +         '<div style="' + css + 'top: 50%; left: 100%; cursor: e-resize;" class="transfo-scaler-mr"></div>'
-                +         '<div style="' + css + 'border: 0; width: 0px; height: 0px; top: 50%; left: 50%;" class="transfo-scaler-mc"></div>'
+                +   '<div style="cursor: crosshair; position: absolute; margin: -18px; top: -12px; right: -12px; padding: 1px 0 0 1px;" class="transfo-rotator">'
+                +     '<span class="fa-stack fa-lg">'
+                +     '<i class="fa fa-circle fa-stack-2x"></i>'
+                +     '<i class="fa fa-repeat fa-stack-1x fa-inverse"></i>'
+                +     '</span>'
+                +   '</div>'
+                +   '<div style="' + css + 'top: 0%; left: 0%; cursor: nw-resize;" class="transfo-scaler-tl"></div>'
+                +   '<div style="' + css + 'top: 0%; left: 100%; cursor: ne-resize;" class="transfo-scaler-tr"></div>'
+                +   '<div style="' + css + 'top: 100%; left: 100%; cursor: se-resize;" class="transfo-scaler-br"></div>'
+                +   '<div style="' + css + 'top: 100%; left: 0%; cursor: sw-resize;" class="transfo-scaler-bl"></div>'
+                +   '<div style="' + css + 'top: 0%; left: 50%; cursor: n-resize;" class="transfo-scaler-tc"></div>'
+                +   '<div style="' + css + 'top: 100%; left: 50%; cursor: s-resize;" class="transfo-scaler-bc"></div>'
+                +   '<div style="' + css + 'top: 50%; left: 0%; cursor: w-resize;" class="transfo-scaler-ml"></div>'
+                +   '<div style="' + css + 'top: 50%; left: 100%; cursor: e-resize;" class="transfo-scaler-mr"></div>'
+                +   '<div style="' + css + 'border: 0; width: 0px; height: 0px; top: 50%; left: 50%;" class="transfo-scaler-mc"></div>'
                 + '</div>');
             transfo.$center = transfo.$markup.find(".transfo-scaler-mc");
 
@@ -149,27 +153,28 @@ OTHER DEALINGS IN THE SOFTWARE.
 
         function _bind ($this, transfo) {
             function mousedown (event) {
-                _mouseDown($this, transfo, event);
+                _mouseDown($this, this, transfo, event);
                 $(document).on("mousemove", mousemove).on("mouseup", mouseup);
             }
             function mousemove (event) {
-                _mouseMove($this, transfo, event);
+                _mouseMove($this, this, transfo, event);
             }
             function mouseup (event) {
-                _mouseUp($this, transfo, event);
+                _mouseUp($this, this, transfo, event);
                 $(document).off("mousemove", mousemove).off("mouseup", mouseup);
             }
 
             transfo.$markup.off().on("mousedown", mousedown);
-            transfo.$markup.find(".transfo-rotator, .transfo-scaler").off().on("mousedown", mousedown);
+            transfo.$markup.find(">:not(.transfo-scaler-mc)").off().on("mousedown", mousedown);
         }
 
-        function _mouseDown($this, transfo, event) {
+        function _mouseDown($this, div, transfo, event) {
             event.preventDefault();
             if (transfo.active || event.which !== 1) return;
 
-            var type = "position",
-                $e = $(event.srcElement);
+            console.log(div);
+
+            var type = "position", $e = $(div);
             if ($e.hasClass("transfo-rotator")) type = "rotator";
             else if ($e.hasClass("transfo-scaler-tl")) type = "tl";
             else if ($e.hasClass("transfo-scaler-tr")) type = "tr";
@@ -186,11 +191,11 @@ OTHER DEALINGS IN THE SOFTWARE.
                 "pageY": event.pageY,
             };
         }
-        function _mouseUp($this, transfo, event) {
+        function _mouseUp($this, div, transfo, event) {
             transfo.active = null;
         }
 
-        function _mouseMove($this, transfo, event) {
+        function _mouseMove($this, div, transfo, event) {
             event.preventDefault();
             if (!transfo.active) return;
             var settings = transfo.settings;
@@ -199,12 +204,15 @@ OTHER DEALINGS IN THE SOFTWARE.
             var cdy = center.top - event.pageY;
 
             if (transfo.active.type == "rotator") {
-                var ang;
-                if (center.top != event.pageY) ang = Math.atan(- cdx / cdy) / rad;
+                var ang, dang = Math.atan((settings.width * settings.scalex) / (settings.height * settings.scaley)) / rad;
+
+                if (cdy) ang = Math.atan(- cdx / cdy) / rad;
                 else ang = 0;
                 if (event.pageY >= center.top && event.pageX >= center.left) ang += 180;
                 else if (event.pageY >= center.top && event.pageX < center.left) ang += 180;
                 else if (event.pageY < center.top && event.pageX < center.left) ang += 360;
+                
+                ang -= dang;
 
                 if (!event.ctrlKey) {
                     settings.angle = Math.round(ang / transfo.settings.rotationStep) * transfo.settings.rotationStep;
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index dc66e04bd0b..0e0290b825c 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1430,13 +1430,12 @@
         }
     });
 
-    website.snippet.options.media = website.snippet.Option.extend({
+    website.snippet.options.transform = website.snippet.Option.extend({
         start: function () {
             var self = this;
             this._super();
             website.snippet.start_animation(true, this.$target);
 
-            this.$el.find('[data-toggle="dropdown"]').dropdown();
             this.$el.find(".edition").click(function (event) {
                 event.preventDefault();
                 event.stopPropagation();
@@ -1455,29 +1454,27 @@
                         'top': pos.top,
                         'left': pos.left,
                         'position': 'absolute',
-                        'height': '20px',
-                        'width': '160px'
-                    });
-                    self.$overlay.find('.oe_overlay_options').css({
-                        'position': 'static'
                     });
+                    self.$overlay.find(".oe_overlay_options").attr("style", "width:0; left:0!important; top:0;");
+                    self.$overlay.find(".oe_overlay_options > .btn-group").attr("style", "width:160px; left:-80px;");
                 }});
             this.$target.data('transfo').$markup
                 .on("mouseover", function () {
                     self.$target.trigger("mouseover");
                 })
-                .mouseover()
-                .click(function () {
-                    self.$target.transfo({ hide: false });
-                });
+                .mouseover();
 
             this.$el.find(".style").click(function (event) {
                 var settings = self.$target.data("transfo").settings;
                 self.$target.transfo({ hide: (settings.hide = !settings.hide) });
             });
-        },
-        onFocus : function () {
-            this.$target.transfo({ hide: true });
+
+            this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
+
+            this.$overlay.find('[data-toggle="dropdown"]')
+                .on("mousedown", function () {
+                    self.$target.transfo({ hide: true });
+                });
         },
         onBlur : function () {
             this.$target.transfo({ hide: true });
@@ -1493,7 +1490,6 @@
             this.snippet_id = this.$target.data("snippet-id");
             this._readXMLData();
             this.load_style_options();
-            this.get_transform();
             this.get_parent_block();
             this.start();
         },
@@ -1635,24 +1631,6 @@
             this.$overlay.find('[data-toggle="dropdown"]').dropdown();
         },
 
-        get_transform: function () {
-            var self = this;
-            var phantom = false;
-            for (var i in this.styles){
-                if (this.styles[i].data.phantom) {
-                    phantom = true;
-                    break;
-                }
-            }
-            if (phantom) {
-                // var $parent = this.$target.parents(website.snippet.globalSelector).first();
-                // setTimeout(function () {
-                //     self.BuildingBlock.make_active($parent);
-                // }, 0);
-                this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
-            }
-        },
-
         get_parent_block: function () {
             var self = this;
             var $button = this.$overlay.find('.oe_snippet_parent');
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 387e87b8e0f..b7c978ad359 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -981,9 +981,12 @@
     </div>
 
     <div data-snippet-option-id='media'
-        data-transform="true"
         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
         <li><a href="#" class="edition">Change Media</a></li>
+    </div>
+
+    <div data-snippet-option-id='transform'
+        data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
         <li><a href="#" class="style">Transform</a></li>
         <li class="dropdown-submenu">
             <a href="#" tabindex="-1">Rotation</a>