[IMP] website: allow to navigate through menus in edit mode

Now, when clicking on a menu item while being in edit mode, a modal
opens asking if we want to go to that page, edit that page, edit the
menu or do nothing (it only allowed to edit the menu item before).

3 files changed, 58 insertions, 8 deletions

diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index e01ec55eb24..82bbefcf8c2 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -26,7 +26,7 @@ var TopBarContent = Widget.extend({
 
         return this._super();
     },
-    edit_menu: function () {
+    edit_menu: function (action_before_reload) {
         var context = base.get_context();
         var def = $.Deferred();
         if ($("[data-content_menu_id]").length) {
@@ -39,8 +39,8 @@ var TopBarContent = Widget.extend({
             def.resolve(null);
         }
 
-        def.then(function (root_id) {
-            ajax.jsonRpc('/web/dataset/call_kw', 'call', {
+        return def.then(function (root_id) {
+            return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
                 model: 'website.menu',
                 method: 'get_tree',
                 args: [context.website_id, root_id],
@@ -48,7 +48,13 @@ var TopBarContent = Widget.extend({
                     context: context
                 },
             }).then(function (menu) {
-                return new EditMenuDialog(this, {}, menu).open();
+                var dialog = new EditMenuDialog(this, {}, menu).open();
+                dialog.on("saved", null, function () {
+                    $.when(action_before_reload && action_before_reload()).then(function () {
+                        editor.reload();
+                    });
+                });
+                return dialog;
             });
         });
     },
@@ -301,9 +307,8 @@ var EditMenuDialog = widget.Dialog.extend({
             kwargs: {
                 context: context
             },
-        }).then(function (menu) {
-            _super();
-            editor.reload();
+        }).then(function () {
+            return _super();
         });
     },
 });
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 6bf0e805fec..0a735f34263 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1,9 +1,14 @@
 odoo.define('website.snippets.editor', function (require) {
 'use strict';
 
-var animation = require('web_editor.snippets.animation');
+var core = require("web.core");
+var Dialog = require("web.Dialog");
+var editor = require("web_editor.editor");
 var options = require('web_editor.snippets.options');
 var snippet_editor = require('web_editor.snippet.editor');
+var website = require('website.website');
+
+var _t = core._t;
 
 snippet_editor.Class.include({
     _get_snippet_url: function () {
@@ -11,6 +16,41 @@ snippet_editor.Class.include({
     }
 });
 
+options.registry.menu_data = options.Class.extend({
+    start: function () {
+        this._super.apply(this, arguments);
+        this.link = this.$target.attr("href");
+    },
+
+    on_focus: function () {
+        this._super.apply(this, arguments);
+
+        (new Dialog(null, {
+            title: _t("Confirmation"),
+            $content: $(core.qweb.render("website.leaving_current_page_edition")),
+            buttons: [
+                {text: _t("Continue") + " *", classes: "btn-primary", click: save_editor_then_go_to.bind(null, this.link)},
+                {text: _t("Continue & Edit") + " *", classes: "btn-primary", click: save_editor_then_go_to.bind(null, this.link + "?enable_editor=1")},
+                {text: _t("Edit the menu") + " *", classes: "btn-primary", click: function () {
+                    var self = this;
+                    website.topBar.content_menu.edit_menu(function () {
+                        return editor.editor_bar.save_without_reload();
+                    }).then(function (dialog) {
+                        self.close();
+                    });
+                }},
+                {text: _t("Stay on this page"), close: true}
+            ]
+        })).open();
+
+        function save_editor_then_go_to(url) {
+            editor.editor_bar.save_without_reload().then(function () {
+                window.location.href = url;
+            });
+        }
+    },
+});
+
 options.registry.slider = options.Class.extend({
     drop_and_build_snippet: function () {
         this.id = "myCarousel" + new Date().getTime();
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 6915cc39432..1b2b8266764 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -21,4 +21,9 @@
         <p class="lead">Let's start designing.</p>
         <div class="o_tooltip_container">Follow the <div class="o_tooltip bottom"/> signs to start.</div>
     </div>
+
+    <div t-name="website.leaving_current_page_edition">
+        <p>You are leaving the current page. What would you like to do ?</p>
+        <p class="text-muted">* Note that your current changes will be automatically saved.</p>
+    </div>
 </templates>