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

2 files changed, 10 insertions, 1 deletions

diff --git a/addons/website/static/src/js/menu/mobile_view.js b/addons/website/static/src/js/menu/mobile_view.js
index acfd28042c9..668962c8a10 100644
--- a/addons/website/static/src/js/menu/mobile_view.js
+++ b/addons/website/static/src/js/menu/mobile_view.js
@@ -50,7 +50,10 @@ var MobileMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
      * @private
      */
     _onMobilePreviewClick: function () {
-        new MobilePreviewDialog(this, {
+        if (this.mobilePreview && !this.mobilePreview.isDestroyed()) {
+            return this.mobilePreview.close();
+        }
+        this.mobilePreview = new MobilePreviewDialog(this, {
             title: _t('Mobile preview') + ' <span class="fa fa-refresh"/>',
         }).open();
     },
diff --git a/addons/website/static/src/js/menu/new_content.js b/addons/website/static/src/js/menu/new_content.js
index 918a840561d..efb1b428134 100644
--- a/addons/website/static/src/js/menu/new_content.js
+++ b/addons/website/static/src/js/menu/new_content.js
@@ -132,6 +132,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
      * @private
      */
     _hideMenu: function () {
+        this.shown = false;
         this.$newContentMenuChoices.addClass('o_hidden');
         $('body').removeClass('o_new_content_open');
     },
@@ -168,6 +169,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             });
         }).then(function () {
             self.firstTab = true;
+            self.shown = true;
             self.$newContentMenuChoices.removeClass('o_hidden');
             $('body').addClass('o_new_content_open');
             self.$('> a').focus();
@@ -203,9 +205,13 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
      * @param {Event} ev
      */
     _onBackgroundKeydown: function (ev) {
+        if (!this.shown) {
+            return;
+        }
         switch (ev.which) {
             case $.ui.keyCode.ESCAPE:
                 this._hideMenu();
+                ev.stopPropagation();
                 break;
             case $.ui.keyCode.TAB:
                 if (ev.shiftKey) {