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',
  15         name: "Create a blog post",
  16         init: function (editor) {
  17             var self = this;
  18             self.steps = [
  19                 {
  20                     stepId:    'welcome-blog',
  21                     title:     "New Blog Post",
  22                     content:   "Let's go through the first steps to write beautiful blog posts.",
  23                     template:  self.popover({ next: "Start Tutorial", end: "Skip" }),
  24                     backdrop:  true,
  25                 },
  26                 {
  27                     stepId:    'content-menu',
  28                     element:   '#content-menu-button',
  29                     placement: 'left',
  30                     title:     "Add Content",
  31                     content:   "Create new pages, blogs, menu items and products through the <em>'Content'</em> menu.",
  32                     template:  self.popover({ fixed: true }),
  33                     trigger:   'click',
  34                 },
  35                 {
  36                     stepId:    'new-post-entry',
  37                     element:   'a[data-action=new_blog_post]',
  38                     placement: 'left',
  39                     title:     "New Blog Post",
  40                     content:   "Select this menu item to create a new blog post.",
  41                     template:  self.popover({ fixed: true }),
  42                     trigger: {
  43                         modal: {
  44                             stopOnClose: true,
  45                             afterSubmit: 'post-page',
  46                         },
  47                     },
  48                 },
  49                 {
  50                     stepId:    'choose-category',
  51                     element:   '.modal select',
  52                     placement: 'right',
  53                     title:     "Which Blog?",
  54                     content:   "Blog posts are organized in multiple categories (news, job offers, events, etc). Select <em>News</em> and click <em>Continue</em>.",
  55                     trigger: {
  56                         id: 'change',
  57                     },
  58                 },
  59                 {
  60                     stepId:    'continue-category',
  61                     element:   '.modal button.btn-primary',
  62                     placement: 'right',
  63                     title:     "Create Blog Post",
  64                     content:   "Click <em>Continue</em> to create the blog post.",
  65                     trigger: {
  66                         url:   /blogpost\/[0-9]+\/.*/,
  67                     },
  68                 },
  69                 {
  70                     stepId:    'post-page',
  71                     title:     "Blog Post Created",
  72                     content:   "This is your new blog post. We will edit your pages inline. What You See Is What You Get. No need for a complex backend.",
  73                     template:  self.popover({ next: "Continue" }),
  74                 },
  75                 {
  76                     stepId:    'post-title',
  77                     element:   'h1[data-oe-expression="blog_post.name"]',
  78                     placement: 'top',
  79                     title:     "Create a Title",
  80                     content:   "Click on this area and set a catchy title.",
  81                     template:  self.popover({ next: "OK" }),
  82                 },
  83                 {
  84                     stepId:    'add-image-text',
  85                     element:   'button[data-action=snippet]',
  86                     placement: 'bottom',
  87                     title:     "Layout Your Blog Post",
  88                     content:   "Use well designed building blocks to structure the content of your blog. Click 'Insert Blocks' to add new content.",
  89                     template:  self.popover({ fixed: true }),
  90                     trigger:   'click',
  91                 },
  92                 {
  93                     stepId:    'drag-image-text',
  94                     snippet:   'image-text',
  95                     placement: 'bottom',
  96                     title:     "Drag & Drop a Block",
  97                     content:   "Drag the <em>'Image-Text'</em> block and drop it in your page.",
  98                     template:  self.popover({ fixed: true }),
  99                     trigger:   'drag',
 100                 },
 101                 {
 102                     stepId:    'add-text-block',
 103                     element:   'button[data-action=snippet]',
 104                     placement: 'bottom',
 105                     title:     "Add Another Block",
 106                     content:   "Let's add another block to your post.",
 107                     template:  self.popover({ fixed: true }),
 108                     trigger:   'click',
 109                 },
 110                 {
 111                     stepId:    'drag-text-block',
 112                     snippet:   'text-block',
 113                     placement: 'bottom',
 114                     title:     "Drag & Drop a block",
 115                     content:   "Drag the <em>'Text Block'</em> block and drop it below the image block.",
 116                     template:  self.popover({ fixed: true }),
 117                     trigger:   'drag',
 118                 },
 119                 {
 120                     stepId:    'activate-text-block-title',
 121                     element:   '#wrap [data-snippet-id=text-block] .text-center[data-snippet-id=colmd]',
 122                     placement: 'top',
 123                     title:     "Edit an Area",
 124                     content:   "Select any area of the page to modify it. Click on this subtitle.",
 125                     trigger: {
 126                         id: 'snippet-activated',
 127                     }
 128                 },
 129                 {
 130                     stepId:    'remove-text-block-title',
 131                     element:   '.oe_active .oe_snippet_remove',
 132                     placement: 'top',
 133                     title:     "Delete the Title",
 134                     content:   "From this toolbar you can move, duplicate or delete the selected zone. Click on the garbage can image to delete the title.",
 135                     trigger:   'click',
 136                 },
 137                 {
 138                     stepId:    'save-changes',
 139                     element:   'button[data-action=save]',
 140                     placement: 'right',
 141                     title:     "Save Your Blog",
 142                     content:   "Click the <em>Save</em> button to record changes on the page.",
 143                     template:  self.popover({ fixed: true }),
 144                     trigger:   'reload',
 145                 },
 146                 {
 147                     stepId:    'publish-post',
 148                     element:   'button.btn-danger.js_publish_btn',
 149                     placement: 'top',
 150                     title:     "Publish Your Post",
 151                     content:   "Your blog post is not yet published. You can update this draft version and publish it once you are ready.",
 152                     trigger:   'click',
 153                     delay:     5000,
 154                 },
 155                 {
 156                     stepId:    'end-tutorial',
 157                     title:     "Thanks!",
 158                     content:   "This tutorial is finished. To discover more features, improve the content of this page and try the <em>Promote</em> button in the top right menu.",
 159                     template:  self.popover({ end: "Close Tutorial" }),
 160                     backdrop:  true,
 161                 },
 162             ];
 163             return this._super();
 164         },
 165         trigger: function () {
 166             return (this.resume() && this.testUrl(/^\/blogpost\/[0-9]+\//)) || this._super();
 167         },
 168     });
 169
 170 }());