diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js index 9c8afcd61e5..65099d03986 100644 --- a/addons/website/static/src/js/website.tour.banner.js +++ b/addons/website/static/src/js/website.tour.banner.js @@ -4,117 +4,106 @@ 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 = [ - { - 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") }, - }, - { - waitNot: '.popover.tour', - element: 'button[data-action=edit]', - placement: 'bottom', - title: _t("Edit this page"), - content: _t("Every page of your website can be modified through the Edit button."), - popover: { fixed: true }, - }, - { - element: 'button[data-action=snippet]', - placement: 'bottom', - title: _t("Insert building blocks"), - content: _t("Click here to insert blocks of centent in the page."), - popover: { fixed: true }, - }, - { - snippet: '#snippet_structure .oe_snippet:first', - placement: 'bottom', - title: _t("Drag & Drop a Banner"), - content: _t("Drag the Banner block and drop it in your page."), - popover: { fixed: true }, - }, - { - waitFor: '.oe_overlay_options .oe_options:visible', - element: '#wrap .carousel:first .carousel-caption > div', - placement: 'top', - title: _t("Customize banner's text"), - content: _t("Click in the text and start editing it."), - popover: { next: _t("Continue") }, - }, - { - element: '.oe_overlay_options .oe_options:visible', - placement: 'left', - title: _t("Customize the banner"), - content: _t("Customize any block through this menu. Try to change the background of the banner."), - popover: { next: _t("Continue") }, - }, - { - waitNot: '.popover.tour', - element: 'button[data-action=snippet]', - placement: 'bottom', - title: _t("Add Another Block"), - content: _t("Let's add another building block to your page."), - popover: { fixed: true }, - }, - { - snippet: '#snippet_structure .oe_snippet:eq(6)', - placement: 'bottom', - title: _t("Drag & Drop This Block"), - content: _t("Drag the 'Features' block and drop it below the banner."), - popover: { fixed: true }, - }, - { - waitFor: '.oe_overlay_options .oe_options:visible', - element: 'button[data-action=save]', - placement: 'right', - title: _t("Save your modifications"), - content: _t("Publish your page by clicking on the 'Save' button."), - popover: { fixed: true }, - }, - { - waitFor: 'button[data-action=edit]:visible', - title: _t("Good Job!"), - content: _t("Well done, you created your homepage."), - popover: { next: _t("Continue") }, - }, - { - waitNot: '.popover.tour', - element: 'a[data-action=show-mobile-preview]', - placement: 'bottom', - title: _t("Test Your Mobile Version"), - content: _t("Let's check how your homepage looks like on mobile devices."), - popover: { fixed: true }, - }, - { - element: '.modal:has(#mobile-viewport) button[data-dismiss=modal]', - placement: 'right', - title: _t("Check Mobile Preview"), - content: _t("Scroll to check rendering and then close the mobile preview."), - popover: { next: _t("Continue") }, - }, - { - waitNot: '.modal', - element: '#content-menu-button', - placement: 'left', - title: _t("Add new pages and menus"), - content: _t("The 'Content' menu allows you to add pages or add the top menu."), - popover: { next: _t("Close Tutorial") }, - }, - ]; - return this._super(); - }, + 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."), + popover: { next: _t("Start Tutorial"), end: _t("Skip It") }, + }, + { + waitNot: '.popover.tour', + element: 'button[data-action=edit]', + placement: 'bottom', + title: _t("Edit this page"), + content: _t("Every page of your website can be modified through the Edit button."), + popover: { fixed: true }, + }, + { + element: 'button[data-action=snippet]', + placement: 'bottom', + title: _t("Insert building blocks"), + content: _t("Click here to insert blocks of centent in the page."), + popover: { fixed: true }, + }, + { + snippet: '#snippet_structure .oe_snippet:first', + placement: 'bottom', + title: _t("Drag & Drop a Banner"), + content: _t("Drag the Banner block and drop it in your page."), + popover: { fixed: true }, + }, + { + waitFor: '.oe_overlay_options .oe_options:visible', + element: '#wrap .carousel:first .carousel-caption > div', + placement: 'top', + title: _t("Customize banner's text"), + content: _t("Click in the text and start editing it."), + popover: { next: _t("Continue") }, + }, + { + element: '.oe_overlay_options .oe_options:visible', + placement: 'left', + title: _t("Customize the banner"), + content: _t("Customize any block through this menu. Try to change the background of the banner."), + popover: { next: _t("Continue") }, + }, + { + waitNot: '.popover.tour', + element: 'button[data-action=snippet]', + placement: 'bottom', + title: _t("Add Another Block"), + content: _t("Let's add another building block to your page."), + popover: { fixed: true }, + }, + { + snippet: '#snippet_structure .oe_snippet:eq(6)', + placement: 'bottom', + title: _t("Drag & Drop This Block"), + content: _t("Drag the 'Features' block and drop it below the banner."), + popover: { fixed: true }, + }, + { + waitFor: '.oe_overlay_options .oe_options:visible', + element: 'button[data-action=save]', + placement: 'right', + title: _t("Save your modifications"), + content: _t("Publish your page by clicking on the 'Save' button."), + popover: { fixed: true }, + }, + { + waitFor: 'button[data-action=edit]:visible', + title: _t("Good Job!"), + content: _t("Well done, you created your homepage."), + popover: { next: _t("Continue") }, + }, + { + waitNot: '.popover.tour', + element: 'a[data-action=show-mobile-preview]', + placement: 'bottom', + title: _t("Test Your Mobile Version"), + content: _t("Let's check how your homepage looks like on mobile devices."), + popover: { fixed: true }, + }, + { + element: '.modal:has(#mobile-viewport) button[data-dismiss=modal]', + placement: 'right', + title: _t("Check Mobile Preview"), + content: _t("Scroll to check rendering and then close the mobile preview."), + popover: { next: _t("Continue") }, + }, + { + waitNot: '.modal', + element: '#content-menu-button', + placement: 'left', + title: _t("Add new pages and menus"), + content: _t("The 'Content' menu allows you to add pages or add the top menu."), + popover: { next: _t("Close Tutorial") }, + }, + ] }); }()); diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index b7e55fe166b..c5ccd1f42c9 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -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('
  • '+tour.name+'
    • ')); $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,434 +91,312 @@ $.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; + +var localStorage = window.localStorage; + +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; + } +}; +website.Tour.registerSteps = function (tour) { + if (tour.register) { + return; + } + tour.register = true; + + for (var index=0, len=tour.steps.length; 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'; } - website.Tour.busy = true; + if (!step.element) step.orphan = true; - if (automatic) { - this.localStorage.setItem("tour-"+this.id+"-test-automatic", true); - } else { - this.localStorage.removeItem("tour-"+this.id+"-test-automatic"); + 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'; } - this.automatic = automatic; + } + 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); + } - 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("#"); - return; - } - } - - 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(); - return; - } - - if (website.Tour.is_busy()) return; - - // 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 (!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); - } - return; - } - - 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 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 -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); - 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); - } + $('.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 ); +}; - this.tour.addSteps(this.steps); - }, +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())); +}; +website.Tour.waitNextStep = function (tour, step, overlaps) { + var time = new Date().getTime(); + var timer; - popoverTitle: function (options) { - try { - return openerp.qweb.render('website.tour_popover_title', options); - } catch (e) { - if (!this.automatic) throw e; - return options.title; - } - }, - popover: function (options) { - try { - return openerp.qweb.render('website.tour_popover', options); - } catch (e) { - if (!this.automatic) throw e; - return ""; - } - }, + window.onbeforeunload = function () { + clearTimeout(website.Tour.timer); + clearTimeout(website.Tour.testtimer); + }; - timer: null, - testtimer: null, - 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; - var time = new Date().getTime(); - var timer; - - window.onbeforeunload = function () { - clearTimeout(self.timer); - clearTimeout(self.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(self.timer); - step.busy = true; - self.tour.end(); - self.endTour(callback); - } - }); - - function checkNext () { - clearTimeout(self.timer); + // check popover activity + $(".popover.tour button") + .off() + .on("click", function () { + $(".popover.tour").remove(); if (step.busy) return; - if (self.check(step)) { + if (!$(this).is("[data-role='next']")) { + clearTimeout(website.Tour.timer); step.busy = true; - // use an other timeout for cke dom loading - setTimeout(function () { - self.nextStep(step.stepId, callback, overlaps); - }, self.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); - } + if (tour.tour) { + tour.tour.end(); } - self.timer = setTimeout(checkNext, self.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() - ); + tour.endTour(tour); } - } - 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) { - // 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); - - if (next) { + function checkNext () { + clearTimeout(website.Tour.timer); + if (step.busy) return; + if (website.Tour.check(step)) { + step.busy = true; + // use an other timeout for cke dom loading setTimeout(function () { - self.waitNextStep(next, callback, overlaps); - if (callback) setTimeout(function(){callback.call(self, next);}, self.defaultDelay); - }, next && next.wait || 0); - } else { - this.endTour(); - } - }, - endTour: function () { - var test = parseInt(this.localStorage.getItem("tour-"+this.id+"-test"),10) >= this.steps.length-1; - this.reset(); - if (test) { - console.log('ok'); - } else { - console.log('error'); - } - }, - autoNextStep: function () { - var self = this; - clearTimeout(self.testtimer); - - function autoStep () { - var step = self.current; - if (!step) return; - - if (step.autoComplete) { - step.autoComplete(tour); - } - - var $popover = $(".popover.tour"); - if ($popover.find("button[data-role='next']:visible").size()) { - $popover.find("button[data-role='next']:visible").click(); - $popover.remove(); - } - - var $element = $(step.element); - if (!$element.size()) return; - - 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); - - } else if (step.sampleText) { - - $element.trigger($.Event("keydown", { srcElement: $element })); - if ($element.is("input") ) { - $element.val(step.sampleText); - } if ($element.is("select")) { - $element.find("[value='"+step.sampleText+"'], option:contains('"+step.sampleText+"')").attr("selected", true); - $element.val(step.sampleText); - } else { - $element.html(step.sampleText); + 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"); + if(!$(self.current.element).is(":visible")) { + $popover.data("hide", true).fadeOut(300); + } else if($popover.data("hide")) { + $popover.data("hide", false).fadeIn(150); } - setTimeout(function () { - $element.trigger($.Event("keyup", { srcElement: $element })); - $element.trigger($.Event("change", { srcElement: $element })); - }, self.defaultDelay<<1); - - } else if ($element.is(":visible")) { - - $element.trigger($.Event("mouseenter", { srcElement: $element[0] })); - $element.trigger($.Event("mousedown", { srcElement: $element[0] })); - - var evt = document.createEvent("MouseEvents"); - evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); - $element[0].dispatchEvent(evt); - - // trigger after for step like: mouseenter, next step click on button display with mouseenter - setTimeout(function () { - $element.trigger($.Event("mouseup", { srcElement: $element[0] })); - $element.trigger($.Event("mouseleave", { srcElement: $element[0] })); - }, 1000); } - } - self.testtimer = setTimeout(autoStep, 100); - }, - autoDragAndDropSnippet: function (selector) { - 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: document.body.scrollWidth/2, pageY: document.body.scrollHeight/2 })); - 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; + website.Tour.timer = setTimeout(checkNext, website.Tour.defaultDelay); + } else { + website.Tour.error(tour, step, "Can't arrive to the next step"); } } - return website.Tour.busy; + checkNext(); }; +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 + tour.tour.goto(step.id); + step.onload(); + var next = tour.steps[step.id+1]; + + if (next) { + setTimeout(function () { + 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 { + 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(); + if (test) { + console.log('ok'); + } else { + console.log('error'); + } +}; +website.Tour.autoNextStep = function (tour, step) { + clearTimeout(website.Tour.testtimer); + + function autoStep () { + if (!step) return; + + if (step.autoComplete) { + step.autoComplete(tour); + } + + var $popover = $(".popover.tour"); + if ($popover.find("button[data-role='next']:visible").size()) { + $popover.find("button[data-role='next']:visible").click(); + $popover.remove(); + } + + var $element = $(step.element); + if (!$element.size()) return; + + if (step.snippet) { + + website.Tour.autoDragAndDropSnippet($element); + + } else if (step.sampleText) { + + $element.trigger($.Event("keydown", { srcElement: $element })); + if ($element.is("input") ) { + $element.val(step.sampleText); + } if ($element.is("select")) { + $element.find("[value='"+step.sampleText+"'], option:contains('"+step.sampleText+"')").attr("selected", true); + $element.val(step.sampleText); + } else { + $element.html(step.sampleText); + } + setTimeout(function () { + $element.trigger($.Event("keyup", { srcElement: $element })); + $element.trigger($.Event("change", { srcElement: $element })); + }, website.Tour.defaultDelay<<1); + + } else if ($element.is(":visible")) { + + $element.trigger($.Event("mouseenter", { srcElement: $element[0] })); + $element.trigger($.Event("mousedown", { srcElement: $element[0] })); + + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); + $element[0].dispatchEvent(evt); + + // trigger after for step like: mouseenter, next step click on button display with mouseenter + setTimeout(function () { + $element.trigger($.Event("mouseup", { srcElement: $element[0] })); + $element.trigger($.Event("mouseleave", { srcElement: $element[0] })); + }, 1000); + } + } + 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 })); + $thumbnail.trigger($.Event("mousemove", { which: 1, pageX: document.body.scrollWidth/2, pageY: document.body.scrollHeight/2 })); + var $dropZone = $(".oe_drop_zone").first(); + var dropPosition = $dropZone.position(); + $dropZone.trigger($.Event("mouseup", { which: 1, pageX: dropPosition.left, pageY: dropPosition.top })); +}; + +website.ready(website.Tour.running); }()); 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 3470e2e383b..050bf549225 100644 --- a/addons/website_blog/static/src/js/website.tour.blog.js +++ b/addons/website_blog/static/src/js/website.tour.blog.js @@ -4,117 +4,105 @@ 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({ - id: 'blog', - name: "Create a blog post", - testPath: '/(blog|blogpost)', - init: function () { - var self = this; - self.steps = [ - { - title: _t("New Blog Post"), - content: _t("Let's go through the first steps to write beautiful blog posts."), - popover: { next: _t("Start Tutorial"), end: _t("Skip") }, - }, - { - element: '#content-menu-button', - placement: 'left', - title: _t("Add Content"), - content: _t("Use this 'Content' menu to create a new blog post like any other document (page, menu, products, event, ...)."), - popover: { fixed: true }, - }, - { - element: 'a[data-action=new_blog_post]', - placement: 'left', - title: _t("New Blog Post"), - content: _t("Select this menu item to create a new blog post."), - popover: { fixed: true }, - }, - { - element: '.modal:has(#editor_new_blog) button.btn-primary', - placement: 'right', - title: _t("Create Blog Post"), - content: _t("Click Continue to create the blog post."), - }, - { - waitFor: 'body:has(button[data-action=save]:visible):has(.js_blog)', - title: _t("Blog Post Created"), - content: _t("This is your new blog post. Let's edit it."), - popover: { next: _t("Continue") }, - }, - { - element: 'h1[data-oe-expression="blog_post.name"]', - placement: 'bottom', - sampleText: 'New Blog', - title: _t("Set a Title"), - content: _t("Click on this area and set a catchy title for your blog post."), - }, - { - waitNot: '#wrap h1[data-oe-model="blog.post"]:contains("Blog Post Title")', - element: 'button[data-action=snippet]', - placement: 'left', - title: _t("Layout Your Blog Post"), - content: _t("Use well designed building blocks to structure the content of your blog. Click 'Insert Blocks' to add new content."), - popover: { fixed: true }, - }, - { - snippet: '#snippet_structure .oe_snippet:eq(2)', - placement: 'bottom', - title: _t("Drag & Drop a Block"), - content: _t("Drag this block and drop it in your page."), - popover: { fixed: true }, - }, - { - element: 'button[data-action=snippet]', - placement: 'bottom', - title: _t("Add Another Block"), - content: _t("Let's add another block to your post."), - popover: { fixed: true }, - }, - { - snippet: '#snippet_structure .oe_snippet:eq(4)', - placement: 'bottom', - title: _t("Drag & Drop a block"), - content: _t("Drag this block and drop it below the image block."), - popover: { fixed: true }, - }, - { - element: '.oe_active .oe_snippet_remove', - placement: 'top', - title: _t("Delete the block"), - content: _t("From this toolbar you can move, duplicate or delete the selected zone. Click on the garbage can image to delete the block. Or click on the Title and delete it."), - }, - { - waitNot: '.oe_active .oe_snippet_remove:visible', - element: 'button[data-action=save]', - placement: 'right', - title: _t("Save Your Blog"), - content: _t("Click the Save button to record changes on the page."), - popover: { fixed: true }, - }, - { - waitFor: 'button[data-action=edit]:visible', - element: 'button.btn-danger.js_publish_btn', - placement: 'top', - title: _t("Publish Your Post"), - content: _t("Your blog post is not yet published. You can update this draft version and publish it once you are ready."), - }, - { - waitFor: '.js_publish_management button.js_publish_btn.btn-success:visible', - title: "Thanks!", - content: _t("This tutorial is finished. To discover more features, improve the content of this page and try the Promote button in the top right menu."), - popover: { next: _t("Close Tutorial") }, - }, - ]; - return this._super(); - }, + website.Tour.register({ + id: 'blog', + 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."), + popover: { next: _t("Start Tutorial"), end: _t("Skip") }, + }, + { + element: '#content-menu-button', + placement: 'left', + title: _t("Add Content"), + content: _t("Use this 'Content' menu to create a new blog post like any other document (page, menu, products, event, ...)."), + popover: { fixed: true }, + }, + { + element: 'a[data-action=new_blog_post]', + placement: 'left', + title: _t("New Blog Post"), + content: _t("Select this menu item to create a new blog post."), + popover: { fixed: true }, + }, + { + element: '.modal:has(#editor_new_blog) button.btn-primary', + placement: 'right', + title: _t("Create Blog Post"), + content: _t("Click Continue to create the blog post."), + }, + { + waitFor: 'body:has(button[data-action=save]:visible):has(.js_blog)', + title: _t("Blog Post Created"), + content: _t("This is your new blog post. Let's edit it."), + popover: { next: _t("Continue") }, + }, + { + element: 'h1[data-oe-expression="blog_post.name"]', + placement: 'bottom', + sampleText: 'New Blog', + title: _t("Set a Title"), + content: _t("Click on this area and set a catchy title for your blog post."), + }, + { + waitNot: '#wrap h1[data-oe-model="blog.post"]:contains("Blog Post Title")', + element: 'button[data-action=snippet]', + placement: 'left', + title: _t("Layout Your Blog Post"), + content: _t("Use well designed building blocks to structure the content of your blog. Click 'Insert Blocks' to add new content."), + popover: { fixed: true }, + }, + { + snippet: '#snippet_structure .oe_snippet:eq(2)', + placement: 'bottom', + title: _t("Drag & Drop a Block"), + content: _t("Drag this block and drop it in your page."), + popover: { fixed: true }, + }, + { + element: 'button[data-action=snippet]', + placement: 'bottom', + title: _t("Add Another Block"), + content: _t("Let's add another block to your post."), + popover: { fixed: true }, + }, + { + snippet: '#snippet_structure .oe_snippet:eq(4)', + placement: 'bottom', + title: _t("Drag & Drop a block"), + content: _t("Drag this block and drop it below the image block."), + popover: { fixed: true }, + }, + { + element: '.oe_active .oe_snippet_remove', + placement: 'top', + title: _t("Delete the block"), + content: _t("From this toolbar you can move, duplicate or delete the selected zone. Click on the garbage can image to delete the block. Or click on the Title and delete it."), + }, + { + waitNot: '.oe_active .oe_snippet_remove:visible', + element: 'button[data-action=save]', + placement: 'right', + title: _t("Save Your Blog"), + content: _t("Click the Save button to record changes on the page."), + popover: { fixed: true }, + }, + { + waitFor: 'button[data-action=edit]:visible', + element: 'button.btn-danger.js_publish_btn', + placement: 'top', + title: _t("Publish Your Post"), + content: _t("Your blog post is not yet published. You can update this draft version and publish it once you are ready."), + }, + { + waitFor: '.js_publish_management button.js_publish_btn.btn-success:visible', + title: "Thanks!", + content: _t("This tutorial is finished. To discover more features, improve the content of this page and try the Promote button in the top right menu."), + popover: { next: _t("Close Tutorial") }, + }, + ] }); }()); 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 ef013398acb..07a12d81f34 100644 --- a/addons/website_event/static/src/js/website.tour.event.js +++ b/addons/website_event/static/src/js/website.tour.event.js @@ -4,115 +4,103 @@ 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({ - id: 'event', - name: "Create an event", - testPath: '/event(/[0-9]+/register)?', - init: function (editor) { - var self = this; - self.steps = [ - { - title: _t("Create an Event"), - content: _t("Let's go through the first steps to publish a new event."), - popover: { next: _t("Start Tutorial"), end: _t("Skip It") }, - }, - { - element: '#content-menu-button', - placement: 'left', - title: _t("Add Content"), - content: _t("The Content menu allows you to create new pages, events, menus, etc."), - popover: { fixed: true }, - }, - { - element: 'a[data-action=new_event]', - placement: 'left', - title: _t("New Event"), - content: _t("Click here to create a new event."), - popover: { fixed: true }, - }, - { - element: '.modal #editor_new_event input[type=text]', - sampleText: 'Advanced Technical Training', - placement: 'right', - title: _t("Create an Event Name"), - content: _t("Create a name for your new event and click 'Continue'. e.g: Technical Training"), - }, - { - waitNot: '.modal input[type=text]:not([value!=""])', - element: '.modal button.btn-primary', - placement: 'right', - title: _t("Create Event"), - content: _t("Click Continue to create the event."), - }, - { - waitFor: 'body:has(button[data-action=save]:visible):has(.js_event)', - title: _t("New Event Created"), - content: _t("This is your new event page. We will edit the event presentation page."), - popover: { next: _t("Continue") }, - }, - { - element: 'button[data-action=snippet]', - placement: 'bottom', - title: _t("Layout your event"), - content: _t("Insert blocks to layout the body of your event."), - popover: { fixed: true }, - }, - { - snippet: '#snippet_structure .oe_snippet:eq(2)', - placement: 'bottom', - title: _t("Drag & Drop a block"), - content: _t("Drag the 'Image-Text' block and drop it in your page."), - popover: { fixed: true }, - }, - { - - element: 'button[data-action=snippet]', - placement: 'bottom', - title: _t("Layout your event"), - content: _t("Insert another block to your event."), - popover: { fixed: true }, - }, - { - snippet: '#snippet_structure .oe_snippet:eq(4)', - placement: 'bottom', - title: _t("Drag & Drop a block"), - content: _t("Drag the 'Text Block' in your event page."), - popover: { fixed: true }, - }, - { - element: 'button[data-action=save]', - placement: 'right', - title: _t("Save your modifications"), - content: _t("Once you click on save, your event is updated."), - popover: { fixed: true }, - }, - { - waitFor: 'button[data-action=edit]:visible', - element: 'button.btn-danger.js_publish_btn', - placement: 'top', - title: _t("Publish your event"), - content: _t("Click to publish your event."), - }, - { - waitFor: '.js_publish_management button.js_publish_btn.btn-success:visible', - element: '.js_publish_management button[data-toggle="dropdown"]', - placement: 'left', - title: _t("Customize your event"), - content: _t("Click here to customize your event further."), - }, - { - element: '.js_publish_management ul>li>a:last:visible', - }, - ]; - return this._super(); - } + website.Tour.register({ + id: 'event', + 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."), + popover: { next: _t("Start Tutorial"), end: _t("Skip It") }, + }, + { + element: '#content-menu-button', + placement: 'left', + title: _t("Add Content"), + content: _t("The Content menu allows you to create new pages, events, menus, etc."), + popover: { fixed: true }, + }, + { + element: 'a[data-action=new_event]', + placement: 'left', + title: _t("New Event"), + content: _t("Click here to create a new event."), + popover: { fixed: true }, + }, + { + element: '.modal #editor_new_event input[type=text]', + sampleText: 'Advanced Technical Training', + placement: 'right', + title: _t("Create an Event Name"), + content: _t("Create a name for your new event and click 'Continue'. e.g: Technical Training"), + }, + { + waitNot: '.modal input[type=text]:not([value!=""])', + element: '.modal button.btn-primary', + placement: 'right', + title: _t("Create Event"), + content: _t("Click Continue to create the event."), + }, + { + waitFor: 'body:has(button[data-action=save]:visible):has(.js_event)', + title: _t("New Event Created"), + content: _t("This is your new event page. We will edit the event presentation page."), + popover: { next: _t("Continue") }, + }, + { + element: 'button[data-action=snippet]', + placement: 'bottom', + title: _t("Layout your event"), + content: _t("Insert blocks to layout the body of your event."), + popover: { fixed: true }, + }, + { + snippet: '#snippet_structure .oe_snippet:eq(2)', + placement: 'bottom', + title: _t("Drag & Drop a block"), + content: _t("Drag the 'Image-Text' block and drop it in your page."), + popover: { fixed: true }, + }, + { + + element: 'button[data-action=snippet]', + placement: 'bottom', + title: _t("Layout your event"), + content: _t("Insert another block to your event."), + popover: { fixed: true }, + }, + { + snippet: '#snippet_structure .oe_snippet:eq(4)', + placement: 'bottom', + title: _t("Drag & Drop a block"), + content: _t("Drag the 'Text Block' in your event page."), + popover: { fixed: true }, + }, + { + element: 'button[data-action=save]', + placement: 'right', + title: _t("Save your modifications"), + content: _t("Once you click on save, your event is updated."), + popover: { fixed: true }, + }, + { + waitFor: 'button[data-action=edit]:visible', + element: 'button.btn-danger.js_publish_btn', + placement: 'top', + title: _t("Publish your event"), + content: _t("Click to publish your event."), + }, + { + waitFor: '.js_publish_management button.js_publish_btn.btn-success:visible', + element: '.js_publish_management button[data-toggle="dropdown"]', + placement: 'left', + title: _t("Customize your event"), + content: _t("Click here to customize your event further."), + }, + { + element: '.js_publish_management ul>li>a:last:visible', + }, + ] }); }()); diff --git a/addons/website_event_sale/static/src/js/website.tour.event_sale.js b/addons/website_event_sale/static/src/js/website.tour.event_sale.js index 48b9b62b349..92e57638cc8 100644 --- a/addons/website_event_sale/static/src/js/website.tour.event_sale.js +++ b/addons/website_event_sale/static/src/js/website.tour.event_sale.js @@ -3,77 +3,72 @@ var website = openerp.website; - website.Tour.EventSaleTest = website.Tour.extend({ - id: 'event_buy_tickets', + website.Tour.register({ + id: 'event_buy_tickets', name: "Try to buy tickets for event", path: '/event', - init: function () { - var self = this; - self.steps = [ - { - title: "select event", - element: 'a[href*="/event"]:contains("Open Days in Los Angeles")', + mode: 'test', + steps: [ + { + title: "select event", + element: 'a[href*="/event"]:contains("Open Days in Los Angeles")', + }, + { + title: "go to register page", + waitNot: 'a[href*="/event"]:contains("Functional Webinar")', + onload: function () { + // use onload if website_event_track is installed + if (!$('form:contains("Ticket Type")').size()) { + window.location.href = $('a[href*="/event"][href*="/register"]').attr("href"); + } }, - { - title: "go to register page", - waitNot: 'a[href*="/event"]:contains("Functional Webinar")', - onload: function () { - // use onload if website_event_track is installed - if (!$('form:contains("Ticket Type")').size()) { - window.location.href = $('a[href*="/event"][href*="/register"]').attr("href"); - } - }, + }, + { + title: "select 2 Standard tickets", + element: 'select[name="ticket-1"]', + sampleText: '2', + }, + { + title: "select 3 VIP tickets", + waitFor: 'select[name="ticket-1"] option:contains(2):selected', + element: 'select[name="ticket-2"]', + sampleText: '3', + }, + { + title: "Order Now", + waitFor: 'select[name="ticket-2"] option:contains(3):selected', + element: '.btn-primary:contains("Order Now")', + }, + { + title: "Complete checkout", + waitFor: '#top_menu .my_cart_quantity:contains(5)', + element: 'form[action="/shop/confirm_order"] .btn:contains("Confirm")', + onload: function (tour) { + if ($("input[name='name']").val() === "") + $("input[name='name']").val("website_sale-test-shoptest"); + if ($("input[name='email']").val() === "") + $("input[name='email']").val("website_event_sale_test_shoptest@websiteeventsaletest.optenerp.com"); + $("input[name='phone']").val("123"); + $("input[name='street']").val("123"); + $("input[name='city']").val("123"); + $("input[name='zip']").val("123"); + $("select[name='country_id']").val("21"); }, - { - title: "select 2 Standard tickets", - element: 'select[name="ticket-1"]', - sampleText: '2', - }, - { - title: "select 3 VIP tickets", - waitFor: 'select[name="ticket-1"] option:contains(2):selected', - element: 'select[name="ticket-2"]', - sampleText: '3', - }, - { - title: "Order Now", - waitFor: 'select[name="ticket-2"] option:contains(3):selected', - element: '.btn-primary:contains("Order Now")', - }, - { - title: "Complete checkout", - waitFor: '#top_menu .my_cart_quantity:contains(5)', - element: 'form[action="/shop/confirm_order"] .btn:contains("Confirm")', - onload: function (tour) { - if ($("input[name='name']").val() === "") - $("input[name='name']").val("website_sale-test-shoptest"); - if ($("input[name='email']").val() === "") - $("input[name='email']").val("website_event_sale_test_shoptest@websiteeventsaletest.optenerp.com"); - $("input[name='phone']").val("123"); - $("input[name='street']").val("123"); - $("input[name='city']").val("123"); - $("input[name='zip']").val("123"); - $("select[name='country_id']").val("21"); - }, - }, - { - title: "select payment", - element: '#payment_method label:has(img[title="transfer"]) input', - }, - { - title: "Pay Now", - waitFor: '#payment_method label:has(input:checked):has(img[title="transfer"])', - element: '.oe_sale_acquirer_button .btn[name="submit"]:visible', - }, - { - title: "finish", - waitFor: '.oe_website_sale:contains("Thank you for your order")', - } - ]; - return this._super(); - }, + }, + { + title: "select payment", + element: '#payment_method label:has(img[title="transfer"]) input', + }, + { + title: "Pay Now", + waitFor: '#payment_method label:has(input:checked):has(img[title="transfer"])', + element: '.oe_sale_acquirer_button .btn[name="submit"]:visible', + }, + { + title: "finish", + waitFor: '.oe_website_sale:contains("Thank you for your order")', + } + ] }); - // for test without editor bar - website.Tour.add(website.Tour.EventSaleTest); }()); diff --git a/addons/website_sale/static/src/js/website.tour.sale.js b/addons/website_sale/static/src/js/website.tour.sale.js index c9dd7e5e301..c7526b2468f 100644 --- a/addons/website_sale/static/src/js/website.tour.sale.js +++ b/addons/website_sale/static/src/js/website.tour.sale.js @@ -3,92 +3,87 @@ var website = openerp.website; - website.Tour.ShopTest = website.Tour.extend({ - id: 'shop_buy_product', + website.Tour.register({ + id: 'shop_buy_product', name: "Try to buy products", path: '/shop', - init: function () { - var self = this; - self.steps = [ - { - title: "select ipod", - element: '.oe_product_cart a:contains("iPod")', + mode: 'test', + steps: [ + { + title: "select ipod", + element: '.oe_product_cart a:contains("iPod")', + }, + { + title: "select ipod 32Go", + element: 'input[name="product_id"]:not([checked])', + }, + { + title: "click on add to cart", + waitFor: 'input[name="product_id"]:eq(1)[checked]', + element: 'form[action="/shop/add_cart"] .btn', + }, + { + title: "add suggested", + element: 'form[action="/shop/add_cart"] .btn-link:contains("Add to Cart")', + }, + { + title: "add one more iPod", + waitFor: '.my_cart_quantity:contains(2)', + element: '#mycart_products tr:contains("iPod: 32 Gb") a.js_add_cart_json:eq(1)', + }, + { + title: "remove Headphones", + waitFor: '#mycart_products tr:contains("iPod: 32 Gb") input.js_quantity[value=2]', + element: '#mycart_products tr:contains("Apple In-Ear Headphones") a.js_add_cart_json:first', + }, + { + title: "set one iPod", + waitNot: '#mycart_products tr:contains("Apple In-Ear Headphones")', + element: '#mycart_products input.js_quantity', + sampleText: '1', + }, + { + title: "go to checkout", + waitFor: '#mycart_products input.js_quantity[value=1]', + element: 'a[href="/shop/checkout"]', + }, + { + title: "test with input error", + element: 'form[action="/shop/confirm_order"] .btn:contains("Confirm")', + onload: function (tour) { + $("input[name='phone']").val(""); }, - { - title: "select ipod 32Go", - element: 'input[name="product_id"]:not([checked])', + }, + { + title: "test without input error", + waitFor: 'form[action="/shop/confirm_order"] .has-error', + element: 'form[action="/shop/confirm_order"] .btn:contains("Confirm")', + onload: function (tour) { + if ($("input[name='name']").val() === "") + $("input[name='name']").val("website_sale-test-shoptest"); + if ($("input[name='email']").val() === "") + $("input[name='email']").val("website_sale_test_shoptest@websitesaletest.optenerp.com"); + $("input[name='phone']").val("123"); + $("input[name='street']").val("123"); + $("input[name='city']").val("123"); + $("input[name='zip']").val("123"); + $("select[name='country_id']").val("21"); }, - { - title: "click on add to cart", - waitFor: 'input[name="product_id"]:eq(1)[checked]', - element: 'form[action="/shop/add_cart"] .btn', - }, - { - title: "add suggested", - element: 'form[action="/shop/add_cart"] .btn-link:contains("Add to Cart")', - }, - { - title: "add one more iPod", - waitFor: '.my_cart_quantity:contains(2)', - element: '#mycart_products tr:contains("iPod: 32 Gb") a.js_add_cart_json:eq(1)', - }, - { - title: "remove Headphones", - waitFor: '#mycart_products tr:contains("iPod: 32 Gb") input.js_quantity[value=2]', - element: '#mycart_products tr:contains("Apple In-Ear Headphones") a.js_add_cart_json:first', - }, - { - title: "set one iPod", - waitNot: '#mycart_products tr:contains("Apple In-Ear Headphones")', - element: '#mycart_products input.js_quantity', - sampleText: '1', - }, - { - title: "go to checkout", - waitFor: '#mycart_products input.js_quantity[value=1]', - element: 'a[href="/shop/checkout"]', - }, - { - title: "test with input error", - element: 'form[action="/shop/confirm_order"] .btn:contains("Confirm")', - onload: function (tour) { - $("input[name='phone']").val(""); - }, - }, - { - title: "test without input error", - waitFor: 'form[action="/shop/confirm_order"] .has-error', - element: 'form[action="/shop/confirm_order"] .btn:contains("Confirm")', - onload: function (tour) { - if ($("input[name='name']").val() === "") - $("input[name='name']").val("website_sale-test-shoptest"); - if ($("input[name='email']").val() === "") - $("input[name='email']").val("website_sale_test_shoptest@websitesaletest.optenerp.com"); - $("input[name='phone']").val("123"); - $("input[name='street']").val("123"); - $("input[name='city']").val("123"); - $("input[name='zip']").val("123"); - $("select[name='country_id']").val("21"); - }, - }, - { - title: "select payment", - element: '#payment_method label:has(img[title="transfer"]) input', - }, - { - title: "Pay Now", - waitFor: '#payment_method label:has(input:checked):has(img[title="transfer"])', - element: '.oe_sale_acquirer_button .btn[name="submit"]:visible', - }, - { - title: "finish", - waitFor: '.oe_website_sale:contains("Thank you for your order")', - } - ]; - return this._super(); - }, + }, + { + title: "select payment", + element: '#payment_method label:has(img[title="transfer"]) input', + }, + { + title: "Pay Now", + waitFor: '#payment_method label:has(input:checked):has(img[title="transfer"])', + element: '.oe_sale_acquirer_button .btn[name="submit"]:visible', + }, + { + title: "finish", + waitFor: '.oe_website_sale:contains("Thank you for your order")', + } + ] }); - // for test without editor bar - website.Tour.add(website.Tour.ShopTest); }()); 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 adb4a9e556c..bd03523e054 100644 --- a/addons/website_sale/static/src/js/website.tour.shop.js +++ b/addons/website_sale/static/src/js/website.tour.shop.js @@ -4,141 +4,129 @@ 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 = [ - { - 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."), - popover: { next: _t("Start Tutorial"), end: _t("Skip It") }, - }, - { - element: '#content-menu-button', - placement: 'left', - title: _t("Create your first product"), - content: _t("Click here to add a new product."), - popover: { fixed: true }, - }, - { - element: 'a[data-action=new_product]', - placement: 'left', - title: _t("Create a new product"), - content: _t("Select 'New Product' to create it and manage its properties to boost your sales."), - popover: { fixed: true }, - }, - { - element: '.modal #editor_new_product input[type=text]', - sampleText: 'New Product', - placement: 'right', - title: _t("Choose name"), - content: _t("Enter a name for your new product then click 'Continue'."), - }, - { - waitNot: '.modal input[type=text]:not([value!=""])', - element: '.modal button.btn-primary', - placement: 'right', - title: _t("Create Product"), - content: _t("Click Continue to create the product."), - }, - { - waitFor: 'body:has(button[data-action=save]:visible):has(.js_sale)', - title: _t("New product created"), - content: _t("This page contains all the information related to the new product."), - popover: { next: _t("Continue") }, - }, - { - element: '.product_price .oe_currency_value', - sampleText: '20.50', - placement: 'left', - title: _t("Change the price"), - content: _t("Edit the price of this product by clicking on the amount."), - }, - { - waitNot: '.product_price .oe_currency_value:containsExact(1.00)', - element: '#wrap img.img:first', - placement: 'top', - title: _t("Update image"), - content: _t("Click here to set an image describing your product."), - }, - { - element: 'button.hover-edition-button:visible', - placement: 'top', - title: _t("Update image"), - content: _t("Click here to set an image describing your product."), - }, - { - wait: 500, - element: '.well a.pull-right', - placement: 'bottom', - title: _t("Select an Image"), - content: _t("Let's select an existing image."), - popover: { fixed: true }, - }, - { - element: 'img[alt=imac]', - placement: 'bottom', - title: _t("Select an Image"), - content: _t("Let's select an imac image."), - popover: { fixed: true }, - }, - { - waitNot: 'img[alt=imac]', - element: '.modal-content button.save', - placement: 'bottom', - title: _t("Select this Image"), - content: _t("Click to add the image to the product decsription."), - popover: { fixed: true }, - }, - { - waitNot: '.modal-content:visible', - element: 'button[data-action=snippet]', - placement: 'bottom', - title: _t("Describe the Product"), - content: _t("Insert blocks like text-image, or gallery to fully describe the product."), - popover: { fixed: true }, - }, - { - snippet: '#snippet_structure .oe_snippet:eq(7)', - placement: 'bottom', - title: _t("Drag & Drop a block"), - content: _t("Drag the 'Big Picture' block and drop it in your page."), - popover: { fixed: true }, - }, - { - element: 'button[data-action=save]', - placement: 'right', - title: _t("Save your modifications"), - content: _t("Once you click on save, your product is updated."), - popover: { fixed: true }, + 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."), + popover: { next: _t("Start Tutorial"), end: _t("Skip It") }, + }, + { + element: '#content-menu-button', + placement: 'left', + title: _t("Create your first product"), + content: _t("Click here to add a new product."), + popover: { fixed: true }, + }, + { + element: 'a[data-action=new_product]', + placement: 'left', + title: _t("Create a new product"), + content: _t("Select 'New Product' to create it and manage its properties to boost your sales."), + popover: { fixed: true }, + }, + { + element: '.modal #editor_new_product input[type=text]', + sampleText: 'New Product', + placement: 'right', + title: _t("Choose name"), + content: _t("Enter a name for your new product then click 'Continue'."), + }, + { + waitNot: '.modal input[type=text]:not([value!=""])', + element: '.modal button.btn-primary', + placement: 'right', + title: _t("Create Product"), + content: _t("Click Continue to create the product."), + }, + { + waitFor: 'body:has(button[data-action=save]:visible):has(.js_sale)', + title: _t("New product created"), + content: _t("This page contains all the information related to the new product."), + popover: { next: _t("Continue") }, + }, + { + element: '.product_price .oe_currency_value', + sampleText: '20.50', + placement: 'left', + title: _t("Change the price"), + content: _t("Edit the price of this product by clicking on the amount."), + }, + { + waitNot: '.product_price .oe_currency_value:containsExact(1.00)', + element: '#wrap img.img:first', + placement: 'top', + title: _t("Update image"), + content: _t("Click here to set an image describing your product."), + }, + { + element: 'button.hover-edition-button:visible', + placement: 'top', + title: _t("Update image"), + content: _t("Click here to set an image describing your product."), + }, + { + wait: 500, + element: '.well a.pull-right', + placement: 'bottom', + title: _t("Select an Image"), + content: _t("Let's select an existing image."), + popover: { fixed: true }, + }, + { + element: 'img[alt=imac]', + placement: 'bottom', + title: _t("Select an Image"), + content: _t("Let's select an imac image."), + popover: { fixed: true }, + }, + { + waitNot: 'img[alt=imac]', + element: '.modal-content button.save', + placement: 'bottom', + title: _t("Select this Image"), + content: _t("Click to add the image to the product decsription."), + popover: { fixed: true }, + }, + { + waitNot: '.modal-content:visible', + element: 'button[data-action=snippet]', + placement: 'bottom', + title: _t("Describe the Product"), + content: _t("Insert blocks like text-image, or gallery to fully describe the product."), + popover: { fixed: true }, + }, + { + snippet: '#snippet_structure .oe_snippet:eq(7)', + placement: 'bottom', + title: _t("Drag & Drop a block"), + content: _t("Drag the 'Big Picture' block and drop it in your page."), + popover: { fixed: true }, + }, + { + element: 'button[data-action=save]', + placement: 'right', + title: _t("Save your modifications"), + content: _t("Once you click on save, your product is updated."), + popover: { fixed: true }, - }, - { - waitFor: '#website-top-navbar button[data-action="edit"]:visible', - element: '.js_publish_management button.js_publish_btn.btn-danger', - placement: 'top', - title: _t("Publish your product"), - content: _t("Click to publish your product so your customers can see it."), - }, - { - waitFor: '.js_publish_management button.js_publish_btn.btn-success:visible', - title: _t("Congratulations"), - content: _t("Congratulations! You just created and published your first product."), - popover: { next: _t("Close Tutorial") }, - }, - ]; - return this._super(); - } + }, + { + waitFor: '#website-top-navbar button[data-action="edit"]:visible', + element: '.js_publish_management button.js_publish_btn.btn-danger', + placement: 'top', + title: _t("Publish your product"), + content: _t("Click to publish your product so your customers can see it."), + }, + { + waitFor: '.js_publish_management button.js_publish_btn.btn-success:visible', + title: _t("Congratulations"), + content: _t("Congratulations! You just created and published your first product."), + popover: { next: _t("Close Tutorial") }, + }, + ] }); }());