").parent().html();
- $element.popover({
- placement: step.placement,
- trigger: "manual",
- title: step.title,
- content: step.content,
- html: true,
- animation: step.animation,
- container: step.container,
- template: step.template,
- selector: step.element
- }).popover("show");
- $tip = $element.data("bs.popover") ? $element.data("bs.popover").tip() : $element.data("popover").tip();
- $tip.attr("id", step.id);
- this._scrollIntoView($tip);
- this._reposition($tip, step);
- if (isOrphan) {
- return this._center($tip);
- }
- };
+ };
+ })(this));
+ }
+ if (step.prev < 0) {
+ $navigation.find("[data-role='prev']").addClass("disabled");
+ }
+ if (step.next < 0) {
+ $navigation.find("[data-role='next']").addClass("disabled");
+ }
+ if (!step.duration) {
+ $navigation.find("[data-role='pause-resume']").remove();
+ }
+ step.template = $template.clone().wrap("
").parent().html();
+ $element.popover({
+ placement: step.placement,
+ trigger: "manual",
+ title: step.title,
+ content: step.content,
+ html: true,
+ animation: step.animation,
+ container: step.container,
+ template: step.template,
+ selector: step.element
+ }).popover("show");
+ $tip = $element.data("bs.popover") ? $element.data("bs.popover").tip() : $element.data("popover").tip();
+ $tip.attr("id", step.id);
+ this._reposition($tip, step);
+ if (isOrphan) {
+ return this._center($tip);
+ }
+ };
- Tour.prototype._reposition = function($tip, step) {
- var offsetBottom, offsetHeight, offsetRight, offsetWidth, originalLeft, originalTop, tipOffset;
- offsetWidth = $tip[0].offsetWidth;
- offsetHeight = $tip[0].offsetHeight;
- tipOffset = $tip.offset();
- originalLeft = tipOffset.left;
- originalTop = tipOffset.top;
- offsetBottom = $(document).outerHeight() - tipOffset.top - $tip.outerHeight();
- if (offsetBottom < 0) {
- tipOffset.top = tipOffset.top + offsetBottom;
+ Tour.prototype._reposition = function($tip, step) {
+ var offsetBottom, offsetHeight, offsetRight, offsetWidth, originalLeft, originalTop, tipOffset;
+ offsetWidth = $tip[0].offsetWidth;
+ offsetHeight = $tip[0].offsetHeight;
+ tipOffset = $tip.offset();
+ originalLeft = tipOffset.left;
+ originalTop = tipOffset.top;
+ offsetBottom = $(document).outerHeight() - tipOffset.top - $tip.outerHeight();
+ if (offsetBottom < 0) {
+ tipOffset.top = tipOffset.top + offsetBottom;
+ }
+ offsetRight = $("html").outerWidth() - tipOffset.left - $tip.outerWidth();
+ if (offsetRight < 0) {
+ tipOffset.left = tipOffset.left + offsetRight;
+ }
+ if (tipOffset.top < 0) {
+ tipOffset.top = 0;
+ }
+ if (tipOffset.left < 0) {
+ tipOffset.left = 0;
+ }
+ $tip.offset(tipOffset);
+ if (step.placement === "bottom" || step.placement === "top") {
+ if (originalLeft !== tipOffset.left) {
+ return this._replaceArrow($tip, (tipOffset.left - originalLeft) * 2, offsetWidth, "left");
}
- offsetRight = $("html").outerWidth() - tipOffset.left - $tip.outerWidth();
- if (offsetRight < 0) {
- tipOffset.left = tipOffset.left + offsetRight;
+ } else {
+ if (originalTop !== tipOffset.top) {
+ return this._replaceArrow($tip, (tipOffset.top - originalTop) * 2, offsetHeight, "top");
}
- if (tipOffset.top < 0) {
- tipOffset.top = 0;
- }
- if (tipOffset.left < 0) {
- tipOffset.left = 0;
- }
- $tip.offset(tipOffset);
- if (step.placement === "bottom" || step.placement === "top") {
- if (originalLeft !== tipOffset.left) {
- return this._replaceArrow($tip, (tipOffset.left - originalLeft) * 2, offsetWidth, "left");
+ }
+ };
+
+ Tour.prototype._center = function($tip) {
+ return $tip.css("top", $(window).outerHeight() / 2 - $tip.outerHeight() / 2);
+ };
+
+ Tour.prototype._replaceArrow = function($tip, delta, dimension, position) {
+ return $tip.find(".arrow").css(position, delta ? 50 * (1 - delta / dimension) + "%" : "");
+ };
+
+ Tour.prototype._scrollIntoView = function(element, callback) {
+ var $element, $window, counter, offsetTop, scrollTop, windowHeight;
+ $element = $(element);
+ if (!$element.length) {
+ return callback();
+ }
+ $window = $(window);
+ offsetTop = $element.offset().top;
+ windowHeight = $window.height();
+ scrollTop = Math.max(0, offsetTop - (windowHeight / 2));
+ this._debug("Scroll into view. ScrollTop: " + scrollTop + ". Element offset: " + offsetTop + ". Window height: " + windowHeight + ".");
+ counter = 0;
+ return $("body,html").stop(true, true).animate({
+ scrollTop: Math.ceil(scrollTop)
+ }, (function(_this) {
+ return function() {
+ if (++counter === 2) {
+ callback();
+ return _this._debug("Scroll into view. Animation end element offset: " + ($element.offset().top) + ". Window height: " + ($window.height()) + ".");
}
+ };
+ })(this));
+ };
+
+ Tour.prototype._onResize = function(callback, timeout) {
+ return $(window).on("resize.tour-" + this._options.name, function() {
+ clearTimeout(timeout);
+ return timeout = setTimeout(callback, 100);
+ });
+ };
+
+ Tour.prototype._initMouseNavigation = function() {
+ var _this;
+ _this = this;
+ return $(document).off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='prev']:not(.disabled)").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='next']:not(.disabled)").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='end']").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='pause-resume']").on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='next']:not(.disabled)", (function(_this) {
+ return function(e) {
+ e.preventDefault();
+ return _this.next();
+ };
+ })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='prev']:not(.disabled)", (function(_this) {
+ return function(e) {
+ e.preventDefault();
+ return _this.prev();
+ };
+ })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='end']", (function(_this) {
+ return function(e) {
+ e.preventDefault();
+ return _this.end();
+ };
+ })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='pause-resume']", function(e) {
+ var $this;
+ e.preventDefault();
+ $this = $(this);
+ $this.text(_this._paused ? $this.data("pause-text") : $this.data("resume-text"));
+ if (_this._paused) {
+ return _this.resume();
} else {
- if (originalTop !== tipOffset.top) {
- return this._replaceArrow($tip, (tipOffset.top - originalTop) * 2, offsetHeight, "top");
- }
+ return _this.pause();
}
- };
+ });
+ };
- Tour.prototype._center = function($tip) {
- return $tip.css("top", $(window).outerHeight() / 2 - $tip.outerHeight() / 2);
- };
-
- Tour.prototype._replaceArrow = function($tip, delta, dimension, position) {
- return $tip.find(".arrow").css(position, delta ? 50 * (1 - delta / dimension) + "%" : "");
- };
-
- Tour.prototype._scrollIntoView = function(tip) {
- return $("html, body").stop().animate({
- scrollTop: Math.ceil(tip.offset().top - ($(window).height() / 2))
- });
- };
-
- Tour.prototype._onResize = function(callback, timeout) {
- return $(window).on("resize.tour-" + this._options.name, function() {
- clearTimeout(timeout);
- return timeout = setTimeout(callback, 100);
- });
- };
-
- Tour.prototype._setupKeyboardNavigation = function() {
- var _this = this;
- if (this._options.keyboard) {
- return $(document).on("keyup.tour-" + this._options.name, function(e) {
- if (!e.which) {
- return;
- }
- switch (e.which) {
- case 39:
- e.preventDefault();
- if (_this._current < _this._steps.length - 1) {
- return _this.next();
- } else {
- return _this.end();
- }
- break;
- case 37:
- e.preventDefault();
- if (_this._current > 0) {
- return _this.prev();
- }
- break;
- case 27:
- e.preventDefault();
+ Tour.prototype._initKeyboardNavigation = function() {
+ if (!this._options.keyboard) {
+ return;
+ }
+ return $(document).on("keyup.tour-" + this._options.name, (function(_this) {
+ return function(e) {
+ if (!e.which) {
+ return;
+ }
+ switch (e.which) {
+ case 39:
+ e.preventDefault();
+ if (_this._isLast()) {
+ return _this.next();
+ } else {
return _this.end();
- }
- });
- }
- };
+ }
+ break;
+ case 37:
+ e.preventDefault();
+ if (_this._current > 0) {
+ return _this.prev();
+ }
+ break;
+ case 27:
+ e.preventDefault();
+ return _this.end();
+ }
+ };
+ })(this));
+ };
- Tour.prototype._makePromise = function(result) {
- if (result && $.isFunction(result.then)) {
- return result;
- } else {
- return null;
- }
- };
+ Tour.prototype._makePromise = function(result) {
+ if (result && $.isFunction(result.then)) {
+ return result;
+ } else {
+ return null;
+ }
+ };
- Tour.prototype._callOnPromiseDone = function(promise, cb, arg) {
- var _this = this;
- if (promise) {
- return promise.then(function(e) {
+ Tour.prototype._callOnPromiseDone = function(promise, cb, arg) {
+ if (promise) {
+ return promise.then((function(_this) {
+ return function(e) {
return cb.call(_this, arg);
- });
- } else {
- return cb.call(this, arg);
- }
- };
+ };
+ })(this));
+ } else {
+ return cb.call(this, arg);
+ }
+ };
- Tour.prototype._showBackdrop = function(element) {
- if (this.backdrop.overlay !== null) {
- return;
- }
- this._showOverlay();
- if (element != null) {
- return this._showOverlayElement(element);
- }
- };
+ Tour.prototype._showBackdrop = function(element) {
+ if (this.backdrop.backgroundShown) {
+ return;
+ }
+ this.backdrop = $("
", {
+ "class": "tour-backdrop"
+ });
+ this.backdrop.backgroundShown = true;
+ return $("body").append(this.backdrop);
+ };
- Tour.prototype._hideBackdrop = function() {
- if (this.backdrop.overlay === null) {
- return;
- }
- if (this.backdrop.$element) {
- this._hideOverlayElement();
- }
- return this._hideOverlay();
- };
+ Tour.prototype._hideBackdrop = function() {
+ this._hideOverlayElement();
+ return this._hideBackground();
+ };
- Tour.prototype._showOverlay = function() {
- this.backdrop = $("
", {
- "class": "tour-backdrop"
- });
- return $("body").append(this.backdrop);
- };
+ Tour.prototype._hideBackground = function() {
+ this.backdrop.remove();
+ this.backdrop.overlay = null;
+ return this.backdrop.backgroundShown = false;
+ };
- Tour.prototype._hideOverlay = function() {
- this.backdrop.remove();
- return this.backdrop.overlay = null;
- };
+ Tour.prototype._showOverlayElement = function(element) {
+ var $background, $element, offset;
+ $element = $(element);
+ if (!$element || $element.length === 0 || this.backdrop.overlayElementShown) {
+ return;
+ }
+ this.backdrop.overlayElementShown = true;
+ $background = $("
");
+ offset = $element.offset();
+ offset.top = offset.top;
+ offset.left = offset.left;
+ $background.width($element.innerWidth()).height($element.innerHeight()).addClass("tour-step-background").offset(offset);
+ $element.addClass("tour-step-backdrop");
+ $("body").append($background);
+ this.backdrop.$element = $element;
+ return this.backdrop.$background = $background;
+ };
- Tour.prototype._showOverlayElement = function(element) {
- var $background, $element, offset;
- $element = $(element);
- $background = $("
");
- offset = $element.offset();
- offset.top = offset.top;
- offset.left = offset.left;
- $background.width($element.innerWidth()).height($element.innerHeight()).addClass("tour-step-background").offset(offset);
- $element.addClass("tour-step-backdrop");
- $("body").append($background);
- this.backdrop.$element = $element;
- return this.backdrop.$background = $background;
- };
+ Tour.prototype._hideOverlayElement = function() {
+ if (!this.backdrop.overlayElementShown) {
+ return;
+ }
+ this.backdrop.$element.removeClass("tour-step-backdrop");
+ this.backdrop.$background.remove();
+ this.backdrop.$element = null;
+ this.backdrop.$background = null;
+ return this.backdrop.overlayElementShown = false;
+ };
- Tour.prototype._hideOverlayElement = function() {
- this.backdrop.$element.removeClass("tour-step-backdrop");
- this.backdrop.$background.remove();
- this.backdrop.$element = null;
- return this.backdrop.$background = null;
- };
+ Tour.prototype._clearTimer = function() {
+ window.clearTimeout(this._timer);
+ this._timer = null;
+ return this._duration = null;
+ };
- return Tour;
+ return Tour;
- })();
- return window.Tour = Tour;
- })(jQuery, window);
-
-}).call(this);
+ })();
+ return window.Tour = Tour;
+})(jQuery, window);
diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 65099d03986..443405e2401 100644
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -15,7 +15,6 @@
popover: { next: _t("Start Tutorial"), end: _t("Skip It") },
},
{
- waitNot: '.popover.tour',
element: 'button[data-action=edit]',
placement: 'bottom',
title: _t("Edit this page"),
@@ -52,7 +51,6 @@
popover: { next: _t("Continue") },
},
{
- waitNot: '.popover.tour',
element: 'button[data-action=snippet]',
placement: 'bottom',
title: _t("Add Another Block"),
@@ -81,7 +79,6 @@
popover: { next: _t("Continue") },
},
{
- waitNot: '.popover.tour',
element: 'a[data-action=show-mobile-preview]',
placement: 'bottom',
title: _t("Test Your Mobile Version"),
diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js
index fc0dd513cf2..df6108e0278 100644
--- a/addons/website/static/src/js/website.tour.js
+++ b/addons/website/static/src/js/website.tour.js
@@ -32,7 +32,7 @@ if (website.EditorBar) {
var self = this;
var menu = $('#help-menu');
_.each(website.Tour.tours, function (tour) {
- if (tour.mode != "tutorial") {
+ if (tour.mode === "test") {
return;
}
var $menuItem = $($.parseHTML('
'+tour.name+''));
@@ -90,16 +90,19 @@ website.Tour = {};
website.Tour.tours = {};
website.Tour.state = null;
website.Tour.register = function (tour) {
+ if (tour.mode !== "test") tour.mode = "tutorial";
website.Tour.tours[tour.id] = tour;
};
website.Tour.run = function (tour_id, mode) {
- if (localStorage.getItem("tour")) { // only one test running
+ if (localStorage.getItem("tour") && mode === "test") { // 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) {
+ website.Tour.saveState(tour.id, mode || tour.mode, 0);
+ if (tour.path && !window.location.href.match(new RegExp("("+website.Tour.getLang()+")?"+tour.path+"#?$", "i"))) {
window.location.href = "/"+website.Tour.getLang()+tour.path;
+ } else {
+ website.Tour.running();
}
};
website.Tour.registerSteps = function (tour) {
@@ -114,48 +117,82 @@ website.Tour.registerSteps = function (tour) {
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';
+ step.waitNot = '.popover.tour.fade.in:visible';
}
if (!step.waitFor && index > 0 && tour.steps[index-1].snippet) {
step.waitFor = '.oe_overlay_options .oe_options:visible';
}
- if (!step.element) step.orphan = true;
-
- var snippet = step.element.match(/#oe_snippets (.*) \.oe_snippet_thumbnail/);
+ var snippet = step.element && 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';
}
+
+ if (!step.element) step.orphan = true;
}
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'
+ id: index,
+ waitNot: '.popover.tour.fade.in:visible'
};
tour.steps.push(step);
}
// rendering bootstrap tour and popover
- if (tour.mode != "test" || typeof Tour !== "undefined") {
+ if (tour.mode !== "test" || typeof Tour !== "undefined") {
tour.tour = new Tour({
- name: this.id,
+ debug: true,
+ name: tour.id,
storage: localStorage,
keyboard: false,
- template: this.popover(),
+ template: website.Tour.popover(),
onHide: function () {
window.scrollTo(0, 0);
}
});
+
for (var index=0, len=tour.steps.length; index
-1) {
- tour_id = window.location.href.match(/#tutorial\.(.*)=true/)[1];
- mode = "tutorial";
- step_id = 0;
+website.Tour.getState = function () {
+ var state = JSON.parse(localStorage.getItem("tour") || 'false') || {};
+ var tour_id,mode,step_id;
+ if (!state.id && window.location.href.indexOf("#tutorial.") > -1) {
+ state = {
+ "id": window.location.href.match(/#tutorial\.(.*)=true/)[1],
+ "mode": "tutorial",
+ "step_id": 0
+ };
}
- if (!tour_id) {
+ if (!state.id) {
return;
}
- var tour = website.Tour.tours[tour_id];
- return {'tour': tour, 'tour_id': tour_id, 'mode': mode, 'step_id': step_id};
+ state.tour = website.Tour.tours[state.id];
+ state.step = state.tour.steps[state.step_id];
+ return state;
};
website.Tour.error = function (tour, step, message) {
website.Tour.reset();
throw new Error(message +
- + "\ntour:" + tour.id +
- + "\nstep:" + step.id + ": '" + (step._title || step.title) + "'"
+ + "\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())
- + "\nlocalStorage: " + localStorage.getItem("tour")
+ + "\nlocalStorage: " + JSON.stringify(localStorage)
+ '\n\n' + $("body").html()
);
};
@@ -206,24 +242,39 @@ website.Tour.lists = function () {
}
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.saveState = function (tour_id, mode, step_id) {
+ localStorage.setItem("tour", JSON.stringify({"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;
+ var state = website.Tour.getState();
+ if (state) {
+ for (var k in state.tour.steps) {
+ state.tour.steps[k].busy = false;
+ }
+ if (state.tour.tour) {
+ state.tour.tour.end();
+ }
}
localStorage.removeItem("tour");
clearTimeout(website.Tour.timer);
clearTimeout(website.Tour.testtimer);
- $('.popover.tour').remove();
+ $(".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 );
+ var state = website.Tour.getState();
+ if (state) {
+ website.Tour.registerSteps(state.tour);
+ if ($.ajaxBusy) {
+ $(document).ajaxStop(function() {
+ setTimeout(function () {
+ website.Tour.nextStep( state.tour, state.step, state.mode === "test" ? 5000 : 0 );
+ },0);
+ });
+ } else {
+ website.Tour.nextStep( state.tour, state.step, state.mode === "test" ? 5000 : 0 );
+ }
+ }
};
website.Tour.timer = null;
@@ -238,83 +289,62 @@ website.Tour.check = function (step) {
website.Tour.waitNextStep = function (tour, step, overlaps) {
var time = new Date().getTime();
var timer;
+ var next = tour.steps[step.id+1];
window.onbeforeunload = function () {
clearTimeout(website.Tour.timer);
clearTimeout(website.Tour.testtimer);
};
- // check popover activity
- $(".popover.tour button")
- .off()
- .on("click", function () {
- $(".popover.tour").remove();
- if (step.busy) return;
- if (!$(this).is("[data-role='next']")) {
- clearTimeout(website.Tour.timer);
- step.busy = true;
- if (tour.tour) {
- tour.tour.end();
- }
- tour.endTour(tour);
- }
- });
-
function checkNext () {
+ website.Tour.autoToggleBootstrapTour();
+
clearTimeout(website.Tour.timer);
- if (step.busy) return;
- if (website.Tour.check(step)) {
- step.busy = true;
+ if (next.busy) return;
+ if (website.Tour.check(next)) {
+ next.busy = true;
+ clearTimeout(website.Tour.currentTimer);
// use an other timeout for cke dom loading
setTimeout(function () {
- website.Tour.nextStep(tour, step, overlaps);
+ website.Tour.nextStep(tour, next, overlaps);
}, website.Tour.defaultDelay);
} else if (!overlaps || new Date().getTime() - time < overlaps) {
- if (self.current.element) {
- var $popover = $(".popover.tour");
- if(!$(self.current.element).is(":visible")) {
- $popover.data("hide", true).fadeOut(300);
- } else if($popover.data("hide")) {
- $popover.data("hide", false).fadeIn(150);
- }
- }
website.Tour.timer = setTimeout(checkNext, website.Tour.defaultDelay);
} else {
- website.Tour.error(tour, step, "Can't arrive to the next step");
+ website.Tour.error(tour, next, "Can't arrive to the next step");
}
}
checkNext();
};
+website.Tour.currentTimer = null;
website.Tour.nextStep = function (tour, step, overlaps) {
- var state = website.Tour.get_state();
- website.Tour.save_state(tour.id, state.mode, step.id);
+ var state = website.Tour.getState();
+ website.Tour.saveState(state.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
- if (tour.tour) {
- tour.tour.goto(step.id);
+ website.Tour.autoToggleBootstrapTour();
+
+ if (step.onload) {
+ step.onload();
}
- step.onload();
var next = tour.steps[step.id+1];
if (next) {
setTimeout(function () {
- website.Tour.waitNextStep(tour, next, overlaps);
+ website.Tour.waitNextStep(tour, step, overlaps);
if (state.mode === "test") {
setTimeout(function(){
website.Tour.autoNextStep(tour, step);
}, website.Tour.defaultDelay);
}
- }, next && next.wait || 0);
+ }, next.wait || 0);
} else {
website.Tour.endTour(tour);
}
};
website.Tour.endTour = function (tour) {
- var state = website.Tour.get_state();
- var test = state.step_id >= tour.steps.length-1;
- this.reset();
+ var state = website.Tour.getState();
+ var test = state.step.id >= state.tour.steps.length-1;
+ website.Tour.reset();
if (test) {
console.log('ok');
} else {
@@ -388,7 +418,8 @@ website.Tour.autoDragAndDropSnippet = function (selector) {
$dropZone.trigger($.Event("mouseup", { which: 1, pageX: dropPosition.left, pageY: dropPosition.top }));
};
-website.ready(website.Tour.running);
+//$(document).ready(website.Tour.running);
+website.ready().then(website.Tour.running);
}());
From 58b6aeb01d489922f8311e6a390805d9cb1c877f Mon Sep 17 00:00:00 2001
From: "chm@openerp.com" <>
Date: Fri, 21 Mar 2014 12:07:50 +0100
Subject: [PATCH 04/26] [IMP] website tour: remove bootstrap Tour lib
bzr revid: chm@openerp.com-20140321110750-ew8rj3nv2jcort1x
---
.../lib/bootstrap-tour/bootstrap-tour.css | 65 --
.../lib/bootstrap-tour/bootstrap-tour.js | 716 ------------------
addons/website/static/src/css/editor.css | 24 +-
addons/website/static/src/css/editor.sass | 19 +-
.../static/src/js/website.tour.banner.js | 2 +
addons/website/static/src/js/website.tour.js | 349 +++++----
6 files changed, 258 insertions(+), 917 deletions(-)
delete mode 100644 addons/website/static/lib/bootstrap-tour/bootstrap-tour.css
delete mode 100644 addons/website/static/lib/bootstrap-tour/bootstrap-tour.js
diff --git a/addons/website/static/lib/bootstrap-tour/bootstrap-tour.css b/addons/website/static/lib/bootstrap-tour/bootstrap-tour.css
deleted file mode 100644
index 5449158e7f4..00000000000
--- a/addons/website/static/lib/bootstrap-tour/bootstrap-tour.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/* ===========================================================
-# bootstrap-tour - v0.9.1
-# http://bootstraptour.com
-# ==============================================================
-# Copyright 2012-2013 Ulrich Sossou
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-# http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-*/
-.tour-backdrop {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1100;
- background-color: #000;
- opacity: 0.8;
-}
-.tour-step-backdrop {
- position: relative;
- z-index: 1101;
- background: inherit;
-}
-.tour-step-background {
- position: absolute;
- z-index: 1100;
- background: inherit;
- border-radius: 6px;
-}
-.popover[class*="tour-"] {
- z-index: 1100;
-}
-.popover[class*="tour-"] .popover-navigation {
- padding: 9px 14px;
-}
-.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
- float: right;
-}
-.popover[class*="tour-"] .popover-navigation *[data-role="prev"],
-.popover[class*="tour-"] .popover-navigation *[data-role="next"],
-.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
- cursor: pointer;
-}
-.popover[class*="tour-"] .popover-navigation *[data-role="prev"].disabled,
-.popover[class*="tour-"] .popover-navigation *[data-role="next"].disabled,
-.popover[class*="tour-"] .popover-navigation *[data-role="end"].disabled {
- cursor: default;
-}
-.popover[class*="tour-"].orphan {
- position: fixed;
- margin-top: 0;
-}
-.popover[class*="tour-"].orphan .arrow {
- display: none;
-}
diff --git a/addons/website/static/lib/bootstrap-tour/bootstrap-tour.js b/addons/website/static/lib/bootstrap-tour/bootstrap-tour.js
deleted file mode 100644
index a0172c718c0..00000000000
--- a/addons/website/static/lib/bootstrap-tour/bootstrap-tour.js
+++ /dev/null
@@ -1,716 +0,0 @@
-/* ===========================================================
-# bootstrap-tour - v0.9.1
-# http://bootstraptour.com
-# ==============================================================
-# Copyright 2012-2013 Ulrich Sossou
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-# http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-*/
-(function($, window) {
- var Tour, document;
- document = window.document;
- Tour = (function() {
- function Tour(options) {
- this._options = $.extend({
- name: "tour",
- steps: [],
- container: "body",
- keyboard: true,
- storage: window.localStorage,
- debug: false,
- backdrop: false,
- redirect: true,
- orphan: false,
- duration: false,
- basePath: "",
- template: "
",
- afterSetState: function(key, value) {},
- afterGetState: function(key, value) {},
- afterRemoveState: function(key) {},
- onStart: function(tour) {},
- onEnd: function(tour) {},
- onShow: function(tour) {},
- onShown: function(tour) {},
- onHide: function(tour) {},
- onHidden: function(tour) {},
- onNext: function(tour) {},
- onPrev: function(tour) {},
- onPause: function(tour, duration) {},
- onResume: function(tour, duration) {}
- }, options);
- this._force = false;
- this._inited = false;
- this.backdrop = {
- overlay: null,
- $element: null,
- $background: null,
- backgroundShown: false,
- overlayElementShown: false
- };
- this;
- }
-
- Tour.prototype.addSteps = function(steps) {
- var step, _i, _len;
- for (_i = 0, _len = steps.length; _i < _len; _i++) {
- step = steps[_i];
- this.addStep(step);
- }
- return this;
- };
-
- Tour.prototype.addStep = function(step) {
- this._options.steps.push(step);
- return this;
- };
-
- Tour.prototype.getStep = function(i) {
- if (this._options.steps[i] != null) {
- return $.extend({
- id: "step-" + i,
- path: "",
- placement: "right",
- title: "",
- content: "",
- next: i === this._options.steps.length - 1 ? -1 : i + 1,
- prev: i - 1,
- animation: true,
- container: this._options.container,
- backdrop: this._options.backdrop,
- redirect: this._options.redirect,
- orphan: this._options.orphan,
- duration: this._options.duration,
- template: this._options.template,
- onShow: this._options.onShow,
- onShown: this._options.onShown,
- onHide: this._options.onHide,
- onHidden: this._options.onHidden,
- onNext: this._options.onNext,
- onPrev: this._options.onPrev,
- onPause: this._options.onPause,
- onResume: this._options.onResume
- }, this._options.steps[i]);
- }
- };
-
- Tour.prototype.init = function(force) {
- this._force = force;
- if (this.ended()) {
- this._debug("Tour ended, init prevented.");
- return this;
- }
- this.setCurrentStep();
- this._initMouseNavigation();
- this._initKeyboardNavigation();
- this._onResize((function(_this) {
- return function() {
- return _this.showStep(_this._current);
- };
- })(this));
- if (this._current !== null) {
- this.showStep(this._current);
- }
- this._inited = true;
- return this;
- };
-
- Tour.prototype.start = function(force) {
- var promise;
- if (force == null) {
- force = false;
- }
- if (!this._inited) {
- this.init(force);
- }
- if (this._current === null) {
- promise = this._makePromise(this._options.onStart != null ? this._options.onStart(this) : void 0);
- this._callOnPromiseDone(promise, this.showStep, 0);
- }
- return this;
- };
-
- Tour.prototype.next = function() {
- var promise;
- promise = this.hideStep(this._current);
- return this._callOnPromiseDone(promise, this._showNextStep);
- };
-
- Tour.prototype.prev = function() {
- var promise;
- promise = this.hideStep(this._current);
- return this._callOnPromiseDone(promise, this._showPrevStep);
- };
-
- Tour.prototype.goTo = function(i) {
- var promise;
- promise = this.hideStep(this._current);
- return this._callOnPromiseDone(promise, this.showStep, i);
- };
-
- Tour.prototype.end = function() {
- var endHelper, promise;
- endHelper = (function(_this) {
- return function(e) {
- $(document).off("click.tour-" + _this._options.name);
- $(document).off("keyup.tour-" + _this._options.name);
- $(window).off("resize.tour-" + _this._options.name);
- _this._setState("end", "yes");
- _this._inited = false;
- _this._force = false;
- _this._clearTimer();
- if (_this._options.onEnd != null) {
- return _this._options.onEnd(_this);
- }
- };
- })(this);
- promise = this.hideStep(this._current);
- return this._callOnPromiseDone(promise, endHelper);
- };
-
- Tour.prototype.ended = function() {
- return !this._force && !!this._getState("end");
- };
-
- Tour.prototype.restart = function() {
- this._removeState("current_step");
- this._removeState("end");
- this.setCurrentStep(0);
- return this.start();
- };
-
- Tour.prototype.pause = function() {
- var step;
- step = this.getStep(this._current);
- if (!(step && step.duration)) {
- return this;
- }
- this._paused = true;
- this._duration -= new Date().getTime() - this._start;
- window.clearTimeout(this._timer);
- this._debug("Paused/Stopped step " + (this._current + 1) + " timer (" + this._duration + " remaining).");
- if (step.onPause != null) {
- return step.onPause(this, this._duration);
- }
- };
-
- Tour.prototype.resume = function() {
- var step;
- step = this.getStep(this._current);
- if (!(step && step.duration)) {
- return this;
- }
- this._paused = false;
- this._start = new Date().getTime();
- this._duration = this._duration || step.duration;
- this._timer = window.setTimeout((function(_this) {
- return function() {
- if (_this._isLast()) {
- return _this.next();
- } else {
- return _this.end();
- }
- };
- })(this), this._duration);
- this._debug("Started step " + (this._current + 1) + " timer with duration " + this._duration);
- if ((step.onResume != null) && this._duration !== step.duration) {
- return step.onResume(this, this._duration);
- }
- };
-
- Tour.prototype.hideStep = function(i) {
- var hideStepHelper, promise, step;
- step = this.getStep(i);
- if (!step) {
- return;
- }
- this._clearTimer();
- promise = this._makePromise(step.onHide != null ? step.onHide(this, i) : void 0);
- hideStepHelper = (function(_this) {
- return function(e) {
- var $element;
- $element = $(step.element);
- if (!($element.data("bs.popover") || $element.data("popover"))) {
- $element = $("body");
- }
- $element.popover("destroy").removeClass("tour-" + _this._options.name + "-element tour-" + _this._options.name + "-" + i + "-element");
- if (step.reflex) {
- $element.css("cursor", "").off("click.tour-" + _this._options.name);
- }
- if (step.backdrop) {
- _this._hideBackdrop();
- }
- if (step.onHidden != null) {
- return step.onHidden(_this);
- }
- };
- })(this);
- this._callOnPromiseDone(promise, hideStepHelper);
- return promise;
- };
-
- Tour.prototype.showStep = function(i) {
- var promise, showStepHelper, skipToPrevious, step;
- if (this.ended()) {
- this._debug("Tour ended, showStep prevented.");
- return this;
- }
- step = this.getStep(i);
- if (!step) {
- return;
- }
- skipToPrevious = i < this._current;
- promise = this._makePromise(step.onShow != null ? step.onShow(this, i) : void 0);
- showStepHelper = (function(_this) {
- return function(e) {
- var current_path, path;
- _this.setCurrentStep(i);
- path = (function() {
- switch ({}.toString.call(step.path)) {
- case "[object Function]":
- return step.path();
- case "[object String]":
- return this._options.basePath + step.path;
- default:
- return step.path;
- }
- }).call(_this);
- current_path = [document.location.pathname, document.location.hash].join("");
- if (_this._isRedirect(path, current_path)) {
- _this._redirect(step, path);
- return;
- }
- if (_this._isOrphan(step)) {
- if (!step.orphan) {
- _this._debug("Skip the orphan step " + (_this._current + 1) + ". Orphan option is false and the element doesn't exist or is hidden.");
- if (skipToPrevious) {
- _this._showPrevStep();
- } else {
- _this._showNextStep();
- }
- return;
- }
- _this._debug("Show the orphan step " + (_this._current + 1) + ". Orphans option is true.");
- }
- if (step.backdrop) {
- _this._showBackdrop(!_this._isOrphan(step) ? step.element : void 0);
- }
- _this._scrollIntoView(step.element, function() {
- if ((step.element != null) && step.backdrop) {
- _this._showOverlayElement(step.element);
- }
- _this._showPopover(step, i);
- if (step.onShown != null) {
- step.onShown(_this);
- }
- return _this._debug("Step " + (_this._current + 1) + " of " + _this._options.steps.length);
- });
- if (step.duration) {
- return _this.resume();
- }
- };
- })(this);
- this._callOnPromiseDone(promise, showStepHelper);
- return promise;
- };
-
- Tour.prototype.getCurrentStep = function() {
- return this._current;
- };
-
- Tour.prototype.setCurrentStep = function(value) {
- if (value != null) {
- this._current = value;
- this._setState("current_step", value);
- } else {
- this._current = this._getState("current_step");
- this._current = this._current === null ? null : parseInt(this._current, 10);
- }
- return this;
- };
-
- Tour.prototype._setState = function(key, value) {
- var e, keyName;
- if (this._options.storage) {
- keyName = "" + this._options.name + "_" + key;
- try {
- this._options.storage.setItem(keyName, value);
- } catch (_error) {
- e = _error;
- if (e.code === DOMException.QUOTA_EXCEEDED_ERR) {
- this.debug("LocalStorage quota exceeded. State storage failed.");
- }
- }
- return this._options.afterSetState(keyName, value);
- } else {
- if (this._state == null) {
- this._state = {};
- }
- return this._state[key] = value;
- }
- };
-
- Tour.prototype._removeState = function(key) {
- var keyName;
- if (this._options.storage) {
- keyName = "" + this._options.name + "_" + key;
- this._options.storage.removeItem(keyName);
- return this._options.afterRemoveState(keyName);
- } else {
- if (this._state != null) {
- return delete this._state[key];
- }
- }
- };
-
- Tour.prototype._getState = function(key) {
- var keyName, value;
- if (this._options.storage) {
- keyName = "" + this._options.name + "_" + key;
- value = this._options.storage.getItem(keyName);
- } else {
- if (this._state != null) {
- value = this._state[key];
- }
- }
- if (value === void 0 || value === "null") {
- value = null;
- }
- this._options.afterGetState(key, value);
- return value;
- };
-
- Tour.prototype._showNextStep = function() {
- var promise, showNextStepHelper, step;
- step = this.getStep(this._current);
- showNextStepHelper = (function(_this) {
- return function(e) {
- return _this.showStep(step.next);
- };
- })(this);
- promise = this._makePromise(step.onNext != null ? step.onNext(this) : void 0);
- return this._callOnPromiseDone(promise, showNextStepHelper);
- };
-
- Tour.prototype._showPrevStep = function() {
- var promise, showPrevStepHelper, step;
- step = this.getStep(this._current);
- showPrevStepHelper = (function(_this) {
- return function(e) {
- return _this.showStep(step.prev);
- };
- })(this);
- promise = this._makePromise(step.onPrev != null ? step.onPrev(this) : void 0);
- return this._callOnPromiseDone(promise, showPrevStepHelper);
- };
-
- Tour.prototype._debug = function(text) {
- if (this._options.debug) {
- return window.console.log("Bootstrap Tour '" + this._options.name + "' | " + text);
- }
- };
-
- Tour.prototype._isRedirect = function(path, currentPath) {
- return (path != null) && path !== "" && ((toString.call(path) === "[object RegExp]" && !path.test(currentPath)) || (toString.call(path) === "[object String]" && path.replace(/\?.*$/, "").replace(/\/?$/, "") !== currentPath.replace(/\/?$/, "")));
- };
-
- Tour.prototype._redirect = function(step, path) {
- if ($.isFunction(step.redirect)) {
- return step.redirect.call(this, path);
- } else if (step.redirect === true) {
- this._debug("Redirect to " + path);
- return document.location.href = path;
- }
- };
-
- Tour.prototype._isOrphan = function(step) {
- return (step.element == null) || !$(step.element).length || $(step.element).is(":hidden") && ($(step.element)[0].namespaceURI !== "http://www.w3.org/2000/svg");
- };
-
- Tour.prototype._isLast = function() {
- return this._current < this._options.steps.length - 1;
- };
-
- Tour.prototype._showPopover = function(step, i) {
- var $element, $navigation, $template, $tip, isOrphan, options;
- options = $.extend({}, this._options);
- $template = $.isFunction(step.template) ? $(step.template(i, step)) : $(step.template);
- $navigation = $template.find(".popover-navigation");
- isOrphan = this._isOrphan(step);
- if (isOrphan) {
- step.element = "body>*:last";
- step.placement = "top";
- $template = $template.addClass("orphan");
- }
- $element = $(step.element);
- $template.addClass("tour-" + this._options.name + " tour-" + this._options.name + "-" + i);
- $element.addClass("tour-" + this._options.name + "-element tour-" + this._options.name + "-" + i + "-element");
- if (step.options) {
- $.extend(options, step.options);
- }
- if (step.reflex) {
- $element.css("cursor", "pointer").on("click.tour-" + this._options.name, (function(_this) {
- return function() {
- if (_this._isLast()) {
- return _this.next();
- } else {
- return _this.end();
- }
- };
- })(this));
- }
- if (step.prev < 0) {
- $navigation.find("[data-role='prev']").addClass("disabled");
- }
- if (step.next < 0) {
- $navigation.find("[data-role='next']").addClass("disabled");
- }
- if (!step.duration) {
- $navigation.find("[data-role='pause-resume']").remove();
- }
- step.template = $template.clone().wrap("").parent().html();
- $element.popover({
- placement: step.placement,
- trigger: "manual",
- title: step.title,
- content: step.content,
- html: true,
- animation: step.animation,
- container: step.container,
- template: step.template,
- selector: step.element
- }).popover("show");
- $tip = $element.data("bs.popover") ? $element.data("bs.popover").tip() : $element.data("popover").tip();
- $tip.attr("id", step.id);
- this._reposition($tip, step);
- if (isOrphan) {
- return this._center($tip);
- }
- };
-
- Tour.prototype._reposition = function($tip, step) {
- var offsetBottom, offsetHeight, offsetRight, offsetWidth, originalLeft, originalTop, tipOffset;
- offsetWidth = $tip[0].offsetWidth;
- offsetHeight = $tip[0].offsetHeight;
- tipOffset = $tip.offset();
- originalLeft = tipOffset.left;
- originalTop = tipOffset.top;
- offsetBottom = $(document).outerHeight() - tipOffset.top - $tip.outerHeight();
- if (offsetBottom < 0) {
- tipOffset.top = tipOffset.top + offsetBottom;
- }
- offsetRight = $("html").outerWidth() - tipOffset.left - $tip.outerWidth();
- if (offsetRight < 0) {
- tipOffset.left = tipOffset.left + offsetRight;
- }
- if (tipOffset.top < 0) {
- tipOffset.top = 0;
- }
- if (tipOffset.left < 0) {
- tipOffset.left = 0;
- }
- $tip.offset(tipOffset);
- if (step.placement === "bottom" || step.placement === "top") {
- if (originalLeft !== tipOffset.left) {
- return this._replaceArrow($tip, (tipOffset.left - originalLeft) * 2, offsetWidth, "left");
- }
- } else {
- if (originalTop !== tipOffset.top) {
- return this._replaceArrow($tip, (tipOffset.top - originalTop) * 2, offsetHeight, "top");
- }
- }
- };
-
- Tour.prototype._center = function($tip) {
- return $tip.css("top", $(window).outerHeight() / 2 - $tip.outerHeight() / 2);
- };
-
- Tour.prototype._replaceArrow = function($tip, delta, dimension, position) {
- return $tip.find(".arrow").css(position, delta ? 50 * (1 - delta / dimension) + "%" : "");
- };
-
- Tour.prototype._scrollIntoView = function(element, callback) {
- var $element, $window, counter, offsetTop, scrollTop, windowHeight;
- $element = $(element);
- if (!$element.length) {
- return callback();
- }
- $window = $(window);
- offsetTop = $element.offset().top;
- windowHeight = $window.height();
- scrollTop = Math.max(0, offsetTop - (windowHeight / 2));
- this._debug("Scroll into view. ScrollTop: " + scrollTop + ". Element offset: " + offsetTop + ". Window height: " + windowHeight + ".");
- counter = 0;
- return $("body,html").stop(true, true).animate({
- scrollTop: Math.ceil(scrollTop)
- }, (function(_this) {
- return function() {
- if (++counter === 2) {
- callback();
- return _this._debug("Scroll into view. Animation end element offset: " + ($element.offset().top) + ". Window height: " + ($window.height()) + ".");
- }
- };
- })(this));
- };
-
- Tour.prototype._onResize = function(callback, timeout) {
- return $(window).on("resize.tour-" + this._options.name, function() {
- clearTimeout(timeout);
- return timeout = setTimeout(callback, 100);
- });
- };
-
- Tour.prototype._initMouseNavigation = function() {
- var _this;
- _this = this;
- return $(document).off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='prev']:not(.disabled)").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='next']:not(.disabled)").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='end']").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='pause-resume']").on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='next']:not(.disabled)", (function(_this) {
- return function(e) {
- e.preventDefault();
- return _this.next();
- };
- })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='prev']:not(.disabled)", (function(_this) {
- return function(e) {
- e.preventDefault();
- return _this.prev();
- };
- })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='end']", (function(_this) {
- return function(e) {
- e.preventDefault();
- return _this.end();
- };
- })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='pause-resume']", function(e) {
- var $this;
- e.preventDefault();
- $this = $(this);
- $this.text(_this._paused ? $this.data("pause-text") : $this.data("resume-text"));
- if (_this._paused) {
- return _this.resume();
- } else {
- return _this.pause();
- }
- });
- };
-
- Tour.prototype._initKeyboardNavigation = function() {
- if (!this._options.keyboard) {
- return;
- }
- return $(document).on("keyup.tour-" + this._options.name, (function(_this) {
- return function(e) {
- if (!e.which) {
- return;
- }
- switch (e.which) {
- case 39:
- e.preventDefault();
- if (_this._isLast()) {
- return _this.next();
- } else {
- return _this.end();
- }
- break;
- case 37:
- e.preventDefault();
- if (_this._current > 0) {
- return _this.prev();
- }
- break;
- case 27:
- e.preventDefault();
- return _this.end();
- }
- };
- })(this));
- };
-
- Tour.prototype._makePromise = function(result) {
- if (result && $.isFunction(result.then)) {
- return result;
- } else {
- return null;
- }
- };
-
- Tour.prototype._callOnPromiseDone = function(promise, cb, arg) {
- if (promise) {
- return promise.then((function(_this) {
- return function(e) {
- return cb.call(_this, arg);
- };
- })(this));
- } else {
- return cb.call(this, arg);
- }
- };
-
- Tour.prototype._showBackdrop = function(element) {
- if (this.backdrop.backgroundShown) {
- return;
- }
- this.backdrop = $("
", {
- "class": "tour-backdrop"
- });
- this.backdrop.backgroundShown = true;
- return $("body").append(this.backdrop);
- };
-
- Tour.prototype._hideBackdrop = function() {
- this._hideOverlayElement();
- return this._hideBackground();
- };
-
- Tour.prototype._hideBackground = function() {
- this.backdrop.remove();
- this.backdrop.overlay = null;
- return this.backdrop.backgroundShown = false;
- };
-
- Tour.prototype._showOverlayElement = function(element) {
- var $background, $element, offset;
- $element = $(element);
- if (!$element || $element.length === 0 || this.backdrop.overlayElementShown) {
- return;
- }
- this.backdrop.overlayElementShown = true;
- $background = $("
");
- offset = $element.offset();
- offset.top = offset.top;
- offset.left = offset.left;
- $background.width($element.innerWidth()).height($element.innerHeight()).addClass("tour-step-background").offset(offset);
- $element.addClass("tour-step-backdrop");
- $("body").append($background);
- this.backdrop.$element = $element;
- return this.backdrop.$background = $background;
- };
-
- Tour.prototype._hideOverlayElement = function() {
- if (!this.backdrop.overlayElementShown) {
- return;
- }
- this.backdrop.$element.removeClass("tour-step-backdrop");
- this.backdrop.$background.remove();
- this.backdrop.$element = null;
- this.backdrop.$background = null;
- return this.backdrop.overlayElementShown = false;
- };
-
- Tour.prototype._clearTimer = function() {
- window.clearTimeout(this._timer);
- this._timer = null;
- return this._duration = null;
- };
-
- return Tour;
-
- })();
- return window.Tour = Tour;
-})(jQuery, window);
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index da0fad43caf..0bd20bdcca9 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -484,10 +484,30 @@ div.tour-backdrop {
z-index: 2009;
}
-.popover.tour {
- z-index: 2010;
+.popover.tour.orphan .arrow {
+ display: none;
+}
+.popover.tour .popover-navigation {
+ padding: 9px 14px;
+}
+.popover.tour .popover-navigation *[data-role="end"] {
+ float: right;
+}
+.popover.tour .popover-navigation *[data-role="next"], .popover.tour .popover-navigation *[data-role="end"] {
+ cursor: pointer;
}
.popover.fixed {
position: fixed;
}
+
+.tour-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1100;
+ background-color: black;
+ opacity: 0.8;
+}
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 4571dcd257e..bd0f4628009 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -424,9 +424,26 @@ $editorbar_height: 30px
div.tour-backdrop
z-index: 2009
.popover.tour
- z-index: 2010
+ &.orphan .arrow
+ display: none
+ .popover-navigation
+ padding: 9px 14px
+ *[data-role="end"]
+ float: right
+ *[data-role="next"],*[data-role="end"]
+ cursor: pointer
.popover.fixed
position: fixed
+.tour-backdrop
+ position: fixed
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ z-index: 1100
+ background-color: #000
+ opacity: 0.8
+
// }}}
diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 443405e2401..a8abbcf59e2 100644
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -13,6 +13,7 @@
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."),
popover: { next: _t("Start Tutorial"), end: _t("Skip It") },
+ backdrop: true,
},
{
element: 'button[data-action=edit]',
@@ -77,6 +78,7 @@
title: _t("Good Job!"),
content: _t("Well done, you created your homepage."),
popover: { next: _t("Continue") },
+ backdrop: true,
},
{
element: 'a[data-action=show-mobile-preview]',
diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js
index df6108e0278..3bfd4e06da0 100644
--- a/addons/website/static/src/js/website.tour.js
+++ b/addons/website/static/src/js/website.tour.js
@@ -15,8 +15,8 @@ if (typeof openerp === "undefined") {
var website = window.openerp.website;
-// don't rewrite website.Tour in test mode
-if (typeof website.Tour !== "undefined") {
+// don't rewrite T in test mode
+if (typeof T !== "undefined") {
return;
}
@@ -31,14 +31,14 @@ if (website.EditorBar) {
start: function () {
var self = this;
var menu = $('#help-menu');
- _.each(website.Tour.tours, function (tour) {
+ _.each(T.tours, function (tour) {
if (tour.mode === "test") {
return;
}
var $menuItem = $($.parseHTML('
'+tour.name+''));
$menuItem.click(function () {
- website.Tour.reset();
- website.Tour.run(tour.id);
+ T.reset();
+ T.run(tour.id);
});
menu.append($menuItem);
});
@@ -80,32 +80,36 @@ $.ajaxSetup({
}
});
-
/////////////////////////////////////////////////
-
var localStorage = window.localStorage;
-website.Tour = {};
-website.Tour.tours = {};
-website.Tour.state = null;
-website.Tour.register = function (tour) {
+var T = website.Tour = {};
+T.tours = {};
+T.defaultDelay = 50;
+T.errorDelay = 5000;
+T.state = null;
+T.$element = null;
+T.timer = null;
+T.testtimer = null;
+T.currentTimer = null;
+T.register = function (tour) {
if (tour.mode !== "test") tour.mode = "tutorial";
- website.Tour.tours[tour.id] = tour;
+ T.tours[tour.id] = tour;
};
-website.Tour.run = function (tour_id, mode) {
+T.run = function (tour_id, mode) {
if (localStorage.getItem("tour") && mode === "test") { // only one test running
return;
}
- var tour = website.Tour.tours[tour_id];
- website.Tour.saveState(tour.id, mode || tour.mode, 0);
- if (tour.path && !window.location.href.match(new RegExp("("+website.Tour.getLang()+")?"+tour.path+"#?$", "i"))) {
- window.location.href = "/"+website.Tour.getLang()+tour.path;
+ var tour = T.tours[tour_id];
+ T.saveState(tour.id, mode || tour.mode, 0);
+ if (tour.path && !window.location.href.match(new RegExp("("+T.getLang()+")?"+tour.path+"#?$", "i"))) {
+ window.location.href = "/"+T.getLang()+tour.path;
} else {
- website.Tour.running();
+ T.running();
}
};
-website.Tour.registerSteps = function (tour) {
+T.registerSteps = function (tour) {
if (tour.register) {
return;
}
@@ -130,7 +134,10 @@ website.Tour.registerSteps = function (tour) {
step.element = '#oe_snippets '+step.snippet+' .oe_snippet_thumbnail';
}
- if (!step.element) step.orphan = true;
+ if (!step.element) {
+ step.element = "body";
+ step.orphan = true;
+ }
}
if (tour.steps[index-1] &&
tour.steps[index-1].popover && tour.steps[index-1].popover.next) {
@@ -142,69 +149,151 @@ website.Tour.registerSteps = function (tour) {
}
// rendering bootstrap tour and popover
- if (tour.mode !== "test" || typeof Tour !== "undefined") {
- tour.tour = new Tour({
- debug: true,
- name: tour.id,
- storage: localStorage,
- keyboard: false,
- template: website.Tour.popover(),
- onHide: function () {
- window.scrollTo(0, 0);
- }
- });
-
+ if (tour.mode !== "test") {
for (var index=0, len=tour.steps.length; index
');
- }
-
- if (step.backdrop || $element.parents("#website-top-navbar, .modal").size()) {
- $tip.css("z-index", 2010);
- }
-
- // button click event
- $tip.find("button")
- .one("click", function () {
- step.busy = true;
- if (!$(this).is("[data-role='next']")) {
- clearTimeout(T.timer);
- T.endTour();
+ if (!step.waitNot && index > 0 && tour.steps[index-1] &&
+ tour.steps[index-1].popover && tour.steps[index-1].popover.next) {
+ step.waitNot = '.popover.tour.fade.in:visible';
+ }
+ if (!step.waitFor && index > 0 && tour.steps[index-1].snippet) {
+ step.waitFor = '.oe_overlay_options .oe_options:visible';
}
- T.closePopover();
- });
- T.repositionPopover();
-};
-T.repositionPopover = function() {
- var popover = T.$element.data("bs.popover");
- var $tip = T.$element.data("bs.popover").tip();
+ var snippet = step.element && 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';
+ }
- if (popover.options.orphan) {
- return $tip.css("top", $(window).outerHeight() / 2 - $tip.outerHeight() / 2);
- }
-
- var offsetBottom, offsetHeight, offsetRight, offsetWidth, originalLeft, originalTop, tipOffset;
- offsetWidth = $tip[0].offsetWidth;
- offsetHeight = $tip[0].offsetHeight;
- tipOffset = $tip.offset();
- originalLeft = tipOffset.left;
- originalTop = tipOffset.top;
- offsetBottom = $(document).outerHeight() - tipOffset.top - $tip.outerHeight();
- if (offsetBottom < 0) {
- tipOffset.top = tipOffset.top + offsetBottom;
- }
- offsetRight = $("html").outerWidth() - tipOffset.left - $tip.outerWidth();
- if (offsetRight < 0) {
- tipOffset.left = tipOffset.left + offsetRight;
- }
- if (tipOffset.top < 0) {
- tipOffset.top = 0;
- }
- if (tipOffset.left < 0) {
- tipOffset.left = 0;
- }
- $tip.offset(tipOffset);
- if (popover.options.placement === "bottom" || popover.options.placement === "top") {
- var left = T.$element.offset().left + T.$element.outerWidth()/2 - tipOffset.left;
- $tip.find(".arrow").css("left", left ? left + "px" : "");
- } else {
- var top = T.$element.offset().top + T.$element.outerHeight()/2 - tipOffset.top;
- $tip.find(".arrow").css("top", top ? top + "px" : "");
- }
-};
-T.popoverTitle = function (tour, options) {
- return openerp.qweb.render('website.tour_popover_title', options);
-};
-T.popover = function (options) {
- return openerp.qweb.render('website.tour_popover', options);
-};
-T.getLang = function () {
- return $("html").attr("lang").replace(/-/, '_');
-};
-T.getState = function () {
- var state = JSON.parse(localStorage.getItem("tour") || 'false') || {};
- var tour_id,mode,step_id;
- if (!state.id && window.location.href.indexOf("#tutorial.") > -1) {
- state = {
- "id": window.location.href.match(/#tutorial\.(.*)=true/)[1],
- "mode": "tutorial",
- "step_id": 0
- };
- }
- if (!state.id) {
- return;
- }
- state.tour = T.tours[state.id];
- state.step = state.tour.steps[state.step_id];
- return state;
-};
-T.error = function (message) {
- var state = T.getState();
- message += '\n tour: ' + state.id
- + '\n step: ' + state.step_id + ": '" + (state.step._title || state.step.title) + "'"
- + '\n href: ' + window.location.href
- + '\n referrer: ' + document.referrer
- + '\n element: ' + Boolean(!state.step.element || ($(state.step.element).size() && $(state.step.element).is(":visible") && !$(state.step.element).is(":hidden")))
- + '\n waitNot: ' + Boolean(!state.step.waitNot || !$(state.step.waitNot).size())
- + '\n waitFor: ' + Boolean(!state.step.waitFor || $(state.step.waitFor).size())
- + "\n localStorage: " + JSON.stringify(localStorage)
- + '\n\n' + $("body").html();
- T.reset();
- throw new Error(message);
-};
-T.lists = function () {
- var tour_ids = [];
- for (var k in T.tours) {
- tour_ids.push(k);
- }
- return tour_ids;
-};
-T.saveState = function (tour_id, mode, step_id) {
- localStorage.setItem("tour", JSON.stringify({"id":tour_id, "mode":mode, "step_id":step_id || 0}));
-};
-T.reset = function () {
- var state = T.getState();
- if (state) {
- for (var k in state.tour.steps) {
- state.tour.steps[k].busy = false;
+ if (!step.element) {
+ step.element = "body";
+ step.orphan = true;
+ step.backdrop = true;
+ }
}
- }
- localStorage.removeItem("tour");
- clearTimeout(T.timer);
- clearTimeout(T.testtimer);
- T.closePopover();
-};
-T.running = function () {
- var state = T.getState();
- if (state) {
- T.registerSteps(state.tour);
- if ($.ajaxBusy) {
- $(document).ajaxStop(function() {
- setTimeout(function () {
- T.nextStep();
- },0);
+ if (tour.steps[index-1] &&
+ tour.steps[index-1].popover && tour.steps[index-1].popover.next) {
+ var step = {
+ id: index,
+ waitNot: '.popover.tour.fade.in:visible'
+ };
+ tour.steps.push(step);
+ }
+
+ // rendering bootstrap tour and popover
+ if (tour.mode !== "test") {
+ for (var index=0, len=tour.steps.length; index