pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] Wait for DOM element if necessary

Browse Source 
bzr revid: ddm@openerp.com-20131011140044-2haoqqfsj0hwdn68
This commit is contained in:
ddm
2013-10-11 16:00:44 +02:00
parent 0ca2b26ead
commit e5ef2e27e4
2 changed files with 58 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/website.tour.js
+46 -52
View File
@@ -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.<br>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 <em>Edit</em> 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.<br>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 <em>Insert Blocks</em> button to show the available building blocks.",
template: render('website.tour_simple'),
content: "Make the home page more attractive with a banner.<br>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 <em>Banner</em> block and drop it to the top of your page (purple zone).",
template: render('website.tour_simple'),
onShown: function () {
content: "Drag the <em>Banner</em> 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 <em>Continue</em> to continue the tutorial.<br>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.<br>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 <em>Customize</em> and change the background of your banner.<br>If your are satisfied with the current background, just click <em>Continue</em>.",
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 <em>Save</em> 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 <em>Customize</em> 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 <em>Help</em> 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) {
addons/website/static/src/xml/website.tour.xml
+12 -33
View File
@@ -1,44 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
<t t-name="website.tour_simple">
<t t-name="website.tour_popover">
<div class="popover tour">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<t t-if="next or end">
<nav class="popover-navigation">
<t t-if="next">
<button class="btn btn-sm btn-default" data-role="next"><t t-esc="next"/></button>
</t>
<t t-if="end">
<button class="btn btn-sm btn-default" data-role="end"><t t-esc="end"/></button>
</t>
</nav>
</t>
</div>
</t>
<t t-name="website.tour_confirm">
<div class="popover tour">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<nav class="popover-navigation">
<button class="btn btn-sm btn-default" data-role="next"><t t-esc="next"/></button>
</nav>
</div>
</t>
<t t-name="website.tour_end">
<div class="popover tour">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<nav class="popover-navigation">
<button class="btn btn-sm btn-default" data-role="end"><t t-esc="end"/></button>
</nav>
</div>
</t>
<t t-name="website.tour_full">
<div class="popover tour">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<nav class="popover-navigation">
<button class="btn btn-sm btn-default" data-role="next"><t t-esc="next"/></button>
<button class="btn btn-sm btn-default" data-role="end"><t t-esc="end"/></button>
</nav>
</div>
</t>
<t t-name="website.tour_title">
<t t-name="website.tour_popover_title">
<t t-esc="title"/><button title="Close Tutorial" type="button" class="close" data-role="end">×</button>
</t>
</templates>