[FIX] website: media editor, editor position

bzr revid: chm@openerp.com-20140407102419-u5lrqefulj7c8ta0

addons/website/static/src/js/jQuery.transfo.js

@@ -50,6 +50,15 @@ OTHER DEALINGS IN THE SOFTWARE.
                     });
                 },
 
+                reset : function() {
+                    return this.each(function() {
+                        var $this = $(this);
+                        if ($this.data('transfo')) {
+                            _reset($this);
+                        }
+                    });
+                },
+
                 settings :  function() {
                     if(this.length > 1) {
                         this.map(function () {
@@ -84,12 +93,13 @@ OTHER DEALINGS IN THE SOFTWARE.
         function _init ($this, settings) {
             var transfo = {};
             $this.data('transfo', transfo);
+            transfo.settings = settings;
 
             // 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; margin: -18px; top: -12px; right: -12px; padding: 1px 0 0 1px;" class="transfo-rotator">'
+                +   '<div style="cursor: crosshair; position: absolute; margin: -30px; top: 0; right: 0; 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>'
@@ -213,6 +223,7 @@ OTHER DEALINGS IN THE SOFTWARE.
                 else if (event.pageY < center.top && event.pageX < center.left) ang += 360;
                 
                 ang -= dang;
+                if (settings.scaley < 0 && settings.scalex < 0) ang += 180;
 
                 if (!event.ctrlKey) {
                     settings.angle = Math.round(ang / transfo.settings.rotationStep) * transfo.settings.rotationStep;
@@ -257,8 +268,11 @@ OTHER DEALINGS IN THE SOFTWARE.
                 if (transfo.active.type.indexOf("r") != -1) {
                     settings.scalex = - dx / (settings.width/2);
                 }
-                if (settings.scaley < 0.05) settings.scaley = 0.05;
-                if (settings.scalex < 0.05) settings.scalex = 0.05;
+                if (settings.scaley > 0 && settings.scaley < 0.05) settings.scaley = 0.05;
+                if (settings.scalex > 0 && settings.scalex < 0.05) settings.scalex = 0.05;
+                if (settings.scaley < 0 && settings.scaley > -0.05) settings.scaley = -0.05;
+                if (settings.scalex < 0 && settings.scalex > -0.05) settings.scalex = -0.05;
+
                 if (event.shiftKey &&
                     (transfo.active.type === "tl" || transfo.active.type === "bl" ||
                      transfo.active.type === "tr" || transfo.active.type === "br")) {
@@ -291,11 +305,11 @@ OTHER DEALINGS IN THE SOFTWARE.
                 trans = true;
                 transform += " translateY("+settings.translatey+"px) ";
             }
-            if (settings.scalex != 1 && settings.scalex > 0) {
+            if (settings.scalex != 1) {
                 trans = true;
                 transform += " scaleX("+settings.scalex+") ";
             }
-            if (settings.scaley != 1 && settings.scaley > 0){
+            if (settings.scaley != 1){
                 trans = true;
                 transform += " scaleY("+settings.scaley+") ";
             }
@@ -326,10 +340,16 @@ OTHER DEALINGS IN THE SOFTWARE.
             var settings = Object.create(transfo.settings);
             var w = parseFloat(transfo.settings.css.width);
             var h = parseFloat(transfo.settings.css.height);
-            var width = settings.scalex * w;
-            var height = settings.scaley * h;
-            var top = settings.pos.top + (1-settings.scaley) * h / 2;
-            var left = settings.pos.left + (1-settings.scalex) * w / 2;
+            var width = Math.abs(settings.scalex) * w;
+            var height = Math.abs(settings.scaley) * h;
+            var top = settings.pos.top + (1-Math.abs(settings.scaley)) * h / 2;
+            var left = settings.pos.left + (1-Math.abs(settings.scalex)) * w / 2;
+
+            var $rot = transfo.$markup.find(".transfo-rotator");
+            if (settings.scalex > 0) $rot.css({"right": "0px", "left": "auto"});
+            else $rot.css({"right": "auto", "left": "0px"});
+            if (settings.scaley > 0) $rot.css({"top": "0px", "bottom": "auto"});
+            else $rot.css({"top": "auto", "bottom": "0px"});
 
             settings.scalex = settings.scaley = 1;
 
@@ -354,11 +374,14 @@ OTHER DEALINGS IN THE SOFTWARE.
         }
 
         function _destroy ($this) {
-            var transfo = $this.data('transfo');
-            _setCss($this, transfo.settings.style, transfo.settings);
-            $this.insertAfter(transfo.$wrap);
-            transfo.$markup.remove();
+            $this.data('transfo').$markup.remove();
             $this.removeData('transfo');
         }
 
+        function _reset ($this) {
+            var transfo = $this.data('transfo');
+            _destroy($this);
+            $this.transfo(transfo.settings);
+        }
+
 })(jQuery);

addons/website/static/src/js/website.editor.js

@@ -738,6 +738,7 @@
                 if (current === $link_button[0] || $(current).parent()[0] === $link_button[0]) {
                     return;
                 }
+                $link_button.hide();
                 previous = null;
             });
         }
@@ -1051,6 +1052,7 @@
         },
         save: function () {
             this.close();
+            this.trigger("saved");
         },
         cancel: function () {
         },
@@ -1374,6 +1376,12 @@
             return this._super();
         },
         save: function () {
+            var self = this;
+            var $el = $(self.media.$);
+            setTimeout(function () {
+                $el.trigger("saved", self.media.$);
+            },0);
+
             this.media.$.innerHTML = "";
             if (this.active !== this.imageDialog) {
                 this.imageDialog.clear();
@@ -1384,11 +1392,12 @@
             if (this.active !== this.videoDialog) {
                 this.videoDialog.clear();
             }
+
             this.active.save();
 
             this.media.$.className = this.media.$.className.replace(/\s+/g, ' ');
 
-            return this._super();
+            this._super();
         },
         searchTimer: null,
         search: function () {
@@ -1732,6 +1741,7 @@
          * all the new ones if necessary.
          */
         save: function () {
+            var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : '';
             var classes = (this.media.$.className||"").split(/\s+/);
             var non_fa_classes = _.reject(classes, function (cls) {
                 return cls === 'fa' || /^fa-/.test(cls);
@@ -1739,6 +1749,7 @@
             var final_classes = non_fa_classes.concat(this.get_fa_classes());
             this.media.$.className = final_classes.join(' ');
             this.media.renameNode("span");
+            this.media.$.attributes.style.textContent = style;
             this._super();
         },
         /**
@@ -1802,8 +1813,9 @@
                         .attr('data-size', size)
                         .addClass(size)
                         .addClass(no_sizes);
-                if ((size && _.contains(classes, size)) || (!size && !selected)) {
+                if ((size && _.contains(classes, size)) || !selected) {
                     this.$preview.append($p.clone());
+                    this.$('#fa-size').val(size);
                     $p.addClass('font-icons-selected');
                     selected = true;
                 }
@@ -1887,12 +1899,12 @@
         save: function () {
             var video_id = this.$("#video_id").val();
             var video_type = this.$("#video_type").val();
+            var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : '';
             var $iframe = $(
-                '<div class="media_iframe_video" data-src="'+this.get_url()+'">'+
+                '<div class="media_iframe_video" data-src="'+this.get_url()+'" style="'+style+'">'+
                     '<div class="css_editable_mode_display">&nbsp;</div>'+
                     '<iframe src="'+this.get_url()+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'+
                 '</div>');
-            $iframe.attr("style", this.$(this.media.$).attr("style"));
             $(this.media.$).replaceWith($iframe);
             this._super();
         },

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

@@ -1438,10 +1438,25 @@
             this._super();
 
             this.$el.find(".clear-style").click(function (event) {
-                self.$target.removeClass("fa-spin").attr("style", null);
-                self.$target.transfo({ hide: true });
+                self.$target.removeClass("fa-spin").attr("style", "");
+                self.resetTransfo();
             });
 
+            this.$el.find(".style").click(function (event) {
+                var settings = self.$target.data("transfo").settings;
+                self.$target.transfo({ hide: (settings.hide = !settings.hide) });
+            });
+
+            this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
+
+            this.$overlay.find('[data-toggle="dropdown"]')
+                .on("mousedown", function () {
+                    self.$target.transfo({ hide: true });
+                });
+        },
+        resetTransfo: function () {
+            var self = this;
+            this.$target.transfo("destroy");
             this.$target.transfo({
                 hide: true,
                 callback: function () {
@@ -1459,21 +1474,9 @@
                     self.$target.trigger("mouseover");
                 })
                 .mouseover();
-
-            this.$el.find(".style").click(function (event) {
-                var settings = self.$target.data("transfo").settings;
-                self.$target.transfo({ hide: (settings.hide = !settings.hide) });
-            });
-
-            this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
-
-            this.$overlay.find('[data-toggle="dropdown"]')
-                .on("mousedown", function () {
-                    self.$target.transfo({ hide: true });
-                });
         },
         onFocus : function () {
-            this.$target.transfo({ hide: true });
+            this.resetTransfo();
         },
         onBlur : function () {
             this.$target.transfo({ hide: true });
@@ -1487,6 +1490,10 @@
 
             website.snippet.start_animation(true, this.$target);
 
+            this.$target.on("saved", self, function (event, item) {
+                self.BuildingBlock.make_active($(item));
+            });
+
             this.$el.find(".edition").click(function (event) {
                 event.preventDefault();
                 event.stopPropagation();

addons/website/static/src/xml/website.editor.xml

@@ -153,7 +153,7 @@
                         <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
                     </div>
                     <span class="text-muted">— or —</span>
-                    <label for="iamgeurl">Image URL</label>
+                    <label for="iamgeurl">Set an image URL</label>
                     <div class="form-group btn-group">
                         <input type="text" name="url" class="form-control url" style="width: 320px; float: left;" id="iamgeurl" placeholder="http://openerp.com"/>
                         <button class="btn btn-primary" type="submit">Add</button>
@@ -301,7 +301,7 @@
             <div class="well">
                 <div class="form-group btn-group">
                     <span class="text-muted pull-right" style="margin-left:10px; line-height: 2em;">(Youtube, Vimeo, Dailymotion)</span>
-                    <label for="urlvideo" style="width: 180px; line-height: 2em;" class="pull-left">Video URL</label>
+                    <label for="urlvideo" style="width: 180px; line-height: 2em;" class="pull-left">Set a video URL</label>
                     <input type="text"
                         name="url"
                         class="form-control url pull-left"
@@ -312,7 +312,7 @@
                     <button class="btn btn-primary">Add</button>
                 </div>
                 <div class="form-group btn-group">
-                    <label for="urlvideo" style="width: 180px; line-height: 2em;" class="pull-left">Html Embed Video</label>
+                    <label for="urlvideo" style="width: 180px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
                     <input type="text"
                         name="embed"
                         class="form-control url pull-left"

addons/website/views/snippets.xml

@@ -965,14 +965,7 @@
     <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>
-            <ul class="dropdown-menu">
-                <li data-value="fa-flip-horizontal"><a>Horizontal flip</a></li>
-                <li data-value="fa-flip-vertical"><a>Vertical flip</a></li>
-                <li data-value="fa-spin"><a>Spin</a></li>
-            </ul>
-        </li>
+        <li data-value="fa-spin"><a>Spin</a></li>
         <li><a href="#" class="clear-style">Clear Style</a></li>
     </div>