[WIP] website: media editor

bzr revid: chm@openerp.com-20140331081027-v1eikz3ei78xjjqz

diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 726855f..f521766 100644 (file)
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -201,6 +201,7 @@
   height: 0;
   position: absolute;
   background: transparent;
+  z-index: 1001;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;

diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index 9b12e9d..69afbb1 100644 (file)
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -151,6 +151,7 @@
     height: 0
     position: absolute
     background: transparent
+    z-index: 1001
     //@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)

diff --git a/addons/website/static/src/js/jQuery.transfo.js b/addons/website/static/src/js/jQuery.transfo.js
index df30fdc..19fb85d 100644 (file)
--- a/addons/website/static/src/js/jQuery.transfo.js
+++ b/addons/website/static/src/js/jQuery.transfo.js
@@ -36,6 +36,7 @@ OTHER DEALINGS IN THE SOFTWARE.
                             _init($this, settings);
                         } else {
                             _overwriteOptions($this, transfo, settings);
+                            _targetCss($this, transfo);
                         }
                     });
                 },
@@ -106,12 +107,14 @@ OTHER DEALINGS IN THE SOFTWARE.
             _setOptions($this, transfo);
             _overwriteOptions ($this, transfo, settings);
 
-            // set transfo container and markup
-            _targetCss($this, transfo);
-
             // append controls to container
             $("body").append(transfo.$markup);
 
+            // set transfo container and markup
+            setTimeout(function () {
+                _targetCss($this, transfo);
+            },0);
+
             _bind($this, transfo);
         }
 
@@ -120,8 +123,8 @@ OTHER DEALINGS IN THE SOFTWARE.
         }
 
         function _setOptions ($this, transfo) {
-            var style = $this.attr("style");
-            var transform = (style||"").match(/transform\s*:([^;]+)/) ? style.match(/transform\s*:([^;]+)/)[1] : "";
+            var style = $this.attr("style") || "";
+            var transform = style.match(/transform\s*:([^;]+)/) ? style.match(/transform\s*:([^;]+)/)[1] : "";
 
             transfo.settings = {};
 
@@ -131,7 +134,7 @@ OTHER DEALINGS IN THE SOFTWARE.
             transfo.settings.scalex=     transform.indexOf('scaleX') != -1 ? parseFloat(transform.match(/scaleX\(([^)]+)\)/)[1]) : 1;
             transfo.settings.scaley=     transform.indexOf('scaleY') != -1 ? parseFloat(transform.match(/scaleY\(([^)]+)\)/)[1]) : 1;
 
-            transfo.settings.style = ($this.attr("style")||"").replace(/[^;]*transform[^;]+/g, '');
+            transfo.settings.style = style.replace(/[^;]*transform[^;]+/g, '').replace(/;+/g, ';');
             $this.attr("style", transfo.settings.style);
 
             transfo.settings.height = $this.innerHeight();
@@ -140,6 +143,7 @@ OTHER DEALINGS IN THE SOFTWARE.
             transfo.settings.pos = $this.offset();
 
             transfo.settings.rotationStep = 5;
+            transfo.settings.hide = false;
             transfo.settings.callback = function () {};
         }
 
@@ -327,10 +331,17 @@ OTHER DEALINGS IN THE SOFTWARE.
                 "left:" + left + "px;" +
                 "width:" + width + "px;" +
                 "height:" + height + "px;" +
-                "z-index: 1000;" +
+                "z-index:" + (transfo.settings.hide ? "-1" : "1000") + ";" +
                 "cursor: move;",
                 settings);
 
+            if (transfo.settings.hide) {
+                transfo.$markup.find(">").hide();
+                transfo.$markup.find(".transfo-scaler-mc").show();
+            } else {
+                transfo.$markup.find(">").show();
+            }
+
             transfo.settings.callback.call($this[0], $this);
         }
 
@@ -342,4 +353,4 @@ OTHER DEALINGS IN THE SOFTWARE.
             $this.removeData('transfo');
         }
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);

diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index cd52ff3..dc66e04 100644 (file)
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1443,31 +1443,45 @@
                 self.element = new CKEDITOR.dom.element(self.$target[0]);
                 new website.editor.MediaDialog(self, self.element).appendTo(document.body);
             });
-            this.$el.find(".style").click(function (event) {
-                self.transfo(event);
-            });
             this.$el.find(".clear-style").click(function (event) {
                 self.$target.removeClass("fa-spin").attr("style", null);
             });
+
+            this.$target.transfo({
+                hide: true,
+                callback: function () {
+                    var pos = $(this).data("transfo").$center.offset();
+                    self.$overlay.css({
+                        'top': pos.top,
+                        'left': pos.left,
+                        'position': 'absolute',
+                        'height': '20px',
+                        'width': '160px'
+                    });
+                    self.$overlay.find('.oe_overlay_options').css({
+                        'position': 'static'
+                    });
+                }});
+            this.$target.data('transfo').$markup
+                .on("mouseover", function () {
+                    self.$target.trigger("mouseover");
+                })
+                .mouseover()
+                .click(function () {
+                    self.$target.transfo({ hide: false });
+                });
+
+            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 });
+        },
+        onBlur : function () {
+            this.$target.transfo({ hide: true });
         },
-        transfo: function (event) {
-            var self = this;
-            var sel = new CKEDITOR.dom.element(this.$target[0]);
-            var $button = $(event.target);
-            event.preventDefault();
-            event.stopPropagation();
-
-            if (this.$target.data('transfo')) {
-                this.$target.transfo("destroy");
-                $button.addClass("btn-primary").removeClass("btn-default");
-            } else {
-                this.$target.transfo();
-                this.$target.data('transfo').$markup
-                    .on("mouseover", function () { self.$target.trigger("mouseover"); })
-                    .mouseover()
-                    .click(function () { self.$target.transfo("destroy"); });
-            }
-        }
     });
 
 
@@ -1479,7 +1493,7 @@
             this.snippet_id = this.$target.data("snippet-id");
             this._readXMLData();
             this.load_style_options();
-            this.get_phantom();
+            this.get_transform();
             this.get_parent_block();
             this.start();
         },
@@ -1621,7 +1635,7 @@
             this.$overlay.find('[data-toggle="dropdown"]').dropdown();
         },
 
-        get_phantom: function () {
+        get_transform: function () {
             var self = this;
             var phantom = false;
             for (var i in this.styles){
@@ -1635,7 +1649,7 @@
                 // setTimeout(function () {
                 //     self.BuildingBlock.make_active($parent);
                 // }, 0);
-                this.$overlay.find('.oe_snippet_clone, .oe_snippet_remove, .oe_handles').addClass('hidden');
+                this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
             }
         },
 

diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 163a61f..387e87b 100644 (file)
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -981,10 +981,10 @@
     </div>
 
     <div data-snippet-option-id='media'
-        data-phantom="true"
+        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>
-        <li><a href="#" class="style">Style</a></li>
+        <li><a href="#" class="style">Transform</a></li>
         <li class="dropdown-submenu">
             <a href="#" tabindex="-1">Rotation</a>
             <ul class="dropdown-menu">