addons/website_blog/static/src/js/website.tour.blog.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.BlogTour(this));
   9             return this._super();
  10         },
  11     });
  12
  13     website.BlogTour = website.Tour.extend({
  14         id: 'blog-tutorial',
  15         name: "Create a blog post",
  16         startPath: '/blog/cat/1/',
  17         init: function (editor) {
  18             var self = this;
  19             self.steps = [
  20             {
  21                     stepId: 'welcome-blog',
  22                     orphan: true,
  23                     backdrop: true,
  24                     title: "Blog",
  25                     content: "We will show how to create a new blog post.",
  26                     template: self.popover({ next: "Start Tutorial", end: "Skip It" }),
  27                 },
  28                 {
  29                     stepId: 'content-menu',
  30                     element: '#content-menu-button',
  31                     placement: 'left',
  32                     reflex: true,
  33                     title: "Edit the content",
  34                     content: "Click here to add content to your site.",
  35                 },
  36                 {
  37                     stepId: 'new-post-entry',
  38                     element: 'a[data-action=new_blog_post]',
  39                     placement: 'left',
  40                     title: "New blog post",
  41                     content: "Click here to create a blog post.",
  42                     onShow: function () {
  43                         $(document).one('shown.bs.modal', function () {
  44                             $('.modal button.btn-primary').click(function () {
  45                                 self.movetoStep('post-page');
  46                             });
  47                             self.movetoStep('choose-category');
  48                         });
  49                     },
  50                 },
  51                 {
  52                     stepId: 'choose-category',
  53                     element: '.modal select',
  54                     placement: 'right',
  55                     title: "Choose the post category",
  56                     content: "Select the 'News' category and click 'Continue'.",
  57                 },
  58                 {
  59                     stepId: 'post-page',
  60                     orphan: true,
  61                     backdrop: true,
  62                     title: "New blog post created",
  63                     content: "You just created a new blog post. We are now going to edit it.",
  64                     template: self.popover({ next: "OK" }),
  65                 },
  66                 {
  67                     stepId: 'post-title',
  68                     element: 'h1[data-oe-expression="blog_post.name"]',
  69                     placement: 'top',
  70                     title: "Pick a title",
  71                     content: "Choose a catchy title for your blog post.",
  72                     template: self.popover({ next: "OK" }),
  73                 },
  74                 {
  75                     stepId: 'add-block',
  76                     element: 'button[data-action=snippet]',
  77                     placement: 'bottom',
  78                     title: "Layout your blog post",
  79                     content: "Insert blocks like text-image to layout the body of your blog post.",
  80                     onShow: function () {
  81                         $('button[data-action=snippet]').click(function () {
  82                             self.movetoStep('drag-image-text');
  83                         });
  84                     }
  85                 },
  86                 {
  87                     stepId: 'drag-image-text',
  88                     element: '#website-top-navbar [data-snippet-id=image-text].ui-draggable',
  89                     placement: 'bottom',
  90                     title: "Drag & Drop a block",
  91                     content: "Drag the 'Image Text' block and drop it in your page.",
  92                     onShow: function () {
  93                         var $body = $(document.body);
  94                         function beginDrag () {
  95                             $('.popover.tour').remove();
  96                             function goToNextStep () {
  97                                 $('#snippets').toggle();
  98                                 self.stop();
  99                                 $body.off('mouseup', goToNextStep);
 100                             }
 101                             $body.off('mousedown', beginDrag);
 102                             $body.on('mouseup', goToNextStep);
 103                         }
 104                         $body.on('mousedown', beginDrag);
 105                     },
 106                 },
 107             ];
 108             return this._super();
 109         },
 110         resume: function () {
 111             return this.isCurrentStep('post-page') && !this.tour.ended();
 112         },
 113         trigger: function () {
 114             return (this.resume() && this.testUrl(/^\/blog\/[0-9]+\/\?enable_editor=1/)) || this._super();
 115         },
 116     });
 117
 118 }());