[IMP] website tour: refactoring and change api for create tour and test

bzr revid: chm@openerp.com-20140320083055-z5ys4oey5brd439v
This commit is contained in:
chm@openerp.com 2014-03-20 09:30:55 +01:00
parent 00aa1b69dc
commit 60bdd78706
7 changed files with 836 additions and 1018 deletions

View File

@ -4,20 +4,11 @@
var website = openerp.website;
var _t = openerp._t;
website.EditorBar.include({
start: function () {
this.registerTour(new website.Tour.Banner(this));
return this._super();
},
});
website.Tour.Banner = website.Tour.extend({
website.Tour.register({
id: 'banner',
name: "Build a page",
name: _t("Build a page"),
path: '/page/website.homepage',
init: function () {
var self = this;
self.steps = [
steps: [
{
title: _t("Welcome to your website!"),
content: _t("This tutorial will guide you to build your home page. We will start by adding a banner."),
@ -112,9 +103,7 @@
content: _t("The 'Content' menu allows you to add pages or add the top menu."),
popover: { next: _t("Close Tutorial") },
},
];
return this._super();
},
]
});
}());

View File

@ -6,7 +6,7 @@ if (typeof openerp === "undefined") {
var error = "openerp is undefined"
+ "\nhref: " + window.location.href
+ "\nreferrer: " + document.referrer
+ "\nlocalStorage: " + JSON.stringify(window.localStorage);
+ "\nlocalStorage: " + window.localStorage.getItem("tour");
if (typeof $ !== "undefined") {
error += '\n\n' + $("body").html();
}
@ -36,27 +36,24 @@ function bootstrap_tour_stub () {
}
}
if (website.EditorBar) {
website.EditorBar.include({
tours: [],
start: function () {
var self = this;
var menu = $('#help-menu');
_.each(this.tours, function (tour) {
_.each(website.Tour.tours, function (tour) {
if (tour.mode != "tutorial") {
return;
}
var $menuItem = $($.parseHTML('<li><a href="#">'+tour.name+'</a></li>'));
$menuItem.click(function () {
tour.reset();
tour.run();
website.Tour.reset();
website.Tour.run(tour.id);
});
menu.append($menuItem);
});
return this._super();
},
registerTour: function (tour) {
website.Tour.add(tour);
this.tours.push(tour);
}
});
}
@ -94,203 +91,167 @@ $.ajaxSetup({
}
});
website.Tour = openerp.Class.extend({
steps: [],
defaultDelay: 50, //ms
defaultOverLaps: 5000, //ms
localStorage: window.localStorage,
init: function () {},
run: function (automatic) {
this.reset();
/////////////////////////////////////////////////
for (var k in this.localStorage) {
if (!k.indexOf("tour-") && k.indexOf("-test") > -1) return;
}
website.Tour.busy = true;
var localStorage = window.localStorage;
if (automatic) {
this.localStorage.setItem("tour-"+this.id+"-test-automatic", true);
} else {
this.localStorage.removeItem("tour-"+this.id+"-test-automatic");
}
this.automatic = automatic;
if (this.path) {
// redirect to begin of the tour in function of the language
if (!this.testUrl(this.path+"(#.*)?$")) {
var path = this.path.split('#');
window.location.href = "/"+this.getLang()+path[0] + "#tutorial."+this.id+"=true&" + path.slice(1, path.length).join("#");
website.Tour = {};
website.Tour.tours = {};
website.Tour.state = null;
website.Tour.register = function (tour) {
website.Tour.tours[tour.id] = tour;
};
website.Tour.run = function (tour_id, mode) {
if (localStorage.getItem("tour")) { // only one test running
return;
}
var tour = website.Tour.tours[tour_id];
website.Tour.save_state(tour.id, mode || tour.mode, 0);
if (tour.path) {
window.location.href = "/"+website.Tour.getLang()+tour.path;
}
var self = this;
this.localStorage.setItem("tour-"+this.id+"-test", 0);
website.Tour.waitReady.call(this, function () {self._running();});
},
running: function () {
var self = this;
if (+this.localStorage.getItem("tour-"+this.id+"-test") >= this.steps.length-1) {
this.endTour();
};
website.Tour.registerSteps = function (tour) {
if (tour.register) {
return;
}
tour.register = true;
if (website.Tour.is_busy()) return;
for (var index=0, len=tour.steps.length; index<len; index++) {
var step = tour.steps[index];
step.id = index;
// launch tour with url
this.checkRunningUrl();
// mark tour as busy (only one test running)
if (this.localStorage.getItem("tour-"+this.id+"-test") != null) {
website.Tour.busy = true;
this.automatic = !!this.localStorage.getItem("tour-"+this.id+"-test-automatic");
if (!step.waitNot && index > 0 && tour.steps[index-1] &&
tour.steps[index-1].popover && tour.steps[index-1].popover.next) {
step.waitNot = '.popover.tour:visible';
}
if (!step.waitFor && index > 0 && tour.steps[index-1].snippet) {
step.waitFor = '.oe_overlay_options .oe_options:visible';
}
if (!this.testPathUrl()) {
if (this.automatic) {
this.timer = setTimeout(function () {
self.reset();
throw new Error("Wrong url for running " + self.id
+ '\ntestPath: ' + self.testPath
+ '\nhref: ' + window.location.href
+ "\nreferrer: " + document.referrer
);
},this.defaultOverLaps);
if (!step.element) step.orphan = true;
var snippet = step.element.match(/#oe_snippets (.*) \.oe_snippet_thumbnail/);
if (snippet) {
step.snippet = snippet[1];
} else if (step.snippet) {
step.element = '#oe_snippets '+step.snippet+' .oe_snippet_thumbnail';
}
return;
}
if (tour.steps[index-1] &&
tour.steps[index-1].popover && tour.steps[index-1].popover.next) {
var step = {
step_id: index,
waitNot: '.popover.tour:visible'
};
tour.steps.push(step);
}
var self = this;
website.Tour.waitReady.call(this, function () {self._running();});
},
_running: function () {
var stepId = this.localStorage.getItem("tour-"+this.id+"-test");
if (stepId != null) {
this.registerTour();
this.nextStep(stepId, this.automatic ? this.autoNextStep : null, this.automatic ? this.defaultOverLaps : null);
}
},
reset: function () {
website.Tour.busy = false;
for (var k in this.steps) {
this.steps[k].busy = false;
}
clearTimeout(self.timer);
clearTimeout(self.testtimer);
for (var k in this.localStorage) {
if (!k.indexOf("tour-") || !k.indexOf(this.id)) {
this.localStorage.removeItem(k);
}
}
$('.popover.tour').remove();
},
getLang: function () {
return $("html").attr("lang").replace(/-/, '_');
},
testUrl: function (url) {
return new RegExp("(/"+this.getLang()+")?"+url, "i").test(window.location.href);
},
testPathUrl: function () {
if (!this.testPath || this.testUrl(this.testPath)) return true;
},
checkRunningUrl: function () {
if (window.location.hash.indexOf("tutorial."+this.id+"=true") > -1) {
this.localStorage.setItem("tour-"+this.id+"-test", 0);
window.location.hash = window.location.hash.replace(/tutorial.+=true&?/, '');
}
},
registerTour: function () {
if (this.automatic) {
bootstrap_tour_stub();
}
this.tour = new Tour({
// rendering bootstrap tour and popover
if (tour.mode != "test") {
tour.tour = new Tour({
name: this.id,
storage: this.tourStorage,
storage: localStorage,
keyboard: false,
template: this.popover(),
onHide: function () {
window.scrollTo(0, 0);
}
});
this.registerSteps();
},
registerSteps: function () {
for (var index=0, len=this.steps.length; index<len; index++) {
var step = this.steps[index];
step.stepId = step.stepId || ""+index;
if (!step.waitNot && index > 0 && this.steps[index-1] &&
this.steps[index-1].popover && this.steps[index-1].popover.next) {
step.waitNot = '.popover.tour:visible';
}
if (!step.waitFor && index > 0 && this.steps[index-1].snippet) {
step.waitFor = '.oe_overlay_options .oe_options:visible';
}
for (var index=0, len=tour.steps.length; index<len; index++) {
var step = tour.steps[index];
step._title = step._title || step.title;
step.title = this.popoverTitle({ title: step._title });
step.template = step.template || this.popover( step.popover );
if (!step.element) step.orphan = true;
if (step.snippet) {
step.element = '#oe_snippets '+step.snippet+' .oe_snippet_thumbnail';
step.title = tour.popoverTitle(tour, { title: step._title });
step.template = step.template || tour.popover( step.popover );
}
tour.tour.addSteps(tour.steps);
}
if (this.steps[index-1] &&
this.steps[index-1].popover && this.steps[index-1].popover.next) {
var step = {
stepId: ""+index,
waitNot: '.popover.tour:visible'
};
this.steps.push(step);
}
this.tour.addSteps(this.steps);
},
popoverTitle: function (options) {
try {
};
website.Tour.popoverTitle = function (tour, options) {
return openerp.qweb.render('website.tour_popover_title', options);
} catch (e) {
if (!this.automatic) throw e;
return options.title;
}
},
popover: function (options) {
try {
};
website.Tour.popover = function (options) {
return openerp.qweb.render('website.tour_popover', options);
} catch (e) {
if (!this.automatic) throw e;
return "";
};
website.Tour.getLang = function () {
return $("html").attr("lang").replace(/-/, '_');
};
website.Tour.get_state = function () {
var tour_id;
var tour_running = eval(localStorage.getItem("tour") || 'false');
if (tour_running) {
tour_id = tour_running[0];
mode = tour_running[1];
step_id = tour_running[2];
} else if (window.location.href.indexOf("#tutorial.") > -1) {
tour_id = window.location.href.match(/#tutorial\.(.*)=true/)[1];
mode = "tutorial";
step_id = 0;
}
},
if (!tour_id) {
return;
}
var tour = website.Tour.tours[tour_id];
return {'tour': tour, 'tour_id': tour_id, 'mode': mode, 'step_id': step_id};
};
website.Tour.error = function (tour, step, message) {
website.Tour.reset();
throw new Error(message +
+ "\ntour:" + tour.id +
+ "\nstep:" + step.id + ": '" + (step._title || step.title) + "'"
+ '\nhref: ' + window.location.href
+ '\nreferrer: ' + document.referrer
+ '\nelement: ' + Boolean(!step.element || ($(step.element).size() && $(step.element).is(":visible") && !$(step.element).is(":hidden")))
+ '\nwaitNot: ' + Boolean(!step.waitNot || !$(step.waitNot).size())
+ '\nwaitFor: ' + Boolean(!step.waitFor || $(step.waitFor).size())
+ '\n\n' + $("body").html()
);
};
website.Tour.lists = function () {
var tour_ids = [];
for (var k in website.Tour.tours) {
tour_ids.push(k);
}
return tour_ids;
};
website.Tour.save_state = function (tour_id, mode, step_id) {
localStorage.setItem("tour", '{tour_id:'+tour_id+', mode:'+mode+', step_id:'+step_id+'}');
};
website.Tour.reset = function () {
var running = website.Tour.get_state();
for (var k in running.tour.steps) {
running.tour.steps[k].busy = false;
}
localStorage.removeItem("tour");
clearTimeout(website.Tour.timer);
clearTimeout(website.Tour.testtimer);
timer: null,
testtimer: null,
check: function (step) {
$('.popover.tour').remove();
};
website.Tour.running = function () {
var running = website.Tour.get_state();
website.Tour.registerSteps(running.tour);
website.Tour.nextStep( running.tour, running.step_id );
};
website.Tour.timer = null;
website.Tour.testtimer = null;
website.Tour.defaultDelay = 50;
website.Tour.check = function (step) {
return (step &&
(!step.element || ($(step.element).size() && $(step.element).is(":visible") && !$(step.element).is(":hidden"))) &&
(!step.waitNot || !$(step.waitNot).size()) &&
(!step.waitFor || $(step.waitFor).size()));
},
waitNextStep: function (step, callback, overlaps) {
var self = this;
};
website.Tour.waitNextStep = function (tour, step, overlaps) {
var time = new Date().getTime();
var timer;
window.onbeforeunload = function () {
clearTimeout(self.timer);
clearTimeout(self.testtimer);
clearTimeout(website.Tour.timer);
clearTimeout(website.Tour.testtimer);
};
// check popover activity
@ -300,22 +261,24 @@ website.Tour = openerp.Class.extend({
$(".popover.tour").remove();
if (step.busy) return;
if (!$(this).is("[data-role='next']")) {
clearTimeout(self.timer);
clearTimeout(website.Tour.timer);
step.busy = true;
self.tour.end();
self.endTour(callback);
if (tour.tour) {
tour.tour.end();
}
tour.endTour(tour);
}
});
function checkNext () {
clearTimeout(self.timer);
clearTimeout(website.Tour.timer);
if (step.busy) return;
if (self.check(step)) {
if (website.Tour.check(step)) {
step.busy = true;
// use an other timeout for cke dom loading
setTimeout(function () {
self.nextStep(step.stepId, callback, overlaps);
}, self.defaultDelay);
website.Tour.nextStep(tour, step, overlaps);
}, website.Tour.defaultDelay);
} else if (!overlaps || new Date().getTime() - time < overlaps) {
if (self.current.element) {
var $popover = $(".popover.tour");
@ -325,79 +288,51 @@ website.Tour = openerp.Class.extend({
$popover.data("hide", false).fadeIn(150);
}
}
self.timer = setTimeout(checkNext, self.defaultDelay);
website.Tour.timer = setTimeout(checkNext, website.Tour.defaultDelay);
} else {
self.reset();
throw new Error("Can't arrive to step " + step.stepId + ": '" + step._title + "'"
+ '\nhref: ' + window.location.href
+ '\nelement: ' + Boolean(!step.element || ($(step.element).size() && $(step.element).is(":visible") && !$(step.element).is(":hidden")))
+ '\nwaitNot: ' + Boolean(!step.waitNot || !$(step.waitNot).size())
+ '\nwaitFor: ' + Boolean(!step.waitFor || $(step.waitFor).size())
+ '\n\n' + $("body").html()
);
website.Tour.error(tour, step, "Can't arrive to the next step");
}
}
checkNext();
},
step: function (stepId) {
var steps = this.steps.slice(0,this.steps.length),
step;
while (step = steps.shift()) {
if (!stepId || step.stepId === stepId)
return step;
}
return null;
},
next: function (stepId) {
var steps = this.steps.slice(0,this.steps.length),
step, next, index=0;
while (step = steps.shift()) {
if (!stepId || step.stepId === stepId) {
};
website.Tour.nextStep = function (tour, step, overlaps) {
var state = website.Tour.get_state();
website.Tour.save_state(tour.id, state.mode, step.id);
// clear popover (fix for boostrap tour if the element is removed before destroy popover)
$(".popover.tour").remove();
// go to step in bootstrap tour
this.tour.goto(index);
if (step.onload) step.onload();
next = steps.shift();
break;
}
index++;
}
return next;
},
nextStep: function (stepId, callback, overlaps) {
var self = this;
if (!this.localStorage.getItem("tour-"+this.id+"-test")) return;
this.localStorage.setItem("tour-"+this.id+"-test", stepId || 0);
this.current = this.step(stepId);
var next = this.next(stepId);
tour.tour.goto(step.id);
step.onload();
var next = tour.steps[step.id+1];
if (next) {
setTimeout(function () {
self.waitNextStep(next, callback, overlaps);
if (callback) setTimeout(function(){callback.call(self, next);}, self.defaultDelay);
website.Tour.waitNextStep(tour, next, overlaps);
if (state.mode === "test") {
setTimeout(function(){
website.Tour.autoNextStep(tour, step);
}, website.Tour.defaultDelay);
}
}, next && next.wait || 0);
} else {
this.endTour();
website.Tour.endTour(tour);
}
},
endTour: function () {
var test = parseInt(this.localStorage.getItem("tour-"+this.id+"-test"),10) >= this.steps.length-1;
};
website.Tour.endTour = function (tour) {
var state = website.Tour.get_state();
var test = state.step_id >= tour.steps.length-1;
this.reset();
if (test) {
console.log('ok');
} else {
console.log('error');
}
},
autoNextStep: function () {
var self = this;
clearTimeout(self.testtimer);
};
website.Tour.autoNextStep = function (tour, step) {
clearTimeout(website.Tour.testtimer);
function autoStep () {
var step = self.current;
if (!step) return;
if (step.autoComplete) {
@ -415,12 +350,7 @@ website.Tour = openerp.Class.extend({
if (step.snippet) {
var selector = '#oe_snippets '+step.snippet+' .oe_snippet_thumbnail';
self.autoDragAndDropSnippet(selector);
} else if (step.element.match(/#oe_snippets .* \.oe_snippet_thumbnail/)) {
self.autoDragAndDropSnippet($element);
website.Tour.autoDragAndDropSnippet($element);
} else if (step.sampleText) {
@ -436,7 +366,7 @@ website.Tour = openerp.Class.extend({
setTimeout(function () {
$element.trigger($.Event("keyup", { srcElement: $element }));
$element.trigger($.Event("change", { srcElement: $element }));
}, self.defaultDelay<<1);
}, website.Tour.defaultDelay<<1);
} else if ($element.is(":visible")) {
@ -454,9 +384,9 @@ website.Tour = openerp.Class.extend({
}, 1000);
}
}
self.testtimer = setTimeout(autoStep, 100);
},
autoDragAndDropSnippet: function (selector) {
website.Tour.testtimer = setTimeout(autoStep, 100);
};
website.Tour.autoDragAndDropSnippet = function (selector) {
var $thumbnail = $(selector).first();
var thumbnailPosition = $thumbnail.position();
$thumbnail.trigger($.Event("mousedown", { which: 1, pageX: thumbnailPosition.left, pageY: thumbnailPosition.top }));
@ -464,64 +394,9 @@ website.Tour = openerp.Class.extend({
var $dropZone = $(".oe_drop_zone").first();
var dropPosition = $dropZone.position();
$dropZone.trigger($.Event("mouseup", { which: 1, pageX: dropPosition.left, pageY: dropPosition.top }));
},
};
});
website.Tour.tours = {};
website.Tour.busy = false;
website.Tour.add = function (tour) {
website.Tour.waitReady(function () {
tour = tour.id ? tour : new tour();
if (!website.Tour.tours[tour.id]) {
website.Tour.tours[tour.id] = tour;
tour.running();
}
});
};
website.Tour.get = function (id) {
return website.Tour.tours[id];
};
website.Tour.each = function (callback) {
website.Tour.waitReady(function () {
for (var k in website.Tour.tours) {
callback.call(website.Tour.tours[k]);
}
});
};
website.Tour.waitReady = function (callback) {
var self = this;
$(document).ready(function () {
if ($.ajaxBusy) {
$(document).ajaxStop(function() {
setTimeout(function () {
callback.call(self);
},0);
});
}
else {
setTimeout(function () {
callback.call(self);
},0);
}
});
};
website.Tour.run_test = function (id) {
website.Tour.waitReady(function () {
if (!website.Tour.is_busy()) {
website.Tour.tours[id].run(true);
}
});
};
website.Tour.is_busy = function () {
for (var k in this.localStorage) {
if (!k.indexOf("tour-")) {
return k;
}
}
return website.Tour.busy;
};
website.ready(website.Tour.running);
}());

View File

@ -4,20 +4,10 @@
var website = openerp.website;
var _t = openerp._t;
website.EditorBar.include({
start: function () {
this.registerTour(new website.Tour.Blog(this));
return this._super();
},
});
website.Tour.Blog = website.Tour.extend({
website.Tour.register({
id: 'blog',
name: "Create a blog post",
testPath: '/(blog|blogpost)',
init: function () {
var self = this;
self.steps = [
name: _t("Create a blog post"),
steps: [
{
title: _t("New Blog Post"),
content: _t("Let's go through the first steps to write beautiful blog posts."),
@ -112,9 +102,7 @@
content: _t("This tutorial is finished. To discover more features, improve the content of this page and try the <em>Promote</em> button in the top right menu."),
popover: { next: _t("Close Tutorial") },
},
];
return this._super();
},
]
});
}());

View File

@ -4,20 +4,10 @@
var website = openerp.website;
var _t = openerp._t;
website.EditorBar.include({
start: function () {
this.registerTour(new website.EventTour(this));
return this._super();
},
});
website.EventTour = website.Tour.extend({
website.Tour.register({
id: 'event',
name: "Create an event",
testPath: '/event(/[0-9]+/register)?',
init: function (editor) {
var self = this;
self.steps = [
name: _t("Create an event"),
steps: [
{
title: _t("Create an Event"),
content: _t("Let's go through the first steps to publish a new event."),
@ -110,9 +100,7 @@
{
element: '.js_publish_management ul>li>a:last:visible',
},
];
return this._super();
}
]
});
}());

View File

@ -3,13 +3,12 @@
var website = openerp.website;
website.Tour.EventSaleTest = website.Tour.extend({
website.Tour.register({
id: 'event_buy_tickets',
name: "Try to buy tickets for event",
path: '/event',
init: function () {
var self = this;
self.steps = [
mode: 'test',
steps: [
{
title: "select event",
element: 'a[href*="/event"]:contains("Open Days in Los Angeles")',
@ -69,11 +68,7 @@
title: "finish",
waitFor: '.oe_website_sale:contains("Thank you for your order")',
}
];
return this._super();
},
]
});
// for test without editor bar
website.Tour.add(website.Tour.EventSaleTest);
}());

View File

@ -3,13 +3,12 @@
var website = openerp.website;
website.Tour.ShopTest = website.Tour.extend({
website.Tour.register({
id: 'shop_buy_product',
name: "Try to buy products",
path: '/shop',
init: function () {
var self = this;
self.steps = [
mode: 'test',
steps: [
{
title: "select ipod",
element: '.oe_product_cart a:contains("iPod")',
@ -84,11 +83,7 @@
title: "finish",
waitFor: '.oe_website_sale:contains("Thank you for your order")',
}
];
return this._super();
},
]
});
// for test without editor bar
website.Tour.add(website.Tour.ShopTest);
}());

View File

@ -4,20 +4,10 @@
var website = openerp.website;
var _t = openerp._t;
website.EditorBar.include({
start: function () {
this.registerTour(new website.Tour.Shop(this));
return this._super();
},
});
website.Tour.Shop = website.Tour.extend({
website.Tour.register({
id: 'shop',
name: "Create a product",
testPath: '/shop',
init: function () {
var self = this;
self.steps = [
name: _t("Create a product"),
steps: [
{
title: _t("Welcome to your shop"),
content: _t("You successfully installed the e-commerce. This guide will help you to create your product and promote your sales."),
@ -136,9 +126,7 @@
content: _t("Congratulations! You just created and published your first product."),
popover: { next: _t("Close Tutorial") },
},
];
return this._super();
}
]
});
}());