' + _t('Skip tour') + '
'; @@ -176,13 +173,29 @@ return core.Class.extend({ }; } this.tours[name] = tour; - if (this.running_tour === name || (!tour.test && !_.contains(this.consumed_tours, name))) { - this._to_next_step(name, 0); - } + }, + _register_all: function (do_update) { + if (this._all_registered) return; + this._all_registered = true; - if (!this.running_tour || this.running_tour === name) { - this.update(name); - } + _.each(this.tours, this._register.bind(this, do_update)); + }, + _register: function (do_update, tour, name) { + if (tour.ready) return $.when(); + + return tour.wait_for.then((function () { + tour.current_step = parseInt(local_storage.getItem(get_step_key(name))) || 0; + tour.steps = _.filter(tour.steps, (function (step) { + return !step.edition || step.edition === this.edition; + }).bind(this)); + + tour.ready = true; + + if (do_update && (this.running_tour === name || (!this.running_tour && !tour.test && !_.contains(this.consumed_tours, name)))) { + this._to_next_step(name, 0); + this.update(name); + } + }).bind(this)); }, run: function (tour_name, step_delay) { if (this.running_tour) { @@ -204,8 +217,8 @@ return core.Class.extend({ this._deactivate_tip(this.active_tooltips[tour_name]); tour.current_step = 0; + this._to_next_step(tour_name, 0); local_storage.setItem(get_step_key(tour_name), tour.current_step); - this.active_tooltips[tour_name] = tour.steps[tour.current_step]; if (tour.url) { this.pause(); @@ -232,16 +245,16 @@ return core.Class.extend({ update: function (tour_name) { if (this.paused) return; - if (this.running_tour) { - if (this.tours[this.running_tour] === undefined) return; - if (this.running_tour_timeout === undefined) { - this._set_running_tour_timeout(this.running_tour, this.active_tooltips[this.running_tour]); - } - } - this.$modal_displayed = $('.modal:visible').last(); + tour_name = this.running_tour || tour_name; if (tour_name) { + var tour = this.tours[tour_name]; + if (!tour || !tour.ready) return; + + if (this.running_tour && this.running_tour_timeout === undefined) { + this._set_running_tour_timeout(this.running_tour, this.active_tooltips[this.running_tour]); + } this._check_for_tooltip(this.active_tooltips[tour_name], tour_name); } else { _.each(this.active_tooltips, this._check_for_tooltip.bind(this)); diff --git a/addons/web_tour/static/src/js/tour_service.js b/addons/web_tour/static/src/js/tour_service.js index 14755066c4c..261b4c13fe9 100644 --- a/addons/web_tour/static/src/js/tour_service.js +++ b/addons/web_tour/static/src/js/tour_service.js @@ -51,27 +51,34 @@ return session.is_bound.then(function () { } }, 500); var observer = new MutationObserver(check_tooltip); - var observe = function () { + var start_service = function (observe) { $(function () { - observer.observe(document.body, { - attributes: true, - childList: true, - subtree: true, + /** + * Once the DOM is ready, we still have to wait all the modules are loaded before completing the tours + * registration and starting listening for DOM mutations. + */ + _.defer(function () { + tour._register_all(observe); + if (observe) { + observer.observe(document.body, { + attributes: true, + childList: true, + subtree: true, + }); + } }); - tour.update(); }); }; // Enable the MutationObserver for the admin or if a tour is running, when the DOM is ready - if (session.is_superuser || tour.running_tour) { - observe(); - } + start_service(session.is_superuser || tour.running_tour); + // Override the TourManager so that it enables/disables the observer when necessary if (!session.is_superuser) { var run = tour.run; tour.run = function () { run.apply(this, arguments); - if (this.running_tour) { observe(); } + if (this.running_tour) { start_service(true); } }; var _consume_tour = tour._consume_tour; tour._consume_tour = function () { diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js index 8c3dfe6aa09..cc7bcf56867 100644 --- a/addons/website/static/src/js/website.tour.banner.js +++ b/addons/website/static/src/js/website.tour.banner.js @@ -7,51 +7,50 @@ odoo.define("website.tour.banner", function (require) { var _t = core._t; - base.ready().done(function () { - tour.register("banner", { - url: "/", - }, [{ - trigger: "a[data-action=edit]", - content: _t("Click Edit to start designing your homepage."), - position: "bottom", - }, { - trigger: "#snippet_structure .oe_snippet:eq(1) .oe_snippet_thumbnail", - content: _t("Drag the Cover block and drop it in your page."), - position: "bottom", - run: "drag_and_drop", - }, { - trigger: "#wrapwrap .s_text_block_image_fw h2", - content: _t("Click on a text to start editing it. It's that easy to edit your content!"), - position: "left", - width: 150, - run: "text", - }, { - trigger: ".oe_overlay_options .oe_options", - extra_trigger: "#wrapwrap .s_text_block_image_fw h2:not(:containsExact(\"Headline\"))", - content: _t("Customize any block through this menu. Try to change the background of the banner."), - position: "bottom", - }, { - trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail", - content: _t("Drag another block in your page, below the cover."), - position: "bottom", - run: "drag_and_drop", - }, { - trigger: "button[data-action=save]", - extra_trigger: ".oe_overlay_options .oe_options", - content: _t("Publish your page by clicking on the Save button."), - position: "bottom", - }, { - trigger: "a[data-action=show-mobile-preview]", - content: _t("Good Job! You created your first page. Let's check how this page looks like on mobile devices."), - position: "bottom", - }, { - trigger: ".modal-dialog:has(#mobile-viewport) button[data-dismiss=modal]", - content: _t("After having checked how it looks on mobile, close the preview."), - position: "right", - }, { - trigger: "#oe_main_menu_navbar a[data-action=new_page]", - content: _t("That's it. Your homepage is live.
Continue adding more pages to your site or edit this page to make it even more awesome.
"), - position: "bottom", - }]); - }); + tour.register("banner", { + url: "/", + wait_for: base.ready(), + }, [{ + trigger: "a[data-action=edit]", + content: _t("Click Edit to start designing your homepage."), + position: "bottom", + }, { + trigger: "#snippet_structure .oe_snippet:eq(1) .oe_snippet_thumbnail", + content: _t("Drag the Cover block and drop it in your page."), + position: "bottom", + run: "drag_and_drop", + }, { + trigger: "#wrapwrap .s_text_block_image_fw h2", + content: _t("Click on a text to start editing it. It's that easy to edit your content!"), + position: "left", + width: 150, + run: "text", + }, { + trigger: ".oe_overlay_options .oe_options", + extra_trigger: "#wrapwrap .s_text_block_image_fw h2:not(:containsExact(\"Headline\"))", + content: _t("Customize any block through this menu. Try to change the background of the banner."), + position: "bottom", + }, { + trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail", + content: _t("Drag another block in your page, below the cover."), + position: "bottom", + run: "drag_and_drop", + }, { + trigger: "button[data-action=save]", + extra_trigger: ".oe_overlay_options .oe_options", + content: _t("Publish your page by clicking on the Save button."), + position: "bottom", + }, { + trigger: "a[data-action=show-mobile-preview]", + content: _t("Good Job! You created your first page. Let's check how this page looks like on mobile devices."), + position: "bottom", + }, { + trigger: ".modal-dialog:has(#mobile-viewport) button[data-dismiss=modal]", + content: _t("After having checked how it looks on mobile, close the preview."), + position: "right", + }, { + trigger: "#oe_main_menu_navbar a[data-action=new_page]", + content: _t("That's it. Your homepage is live.
Continue adding more pages to your site or edit this page to make it even more awesome.
"), + position: "bottom", + }]); }); diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index cb5ab3cf7f8..a249b7c14a7 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -14,7 +14,7 @@ class TestUi(odoo.tests.HttpCase): self.phantom_js("/", "console.log('ok')", "'website.snippets.editor' in odoo.__DEBUG__.services", login='admin') def test_03_admin_tour_banner(self): - self.phantom_js("/", "odoo.__DEBUG__.services['web_tour.tour'].run('banner')", "odoo.__DEBUG__.services['web_tour.tour'].tours.banner", login='admin') + self.phantom_js("/", "odoo.__DEBUG__.services['web_tour.tour'].run('banner')", "odoo.__DEBUG__.services['web_tour.tour'].tours.banner.ready", login='admin') def test_03_admin_tour_rte_translator(self): self.phantom_js("/", "odoo.__DEBUG__.services['web.Tour'].run('rte_translator', 'test')", "odoo.__DEBUG__.services['web.Tour'].tours.rte_translator", login='admin') diff --git a/addons/website_blog/static/src/js/website.tour.blog.js b/addons/website_blog/static/src/js/website.tour.blog.js index 39c2a76ad83..f8c16df1eeb 100644 --- a/addons/website_blog/static/src/js/website.tour.blog.js +++ b/addons/website_blog/static/src/js/website.tour.blog.js @@ -7,72 +7,71 @@ odoo.define("website_blog.tour", function (require) { var _t = core._t; - base.ready().done(function () { - tour.register("blog", { - url: "/", - }, [tour.STEPS.WEBSITE_NEW_PAGE, { - trigger: "a[data-action=new_blog_post]", - content: _t("Select this menu item to create a new blog post."), - position: "bottom", - }, { - trigger: "h1[data-oe-expression=\"blog_post.name\"]", - extra_trigger: "body.editor_has_snippets", - content: _t("Write a title, the subtitle is optional."), - position: "top", - run: "text", - }, { - trigger: "#oe_manipulators .oe_overlay.oe_active a.btn.btn-primary.btn-sm", - extra_trigger: "#wrap h1[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))", - content: _t("Set a blog post cover."), - position: "bottom", - }, { - trigger: "a:containsExact(" + _t("Change Cover")+ "):eq(1)", - content: _t("Clich here to change your post cover."), - position: "right", - }, { - trigger: ".o_select_media_dialog .o_existing_attachment_cell:nth(1) img", - extra_trigger: ".modal:has(.o_existing_attachment_cell:nth(1))", - content: _t("Choose an image from the library."), - position: "top", - }, { - trigger: ".o_select_media_dialog .btn.o_save_button", - extra_trigger: ".o_existing_attachment_cell.o_selected", - content: _t("Click on Save to set the picture as cover."), - position: "top", - }, { - trigger: ".blog_content section.mt16", - content: _t("Write your story here. Use the top toolbar to style your text: add an image or table, set bold or italic, etc. Drag and drop building blocks for more graphical blogs."), - position: "top", - run: function (actions) { - actions.auto(); - actions.text("Blog content", this.$anchor.find("p")); - }, - }, { - trigger: "button[data-action=save]", - extra_trigger: "#blog_content section:first p:first:not(:containsExact(" + _t("Start writing here...") + "))", - content: _t("Click on Save to record yoru changes."), - position: "bottom", - }, { - trigger: "a[data-action=show-mobile-preview]", - extra_trigger: "body:not(.editor_enable)", - content: _t("Use this icon to preview your blog post on mobile devices."), - position: "bottom", - }, { - trigger: "button[data-dismiss=modal]", - extra_trigger: ".modal:has(#mobile-viewport)", - content: _t("Once you have reviewed the content on mobile, close the preview."), - position: "right", - }, { - trigger: "button.btn-danger.js_publish_btn", - extra_trigger: "body:not(.editor_enable)", - position: "bottom", - content: _t("Publish your blog post to make it visible to your visitors."), - }, { - trigger: "#customize-menu-button", - extra_trigger: "body:not(.editor_enable) .js_publish_management button.js_publish_btn.btn-success:visible", - content: _t("That's it, your blog post is published! Discover more features through the Customize menu."), - position: "bottom", - width: 500, - }]); - }); + tour.register("blog", { + url: "/", + wait_for: base.ready(), + }, [tour.STEPS.WEBSITE_NEW_PAGE, { + trigger: "a[data-action=new_blog_post]", + content: _t("Select this menu item to create a new blog post."), + position: "bottom", + }, { + trigger: "h1[data-oe-expression=\"blog_post.name\"]", + extra_trigger: "body.editor_has_snippets", + content: _t("Write a title, the subtitle is optional."), + position: "top", + run: "text", + }, { + trigger: "#oe_manipulators .oe_overlay.oe_active a.btn.btn-primary.btn-sm", + extra_trigger: "#wrap h1[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))", + content: _t("Set a blog post cover."), + position: "bottom", + }, { + trigger: "a:containsExact(" + _t("Change Cover")+ "):eq(1)", + content: _t("Clich here to change your post cover."), + position: "right", + }, { + trigger: ".o_select_media_dialog .o_existing_attachment_cell:nth(1) img", + extra_trigger: ".modal:has(.o_existing_attachment_cell:nth(1))", + content: _t("Choose an image from the library."), + position: "top", + }, { + trigger: ".o_select_media_dialog .btn.o_save_button", + extra_trigger: ".o_existing_attachment_cell.o_selected", + content: _t("Click on Save to set the picture as cover."), + position: "top", + }, { + trigger: ".blog_content section.mt16", + content: _t("Write your story here. Use the top toolbar to style your text: add an image or table, set bold or italic, etc. Drag and drop building blocks for more graphical blogs."), + position: "top", + run: function (actions) { + actions.auto(); + actions.text("Blog content", this.$anchor.find("p")); + }, + }, { + trigger: "button[data-action=save]", + extra_trigger: "#blog_content section:first p:first:not(:containsExact(" + _t("Start writing here...") + "))", + content: _t("Click on Save to record yoru changes."), + position: "bottom", + }, { + trigger: "a[data-action=show-mobile-preview]", + extra_trigger: "body:not(.editor_enable)", + content: _t("Use this icon to preview your blog post on mobile devices."), + position: "bottom", + }, { + trigger: "button[data-dismiss=modal]", + extra_trigger: ".modal:has(#mobile-viewport)", + content: _t("Once you have reviewed the content on mobile, close the preview."), + position: "right", + }, { + trigger: "button.btn-danger.js_publish_btn", + extra_trigger: "body:not(.editor_enable)", + position: "bottom", + content: _t("Publish your blog post to make it visible to your visitors."), + }, { + trigger: "#customize-menu-button", + extra_trigger: "body:not(.editor_enable) .js_publish_management button.js_publish_btn.btn-success:visible", + content: _t("That's it, your blog post is published! Discover more features through the Customize menu."), + position: "bottom", + width: 500, + }]); }); diff --git a/addons/website_blog/tests/test_ui.py b/addons/website_blog/tests/test_ui.py index ef6ea770f94..152b4b980c1 100644 --- a/addons/website_blog/tests/test_ui.py +++ b/addons/website_blog/tests/test_ui.py @@ -7,4 +7,4 @@ import odoo.tests @odoo.tests.common.post_install(True) class TestUi(odoo.tests.HttpCase): def test_admin(self): - self.phantom_js("/", "odoo.__DEBUG__.services['web_tour.tour'].run('blog')", "odoo.__DEBUG__.services['web_tour.tour'].tours.blog", login='admin') + self.phantom_js("/", "odoo.__DEBUG__.services['web_tour.tour'].run('blog')", "odoo.__DEBUG__.services['web_tour.tour'].tours.blog.ready", login='admin') diff --git a/addons/website_event/static/src/js/website.tour.event.js b/addons/website_event/static/src/js/website.tour.event.js index d9144df2d2f..215c9a5253c 100644 --- a/addons/website_event/static/src/js/website.tour.event.js +++ b/addons/website_event/static/src/js/website.tour.event.js @@ -7,41 +7,40 @@ odoo.define("website_event.tour", function (require) { var _t = core._t; - base.ready().done(function () { - tour.register("event", { - url: "/", - }, [tour.STEPS.WEBSITE_NEW_PAGE, { - trigger: "a[data-action=new_event]", - content: _t("Click here to create a new event."), - position: "bottom", - }, { - trigger: ".modal-dialog #editor_new_event input[type=text]", - content: _t("Create a name for your new event and click \"Continue\". e.g: Technical Training"), - position: "right", - }, { - trigger: ".modal-dialog button.btn-primary.btn-continue", - extra_trigger: ".modal-dialog #editor_new_event input[type=text][value!=\"\"]", - content: _t("Click Continue to create the event."), - position: "right", - }, { - trigger: "#snippet_structure .oe_snippet:eq(2) .oe_snippet_thumbnail", - content: _t("Drag this block and drop it in your page."), - position: "bottom", - run: "drag_and_drop", - }, { - trigger: "button[data-action=save]", - content: _t("Once you click on save, your event is updated."), - position: "bottom", - }, { - trigger: "button.btn-danger.js_publish_btn", - extra_trigger: "body:not(.editor_enable)", - content: _t("Click to publish your event."), - position: "top", - }, { - trigger: ".js_publish_management button[data-toggle=\"dropdown\"]", - extra_trigger: ".js_publish_management button.js_publish_btn.btn-success:visible", - content: _t("Click here to customize your event further."), - position: "left", - }]); - }); + tour.register("event", { + url: "/", + wait_for: base.ready(), + }, [tour.STEPS.WEBSITE_NEW_PAGE, { + trigger: "a[data-action=new_event]", + content: _t("Click here to create a new event."), + position: "bottom", + }, { + trigger: ".modal-dialog #editor_new_event input[type=text]", + content: _t("Create a name for your new event and click \"Continue\". e.g: Technical Training"), + position: "right", + }, { + trigger: ".modal-dialog button.btn-primary.btn-continue", + extra_trigger: ".modal-dialog #editor_new_event input[type=text][value!=\"\"]", + content: _t("Click Continue to create the event."), + position: "right", + }, { + trigger: "#snippet_structure .oe_snippet:eq(2) .oe_snippet_thumbnail", + content: _t("Drag this block and drop it in your page."), + position: "bottom", + run: "drag_and_drop", + }, { + trigger: "button[data-action=save]", + content: _t("Once you click on save, your event is updated."), + position: "bottom", + }, { + trigger: "button.btn-danger.js_publish_btn", + extra_trigger: "body:not(.editor_enable)", + content: _t("Click to publish your event."), + position: "top", + }, { + trigger: ".js_publish_management button[data-toggle=\"dropdown\"]", + extra_trigger: ".js_publish_management button.js_publish_btn.btn-success:visible", + content: _t("Click here to customize your event further."), + position: "left", + }]); }); diff --git a/addons/website_event/tests/test_ui.py b/addons/website_event/tests/test_ui.py index a8de31fbfbb..ad78445d184 100644 --- a/addons/website_event/tests/test_ui.py +++ b/addons/website_event/tests/test_ui.py @@ -5,4 +5,4 @@ import odoo.tests @odoo.tests.common.post_install(True) class TestUi(odoo.tests.HttpCase): def test_admin(self): - self.phantom_js("/", "odoo.__DEBUG__.services['web_tour.tour'].run('event')", "odoo.__DEBUG__.services['web_tour.tour'].tours.event", login='admin') + self.phantom_js("/", "odoo.__DEBUG__.services['web_tour.tour'].run('event')", "odoo.__DEBUG__.services['web_tour.tour'].tours.event.ready", login='admin') diff --git a/addons/website_forum/static/src/js/website_tour_forum.js b/addons/website_forum/static/src/js/website_tour_forum.js index 508ca40b4c4..ba1c9906bc4 100644 --- a/addons/website_forum/static/src/js/website_tour_forum.js +++ b/addons/website_forum/static/src/js/website_tour_forum.js @@ -7,69 +7,68 @@ odoo.define("website_forum.tour_forum", function (require) { var _t = core._t; - base.ready().done(function () { - tour.register("question", { - url: "/", - }, [tour.STEPS.WEBSITE_NEW_PAGE, { - trigger: "a[data-action=new_forum]", - content: _t("Select this menu item to create a new forum."), - position: "bottom", - }, { - trigger: "#editor_new_forum input[type=text]", - content: _t("Enter a name for your new forum."), - position: "right", - }, { - trigger: "button.btn-primary", - extra_trigger: ".modal #editor_new_forum input[type=text]:not(:propValue(\"\"))", - content: _t("Click Continue to create the forum."), - position: "right", - }, { - trigger: ".btn-block a:first", - position: "left", - content: _t("Ask the question in this forum by clicking on the button."), - }, { - trigger: "input[name=post_name]", - position: "top", - content: _t("Give your question title."), - }, { - trigger: ".note-editable p", - extra_trigger: "input[name=post_name]:not(:propValue(\"\"))", - content: _t("Put your question here."), - position: "bottom", - run: "text", - }, { - trigger: ".select2-choices", - extra_trigger: ".note-editable p:not(:containsExact(\"