From e5ef2e27e4fb932963155584e7e437af6a6f18a0 Mon Sep 17 00:00:00 2001 From: ddm Date: Fri, 11 Oct 2013 16:00:44 +0200 Subject: [PATCH] [IMP] Wait for DOM element if necessary bzr revid: ddm@openerp.com-20131011140044-2haoqqfsj0hwdn68 --- addons/website/static/src/js/website.tour.js | 98 +++++++++---------- .../website/static/src/xml/website.tour.xml | 45 +++------ 2 files changed, 58 insertions(+), 85 deletions(-) diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index 147ed80c50c..4cd921f04eb 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -19,9 +19,24 @@ keyboard: false, }); this.tour.addSteps(_.map(this.steps, function (step) { - step.title = render('website.tour_title', { title: step.title }); + step.title = render('website.tour_popover_title', { title: step.title }); return step; })); + this.monkeyPatchTour(); + }, + monkeyPatchTour: function () { + var self = this; + // showStep should wait for 'element' to appear instead of moving to the next step + self.tour.showStep = function (i) { + var step = self.tour.getStep(i); + return (function proceed () { + if (step.orphan || $(step.element).length > 0) { + return Tour.prototype.showStep.call(self.tour, i); + } else { + setTimeout(proceed, 50); + } + }()); + }; }, reset: function () { this.tourStorage.removeItem(this.id+'_current_step'); @@ -77,43 +92,44 @@ orphan: true, backdrop: true, title: "Welcome to your website!", - content: "This tutorial will guide you through the firsts steps to build your enterprise class website.", - template: render('website.tour_full', { next: "Continue", end: "Close Tutorial" }), + content: "This tutorial will guide you to build your website.
Let's start by the banner!", + template: render('website.tour_popover', { next: "Start", end: "Close" }), }, { stepId: 'edit-page', element: 'button[data-action=edit]', - placement: 'right', + placement: 'bottom', reflex: true, title: "Edit this page", - content: "Every page of your website can be edited. Click the Edit button to modify your homepage.", - template: render('website.tour_simple'), - }, - { - stepId: 'add-banner', - orphan: true, - backdrop: true, - title: "Now, let's add a banner", - content: "Let's add a banner on the top of the page to make your homepage more attractive.", - template: render('website.tour_confirm', { next: "Continue" }), + content: "You are in your website homepage.
Click here to edit it.", + template: render('website.tour_popover'), }, { stepId: 'add-block', element: 'button[data-action=snippet]', - placement: 'right', - reflex: true, + placement: 'bottom', title: "Shows Building Blocks", - content: "Click on the Insert Blocks button to show the available building blocks.", - template: render('website.tour_simple'), + content: "Make the home page more attractive with a banner.
Click here to see available building blocks.", + template: render('website.tour_popover'), + onShow: function () { + function refreshAddBlockStep () { + self.tour.showStep(self.indexOfStep('add-block')); + editor.off('rte:ready', editor, refreshAddBlockStep); + } + editor.on('rte:ready', editor, refreshAddBlockStep); + $('button[data-action=snippet]').click(function () { + self.movetoStep('drag-banner'); + }); + } }, { stepId: 'drag-banner', element: '#website-top-navbar [data-snippet-id=carousel]', placement: 'bottom', title: "Drag & Drop a Banner", - content: "Drag the Banner block and drop it to the top of your page (purple zone).", - template: render('website.tour_simple'), - onShown: function () { + content: "Drag the Banner block and drop it to the top of your page.", + template: render('website.tour_popover'), + onShow: function () { function beginDrag () { $('.popover.tour').remove(); $('body').off('mousedown', beginDrag); @@ -130,10 +146,10 @@ { stepId: 'edit-title', element: '#wrap [data-snippet-id=carousel]:first .carousel-caption', - placement: 'top', + placement: 'left', title: "Set your Banner text", - content: "Click on the text to start modifying it then click Continue to continue the tutorial.
You can also use the options of the top menubar to change the look of the banner. ", - template: render('website.tour_confirm', { next: "Continue" }), + content: "Click in the text to edit it.
Select the text to change the look thanks to the top menu bar.", + template: render('website.tour_popover', { next: "Continue" }), onHide: function () { var $banner = $("#wrap [data-snippet-id=carousel]:first"); if ($banner.length) { @@ -147,7 +163,7 @@ placement: 'left', title: "Customize your new Banner style", content: "Click on Customize and change the background of your banner.
If your are satisfied with the current background, just click Continue.", - template: render('website.tour_confirm', { next: "Continue" }), + template: render('website.tour_popover', { next: "Continue" }), onShow: function () { $('.dropdown-menu [name=carousel-background]').click(function () { self.movetoStep('save-changes'); @@ -160,8 +176,8 @@ placement: 'right', reflex: true, title: "Save your modifications", - content: "Click the Save button to apply modifications on your website.", - template: render('website.tour_simple'), + content: "Click here to save the content of your website.", + template: render('website.tour_popover'), onHide: function () { self.saveStep('part-2'); }, @@ -173,29 +189,7 @@ backdrop: true, title: "Congratutaltions!", content: "Congratulations on your first modifications.", - template: render('website.tour_confirm', { next: "OK" }), - }, - { - stepId: 'show-customize', - element: '#customize-menu-button', - placement: 'left', - title: "Customize your Website", - content: "Go on the Customize menu to get access customization options for the current page.", - template: render('website.tour_simple'), - onShow: function () { - editor.on('rte:customize_menu_ready', self, function () { - self.movetoStep('change-themes'); - }); - }, - }, - { - stepId: 'change-themes', - element: '.js_change_theme', - placement: 'left', - reflex: true, - title: "Click to View Themes", - content: "You can change the theme at any time to customize the look and feel of your website.", - template: render('website.tour_simple'), + template: render('website.tour_popover', { next: "OK" }), }, { stepId: 'show-tutorials', @@ -203,7 +197,7 @@ placement: 'left', title: "Help is always available", content: "You can find more tutorials in the Help menu.", - template: render('website.tour_end', { end: "Close" }), + template: render('website.tour_popover', { end: "Close" }), }, ]; return this._super(); @@ -249,7 +243,7 @@ menu.append($menuItem); }); var url = new website.UrlParser(window.location.href); - if (url.search === '?tutorial=true' || website.tutorials.basic.startOfPart2()) { + if (url.search.indexOf('?tutorial=true') === 0 || website.tutorials.basic.startOfPart2()) { website.tutorials.basic.start(); } $('.tour-backdrop').click(function (e) { diff --git a/addons/website/static/src/xml/website.tour.xml b/addons/website/static/src/xml/website.tour.xml index 75ffe0fe505..1bd3e77517f 100644 --- a/addons/website/static/src/xml/website.tour.xml +++ b/addons/website/static/src/xml/website.tour.xml @@ -1,44 +1,23 @@ - +

+ + +
- -
-
-

-
- -
- - -
-
-

-
- -
- - -
-
-

-
- -
- - + \ No newline at end of file