[IMP] web: restore scroll position

This rev. improves the way the scroll position is restored when
coming back to a view (e.g. open a kanban view, scroll, click on a
record to open it in a form view, go back to kanban using the
breadcrumbs):

 - generalize the scroll position handling from web_enterprise to
   web to make it available in the community webclient as well
 - also restore left scroll position, not only top (especially
   useful for grouped Kanban views with a lot of columns)
 - handle the case where the scrolling area is a sub element of
   the view (e.g. the grouped Kanban view in mobile).

Task 34037

Co-authored-by: Mohammed Shekha <msh@openerp.com>
Co-authored-by: Ankit Sathvara <asa@odoo.com>

3 files changed, 72 insertions, 10 deletions

diff --git a/addons/web/static/src/js/chrome/abstract_web_client.js b/addons/web/static/src/js/chrome/abstract_web_client.js
index 9fe38adbde6..87219284e4d 100644
--- a/addons/web/static/src/js/chrome/abstract_web_client.js
+++ b/addons/web/static/src/js/chrome/abstract_web_client.js
@@ -88,6 +88,8 @@ var AbstractWebClient = Widget.extend(ServiceProviderMixin, {
                 }
             });
         },
+        getScrollPosition: '_onGetScrollPosition',
+        scrollTo: '_onScrollTo',
     },
     init: function (parent) {
         this.client_options = {};
@@ -374,6 +376,16 @@ var AbstractWebClient = Widget.extend(ServiceProviderMixin, {
         }
     },
     /**
+     * This function must be implemented to provide to the caller the current
+     * scroll position (left and top) of the webclient.
+     *
+     * @abstract
+     * @param {OdooEvent} ev
+     * @param {function} ev.data.callback
+     */
+    _onGetScrollPosition: function (ev) {
+    },
+    /**
      * Loads an action from the database given its ID.
      *
      * @private
@@ -395,6 +407,20 @@ var AbstractWebClient = Widget.extend(ServiceProviderMixin, {
         this.do_push_state(e.data.state);
     },
     /**
+     * This function must be implemented by actual webclient to scroll either to
+     * a given offset or to a target element (given a selector).
+     * It must be called with: trigger_up('scrollTo', options).
+     *
+     * @abstract
+     * @param {OdooEvent} ev
+     * @param {integer} [ev.data.top] the number of pixels to scroll from top
+     * @param {integer} [ev.data.left] the number of pixels to scroll from left
+     * @param {string} [ev.data.selector] the selector of the target element to
+     *   scroll to
+     */
+    _onScrollTo: function (ev) {
+    },
+    /**
      * Displays a visual effect (for example, a rainbowman0
      *
      * @private
diff --git a/addons/web/static/src/js/chrome/action_manager.js b/addons/web/static/src/js/chrome/action_manager.js
index 1e9c52238bc..4cf10b8813a 100644
--- a/addons/web/static/src/js/chrome/action_manager.js
+++ b/addons/web/static/src/js/chrome/action_manager.js
@@ -258,7 +258,9 @@ var ActionManager = Widget.extend({
             callbacks: [{widget: controller.widget}],
         });
 
-        this.trigger_up('scrollTo', {offset: controller.scrollTop || 0});
+        if (controller.scrollPosition) {
+            this.trigger_up('scrollTo', controller.scrollPosition);
+        }
 
         if (!controller.widget.need_control_panel) {
             this.controlPanel.do_hide();
@@ -294,7 +296,7 @@ var ActionManager = Widget.extend({
     _detachCurrentController: function () {
         var currentController = this.getCurrentController();
         if (currentController) {
-            currentController.scrollTop = this._getScrollTop();
+            currentController.scrollPosition = this._getScrollPosition();
             dom.detach([{widget: currentController.widget}]);
         }
     },
@@ -613,19 +615,19 @@ var ActionManager = Widget.extend({
         return state;
     },
     /**
-     * Returns the current vertical scroll position.
+     * Returns the current horizontal and vertical scroll positions.
      *
      * @private
-     * @returns {integer}
+     * @returns {Object}
      */
-    _getScrollTop: function () {
-        var scrollTop;
-        this.trigger_up('getScrollTop', {
-            callback: function (value) {
-                scrollTop = value;
+    _getScrollPosition: function () {
+        var scrollPosition;
+        this.trigger_up('getScrollPosition', {
+            callback: function (_scrollPosition) {
+                scrollPosition = _scrollPosition;
             }
         });
-        return scrollTop;
+        return scrollPosition;
     },
     /**
      * Dispatches the given action to the corresponding handler to execute it,
diff --git a/addons/web/static/src/js/chrome/web_client.js b/addons/web/static/src/js/chrome/web_client.js
index 76aadf49463..3f832a6a49f 100644
--- a/addons/web/static/src/js/chrome/web_client.js
+++ b/addons/web/static/src/js/chrome/web_client.js
@@ -4,6 +4,7 @@ odoo.define('web.WebClient', function (require) {
 var AbstractWebClient = require('web.AbstractWebClient');
 var config = require('web.config');
 var data_manager = require('web.data_manager');
+var dom = require('web.dom');
 var framework = require('web.framework');
 var Menu = require('web.Menu');
 var session = require('web.session');
@@ -177,6 +178,39 @@ return AbstractWebClient.extend({
             this.menu.reflow();
         }
     },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _onGetScrollPosition: function (ev) {
+        ev.data.callback({
+            left: this.action_manager.el.scrollLeft,
+            top: this.action_manager.el.scrollTop,
+        });
+    },
+    /**
+     * @override
+     */
+    _onScrollTo: function (ev) {
+        var offset;
+        if (ev.data.selector) {
+            offset = dom.getPosition(document.querySelector(ev.data.selector));
+            // substract the position of the ActionManager as it is the
+            // scrolling element
+            var actionManagerOffset = dom.getPosition(this.action_manager.el);
+            offset.left -= actionManagerOffset.left;
+            offset.top -= actionManagerOffset.top;
+        } else {
+            offset = {top: ev.data.top || 0, left: ev.data.left || 0};
+        }
+
+        this.action_manager.el.scrollTop = offset.top;
+        this.action_manager.el.scrollLeft = offset.left;
+    },
 });
 
 });