[IMP] website, web: add fullscreen mode and frontend keyboard shortcuts

While the edit mode interface is full of useful things, it also adds a
lot of clutter, and alters the page's width and thus, its layout. This
commit adds keyboard shortcut for website editors to use, and allows
them to enter a "fullscreen" mode that hides the editor interface while
remaining in edit mode, allowing the user to have fewer distractions
while editing text content, and a closer rendition of the page's final
layout while editing.

For this, keyboard shortcuts were required, and a few other useful
shortcuts have been added, such as alt-1,2,3 for the navbar, just like
in the backed.

task-2126915

closes odoo/odoo#46953

Related: odoo/enterprise#9295
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 63 insertions, 2 deletions

diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js
index bf1a28fd5c2..dd2f54b72c1 100644
--- a/addons/website/static/src/js/content/website_root.js
+++ b/addons/website/static/src/js/content/website_root.js
@@ -3,6 +3,8 @@ odoo.define('website.root', function (require) {
 
 var core = require('web.core');
 var Dialog = require('web.Dialog');
+const KeyboardNavigationMixin = require('web.KeyboardNavigationMixin');
+const session = require('web.session');
 var publicRootData = require('web.public.root');
 require("web.zoomodoo");
 
@@ -10,8 +12,8 @@ var _t = core._t;
 
 var websiteRootRegistry = publicRootData.publicRootRegistry;
 
-var WebsiteRoot = publicRootData.PublicRoot.extend({
-    events: _.extend({}, publicRootData.PublicRoot.prototype.events || {}, {
+var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
+    events: _.extend({}, KeyboardNavigationMixin.events, publicRootData.PublicRoot.prototype.events || {}, {
         'click .js_change_lang': '_onLangChangeClick',
         'click .js_publish_management .js_publish_btn': '_onPublishBtnClick',
         'click .js_multi_website_switch': '_onWebsiteSwitch',
@@ -25,6 +27,16 @@ var WebsiteRoot = publicRootData.PublicRoot.extend({
     /**
      * @override
      */
+    init() {
+        this.isFullscreen = false;
+        KeyboardNavigationMixin.init.call(this, {
+            autoAccessKeys: false,
+        });
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
     start: function () {
         // Compatibility lang change ?
         if (!this.$('.js_change_lang').length) {
@@ -82,6 +94,38 @@ var WebsiteRoot = publicRootData.PublicRoot.extend({
         }
         return registry;
     },
+    /**
+     * Toggles the fullscreen mode.
+     *
+     * @private
+     * @param {boolean} state toggle fullscreen on/off (true/false)
+     */
+    _toggleFullscreen(state) {
+        this.isFullscreen = state;
+        document.body.classList.toggle('o_fullscreen', this.isFullscreen);
+        document.body.style.overflowX = 'hidden';
+        let resizing = true;
+        window.requestAnimationFrame(function resizeFunction() {
+            window.dispatchEvent(new Event('resize'));
+            if (resizing) {
+                window.requestAnimationFrame(resizeFunction);
+            }
+        });
+        let stopResizing;
+        const onTransitionEnd = ev => {
+            if (ev.target === document.body && ev.propertyName === 'padding-top') {
+                stopResizing();
+            }
+        };
+        stopResizing = () => {
+            resizing = false;
+            document.body.style.overflowX = '';
+            document.body.removeEventListener('transitionend', onTransitionEnd);
+        };
+        document.body.addEventListener('transitionend', onTransitionEnd);
+        // Safeguard in case the transitionend event doesn't trigger for whatever reason.
+        window.setTimeout(() => stopResizing(), 500);
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -147,6 +191,9 @@ var WebsiteRoot = publicRootData.PublicRoot.extend({
      */
     _onPublishBtnClick: function (ev) {
         ev.preventDefault();
+        if (document.body.classList.contains('editor_enable')) {
+            return;
+        }
 
         var self = this;
         var $data = $(ev.currentTarget).parents(".js_publish_management:first");
@@ -207,6 +254,20 @@ var WebsiteRoot = publicRootData.PublicRoot.extend({
     _onModalShown: function (ev) {
         $(ev.target).addClass('modal_shown');
     },
+    /**
+     * @override
+     */
+    _onKeyDown(ev) {
+        if (!session.user_id) {
+            return;
+        }
+        // If document.body doesn't contain the element, it was probably removed as a consequence of pressing Esc.
+        // we don't want to toggle fullscreen as the removal (eg, closing a modal) is the intended action.
+        if (ev.keyCode !== $.ui.keyCode.ESCAPE || !document.body.contains(ev.target) || ev.target.closest('.modal')) {
+            return KeyboardNavigationMixin._onKeyDown.apply(this, arguments);
+        }
+        this._toggleFullscreen(!this.isFullscreen);
+    },
 });
 
 return {