[Rails] Implementation of tutorial function

Target

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

・ Slim introduction ・ Implementation of posting function

Implementation

1. Download the required files from Github

① Access the link below.

intro.js Github

② Click Code.

③ Copy the URL.

④ Clone the repository.

Terminal

$ git clone [email protected]:usablica/intro.js.git

⑤ Move ʻintro.js and ʻintrojs.css in the cloned directory into the application.

2. Introduce Gem

Gemfile

#Postscript
gem 'jquery-rails'

Terminal

$ bundle

3. Edit ʻapplication.js`

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery //Postscript
//= require_tree .

3. Create / edit JavaScript file

Terminal

touch app/assets/javascripts/tutorial.js

tutorial.js

$(function() {
  $('#tutorial').click(function() {
    introJs()
      .setOptions({
        nextLabel: 'Next →',
        prevLabel: '← Previous',
        skipLabel: 'skip',
        doneLabel: 'End',
        exitOnOverlayClick: false,
        showStepNumbers: false,

        steps: [
          {
            intro:
              '<b>Welcome to Bookers!</b><br>I will briefly introduce how to use Books!',
          },
          {
            element: '#introjs-step1',
            intro: 'Please enter a title',
          },
          {
            element: '#introjs-step2',
            intro: 'Please enter the text',
          },
          {
            element: '#introjs-step3',
            intro: 'You can post a book by pressing the "Post" button.',
          },
        ],
      })
      .start();
  });
});

[Explanation]

① The tutorial starts by pressing the button with the ID tutorial.

$('#tutorial').click(function() {}

(2) Define a function for setting the tutorial.

.setOptions({})

③ Set the menu.

nextLabel: 'Next →',
prevLabel: '← Previous',
skipLabel: 'skip',
doneLabel: 'End',
exitOnOverlayClick: false,
showStepNumbers: false,

④ Set the tutorial.

steps: []

⑤ Set each modal.

** ◎ When ʻelement` is not set **

{
  intro: 'This is a tutorial.',
}

It is displayed in the center of the screen.

** ◎ When element is set **

{
  element: '#introjs-step1',
  intro: 'Please enter a title.',
}

It is displayed focusing on the HTML corresponding to the set ID.

4. Edit the view

① Install the button.

~html.slim

button id='tutorial'
  |Tutorial start

② Give an ID.

~html.slim

= f.text_field :title, class:'form-control', id: 'introjs-step1'

If you want to implement it with other movements

① Access the link below.

intro.js official page

(2) When you scroll to the bottom of the page, the following screen will appear. If you want to see the movement, click DEMO, and if you want to implement it, press SOURCE to see the sample code.