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

   1 (function () {
   2     'use strict';
   3
   4     var website = openerp.website;
   5
   6     website.EditorBar.include({
   7         start: function () {
   8             this.registerTour(new website.BannerTour(this));
   9             return this._super();
  10         },
  11     });
  12
  13     website.BannerTour = website.Tour.extend({
  14         id: 'banner-tutorial',
  15         name: "Insert a banner",
  16         startPath: '/page/website.homepage',
  17         init: function (editor) {
  18             var self = this;
  19             self.steps = [
  20                 {
  21                     stepId: 'welcome',
  22                     orphan: true,
  23                     backdrop: true,
  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" }),
  27                 },
  28                 {
  29                     stepId: 'edit-page',
  30                     element: 'button[data-action=edit]',
  31                     placement: 'bottom',
  32                     title: "Edit this page",
  33                     content: "Every page of your website can be modified through the <i>Edit</i> button.",
  34                     onShow: function () {
  35                         editor.on('tour:editor_bar_loaded', editor, function () {
  36                             self.movetoStep('add-block');
  37                         });
  38                     },
  39                 },
  40                 {
  41                     stepId: 'add-block',
  42                     element: 'button[data-action=snippet]',
  43                     placement: 'bottom',
  44                     title: "Insert building blocks",
  45                     content: "To add content in a page, you can insert building blocks.",
  46                     onShow: function () {
  47                         $('button[data-action=snippet]').click(function () {
  48                             self.movetoStep('drag-banner');
  49                         });
  50                     }
  51                 },
  52                 {
  53                     stepId: 'drag-banner',
  54                     element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable',
  55                     placement: 'bottom',
  56                     title: "Drag & Drop a Banner",
  57                     content: "Drag the Banner block and drop it in your page.",
  58                     onShow: function () {
  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);
  66                             }
  67                             $body.off('mousedown', beginDrag);
  68                             $body.on('mouseup', goToNextStep);
  69                         }
  70                         $body.on('mousedown', beginDrag);
  71                     },
  72                 },
  73                 {
  74                     stepId: 'edit-title',
  75                     element: '#wrap [data-snippet-id=carousel]:first .carousel-caption',
  76                     placement: 'top',
  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" }),
  80                     onHide: function () {
  81                         var $banner = $("#wrap [data-snippet-id=carousel]:first");
  82                         if ($banner.length) {
  83                             $banner.click();
  84                         }
  85                     },
  86                 },
  87                 {
  88                     stepId: 'customize-banner',
  89                     element: '.oe_overlay_options .oe_options',
  90                     placement: 'left',
  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" }),
  94                     onShow: function () {
  95                         $('.dropdown-menu [name=carousel-background]').click(function () {
  96                             self.movetoStep('save-changes');
  97                         });
  98                     },
  99                 },
 100                 {
 101                     stepId: 'save-changes',
 102                     element: 'button[data-action=save]',
 103                     placement: 'right',
 104                     reflex: true,
 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');
 109                     },
 110                 },
 111                 {
 112                     stepId: 'part-2',
 113                     orphan: true,
 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" }),
 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: self.popover({ end: "Close" }),
 126                 }
 127             ];
 128             return this._super();
 129         },
 130         continue: function () {
 131             return (this.isCurrentStep('part-2') || this.isCurrentStep('show-tutorials')) && !this.tour.ended();
 132         },
 133     });
 134
 135 }());