From d7b5eeabeb7ce0a4b0ceba783756e69b3e64d6c4 Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@odoo.com>
Date: Thu, 15 Oct 2015 12:14:51 +0200
Subject: [PATCH] [IMP] web_editor: move picture options from snippet to
 summernote bar

Difficulty for the user to understand how to change the images.
Some options summernote being in the bar and the other in the snippets editor.
Need to merge this options.
---
 .../static/src/js/rte.summernote.js           | 25 ++++---
 .../static/src/js/snippets.options.js         |  1 +
 addons/web_editor/views/snippets.xml          |  7 --
 addons/website/models/website.py              |  8 ---
 .../static/src/js/website.snippets.editor.js  | 70 +++++++++++++++++++
 addons/website/views/snippets.xml             |  6 --
 6 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js
index c696468adb4..2c7e4a6ad44 100644
--- a/addons/web_editor/static/src/js/rte.summernote.js
+++ b/addons/web_editor/static/src/js/rte.summernote.js
@@ -169,13 +169,15 @@ renderer.tplPopovers = function (lang, options) {
 
     //////////////// tooltip
 
-    $airPopover.add($linkPopover).add($imagePopover).find("button")
-        .tooltip('destroy')
-        .tooltip({
-            container: 'body',
-            trigger: 'hover',
-            placement: 'bottom'
-        }).on('click', function () {$(this).tooltip('hide');});
+    setTimeout(function () {
+        $airPopover.add($linkPopover).add($imagePopover).find("button")
+            .tooltip('destroy')
+            .tooltip({
+                container: 'body',
+                trigger: 'hover',
+                placement: 'bottom'
+            }).on('click', function () {$(this).tooltip('hide');});
+    });
 
     return $popover;
 };
@@ -207,7 +209,7 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
         if (dom.isImgFont(oStyle.image)) {
 
-            $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-event="imageShape"])').addClass("hidden");
+            $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass("hidden");
             $container.find('.only_fa').removeClass("hidden");
             $container.find('button[data-event="resizefa"][data-value="2"]').toggleClass("active", $(oStyle.image).hasClass("fa-2x"));
             $container.find('button[data-event="resizefa"][data-value="3"]').toggleClass("active", $(oStyle.image).hasClass("fa-3x"));
@@ -217,7 +219,6 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
             $container.find('button[data-event="imageShape"][data-value="fa-spin"]').toggleClass("active", $(oStyle.image).hasClass("fa-spin"));
             $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
-            $container.find('.btn-group:has(button[data-event="imageShape"])').removeClass("hidden");
 
         } else {
 
@@ -610,6 +611,11 @@ eventHandler.attach = function (oLayoutInfo, options) {
             new widgets.MediaDialog(oLayoutInfo.editor(), event.target).appendTo(document.body);
         }
     });
+    if(oLayoutInfo.editor().is('[data-oe-model][data-oe-type="image"]')) {
+        oLayoutInfo.editor().on('click', 'img', function (event) {
+            $(event.target).trigger("dblclick");
+        });
+    }
     oLayoutInfo.editable().on('mousedown', function(e) {
         if(dom.isImg(e.target)) {
             range.createFromNode(e.target).select();
@@ -675,6 +681,7 @@ var fn_detach = eventHandler.detach;
 eventHandler.detach = function (oLayoutInfo, options) {
     fn_detach.call(this, oLayoutInfo, options);
     oLayoutInfo.editor().off("dragstart");
+    oLayoutInfo.editor().off('click');
     $(document).off('mousedown', summernote_mousedown);
     $(document).off('mouseup', summernote_mouseup);
     oLayoutInfo.editor().off("dblclick");
diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js
index b4b47ca6c5c..941d43ccd50 100644
--- a/addons/web_editor/static/src/js/snippets.options.js
+++ b/addons/web_editor/static/src/js/snippets.options.js
@@ -230,6 +230,7 @@ var Option = Class.extend({
 
 /* ----- default options ---- */
 
+// to remove after 9.0 (keep for compatibility without update with -u)
 var media = Option.extend({
     start: function () {
         var self =this;
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 936dcc56abf..9a1fd1200a6 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -37,13 +37,6 @@
 <!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
 
 <template id="snippet_options">
-    <!-- media -->
-
-    <div data-js='media'
-        data-selector="img, .media_iframe_video, span.fa, i.fa, .glyphicon, a.o_image">
-        <li data-edition="edition"><a>Change...</a></li>
-    </div>
-
     <!-- t-field -->
 
     <div data-js='many2one'
diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index e61ce9bc1f3..1f24bbdf559 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -550,14 +550,6 @@ class website(osv.osv):
                     break
         return res
 
-    def _image_placeholder(self, response):
-        logger.warning("Deprecated _image_placeholder method, please use this method on ir.attachment")
-        return self.pool['ir.attachment']._image_placeholder(response)
-
-    def _image(self, cr, uid, model, id, field, response, max_width=maxint, max_height=maxint, cache=None, context=None):
-        logger.warning("Deprecated _image method, please use this method on ir.attachment")
-        return self.pool['ir.attachment']._image(cr, uid, model, id, field, response, max_width=max_width, max_height=max_height, cache=cache, context=context)
-
     def image_url(self, cr, uid, record, field, size=None, context=None):
         """Returns a local url that points to the image field of a given browse record."""
         sudo_record = record.sudo()
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 61a7622ecbf..6015f740301 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -525,6 +525,8 @@ options.registry.parallax = options.Class.extend({
     }
 });
 
+
+// to remove after 9.0 (keep for compatibility without update with -u)
 options.registry.transform = options.Class.extend({
     start: function () {
         var self = this;
@@ -743,5 +745,73 @@ options.registry.collapse = options.Class.extend(preventParentEmpty).extend({
     }
 });
 
+return options;
+
+});
+
+
+odoo.define('website.rte.summernote', function (require) {
+'use strict';
+
+var core = require('web.core');
+var options = require('website.snippets.editor');
+require('web_editor.rte.summernote');
+
+var eventHandler = $.summernote.eventHandler;
+var renderer = $.summernote.renderer;
+var tplIconButton = renderer.getTemplate().iconButton;
+var _t = core._t;
+
+var fn_tplPopovers = renderer.tplPopovers;
+renderer.tplPopovers = function (lang, options) {
+    var $popover = $(fn_tplPopovers.call(this, lang, options));
+    $popover.find('.note-image-popover .btn-group:has([data-value="img-thumbnail"])').append(
+        tplIconButton('fa fa-object-ungroup', {
+            title: _t('Transform the picture (click twice to reset transformation)'),
+            event: 'transform',
+        }));
+    return $popover;
+};
+
+
+$.summernote.pluginEvents.transform = function (event, editor, layoutInfo, sorted) {
+    var $editable = layoutInfo.editable();
+    var $selection = layoutInfo.handle().find('.note-control-selection');
+    var $image = $($selection.data('target'));
+
+    if($image.data('transfo-destroy')) {
+        $image.removeData('transfo-destroy');
+        return;
+    }
+
+    $image.transfo();
+
+    var mouseup = function (event) {
+        $('.note-popover button[data-event="transform"]').toggleClass('active', $image.is('[style*="transform"]'));
+    };
+    $(document).on('mouseup', mouseup);
+
+    var mousedown = function (event) {
+        if (!$(event.target).closest('.transfo-container').length) {
+            $image.transfo("destroy");
+            $(document).off('mousedown', mousedown).off('mouseup', mouseup);
+        }
+        if ($(event.target).closest('.note-popover').length) {
+            $image.data('transfo-destroy', true).attr("style", ($image.attr("style") || '').replace(/[^;]*transform[\w:]*;?/g, ''));
+        }
+        $image.trigger('content_changed');
+    };
+    $(document).on('mousedown', mousedown);
+};
+
+
+var fn_boutton_update = eventHandler.modules.popover.button.update;
+eventHandler.modules.popover.button.update = function ($container, oStyle) {
+    fn_boutton_update.call(this, $container, oStyle);
+    $container.find('button[data-event="transform"]')
+        .toggleClass('active', $(oStyle.image).is('[style*="transform"]'))
+        .toggleClass('hidden', !$(oStyle.image).is('img'));
+};
+
 
 });
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 0feef073a0d..e4952608a12 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1103,12 +1103,6 @@
         </li>
     </div>
 
-    <div data-js='transform'
-        data-selector=":not([data-oe-field='image']) > img, .media_iframe_video, span.fa, i.fa">
-        <li data-style=""><a>Transform</a></li>
-        <li data-clear_style=""><a>Reset Transformation</a></li>
-    </div>
-
     <div data-js='ul'
          data-selector=":not(li) > ul:has(ul,ol), :not(li) > ol:has(ul,ol)">
         <li data-toggle_class="o_ul_folded"> <a href="#">Folded list</a> </li>