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