4 var website = openerp.website;
6 website.EditorBar.include({
8 this.registerTour(new website.BannerTour(this));
13 website.BannerTour = website.Tour.extend({
14 id: 'banner-tutorial',
15 name: "Insert a banner",
16 startPath: '/page/website.homepage',
17 init: function (editor) {
24 title: "Welcome to your website!",
25 content: "This tutorial will guide you to build your home page. We will start by adding a banner.",
26 template: self.popover({ next: "Start Tutorial", end: "Skip It" }),
30 element: 'button[data-action=edit]',
32 title: "Edit this page",
33 content: "Every page of your website can be modified through the <i>Edit</i> button.",
35 editor.on('tour:editor_bar_loaded', editor, function () {
36 self.movetoStep('add-block');
42 element: 'button[data-action=snippet]',
44 title: "Insert building blocks",
45 content: "To add content in a page, you can insert building blocks.",
47 $('button[data-action=snippet]').click(function () {
48 self.movetoStep('drag-banner');
53 stepId: 'drag-banner',
54 element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable',
56 title: "Drag & Drop a Banner",
57 content: "Drag the Banner block and drop it in your page.",
59 var $body = $(document.body);
60 function beginDrag () {
61 $('.popover.tour').remove();
62 function goToNextStep () {
63 $('#snippets').toggle();
64 self.movetoStep('edit-title');
65 $body.off('mouseup', goToNextStep);
67 $body.off('mousedown', beginDrag);
68 $body.on('mouseup', goToNextStep);
70 $body.on('mousedown', beginDrag);
75 element: '#wrap [data-snippet-id=carousel]:first .carousel-caption',
77 title: "Customize banner's text",
78 content: "Click in the text and start editing it. Click continue once it's done.",
79 template: self.popover({ next: "Continue" }),
81 var $banner = $("#wrap [data-snippet-id=carousel]:first");
88 stepId: 'customize-banner',
89 element: '.oe_overlay_options .oe_options',
91 title: "Customize the banner",
92 content: "You can customize characteristic of any blocks through the Customize menu. For instance, change the background of the banner.",
93 template: self.popover({ next: "Continue" }),
95 $('.dropdown-menu [name=carousel-background]').click(function () {
96 self.movetoStep('save-changes');
101 stepId: 'save-changes',
102 element: 'button[data-action=save]',
105 title: "Save your modifications",
106 content: "Once you click on save, your website page is updated.",
107 onHide: function () {
108 self.saveStep('part-2');
114 title: "Congratulation!",
115 content: "Your homepage have been updated. Now, we suggest you insert another snippet to overview possible customization.",
116 template: self.popover({ next: "Continue" }),
119 stepId: 'show-tutorials',
120 element: '#help-menu-button',
123 title: "Help is always available",
124 content: "You can always click here if you want more helps or continue to build and get more tips about your website contents like page menu, ...",
125 template: self.popover({ end: "Close" }),
128 return this._super();
130 resume: function () {
131 return (this.isCurrentStep('part-2') || this.isCurrentStep('show-tutorials')) && !this.tour.ended();