Version | Status | Quality | Coverage |
---|---|---|---|
Write hopscotch introductions simply by adding YAML files to your Rails application.
- Rails 3.2+
- Hopscotch
js
andcss
files available. You can use just a standard installation in the asset pipeline or this gem.
Add hopskip
to your Gemfile
gem 'hopskip'
Add the hopskip
template to your application layout. It doesn't matter where, as long as controller
is the controller object currently visible to the user.
<%= Hopskip::HopscotchParser.new(controller).show %>
hopskip
assumes a file structure like this:
├── app
├── tours
├── dashboards_tour.yml
└── projects_tour.yml
Where each file is name xyz_tour.yml
where xyz
is the name of the controller.
The contents of each of these files should look similar to this:
---
index:
steps:
- title: Welcome to My App
content: "Some Text..."
target: left_util
placement: right
- title: Dashboard
content: "This is your dashboard"
target: left_util
placement: bottom
show:
steps:
- title: another title...
#...
You can generate an example tour file by using the included generator:
rails generate tour [controller_name]
For a full list of params, check out the hopscotch docs.
You can also attach methods to the onClose
, onEnd
and other callback methods included with hopscotch. Simply define a hopscotch helper in your view:
<script>
hopscotch.registerHelper('showError', function() {
alert("This is an error!");
});
</script>
In your tour file, you can now ask that this method is called at various points in the tour's lifecycle:
---
index:
steps:
- title: Welcome to My App
content: "Some Text..."
target: left_util
placement: right
onNext:
- showError
The showError
helper will now be executed when next is clicked on the first step. You can pass as many helpers as you like to each callback methods.
If the YAML file is not correctly formatted, Hopskip will raise a Hopskip::InvalidYAMLError
exception.
We use Hopskip in FleetSuite, a business management system offering a set of collaborative project management tools to optimise processes.