Final touches, updates to README

This commit is contained in:
Jonathan Abbett 2021-04-15 21:44:04 -04:00
parent c3d20b9cb7
commit 5917e0a6a9
4 changed files with 37 additions and 28 deletions

View File

@ -6,12 +6,12 @@ _Guide your users in the one true path._
![Watercolor Sheep](https://upload.wikimedia.org/wikipedia/commons/e/e4/Watercolor_Sheep_Drawing.jpg)
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>
```

View File

@ -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>

View File

@ -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>

View File

@ -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 %>