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

   1 (function () {
   2     'use strict';
   3
   4     var website = openerp.website;
   5     var _t = openerp._t;
   6
   7     website.EditorBar.include({
   8         start: function () {
   9             this.registerTour(new website.Tour.Banner(this));
  10             return this._super();
  11         },
  12     });
  13
  14     website.Tour.Banner = website.Tour.extend({
  15         id:   'banner',
  16         name: "Build a page",
  17         path: '/page/website.homepage',
  18         init: function () {
  19             var self = this;
  20             self.steps = [
  21                 {
  22                     title:     _t("Welcome to your website!"),
  23                     content:   _t("This tutorial will guide you to build your home page. We will start by adding a banner."),
  24                     popover:   { next:  _t("Start Tutorial"), end:   _t("Skip It") },
  25                 },
  26                 {
  27                     waitNot:   '.popover.tour',
  28                     element:   'button[data-action=edit]',
  29                     placement: 'bottom',
  30                     title:     _t("Edit this page"),
  31                     content:   _t("Every page of your website can be modified through the <i>Edit</i> button."),
  32                     popover:   { fixed: true },
  33                 },
  34                 {
  35                     element:   'button[data-action=snippet]',
  36                     placement: 'bottom',
  37                     title:     _t("Insert building blocks"),
  38                     content:   _t("To add content in a page, you can insert building blocks."),
  39                     popover:   { fixed: true },
  40                 },
  41                 {
  42                     snippet:   'carousel',
  43                     placement: 'bottom',
  44                     title:     _t("Drag & Drop a Banner"),
  45                     content:   _t("Drag the Banner block and drop it in your page."),
  46                     popover:   { fixed: true },
  47                 },
  48                 {
  49                     waitFor:   '.oe_overlay_options .oe_options:visible',
  50                     element:   '#wrap [data-snippet-id=carousel]:first .carousel-caption',
  51                     placement: 'top',
  52                     title:     _("Customize banner's text"),
  53                     content:   _("Click in the text and start editing it."),
  54                     popover:   { next: _t("Continue") },
  55                 },
  56                 {
  57                     element:   '.oe_overlay_options .oe_options',
  58                     placement: 'left',
  59                     title:     _t("Customize the banner"),
  60                     content:   _t("Customize any block through this menu. Try to change the background of the banner."),
  61                     popover:   { next: _t("Continue") },
  62                 },
  63                 {
  64                     waitNot:   '.popover.tour',
  65                     element:   'button[data-action=snippet]',
  66                     placement: 'bottom',
  67                     title:     _t("Add Another Block"),
  68                     content:   _t("Let's add another building block to your page."),
  69                     popover:   { fixed: true },
  70                 },
  71                 {
  72                     snippet:   'three-columns',
  73                     placement: 'bottom',
  74                     title:     _t("Drag & Drop This Block"),
  75                     content:   _t("Drag the <em>'Three Columns'</em> block and drop it below the banner."),
  76                     popover:   { fixed: true },
  77                 },
  78                 {
  79                     waitFor:   '.oe_overlay_options .oe_options:visible',
  80                     element:   'button[data-action=save]',
  81                     placement: 'right',
  82                     title:     _t("Save your modifications"),
  83                     content:   _t("Publish your page by clicking on the <em>'Save'</em> button."),
  84                     popover:   { fixed: true },
  85                 },
  86                 {
  87                     waitFor:   'button[data-action=edit]:visible',
  88                     title:     _("Good Job!"),
  89                     content:   _("Well done, you created your homepage."),
  90                     popover:   { next: _t("Continue") },
  91                 },
  92                 {
  93                     waitNot:   '.popover.tour',
  94                     element:   'a[data-action=show-mobile-preview]',
  95                     placement: 'bottom',
  96                     title:     _t("Test Your Mobile Version"),
  97                     content:   _t("Let's check how your homepage looks like on mobile devices."),
  98                     popover:   { fixed: true },
  99                 },
 100                 {
 101                     element:   '.modal:has(#mobile-viewport) button[data-dismiss=modal]',
 102                     placement: 'right',
 103                     title:     _t("Close Mobile Preview"),
 104                     content:   _t("Scroll in the mobile preview to test the rendering. Once it's ok, close this dialog."),
 105                 },
 106                 {
 107                     waitNot:   '.modal',
 108                     element:   '#content-menu-button',
 109                     placement: 'bottom',
 110                     title:     _t("Add new pages and menus"),
 111                     content:   _t("The 'Content' menu allows you to add pages or add the top menu."),
 112                     popover:   { next: _t("Close Tutorial") },
 113                 },
 114             ];
 115             return this._super();
 116         },
 117     });
 118
 119 }());