[IMP] clarity of links edition

According to user tests, users have a hard time finding out how to
edit links. Thus, add same system as image edition (a small button
appearing when hovering the element).

Extract and unify these two to avoid redundancies between handlings as
they are broadly similar (only details such as label, positioning and
size of button relative to the element being hovered really change,
the lifecycle itself is the same).

The main setup still isn't very clean, there might be a better way to
do it.

bzr revid: xmo@openerp.com-20131204105212-u0a49nbvwilgtfst

4 files changed, 112 insertions, 57 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index c2ac33008ef..487306be5dc 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -221,6 +220,13 @@ ul.oe_menu_editor .disclose {
   background-color: #ffd9dd !important;
 }
 
+.hover-edition-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 42;
+}
+
 /* ---- SNIPPET EDITOR ---- */
 #oe_snippets {
   position: fixed;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index b44b7c6a4e9..7de48fdc611 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -181,6 +181,12 @@ ul.oe_menu_editor
     outline: 1px solid red !important
     background-color: #ffd9dd !important
 
+.hover-edition-button
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 42
+
 /* ---- SNIPPET EDITOR ---- */
 
 #oe_snippets
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 52e67ecd9e3..a834f5f8162 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -73,57 +73,6 @@
                     link_dialog(editor);
                 }, null, null, 500);
 
-                var previousSelection;
-                $(editor.element.$).on('mouseenter', 'img', function () {
-                    if (previousSelection) { return; }
-                    var selected = new CKEDITOR.dom.element(this);
-                    if (!selected.is('img')
-                            || selected.data('cke-realelement')
-                            || selected.isReadOnly()
-                            || selected.data('oe-model') === 'ir.ui.view') {
-                        return;
-                    }
-
-                    // display button
-                    var $el = $((previousSelection = selected).$);
-                    var $btn = $('<button type="button" class="btn btn-primary image-edit-button" contenteditable="false">Edit</button>')
-                        .insertAfter($el)
-                        .click(function (e) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            image_dialog(editor, selected);
-                        });
-
-                    var position = $el.position();
-                    // http://bugs.jquery.com/ticket/5445#comment:6
-                    // if the image has margin: x auto for centering, FF & IE
-                    // will report top/left as the "correct" value and
-                    // marginTop/marginLeft at "0px", webkit browsers will
-                    // report top/left as 0-ish and set marginTop and
-                    // marginLeft
-                    var image_top = position.top + parseInt($el.css('marginTop'), 10);
-                    var image_left = position.left + parseInt($el.css('marginLeft'), 10);
-                    $btn.css({
-                        position: 'absolute',
-                        top: $el.height() / 2 + image_top - $btn.outerHeight() / 2,
-                        left: $el.width() / 2 + image_left - $btn.outerWidth() / 2,
-                    });
-                }).on('mouseleave', 'img', function (e) {
-                    if (!previousSelection) { return; }
-                    var $previous = $(previousSelection.$);
-                    var $button = $previous.next('button');
-                    $button.css('visibility', 'hidden');
-                    var el = document.elementFromPoint(e.clientX, e.clientY);
-                    $button.css('visibility', '');
-                    if (el === this) { return; }
-                    $button.remove();
-                    previousSelection = null;
-                });
-                editor.on('destroy', function () {
-                    if (!previousSelection) { return; }
-                    $('.image-edit-button').remove();
-                });
-
                 //noinspection JSValidateTypes
                 editor.addCommand('link', {
                     exec: function (editor) {
@@ -463,6 +412,7 @@
             this.rte = new website.RTE(this);
             this.rte.on('change', this, this.proxy('rte_changed'));
             this.rte.on('rte:ready', this, function () {
+                self.setup_hover_buttons();
                 self.trigger('rte:ready');
             });
 
@@ -586,6 +536,97 @@
                 }
             });
         },
+
+        /**
+         * Creates a "hover" button for image and link edition
+         *
+         * @param {String} label the button's label
+         * @param {Function} editfn edition function, called when clicking the button
+         * @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', {
+                label: label,
+                classes: classes,
+            })).hide().appendTo(document.body).click(function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                editfn.call(this, e);
+            });
+        },
+        /**
+         * For UI clarity, during RTE edition when the user hovers links and
+         * images a small button should appear to make the capability clear,
+         * as not all users think of double-clicking the image or link.
+         */
+        setup_hover_buttons: function () {
+            var editor = this.rte.editor;
+            var $link_button = this.make_hover_button(_t("Edit Link"), function () {
+                var sel = new CKEDITOR.dom.element(previous);
+                editor.getSelection().selectElement(sel);
+                link_dialog(editor);
+                $link_button.hide();
+                previous = null;
+            }, 'btn-xs');
+            var $image_button = this.make_hover_button(_t("Edit Image"), function () {
+                image_dialog(editor, new CKEDITOR.dom.element(previous));
+                $image_button.hide();
+                previous = null;
+            });
+
+            // previous is the state of the button-trigger: it's the
+            // currently-ish hovered element which can trigger a button showing.
+            // -ish, because when moving to the button itself ``previous`` is
+            // still set to the element having triggered showing the button.
+            var previous;
+            $(editor.element.$).on('mouseover', 'a, img', function (e) {
+                // Back from edit button -> ignore
+                if (previous && previous === this) { return; }
+
+                var selected = new CKEDITOR.dom.element(this);
+                if (selected.data('oe-model') === 'ir.ui.view'
+                 || selected.data('cke-realelement')
+                 || selected.isReadOnly()) {
+                    return;
+                }
+
+                previous = this;
+                var $selected = $(this);
+                var position = $selected.offset();
+                if ($selected.is('img')) {
+                    var image_top = position.top + parseInt($selected.css('marginTop'), 10);
+                    var image_left = position.left + parseInt($selected.css('marginLeft'), 10);
+                    $link_button.hide();
+                    // center button on image
+                    $image_button.show().offset({
+                        top: $selected.outerHeight() / 2
+                                + image_top
+                                - $image_button.outerHeight() / 2,
+                        left: $selected.outerWidth() / 2
+                                + image_left
+                                - $image_button.outerWidth() / 2,
+                    });
+                } else {
+                    $image_button.hide();
+                    // put button below link, horizontally centered
+                    $link_button.show().offset({
+                        top: $selected.outerHeight()
+                                + position.top,
+                        left: $selected.outerWidth() / 2
+                                + position.left
+                                - $link_button.outerWidth() / 2
+                    })
+                }
+            }).on('mouseleave', 'a, img', function (e) {
+                var current = document.elementFromPoint(e.clientX, e.clientY);
+                if (current === $link_button[0] || current === $image_button[0]) {
+                    return;
+                }
+                $image_button.add($link_button).hide();
+                previous = null;
+            });
+        }
     });
 
     var blocks_selector = _.keys(CKEDITOR.dtd.$block).join(',');
@@ -1438,11 +1479,6 @@
                     // <br type="_moz"> appears when focusing RTE in FF, ignore
                     continue;
                 }
-                if (node.className.indexOf('image-edit-button') !== -1) {
-                    // [Edit] button added and removed on image hover, don't count
-                    // as making parent node dirty
-                    continue;
-                }
             }
 
             output.push(node);
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 8c1adf1ee27..be80e71afc0 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -194,4 +194,11 @@
         </div>
     </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>
+    </t>
+
 </templates>