diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index ef4c029280e..e605bba3d1b 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -246,6 +246,9 @@
this.snippet_focus($snippet);
}
$("#oe_snippets").trigger('snippet-activated', $snippet);
+ if ($snippet) {
+ $snippet.trigger('snippet-activated', $snippet);
+ }
},
create_overlay: function ($snippet) {
if (typeof $snippet.data("snippet-editor") === 'undefined') {
diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 70c5dd9dc38..9bea6b223da 100644
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -46,7 +46,7 @@
},
{
stepId: 'drag-banner',
- element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable',
+ snippet: 'carousel',
placement: 'bottom',
title: "Drag & Drop a Banner",
content: "Drag the Banner block and drop it in your page.",
@@ -84,7 +84,7 @@
},
{
stepId: 'drag-three-columns',
- element: '#website-top-navbar [data-snippet-id=three-columns].ui-draggable',
+ snippet: 'three-columns',
placement: 'bottom',
title: "Drag & Drop a Block",
content: "Drag the '3 Columns' block and drop it below the banner.",
@@ -97,7 +97,8 @@
title: "Edit an Area",
content: "Select any area of the page to modify it. Click on this subtitle.",
trigger: {
- id: 'snippet-activated'
+ emitter: '#wrap [data-snippet-id=three-columns]:first .text-center[data-snippet-id=colmd]',
+ id: 'snippet-activated',
},
},
{
diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js
index 90f2f8a3d21..3ea5626009f 100644
--- a/addons/website/static/src/js/website.tour.js
+++ b/addons/website/static/src/js/website.tour.js
@@ -27,6 +27,9 @@
if (!step.element) {
step.orphan = true;
}
+ if (step.snippet) {
+ step.element = '#oe_snippets div.oe_snippet[data-snippet-id="'+step.snippet+'"] .oe_snippet_thumbnail';
+ }
if (step.trigger) {
if (step.trigger === 'click') {
step.triggers = function (callback) {
@@ -48,8 +51,9 @@
};
} else {
step.triggers = function (callback) {
- var emitter = step.trigger.emitter || $(step.element);
- emitter.one(step.trigger.id, function customHandler () {
+ var emitter = _.isString(step.trigger.emitter) ? $(step.trigger.emitter) : (step.trigger.emitter || $(step.element));
+ emitter.on(step.trigger.id, function customHandler () {
+ console.log(arguments);
(callback || self.moveToNextStep).apply(self, arguments);
});
};
@@ -164,7 +168,7 @@
$('.popover.tour').remove();
function advance () {
if (_.isFunction(callback)) {
- callback.call(self);
+ callback.apply(self);
}
}
$(document.body).one('mouseup', advance);
@@ -215,7 +219,17 @@
});
var TestConsole = website.TestConsole = {
- tests: []
+ dragAndDropSnippet: function (snippetId) {
+ var selector = '#oe_snippets div.oe_snippet[data-snippet-id="'+snippetId+'"] .oe_snippet_thumbnail';
+ var $thumbnail = $(selector).first();
+ var thumbnailPosition = $thumbnail.position();
+ $thumbnail.trigger($.Event( "mousedown", { which: 1, pageX: thumbnailPosition.left, pageY: thumbnailPosition.top }));
+ $thumbnail.trigger($.Event( "mousemove", { which: 1, pageX: thumbnailPosition.left+100, pageY: thumbnailPosition.top+700 }));
+ var $dropZone = $(".oe_drop_zone").first();
+ var dropPosition = $dropZone.position();
+ $dropZone.trigger($.Event( "mouseup", { which: 1, pageX: dropPosition.left, pageY: dropPosition.top }));
+ },
+ tests: [],
};
website.EditorBar.include({
@@ -247,16 +261,22 @@
id: tour.id,
run: function runTest () {
var actionSteps = _.filter(tour.steps, function (step) {
- return step.triggers;
+ return step.trigger;
});
var currentIndex = 0;
function executeStep (step) {
- var $element = $(step.element);
- step.triggers(function () {
- currentIndex = currentIndex + 1;
- executeStep(actionSteps[currentIndex]);
- });
- $element.click();
+ var $element = $(step.element);
+ step.triggers(function () {
+ currentIndex = currentIndex + 1;
+ executeStep(actionSteps[currentIndex]);
+ });
+ if (step.snippet && step.trigger === 'drag') {
+ setTimeout(function () {
+ TestConsole.dragAndDropSnippet(step.snippet);
+ }, 50);
+ } else {
+ $element.click();
+ }
}
executeStep(actionSteps[currentIndex]);
},
diff --git a/addons/website_blog/static/src/js/website.tour.blog.js b/addons/website_blog/static/src/js/website.tour.blog.js
index 989c4227a09..d541ca0bd3b 100644
--- a/addons/website_blog/static/src/js/website.tour.blog.js
+++ b/addons/website_blog/static/src/js/website.tour.blog.js
@@ -51,7 +51,7 @@
title: "Which Blog?",
content: "Blog posts are organized in multiple categories (news, job offers, events, etc). Select News and click Continue.",
trigger: {
- emitter: $('.modal select'),
+ emitter: '.modal select',
id: 'change',
predicate: function ($el, value) {
return $el.find('[value='+value+']').text().toLowerCase() === 'news';
@@ -89,7 +89,7 @@
},
{
stepId: 'drag-image-text',
- element: '#website-top-navbar [data-snippet-id=image-text].ui-draggable',
+ snippet: 'image-text',
placement: 'bottom',
title: "Drag & Drop a Block",
content: "Drag the 'Image-Text' block and drop it in your page.",
@@ -105,7 +105,7 @@
},
{
stepId: 'drag-text-block',
- element: '#website-top-navbar [data-snippet-id=text-block].ui-draggable',
+ snippet: 'text-block',
placement: 'bottom',
title: "Drag & Drop a block",
content: "Drag the 'Text Block' block and drop it below the image block.",
diff --git a/addons/website_event/static/src/js/website.tour.event.js b/addons/website_event/static/src/js/website.tour.event.js
index b9a0c7045d2..10582874103 100644
--- a/addons/website_event/static/src/js/website.tour.event.js
+++ b/addons/website_event/static/src/js/website.tour.event.js
@@ -75,7 +75,7 @@
},
{
stepId: 'drag-banner',
- element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable',
+ snippet: 'carousel',
placement: 'bottom',
title: "Drag & Drop a block",
content: "Drag the 'Banner' block and drop it in your page.",
@@ -91,7 +91,7 @@
},
{
stepId: 'drag-text-block',
- element: '#website-top-navbar [data-snippet-id=text-block].ui-draggable',
+ snipet: 'text-block',
placement: 'bottom',
title: "Drag & Drop a block",
content: "Drag the 'Text Block' block below the banner.",
@@ -107,7 +107,7 @@
},
{
stepId: 'drag-three-columns',
- element: '#website-top-navbar [data-snippet-id=three-columns].ui-draggable',
+ snippet: 'three-columns',
placement: 'bottom',
title: "Drag & Drop a block",
content: "Drag the 'Three Columns' block at the bottom.",
diff --git a/addons/website_sale/static/src/js/website.tour.shop.js b/addons/website_sale/static/src/js/website.tour.shop.js
index c323e5185e4..5a4d0c04939 100644
--- a/addons/website_sale/static/src/js/website.tour.shop.js
+++ b/addons/website_sale/static/src/js/website.tour.shop.js
@@ -113,7 +113,7 @@
},
{
stepId: 'drag-big-picture',
- element: '#website-top-navbar [data-snippet-id=big-picture].ui-draggable',
+ snippet: 'big-picture',
placement: 'bottom',
title: "Drag & Drop a block",
content: "Drag the 'Big Picture' block and drop it in your page.",