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.
|
* Define tour content with simple YAML files, in any/many languages.
|
||||||
* Organize tours by controller and action.
|
* Organize tours by controller and action.
|
||||||
* Trigger tours automatically on page load or manually via JavaScript event.
|
* 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
|
* Ships with two basic CSS themes (default & dark) -- or write your own
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
@ -39,7 +39,7 @@ $ rails db:migrate
|
|||||||
Install the JavaScript dependencies:
|
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`
|
Require `abraham` in `app/assets/javascripts/application.js`
|
||||||
@ -157,23 +157,23 @@ walkthrough:
|
|||||||
text: "This walkthrough will show you how to..."
|
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>
|
<button id="startTour">Start tour</button>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.querySelector("#startTour").addEventListener("click", function() {
|
document.querySelector("#startTour").addEventListener("click", function() {
|
||||||
document.dispatchEvent(new Event('abraham:walthrough:startNow'));
|
document.dispatchEvent(new Event('abraham:walthrough:start'));
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
...or if you use jQuery:
|
...or if you happen to use jQuery:
|
||||||
|
|
||||||
```
|
```
|
||||||
<script>
|
<script>
|
||||||
$("#startTour").on("click", function() { $(document).trigger('abraham:walthrough:startNow'); })
|
$("#startTour").on("click", function() { $(document).trigger('abraham:walthrough:start'); })
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -51,30 +51,32 @@
|
|||||||
});
|
});
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
// Dispatch this event to do cookie and element checks before starting (default)
|
<% if trigger != "manual" %>
|
||||||
document.addEventListener('abraham:<%= tour_name %>:start', function() {
|
abraham_tour_<%= tour_name %>.start = function (start) {
|
||||||
// Don't start tour if a cookie says not to
|
return function () {
|
||||||
var tourMayStart = !Cookies.get('<%= abraham_cookie_prefix %>-<%= tour_name %>', {domain: '<%= abraham_domain %>'});
|
// Don't start the tour if the user dismissed it once this session
|
||||||
<% if steps.first[1]['attachTo'] %>
|
var tourMayStart = !Cookies.get('<%= abraham_cookie_prefix %>-<%= tour_name %>', {domain: '<%= abraham_domain %>'});
|
||||||
// Don't start the tour if the first step's element is missing
|
<% if steps.first[1]['attachTo'] %>
|
||||||
tourMayStart = tourMayStart && document.querySelector("<%= steps.first[1]['attachTo']['element'] %>");
|
// Don't start the tour if the first step's element is missing
|
||||||
<% end %>
|
tourMayStart = tourMayStart && document.querySelector("<%= steps.first[1]['attachTo']['element'] %>");
|
||||||
if (tourMayStart) {
|
<% end %>
|
||||||
document.dispatchEvent(new Event('abraham:<%= tour_name %>:startNow'));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Dispatch this event to start the tour manually
|
if (tourMayStart) {
|
||||||
document.addEventListener('abraham:<%= tour_name %>:startNow', function() {
|
start();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}(abraham_tour_<%= tour_name %>.start)
|
||||||
|
|
||||||
|
<% 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
|
// Don't start the tour if another one is already active on the screen
|
||||||
if (!Shepherd.activeTour) {
|
if (!Shepherd.activeTour) {
|
||||||
abraham_tour_<%= tour_name %>.start();
|
abraham_tour_<%= tour_name %>.start();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
<% if !tour_completed && trigger != 'manual' %>
|
|
||||||
abrahamReady(function() {
|
|
||||||
document.dispatchEvent(new Event('abraham:<%= tour_name %>:start'));
|
|
||||||
});
|
|
||||||
<% end %>
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -5,16 +5,21 @@
|
|||||||
a content element to notice
|
a content element to notice
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<button id="restart_automatic">Restart the automatic tour</button>
|
||||||
<button id="show_manual">Show manual tour</button>
|
<button id="show_manual">Show manual tour</button>
|
||||||
<button id="show_another_manual">Show ANOTHER manual tour</button>
|
<button id="show_another_manual">Show ANOTHER manual tour</button>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
document.querySelector("#restart_automatic").addEventListener("click", function() {
|
||||||
|
document.dispatchEvent(new Event('abraham:intro:start'));
|
||||||
|
});
|
||||||
|
|
||||||
document.querySelector("#show_manual").addEventListener("click", function() {
|
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.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>
|
</script>
|
||||||
|
|
||||||
|
@ -1,2 +1,4 @@
|
|||||||
<h1>Dashboard#other</h1>
|
<h1>Dashboard#other</h1>
|
||||||
<p>Find me in app/views/dashboard/other.html.erb</p>
|
<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