[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.

1 files changed, 70 insertions, 0 deletions

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'));
+};
+
 
 });