[IMP] website editor: add style button on image

bzr revid: chm@openerp.com-20140326141629-diz4rk0789no7yyl

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

@@ -296,11 +296,12 @@ ul.oe_menu_editor .disclose {
   background-color: #ffd9dd !important;
 }
 
-.hover-edition-button {
+.hover-edition {
+  display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
 }
 
 .cke_editable .fa {

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

@@ -259,7 +259,8 @@ $attachment-border-color: #848490
     outline: 1px solid red !important
     background-color: #ffd9dd !important
 
-.hover-edition-button
+.hover-edition
+    display: inline-block
     position: absolute
     top: 0
     left: 0

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

@@ -56,7 +56,16 @@ OTHER DEALINGS IN THE SOFTWARE.
                             return $this.data('transfo') && $this.data('transfo').settings;
                         });
                     }
-                    return $this.data('transfo') && $this.data('transfo').settings;
+                    return this.data('transfo') && $this.data('transfo').settings;
+                },
+                center :  function() {
+                    if(this.length > 1) {
+                        this.map(function () {
+                            var $this = $(this);
+                            return $this.data('transfo') && $this.data('transfo').$center.offset();
+                        });
+                    }
+                    return this.data('transfo') && this.data('transfo').$center.offset();
                 }
         };
 
@@ -131,8 +140,7 @@ OTHER DEALINGS IN THE SOFTWARE.
             transfo.settings.pos = $this.offset();
 
             transfo.settings.rotationStep = 5;
-
-            console.log(transfo.settings);
+            transfo.settings.callback = function () {};
         }
 
         function _bind ($this, transfo) {
@@ -322,6 +330,8 @@ OTHER DEALINGS IN THE SOFTWARE.
                 "z-index: 1000;" +
                 "cursor: move;",
                 settings);
+
+            transfo.settings.callback.call($this[0], $this);
         }
 
         function _destroy ($this) {

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

@@ -636,15 +636,26 @@
          * @param {String} [classes] additional classes to set on the button
          * @returns {jQuery}
          */
-        make_hover_button: function (label, editfn, classes) {
-            return $(openerp.qweb.render('website.editor.hoverbutton', {
+        make_hover_button: function (label, editfn, classes, styleButton) {
+            var $div = $(openerp.qweb.render('website.editor.hoverbutton', {
                 label: label,
                 classes: classes,
-            })).hide().appendTo(document.body).click(function (e) {
+                styleButton: styleButton
+            })).hide().appendTo(document.body);
+
+            $div.find("button.hover-edition-button").click(function (e) {
                 e.preventDefault();
                 e.stopPropagation();
                 editfn.call(this, e);
             });
+            if (styleButton) {
+                $div.find("button.hover-style-button").click(function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    styleButton.call(this, e);
+                });
+            }
+            return $div;
         },
         /**
          * For UI clarity, during RTE edition when the user hovers links and
@@ -665,11 +676,23 @@
                 $link_button.hide();
                 previous = null;
             }, 'btn-xs');
+
             var $image_button = this.make_hover_button(_t("Change"), function () {
                 image_dialog(editor, new CKEDITOR.dom.element(previous));
                 $image_button.hide();
                 previous = null;
-            }, 'btn-sm');
+            }, 'btn-sm', function () {
+                var prev = previous;
+                var sel = new CKEDITOR.dom.element(prev);
+                var $sel = $(sel.$);
+                if ($sel.data('transfo')) {
+                    $sel.transfo("destroy");
+                    $(this).addClass("btn-primary").removeClass("btn-default");
+                } else {
+                    $sel.transfo();
+                    $(this).removeClass("btn-primary").addClass("btn-default");
+                }
+            });
 
             function is_icons_widget(element) {
                 var w = editor.widgets.getByElement(element);
@@ -724,7 +747,8 @@
                 }
             }).on('mouseleave', 'a, img, .fa', function (e) {
                 var current = document.elementFromPoint(e.clientX, e.clientY);
-                if (current === $link_button[0] || current === $image_button[0]) {
+                if (current === $link_button[0] || $(current).parent()[0] === $link_button[0] ||
+                    current === $image_button[0] || $(current).parent()[0] === $image_button[0]) {
                     return;
                 }
                 $image_button.add($link_button).hide();

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

@@ -218,10 +218,10 @@
     </t>
 
     <t t-name="website.editor.hoverbutton">
-        <button type="button" contenteditable="false"
-                t-attf-class="btn btn-primary hover-edition-button #{classes or ''}">
-            <t t-esc="label"/>
-        </button>
+        <div contentEditable="false" class="hover-edition">
+            <button type="button" t-attf-class="btn btn-primary hover-edition-button #{classes or ''}"><t t-esc="label"/></button>
+            <button t-if="styleButton" type="button" t-attf-class="btn btn-primary hover-style-button #{classes or ''}">Style</button>
+        </div>
     </t>
 
     <t t-name="website.editor.dialog.font-icons">