Final touches, updates to README
This commit is contained in:
parent
c3d20b9cb7
commit
5917e0a6a9
14
README.md
14
README.md
@ -6,12 +6,12 @@ _Guide your users in the one true path._
|
||||
|
||||

|
||||
|
||||
Abraham injects dynamically-generated [Shepherd](https://shepherdjs.dev/) JavaScript code into your Rails application whenever a user should see a guided tour. Skip a tour, and we'll try again next time; complete a tour, and it won't show up again.
|
||||
Abraham makes it easy to show guided tours to users of your Rails application. Abraham keeps track of whether someone has seen a tour so it doesn't appear again and also lets a user skip until their next visit.
|
||||
|
||||
* Define tour content with simple YAML files, in any/many languages.
|
||||
* Organize tours by controller and action.
|
||||
* Trigger tours automatically on page load or manually via JavaScript event.
|
||||
* Plays nicely with Turbolinks.
|
||||
* Built with the [Shepherd JS](https://shepherdjs.dev/) library. Plays nicely with Turbolinks.
|
||||
* Ships with two basic CSS themes (default & dark) -- or write your own
|
||||
|
||||
## Requirements
|
||||
@ -39,7 +39,7 @@ $ rails db:migrate
|
||||
Install the JavaScript dependencies:
|
||||
|
||||
```
|
||||
$ yarn add jquery@^3.4.0 js-cookie@^2.2.0 shepherd.js@^6.0.0-beta
|
||||
$ yarn add js-cookie@^2.2.0 shepherd.js@^6.0.0-beta
|
||||
```
|
||||
|
||||
Require `abraham` in `app/assets/javascripts/application.js`
|
||||
@ -157,23 +157,23 @@ walkthrough:
|
||||
text: "This walkthrough will show you how to..."
|
||||
```
|
||||
|
||||
Abraham creates a JavaScript event based on the tour name that you can wire into a link or button on that page. In the above example, you would use the `abraham:walthrough:startNow` event to make the tour appear:
|
||||
Abraham creates a JavaScript event based on the tour name that you can wire into a link or button on that page. In the above example, you would use the `abraham:walthrough:start` event to make the tour appear:
|
||||
|
||||
```
|
||||
<button id="startTour">Start tour</button>
|
||||
|
||||
<script>
|
||||
document.querySelector("#startTour").addEventListener("click", function() {
|
||||
document.dispatchEvent(new Event('abraham:walthrough:startNow'));
|
||||
document.dispatchEvent(new Event('abraham:walthrough:start'));
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
...or if you use jQuery:
|
||||
...or if you happen to use jQuery:
|
||||
|
||||
```
|
||||
<script>
|
||||
$("#startTour").on("click", function() { $(document).trigger('abraham:walthrough:startNow'); })
|
||||
$("#startTour").on("click", function() { $(document).trigger('abraham:walthrough:start'); })
|
||||
</script>
|
||||
```
|
||||
|
||||
|
@ -51,30 +51,32 @@
|
||||
});
|
||||
<% end %>
|
||||
|
||||
// Dispatch this event to do cookie and element checks before starting (default)
|
||||
document.addEventListener('abraham:<%= tour_name %>:start', function() {
|
||||
// Don't start tour if a cookie says not to
|
||||
var tourMayStart = !Cookies.get('<%= abraham_cookie_prefix %>-<%= tour_name %>', {domain: '<%= abraham_domain %>'});
|
||||
<% if steps.first[1]['attachTo'] %>
|
||||
// Don't start the tour if the first step's element is missing
|
||||
tourMayStart = tourMayStart && document.querySelector("<%= steps.first[1]['attachTo']['element'] %>");
|
||||
<% end %>
|
||||
if (tourMayStart) {
|
||||
document.dispatchEvent(new Event('abraham:<%= tour_name %>:startNow'));
|
||||
}
|
||||
});
|
||||
<% if trigger != "manual" %>
|
||||
abraham_tour_<%= tour_name %>.start = function (start) {
|
||||
return function () {
|
||||
// Don't start the tour if the user dismissed it once this session
|
||||
var tourMayStart = !Cookies.get('<%= abraham_cookie_prefix %>-<%= tour_name %>', {domain: '<%= abraham_domain %>'});
|
||||
<% if steps.first[1]['attachTo'] %>
|
||||
// Don't start the tour if the first step's element is missing
|
||||
tourMayStart = tourMayStart && document.querySelector("<%= steps.first[1]['attachTo']['element'] %>");
|
||||
<% end %>
|
||||
|
||||
if (tourMayStart) {
|
||||
start();
|
||||
}
|
||||
}
|
||||
}(abraham_tour_<%= tour_name %>.start)
|
||||
|
||||
// Dispatch this event to start the tour manually
|
||||
document.addEventListener('abraham:<%= tour_name %>:startNow', function() {
|
||||
<% if !tour_completed %>
|
||||
abraham_tour_<%= tour_name %>.start();
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
document.addEventListener('abraham:<%= tour_name %>:start', function() {
|
||||
// Don't start the tour if another one is already active on the screen
|
||||
if (!Shepherd.activeTour) {
|
||||
abraham_tour_<%= tour_name %>.start();
|
||||
}
|
||||
});
|
||||
|
||||
<% if !tour_completed && trigger != 'manual' %>
|
||||
abrahamReady(function() {
|
||||
document.dispatchEvent(new Event('abraham:<%= tour_name %>:start'));
|
||||
});
|
||||
<% end %>
|
||||
</script>
|
||||
|
@ -5,16 +5,21 @@
|
||||
a content element to notice
|
||||
</div>
|
||||
|
||||
<button id="restart_automatic">Restart the automatic tour</button>
|
||||
<button id="show_manual">Show manual tour</button>
|
||||
<button id="show_another_manual">Show ANOTHER manual tour</button>
|
||||
|
||||
<script>
|
||||
document.querySelector("#restart_automatic").addEventListener("click", function() {
|
||||
document.dispatchEvent(new Event('abraham:intro:start'));
|
||||
});
|
||||
|
||||
document.querySelector("#show_manual").addEventListener("click", function() {
|
||||
document.dispatchEvent(new Event('abraham:a_manual_tour:startNow'));
|
||||
document.dispatchEvent(new Event('abraham:a_manual_tour:start'));
|
||||
});
|
||||
|
||||
document.querySelector("#show_another_manual").addEventListener("click", function() {
|
||||
document.dispatchEvent(new Event('abraham:another_manual_tour:startNow'));
|
||||
document.dispatchEvent(new Event('abraham:another_manual_tour:start'));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -1,2 +1,4 @@
|
||||
<h1>Dashboard#other</h1>
|
||||
<p>Find me in app/views/dashboard/other.html.erb</p>
|
||||
|
||||
<%= link_to "Home Page", dashboard_home_url %>
|
Loading…
x
Reference in New Issue
Block a user