[IMP] Tour refactoring
bzr revid: ddm@openerp.com-20131003102503-c5k41nzn9h6xz0qc
This commit is contained in:
ddm
@@ -4,68 +4,67 @@
|
||||
var website = openerp.website;
|
||||
website.templates.push('/website/static/src/xml/website.tour.xml');
|
||||
|
||||
function render (template, dict) {
|
||||
return openerp.qweb.render(template, dict);
|
||||
};
|
||||
|
||||
website.EditorTour = openerp.Class.extend({
|
||||
editor: undefined,
|
||||
reset: true,
|
||||
observers: [],
|
||||
steps: [],
|
||||
tourStorage: window.localStorage,
|
||||
init: function (editor) {
|
||||
this.editor = editor;
|
||||
if (this.reset) {
|
||||
this.tourStorage.removeItem('tour_current_step');
|
||||
this.tourStorage.removeItem('tour_end');
|
||||
$('.popover.tour').remove();
|
||||
}
|
||||
this.tour = new Tour({
|
||||
storage: this.tourStorage,
|
||||
keyboard: false,
|
||||
});
|
||||
},
|
||||
reset: function () {
|
||||
this.tourStorage.removeItem('tour_current_step');
|
||||
this.tourStorage.removeItem('tour_end');
|
||||
$('.popover.tour').remove();
|
||||
},
|
||||
start: function () {
|
||||
var self = this;
|
||||
self.tour.addSteps(_.map(self.steps, function (step) {
|
||||
step.title = openerp.qweb.render ('website.tour_title', { title: step.title });
|
||||
step.title = render('website.tour_title', { title: step.title });
|
||||
return step;
|
||||
}));
|
||||
self.tour.start(self.reset);
|
||||
if (self.doNotContinue()) {
|
||||
self.tour.end();
|
||||
} else {
|
||||
self.tour.start();
|
||||
}
|
||||
},
|
||||
movetoStep: function (step_id) {
|
||||
$('.popover.tour').remove();
|
||||
doNotContinue: function () {
|
||||
return this.currentStepIndex() > 0 || this.tour.ended();
|
||||
},
|
||||
currentStepIndex: function () {
|
||||
return this.tourStorage.getItem('tour_current_step');
|
||||
},
|
||||
indexOfStep: function (step_id) {
|
||||
var index = -1;
|
||||
_.each(this.steps, function (step, i) {
|
||||
if (step.step_id === step_id) {
|
||||
index = i;
|
||||
}
|
||||
});
|
||||
return index;
|
||||
},
|
||||
movetoStep: function (step_id) {
|
||||
$('.popover.tour').remove();
|
||||
var index = this.indexOfStep(step_id);
|
||||
if (index > -1) {
|
||||
this.tour.goto(index);
|
||||
}
|
||||
},
|
||||
onDomMutation: function (selector, callback) {
|
||||
var target = document.querySelector(selector);
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
_.each(mutations, function(mutation) {
|
||||
callback(mutation);
|
||||
});
|
||||
});
|
||||
var config = {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
characterData: true,
|
||||
};
|
||||
observer.observe(target, config);
|
||||
this.observers.push(observer);
|
||||
},
|
||||
stop: function () {
|
||||
this.tour.end();
|
||||
_.each(this.observers, function (observer) {
|
||||
observer.disconnect();
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
website.EditorBasicTour = website.EditorTour.extend({
|
||||
name: "Add a banner to your page",
|
||||
start: function () {
|
||||
var self = this;
|
||||
self.steps = [
|
||||
@@ -75,7 +74,7 @@
|
||||
backdrop: true,
|
||||
title: "Welcome to your website!",
|
||||
content: "This tutorial will guide you through the firsts steps to build your enterprise class website.",
|
||||
template: openerp.qweb.render('website.tour_confirm', { confirm: "Tell me more!" }),
|
||||
template: render('website.tour_confirm', { confirm: "Tell me more!" }),
|
||||
},
|
||||
{
|
||||
step_id: 'edit-page',
|
||||
@@ -84,15 +83,15 @@
|
||||
reflex: true,
|
||||
title: "Edit this page",
|
||||
content: "Every page of your website can be edited. Click the <b>Edit</b> button to modify your homepage.",
|
||||
template: openerp.qweb.render('website.tour_simple'),
|
||||
template: render('website.tour_simple'),
|
||||
},
|
||||
{
|
||||
step_id: 'show-bar',
|
||||
element: '#website-top-navbar',
|
||||
placement: 'bottom',
|
||||
title: "Editor bar",
|
||||
content: "This is the <b>Editor Bar</b>, use it to modify your homepage.",
|
||||
template: openerp.qweb.render('website.tour_confirm', { confirm: "Got it, now what?" }),
|
||||
content: "This is the <b>Editor Bar</b>, use it to modify your website's pages.",
|
||||
template: render('website.tour_confirm', { confirm: "Got it, now what?" }),
|
||||
},
|
||||
{
|
||||
step_id: 'add-block',
|
||||
@@ -101,15 +100,15 @@
|
||||
reflex: true,
|
||||
title: "Add a block to your page",
|
||||
content: "Click on the <b>Insert Blocks</b> button to open the block collection.",
|
||||
template: openerp.qweb.render('website.tour_simple'),
|
||||
template: render('website.tour_simple'),
|
||||
},
|
||||
{
|
||||
step_id: 'drag-banner',
|
||||
element: '[data-snippet-id=carousel]',
|
||||
element: '#website-top-navbar [data-snippet-id=carousel]',
|
||||
placement: 'bottom',
|
||||
title: "Add a banner to your page",
|
||||
content: "Drag the <b>Banner</b> block to the body of the page and drop it on a purple zone.",
|
||||
template: openerp.qweb.render('website.tour_simple'),
|
||||
template: render('website.tour_simple'),
|
||||
onShown: function () {
|
||||
function beginDrag () {
|
||||
$('.popover.tour').remove();
|
||||
@@ -125,11 +124,17 @@
|
||||
},
|
||||
{
|
||||
step_id: 'edit-title',
|
||||
element: '#wrap [data-snippet-id=carousel] .carousel-caption',
|
||||
element: '#wrap [data-snippet-id=carousel]:first .carousel-caption',
|
||||
placement: 'top',
|
||||
title: "Change the title",
|
||||
content: "Click on the title and modify it to fit your needs.",
|
||||
template: openerp.qweb.render('website.tour_confirm', { confirm: "Done!" }),
|
||||
template: render('website.tour_confirm', { confirm: "Done!" }),
|
||||
onHide: function () {
|
||||
var $banner = $("#wrap [data-snippet-id=carousel]:first");
|
||||
if ($banner.length) {
|
||||
$banner.click();
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
step_id: 'customize-banner',
|
||||
@@ -137,7 +142,7 @@
|
||||
placement: 'left',
|
||||
title: "Customize the banner",
|
||||
content: "Click on <b>Customize</b> and change the background of your banner.",
|
||||
template: openerp.qweb.render('website.tour_simple'),
|
||||
template: render('website.tour_simple'),
|
||||
onShow: function () {
|
||||
$('.dropdown-menu [name=carousel-background]').click(function () {
|
||||
self.movetoStep('save-changes');
|
||||
@@ -151,22 +156,31 @@
|
||||
reflex: true,
|
||||
title: "Save your modifications",
|
||||
content: "Click the <b>Save</b> button to apply modifications on your website.",
|
||||
template: openerp.qweb.render('website.tour_simple'),
|
||||
onNext: function () {
|
||||
self.stop();
|
||||
},
|
||||
template: render('website.tour_simple'),
|
||||
},
|
||||
{
|
||||
step_id: 'save-changes',
|
||||
element: 'button[data-action=save]',
|
||||
placement: 'right',
|
||||
reflex: true,
|
||||
title: "Save your modifications",
|
||||
content: "Click the <b>Save</b> button to apply modifications on your website.",
|
||||
template: render('website.tour_simple'),
|
||||
},
|
||||
];
|
||||
return this._super();
|
||||
},
|
||||
doNotContinue: function () {
|
||||
return this.currentStepIndex() > 0;
|
||||
}
|
||||
});
|
||||
|
||||
website.EditorBar.include({
|
||||
start: function () {
|
||||
if (window.location.hash.indexOf("tour") >= 0) {
|
||||
window.location.hash = "";
|
||||
new website.EditorBasicTour(this).start();
|
||||
}
|
||||
website.tutorials = {
|
||||
basic: new website.EditorBasicTour(this),
|
||||
};
|
||||
website.tutorials.basic.start();
|
||||
return this._super();
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user