diff --git a/README.md b/README.md index 51160d2..bc1bdea 100644 --- a/README.md +++ b/README.md @@ -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: ``` ``` -...or if you use jQuery: +...or if you happen to use jQuery: ``` ``` diff --git a/app/views/application/_abraham.html.erb b/app/views/application/_abraham.html.erb index 23c1d43..8c3a5c7 100644 --- a/app/views/application/_abraham.html.erb +++ b/app/views/application/_abraham.html.erb @@ -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 %> diff --git a/test/dummy/app/views/dashboard/home.html.erb b/test/dummy/app/views/dashboard/home.html.erb index 517c91c..5615857 100644 --- a/test/dummy/app/views/dashboard/home.html.erb +++ b/test/dummy/app/views/dashboard/home.html.erb @@ -5,16 +5,21 @@ a content element to notice + diff --git a/test/dummy/app/views/dashboard/other.html.erb b/test/dummy/app/views/dashboard/other.html.erb index cbef03f..4c3381a 100644 --- a/test/dummy/app/views/dashboard/other.html.erb +++ b/test/dummy/app/views/dashboard/other.html.erb @@ -1,2 +1,4 @@

Dashboard#other

Find me in app/views/dashboard/other.html.erb

+ +<%= link_to "Home Page", dashboard_home_url %> \ No newline at end of file