[IMP] web_editor: ace_editor: right resize bar

Before this commit, it's was only possible to resize the width
of the ace editor when it was on the right side of the screen.

In studio, we need to put the ace editor on the left.
So, we needed to add a new resize bar.
For that, we also add a new option to know the position of the
ace_editor.

We also prevent the width of the ace editor from being recorded
too many times in the local storage for nothing.
This is why we added _.debounce.

2 files changed, 19 insertions, 3 deletions

diff --git a/addons/web_editor/static/src/js/ace.js b/addons/web_editor/static/src/js/ace.js
index 8b4ee8d7b43..3fbdad61d66 100644
--- a/addons/web_editor/static/src/js/ace.js
+++ b/addons/web_editor/static/src/js/ace.js
@@ -82,8 +82,8 @@ var ViewEditor = Widget.extend({
         this._super.apply(this, arguments);
 
         this.viewKey = viewKey;
-        this.options = options || {};
 
+        this.options = _.defaults({}, options, {position: 'right'});
         this.views = {};
         this.buffers = {};
     },
@@ -117,6 +117,7 @@ var ViewEditor = Widget.extend({
         var refX = 0;
         var resizing = false;
         var minWidth = 400;
+        var debounceStoreEditorWidth = _.debounce(storeEditorWidth, 500);
 
         this._updateViewSelectDOM();
         this.displayView(
@@ -125,7 +126,13 @@ var ViewEditor = Widget.extend({
         );
 
         $(document).on("mouseup.ViewEditor", stopResizing.bind(this)).on("mousemove.ViewEditor", updateWidth.bind(this));
-        this.$el.on("mousedown.ViewEditor", ".ace_gutter", startResizing.bind(this));
+        if (this.options.position === 'left') {
+            this.$('.ace_scroller').after($('<div>').addClass('ace_resize_bar'));
+            this.$('.ace_gutter').css({'cursor': 'default'});
+            this.$el.on("mousedown.ViewEditor", ".ace_resize_bar", startResizing.bind(this));
+        } else {
+            this.$el.on("mousedown.ViewEditor", ".ace_gutter", startResizing.bind(this));
+        }
 
         resizeEditor.call(this, readEditorWidth.call(this));
 
@@ -155,10 +162,13 @@ var ViewEditor = Widget.extend({
             if (!resizing) return;
 
             var offset = e.pageX - refX;
+            if (this.options.position === 'left') {
+                offset = - offset;
+            }
             var width = this.$el.width() - offset;
             refX = e.pageX;
             resizeEditor.call(this, width);
-            storeEditorWidth.call(this);
+            debounceStoreEditorWidth.call(this);
         }
     },
     /**
diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
index de2c49ea5d2..2f8efdac468 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -174,6 +174,12 @@
                 }
             }
         }
+        .ace_resize_bar {
+            .o-position-absolute(@right: 0);
+            width: 25px;
+            height: 100%;
+            cursor: ew-resize;
+        }
         .ace_scroller.o_error::after {
             .o-position-absolute(0, auto, 0, 0);
             width: 3px;