addons/website/static/src/js/website.tour.banner.js

   1 (function () {
   2     'use strict';
   3
   4     var website = openerp.website;
   5
   6     var render = website.tour.render;
   7
   8     website.EditorBannerTour = website.EditorTour.extend({
   9         id: 'banner-tutorial',
  10         name: "Insert a banner",
  11         startPath: '/page/website.homepage',
  12         init: function (editor) {
  13             var self = this;
  14             var $body = $(document.body);
  15             self.steps = [
  16                 {
  17                     stepId: 'welcome',
  18                     orphan: true,
  19                     backdrop: true,
  20                     title: "Welcome to your website!",
  21                     content: "This tutorial will guide you to build your home page. We will start by adding a banner.",
  22                     template: render('website.tour_popover', { next: "Start Tutorial", end: "Skip It" }),
  23                 },
  24                 {
  25                     stepId: 'edit-page',
  26                     element: 'button[data-action=edit]',
  27                     placement: 'bottom',
  28                     title: "Edit this page",
  29                     content: "Every page of your website can be modified through the <i>Edit</i> button.",
  30                     template: render('website.tour_popover'),
  31                     onShow: function () {
  32                         editor.on('tour:editor_bar_loaded', editor, function () {
  33                             self.movetoStep('add-block');
  34                         });
  35                     },
  36                 },
  37                 {
  38                     stepId: 'add-block',
  39                     element: 'button[data-action=snippet]',
  40                     placement: 'bottom',
  41                     title: "Insert building blocks",
  42                     content: "To add content in a page, you can insert building blocks.",
  43                     template: render('website.tour_popover'),
  44                     onShow: function () {
  45                         $('button[data-action=snippet]').click(function () {
  46                             self.movetoStep('drag-banner');
  47                         });
  48                     }
  49                 },
  50                 {
  51                     stepId: 'drag-banner',
  52                     element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable',
  53                     placement: 'bottom',
  54                     title: "Drag & Drop a Banner",
  55                     content: "Drag the Banner block and drop it in your page.",
  56                     template: render('website.tour_popover'),
  57                     onShow: function () {
  58                         function beginDrag () {
  59                             $('.popover.tour').remove();
  60                             function goToNextStep () {
  61                                 $('#oe_snippets').hide();
  62                                 self.movetoStep('edit-title');
  63                                 $body.off('mouseup', goToNextStep);
  64                             }
  65                             $body.off('mousedown', beginDrag);
  66                             $body.on('mouseup', goToNextStep);
  67                         }
  68
  69                         $body.on('mousedown', beginDrag);
  70                     },
  71                 },
  72                 {
  73                     stepId: 'edit-title',
  74                     element: '#wrap [data-snippet-id=carousel]:first .carousel-caption',
  75                     placement: 'top',
  76                     title: "Customize banner's text",
  77                     content: "Click in the text and start editing it. Click continue once it's done.",
  78                     template: render('website.tour_popover', { next: "Continue" }),
  79                     onHide: function () {
  80                         var $banner = $("#wrap [data-snippet-id=carousel]:first");
  81                         if ($banner.length) {
  82                             $banner.click();
  83                         }
  84                     },
  85                 },
  86                 {
  87                     stepId: 'customize-banner',
  88                     element: '.oe_overlay_options .oe_options',
  89                     placement: 'left',
  90                     title: "Customize the banner",
  91                     content: "You can customize characteristic of any blocks through the Customize menu. For instance, change the background of the banner.",
  92                     template: render('website.tour_popover', { next: "Continue" }),
  93                     onShow: function () {
  94                         $('.dropdown-menu [name=carousel-background]').click(function () {
  95                             self.movetoStep('save-changes');
  96                         });
  97                     },
  98                 },
  99                 {
 100                     stepId: 'save-changes',
 101                     element: 'button[data-action=save]',
 102                     placement: 'right',
 103                     reflex: true,
 104                     title: "Save your modifications",
 105                     content: "Once you click on save, your website page is updated.",
 106                     template: render('website.tour_popover'),
 107                     onHide: function () {
 108                         self.saveStep('part-2');
 109                     },
 110                 },
 111                 {
 112                     stepId: 'part-2',
 113                     orphan: true,
 114                     title: "Congratulation!",
 115                     content: "Your homepage have been updated. Now, we suggest you to insert others building blocks like texts and images to structure your page.",
 116                     template: render('website.tour_popover', { next: "Continue" }),
 117                 },
 118                 {
 119                     stepId: 'show-tutorials',
 120                     element: '#help-menu-button',
 121                     placement: 'left',
 122                     reflex: true,
 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: render('website.tour_popover', { end: "Close" }),
 126                 }
 127             ];
 128             return this._super();
 129         },
 130         startOfPart2: function () {
 131             var currentStepIndex = this.currentStepIndex();
 132             var secondPartIndex = this.indexOfStep('part-2');
 133             var showTutorialsIndex = this.indexOfStep('show-tutorials');
 134             return (currentStepIndex === secondPartIndex || currentStepIndex === showTutorialsIndex) && !this.tour.ended();
 135         },
 136         continueTour: function () {
 137             return this.startOfPart2() || this._super();
 138         },
 139     });
 140
 141     website.EditorBar.include({
 142         start: function () {
 143             this.registerTour(new website.EditorBannerTour(this));
 144             return this._super();
 145         },
 146     });
 147
 148 }());