parent
c60b2b6cbd
commit
9c073cf2e0
3
.gitignore
vendored
3
.gitignore
vendored
@ -17,6 +17,8 @@ capybara-*.html
|
|||||||
**.orig
|
**.orig
|
||||||
rerun.txt
|
rerun.txt
|
||||||
pickle-email-*.html
|
pickle-email-*.html
|
||||||
|
# Don't commit yarn.lock, to ensure that package.json is specific enough
|
||||||
|
yarn.lock
|
||||||
yarn-error.log
|
yarn-error.log
|
||||||
|
|
||||||
# TODO Comment out these rules if you are OK with secrets being uploaded to the repo
|
# TODO Comment out these rules if you are OK with secrets being uploaded to the repo
|
||||||
@ -52,3 +54,4 @@ bower.json
|
|||||||
.idea/
|
.idea/
|
||||||
/test/dummy/tmp/
|
/test/dummy/tmp/
|
||||||
/test/dummy/log/
|
/test/dummy/log/
|
||||||
|
.DS_Store
|
4
Gemfile
4
Gemfile
@ -1,6 +1,10 @@
|
|||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
source 'http://rubygems.org'
|
source 'http://rubygems.org'
|
||||||
|
|
||||||
|
group :development, :test do
|
||||||
|
gem 'sassc-rails'
|
||||||
|
end
|
||||||
|
|
||||||
# Set the Rails version. We have this switch so that we can test multiple
|
# Set the Rails version. We have this switch so that we can test multiple
|
||||||
# versions for Rails on Travis CI.
|
# versions for Rails on Travis CI.
|
||||||
# Inspired by http://aaronmiler.com/blog/testing-your-rails-engine-with-multiple-versions-of-rails/
|
# Inspired by http://aaronmiler.com/blog/testing-your-rails-engine-with-multiple-versions-of-rails/
|
||||||
|
46
README.md
46
README.md
@ -6,11 +6,12 @@ _Guide your users in the one true path._
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
Abraham injects dynamically-generated [Shepherd.js](http://github.hubspot.com/shepherd/docs/welcome/) 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 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.
|
||||||
|
|
||||||
* 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.
|
||||||
* Plays nicely with Turbolinks.
|
* Plays nicely with Turbolinks.
|
||||||
|
* Ships with two basic CSS themes (default & dark) -- or write your own
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
@ -36,7 +37,7 @@ $ rails db:migrate
|
|||||||
Install the JavaScript dependencies:
|
Install the JavaScript dependencies:
|
||||||
|
|
||||||
```
|
```
|
||||||
$ yarn add jquery js-cookie shepherd.js
|
$ yarn add jquery@^3.4.0 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`
|
||||||
@ -45,29 +46,26 @@ Require `abraham` in `app/assets/javascripts/application.js`
|
|||||||
//= require abraham
|
//= require abraham
|
||||||
```
|
```
|
||||||
|
|
||||||
Require a Shepherd.js CSS theme in `app/assets/stylesheets/application.scss`
|
Require a CSS theme in `app/assets/stylesheets/application.scss`
|
||||||
|
|
||||||
```
|
```
|
||||||
//= require "shepherd.js/dist/css/shepherd-theme-default"
|
*= require abraham/theme-default
|
||||||
```
|
```
|
||||||
|
|
||||||
Shepherd.js provides the following themes:
|
Abraham provides the following themes:
|
||||||
|
|
||||||
- `shepherd-theme-arrows`
|
- `theme-default`
|
||||||
- `shepherd-theme-arrows-fix`
|
- `theme-dark`
|
||||||
- `shepherd-theme-arrows-plain-buttons`
|
|
||||||
- `shepherd-theme-dark`
|
|
||||||
- `shepherd-theme-default`
|
|
||||||
- `shepherd-theme-square`
|
|
||||||
- `shepherd-theme-square-dark`
|
|
||||||
|
|
||||||
Update `config/abraham.yml` if you choose a different theme:
|
Update `config/abraham.yml` if you choose a different theme:
|
||||||
|
|
||||||
```
|
```
|
||||||
defaults: &defaults
|
defaults: &defaults
|
||||||
:default_theme: 'shepherd-theme-arrows'
|
:tour_options: '{ defaultStepOptions: { classes: "theme-dark" } }'
|
||||||
```
|
```
|
||||||
|
|
||||||
|
You can also [write your own Shepherd theme](https://shepherdjs.dev/docs/tutorial-03-styling.html) based on Shepherd's [default CSS](https://github.com/shipshapecode/shepherd/releases/download/v6.0.0-beta.1/shepherd.css).
|
||||||
|
|
||||||
Tell Abraham where to insert its generated JavaScript in `app/views/layouts/application.html.erb`, just before the closing `body` tag:
|
Tell Abraham where to insert its generated JavaScript in `app/views/layouts/application.html.erb`, just before the closing `body` tag:
|
||||||
|
|
||||||
```erb
|
```erb
|
||||||
@ -136,6 +134,24 @@ Rails.application.configure do
|
|||||||
end
|
end
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Upgrading from version 1
|
||||||
|
|
||||||
|
Abraham v1 was built using Shepherd 1.8, v2 now uses Shepherd 6 -- quite a jump, yes.
|
||||||
|
|
||||||
|
If you were using Abraham v1, you'll want to take the following steps to upgrade:
|
||||||
|
|
||||||
|
1. Update your gem to the latest version
|
||||||
|
1. Fix your yarn dependencies to use the right versions
|
||||||
|
1. Shepherd no longer provides a set of themes. Abraham maintains two of the legacy themes: default and dark. You'll want to choose one of those or migrate your theme to the new Shepherd structure.
|
||||||
|
1. Abraham now exposes the entire Shepherd configuration object, so your `abraham.yml` file should now fully define the `tour_options` value instead of `default_theme`
|
||||||
|
1. There's been a slight change to `initializers/abraham.rb`. You can just change line 22 to:
|
||||||
|
|
||||||
|
```rb
|
||||||
|
config.abraham.tour_options = abraham_config[:tour_options]
|
||||||
|
```
|
||||||
|
|
||||||
|
If you have any trouble at all, please [submit an issue](https://github.com/actmd/abraham/issues) for assistance!
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
Contributions are welcome!
|
Contributions are welcome!
|
||||||
@ -150,6 +166,8 @@ Everyone interacting in Abraham's codebase, issue tracker, etc. is expected to f
|
|||||||
|
|
||||||
This Rails engine contains a test app called `dummy` with controller and system tests. They'll all get run with `rails t`.
|
This Rails engine contains a test app called `dummy` with controller and system tests. They'll all get run with `rails t`.
|
||||||
|
|
||||||
|
Please note that if you change anything in the `lib/generators` folder (i.e. configuration, intializer, migration) you'll need to migrate the `dummy` app accordingly.
|
||||||
|
|
||||||
Final testing should be done in a standalone Rails app, following the README instructions.
|
Final testing should be done in a standalone Rails app, following the README instructions.
|
||||||
|
|
||||||
To install the `abraham` gem with a local path:
|
To install the `abraham` gem with a local path:
|
||||||
@ -160,7 +178,7 @@ gem 'abraham', path: '~/Workspace/abraham'
|
|||||||
|
|
||||||
#### Automated testing
|
#### Automated testing
|
||||||
|
|
||||||
We use TravisCI automatically testing this rails engine. For test history, venture over to [TravisCI](https://travis-ci.com/actmd/abraham).
|
We use TravisCI to automatically test this engine with Rails 5.1, 5.2, and 6.0. For test history, venture over to [TravisCI](https://travis-ci.com/actmd/abraham).
|
||||||
|
|
||||||
### Releasing
|
### Releasing
|
||||||
|
|
||||||
|
194
app/assets/stylesheets/abraham/_common.scss
Normal file
194
app/assets/stylesheets/abraham/_common.scss
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
.shepherd-button {
|
||||||
|
background: #3288e6;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: hsla(0, 0%, 100%, .75);
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: .5rem;
|
||||||
|
padding: .5rem 1.5rem;
|
||||||
|
transition: all .5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-button:not(:disabled):hover {
|
||||||
|
background: #196fcc;
|
||||||
|
color: hsla(0, 0%, 100%, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-button.shepherd-button-secondary {
|
||||||
|
background: #f1f2f3;
|
||||||
|
color: rgba(0, 0, 0, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
|
||||||
|
background: #d6d9db;
|
||||||
|
color: rgba(0, 0, 0, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-button:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-footer {
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 0 1rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-footer .shepherd-button:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-cancel-icon {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: hsla(0, 0%, 50.2%, .75);
|
||||||
|
font-size: 2em;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
transition: color .5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-cancel-icon:hover {
|
||||||
|
color: rgba(0, 0, 0, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
|
||||||
|
color: hsla(0, 0%, 50.2%, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
|
||||||
|
color: rgba(0, 0, 0, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-title {
|
||||||
|
display: flex;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-header {
|
||||||
|
align-items: center;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 0.5rem 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-has-title .shepherd-content .shepherd-header {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-text p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-text p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-content {
|
||||||
|
border-radius: 5px;
|
||||||
|
outline: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element {
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
|
||||||
|
max-width: 400px;
|
||||||
|
outline: none;
|
||||||
|
z-index: 9999;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element,
|
||||||
|
.shepherd-element *,
|
||||||
|
.shepherd-element :after,
|
||||||
|
.shepherd-element :before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element .shepherd-arrow {
|
||||||
|
border: 16px solid transparent;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 16px;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
|
||||||
|
.shepherd-element.shepherd-pinned-top .shepherd-arrow {
|
||||||
|
bottom: 0;
|
||||||
|
border-top-color: #232323;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
|
||||||
|
border-bottom-color: #232323;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
|
||||||
|
border-bottom-color: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
|
||||||
|
.shepherd-element.shepherd-pinned-right .shepherd-arrow {
|
||||||
|
border-right-color: #232323;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-100%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
|
||||||
|
.shepherd-element.shepherd-pinned-left .shepherd-arrow {
|
||||||
|
border-left-color: #232323;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(100%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-modal-overlay-container {
|
||||||
|
-ms-filter: progid:dximagetransform.microsoft.gradient.alpha(Opacity=50);
|
||||||
|
filter: alpha(opacity=50);
|
||||||
|
fill-rule: evenodd;
|
||||||
|
height: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
transition: all .3s ease-out, height 0ms .3s, opacity .3s 0ms;
|
||||||
|
width: 100vw;
|
||||||
|
z-index: 9997;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
|
||||||
|
height: 100vh;
|
||||||
|
opacity: .5;
|
||||||
|
transition: all .3s ease-out, height 0s 0s, opacity .3s 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
40
app/assets/stylesheets/abraham/theme-dark.scss
Executable file
40
app/assets/stylesheets/abraham/theme-dark.scss
Executable file
@ -0,0 +1,40 @@
|
|||||||
|
@import "_common";
|
||||||
|
|
||||||
|
.theme-dark.shepherd-element {
|
||||||
|
background: #232323;
|
||||||
|
|
||||||
|
.shepherd-text {
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-has-title .shepherd-content .shepherd-header {
|
||||||
|
background: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
|
||||||
|
&.shepherd-pinned-top .shepherd-arrow {
|
||||||
|
border-top-color: #232323;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
|
||||||
|
border-bottom-color: #232323;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
|
||||||
|
border-bottom-color: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
|
||||||
|
&.shepherd-pinned-right .shepherd-arrow {
|
||||||
|
border-right-color: #232323;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
|
||||||
|
&.shepherd-pinned-left .shepherd-arrow {
|
||||||
|
border-left-color: #232323;
|
||||||
|
}
|
||||||
|
}
|
40
app/assets/stylesheets/abraham/theme-default.scss
Executable file
40
app/assets/stylesheets/abraham/theme-default.scss
Executable file
@ -0,0 +1,40 @@
|
|||||||
|
@import "_common";
|
||||||
|
|
||||||
|
.theme-default.shepherd-element {
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.shepherd-text {
|
||||||
|
color: rgba(0, 0, 0, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-title {
|
||||||
|
color: rgba(0, 0, 0, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-has-title .shepherd-content .shepherd-header {
|
||||||
|
background: #e6e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
|
||||||
|
&.shepherd-pinned-top .shepherd-arrow {
|
||||||
|
border-top-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
|
||||||
|
border-bottom-color: #e6e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
|
||||||
|
&.shepherd-pinned-right .shepherd-arrow {
|
||||||
|
border-right-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
|
||||||
|
&.shepherd-pinned-left .shepherd-arrow {
|
||||||
|
border-left-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
@ -1,9 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
var tour = new Shepherd.Tour({
|
const tour = new Shepherd.Tour(<%= Rails.configuration.abraham.tour_options.html_safe unless Rails.configuration.abraham.tour_options.nil? %>);
|
||||||
defaults: {
|
|
||||||
classes: '<%= Rails.configuration.abraham.default_theme %>'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
tour.on("complete", function() {
|
tour.on("complete", function() {
|
||||||
// ajax
|
// ajax
|
||||||
@ -26,7 +22,8 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
<% steps.each_with_index do |(key, step), index| %>
|
<% steps.each_with_index do |(key, step), index| %>
|
||||||
tour.addStep('step-<%= key %>', {
|
tour.addStep({
|
||||||
|
id: 'step-<%= key %>',
|
||||||
<% if step.key?('title') %>
|
<% if step.key?('title') %>
|
||||||
title: "<%= step['title'] %>",
|
title: "<%= step['title'] %>",
|
||||||
<% end %>
|
<% end %>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
|
|
||||||
module Abraham
|
module Abraham
|
||||||
VERSION = "1.5.3"
|
VERSION = "2.0.0"
|
||||||
end
|
end
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
defaults: &defaults
|
defaults: &defaults
|
||||||
:default_theme: 'shepherd-theme-default'
|
# Add any valid Shepherd.js configuration JSON here
|
||||||
|
# and it will be passed into the `new Shepherd.Tour()`
|
||||||
|
# initializer.
|
||||||
|
:tour_options: '{ defaultStepOptions: { classes: "theme-default" } }'
|
||||||
|
|
||||||
development:
|
development:
|
||||||
<<: *defaults
|
<<: *defaults
|
||||||
|
@ -19,6 +19,6 @@ Rails.application.configure do
|
|||||||
|
|
||||||
abraham_config = Rails.application.config_for :abraham
|
abraham_config = Rails.application.config_for :abraham
|
||||||
config.abraham = ActiveSupport::OrderedOptions.new
|
config.abraham = ActiveSupport::OrderedOptions.new
|
||||||
config.abraham.default_theme = abraham_config[:default_theme]
|
config.abraham.tour_options = abraham_config[:tour_options]
|
||||||
config.abraham.tours = tours
|
config.abraham.tours = tours
|
||||||
end
|
end
|
||||||
|
@ -4,6 +4,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"jquery": "^3.4.0",
|
"jquery": "^3.4.0",
|
||||||
"js-cookie": "^2.2.0",
|
"js-cookie": "^2.2.0",
|
||||||
"shepherd.js": "^3.1.0"
|
"shepherd.js": "^6.0.0-beta"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,6 @@
|
|||||||
* files in this directory. Styles in this file should be added after the last require_* statement.
|
* files in this directory. Styles in this file should be added after the last require_* statement.
|
||||||
* It is generally better to create a new file per style scope.
|
* It is generally better to create a new file per style scope.
|
||||||
*
|
*
|
||||||
*= require "shepherd.js/dist/css/shepherd-theme-default"
|
*= require abraham/theme-default
|
||||||
*= require_tree .
|
*= require_tree .
|
||||||
*/
|
*/
|
@ -1,4 +0,0 @@
|
|||||||
/*
|
|
||||||
Place all the styles related to the matching controller here.
|
|
||||||
They will automatically be included in application.css.
|
|
||||||
*/
|
|
@ -1,5 +1,5 @@
|
|||||||
defaults: &defaults
|
defaults: &defaults
|
||||||
:default_theme: 'shepherd-theme-default'
|
:tour_options: '{ defaultStepOptions: { classes: "theme-default" } }'
|
||||||
|
|
||||||
development:
|
development:
|
||||||
<<: *defaults
|
<<: *defaults
|
||||||
|
@ -19,6 +19,6 @@ Rails.application.configure do
|
|||||||
|
|
||||||
abraham_config = Rails.application.config_for :abraham
|
abraham_config = Rails.application.config_for :abraham
|
||||||
config.abraham = ActiveSupport::OrderedOptions.new
|
config.abraham = ActiveSupport::OrderedOptions.new
|
||||||
config.abraham.default_theme = abraham_config[:default_theme]
|
config.abraham.tour_options = abraham_config[:tour_options]
|
||||||
config.abraham.tours = tours
|
config.abraham.tours = tours
|
||||||
end
|
end
|
||||||
|
@ -10,10 +10,10 @@ intro:
|
|||||||
text: "ENGLISH Refers to an element that won't exist on the page, should skip to 4"
|
text: "ENGLISH Refers to an element that won't exist on the page, should skip to 4"
|
||||||
attachTo:
|
attachTo:
|
||||||
element: "#i-dont-exist"
|
element: "#i-dont-exist"
|
||||||
position: "right"
|
placement: "right"
|
||||||
4:
|
4:
|
||||||
title: "ENGLISH The final step"
|
title: "ENGLISH The final step"
|
||||||
text: "ENGLISH Some text here too, and it's attached to the right"
|
text: "ENGLISH Some text here too, and it's attached to the right"
|
||||||
attachTo:
|
attachTo:
|
||||||
element: ".notice-me"
|
element: ".notice-me"
|
||||||
position: "right"
|
placement: "right"
|
||||||
|
@ -10,10 +10,10 @@ intro:
|
|||||||
text: "Refers to an element that won't exist on the page, should skip to 4"
|
text: "Refers to an element that won't exist on the page, should skip to 4"
|
||||||
attachTo:
|
attachTo:
|
||||||
element: "#i-dont-exist"
|
element: "#i-dont-exist"
|
||||||
position: "right"
|
placement: "right"
|
||||||
4:
|
4:
|
||||||
title: "SPANISH The final step"
|
title: "SPANISH The final step"
|
||||||
text: "Some text here too, and it's attached to the right"
|
text: "Some text here too, and it's attached to the right"
|
||||||
attachTo:
|
attachTo:
|
||||||
element: ".notice-me"
|
element: ".notice-me"
|
||||||
position: "right"
|
placement: "right"
|
||||||
|
@ -11,21 +11,22 @@ class DashboardControllerTest < ActionDispatch::IntegrationTest
|
|||||||
I18n.locale = :en
|
I18n.locale = :en
|
||||||
end
|
end
|
||||||
|
|
||||||
test "uses configured shepherd theme" do
|
test "uses configured shepherd configuration" do
|
||||||
# default
|
# No options
|
||||||
|
Rails.configuration.abraham.tour_options = nil
|
||||||
get dashboard_home_url
|
get dashboard_home_url
|
||||||
assert_response :success
|
assert_response :success
|
||||||
assert_select "body script" do |element|
|
assert_select "body script" do |element|
|
||||||
# it's the home tour
|
# No options passed into Tour()
|
||||||
assert element.text.include? "classes: 'shepherd-theme-default'"
|
assert element.text.include? "new Shepherd.Tour()"
|
||||||
end
|
end
|
||||||
|
|
||||||
# custom
|
# Custom options
|
||||||
Rails.configuration.abraham.default_theme = "my-custom-theme"
|
Rails.configuration.abraham.tour_options = '{ defaultStepOptions: { classes: "my-custom-class" } }'
|
||||||
get dashboard_home_url
|
get dashboard_home_url
|
||||||
assert_select "body script" do |element|
|
assert_select "body script" do |element|
|
||||||
# it's the home tour
|
# Config-specified options passed into Tour()
|
||||||
assert element.text.include? "classes: 'my-custom-theme'"
|
assert element.text.include? 'new Shepherd.Tour({ defaultStepOptions: { classes: "my-custom-class" } })'
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -13,16 +13,16 @@ class ToursTest < ApplicationSystemTestCase
|
|||||||
# Tour Step 1
|
# Tour Step 1
|
||||||
assert_selector ".shepherd-element", visible: true
|
assert_selector ".shepherd-element", visible: true
|
||||||
assert_selector ".shepherd-text", text: "ENGLISH This first HOME step is centered text-only"
|
assert_selector ".shepherd-text", text: "ENGLISH This first HOME step is centered text-only"
|
||||||
assert_selector ".shepherd-button", text: "LATER"
|
assert_selector ".shepherd-button", text: "Later"
|
||||||
assert_selector ".shepherd-button", text: "CONTINUE"
|
assert_selector ".shepherd-button", text: "Continue"
|
||||||
find(".shepherd-button", text: "CONTINUE").click
|
find(".shepherd-button", text: "Continue").click
|
||||||
|
|
||||||
# Tour Step 2
|
# Tour Step 2
|
||||||
assert_selector ".shepherd-header", text: "ENGLISH This step has a title"
|
assert_selector ".shepherd-header", text: "ENGLISH This step has a title"
|
||||||
assert_selector ".shepherd-text", text: "ENGLISH This intermediate step has some text"
|
assert_selector ".shepherd-text", text: "ENGLISH This intermediate step has some text"
|
||||||
assert_selector ".shepherd-button", text: "EXIT"
|
assert_selector ".shepherd-button", text: "Exit"
|
||||||
assert_selector ".shepherd-button", text: "NEXT"
|
assert_selector ".shepherd-button", text: "Next"
|
||||||
find(".shepherd-button", text: "NEXT").click
|
find(".shepherd-button", text: "Next").click
|
||||||
|
|
||||||
# Tour Step 3 (should be skipped)
|
# Tour Step 3 (should be skipped)
|
||||||
refute_selector ".shepherd-header", text: "ENGLISH A missing step"
|
refute_selector ".shepherd-header", text: "ENGLISH A missing step"
|
||||||
@ -30,9 +30,9 @@ class ToursTest < ApplicationSystemTestCase
|
|||||||
# Tour Step 4
|
# Tour Step 4
|
||||||
assert_selector ".shepherd-header", text: "ENGLISH The final step"
|
assert_selector ".shepherd-header", text: "ENGLISH The final step"
|
||||||
assert_selector ".shepherd-text", text: "ENGLISH Some text here too, and it's attached to the right"
|
assert_selector ".shepherd-text", text: "ENGLISH Some text here too, and it's attached to the right"
|
||||||
assert_selector ".tippy-arrow", visible: true
|
assert_selector ".shepherd-arrow", visible: true
|
||||||
assert_selector ".shepherd-button", text: "DONE"
|
assert_selector ".shepherd-button", text: "Done"
|
||||||
find(".shepherd-button", text: "DONE").click
|
find(".shepherd-button", text: "Done").click
|
||||||
|
|
||||||
# Tour should no longer be visible
|
# Tour should no longer be visible
|
||||||
refute_selector ".shepherd-element"
|
refute_selector ".shepherd-element"
|
||||||
@ -42,12 +42,12 @@ class ToursTest < ApplicationSystemTestCase
|
|||||||
refute_selector ".shepherd-element"
|
refute_selector ".shepherd-element"
|
||||||
end
|
end
|
||||||
|
|
||||||
test "mark a tour for later and it will not come back in this session" do
|
test "mark a tour for Later and it will not come back in this session" do
|
||||||
visit dashboard_home_url
|
visit dashboard_home_url
|
||||||
assert_selector ".shepherd-element", visible: true
|
assert_selector ".shepherd-element", visible: true
|
||||||
|
|
||||||
# Dismiss tour
|
# Dismiss tour
|
||||||
find(".shepherd-button", text: "LATER").click
|
find(".shepherd-button", text: "Later").click
|
||||||
|
|
||||||
# Tour should no longer be visible
|
# Tour should no longer be visible
|
||||||
refute_selector ".shepherd-element"
|
refute_selector ".shepherd-element"
|
||||||
|
74
yarn.lock
74
yarn.lock
@ -1,74 +0,0 @@
|
|||||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
|
||||||
# yarn lockfile v1
|
|
||||||
|
|
||||||
|
|
||||||
body-scroll-lock@^2.6.1:
|
|
||||||
version "2.6.4"
|
|
||||||
resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz#567abc60ef4d656a79156781771398ef40462e94"
|
|
||||||
integrity sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==
|
|
||||||
|
|
||||||
element-matches@^0.1.2:
|
|
||||||
version "0.1.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/element-matches/-/element-matches-0.1.2.tgz#7345cb71e965bd2b12f725e524591c102198361a"
|
|
||||||
integrity sha512-yWh1otcs3OKUWDvu/IxyI36ZI3WNaRZlI0uG/DK6fu0pap0VYZ0J5pEGTk1zakme+hT0OKHwhlHc0N5TJhY6yQ==
|
|
||||||
|
|
||||||
jquery@^3.4.0:
|
|
||||||
version "3.4.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
|
|
||||||
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
|
|
||||||
|
|
||||||
js-cookie@^2.2.0:
|
|
||||||
version "2.2.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.0.tgz#1b2c279a6eece380a12168b92485265b35b1effb"
|
|
||||||
integrity sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s=
|
|
||||||
|
|
||||||
lodash.defer@^4.1.0:
|
|
||||||
version "4.1.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/lodash.defer/-/lodash.defer-4.1.0.tgz#e9c158a961de1a46ea24fda34685b4ccdd358f3f"
|
|
||||||
integrity sha1-6cFYqWHeGkbqJP2jRoW0zN01jz8=
|
|
||||||
|
|
||||||
lodash.iselement@^4.1.1:
|
|
||||||
version "4.1.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/lodash.iselement/-/lodash.iselement-4.1.1.tgz#f678d4f6f3a964f9ec7f115f2546f3e4a0ba82ca"
|
|
||||||
integrity sha1-9njU9vOpZPnsfxFfJUbz5KC6gso=
|
|
||||||
|
|
||||||
lodash.isobjectlike@^4.0.0:
|
|
||||||
version "4.0.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/lodash.isobjectlike/-/lodash.isobjectlike-4.0.0.tgz#742c5fc65add27924d3d24191681aa9a17b2b60d"
|
|
||||||
integrity sha1-dCxfxlrdJ5JNPSQZFoGqmheytg0=
|
|
||||||
|
|
||||||
lodash.zipobject@^4.1.3:
|
|
||||||
version "4.1.3"
|
|
||||||
resolved "https://registry.yarnpkg.com/lodash.zipobject/-/lodash.zipobject-4.1.3.tgz#b399f5aba8ff62a746f6979bf20b214f964dbef8"
|
|
||||||
integrity sha1-s5n1q6j/YqdG9peb8gshT5ZNvvg=
|
|
||||||
|
|
||||||
popper.js@^1.14.7:
|
|
||||||
version "1.14.7"
|
|
||||||
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
|
|
||||||
integrity sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==
|
|
||||||
|
|
||||||
shepherd.js@^3.1.0:
|
|
||||||
version "3.1.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/shepherd.js/-/shepherd.js-3.1.0.tgz#743769a604ecc8174403fb53766a4b2609690fb5"
|
|
||||||
integrity sha512-Q6akYrPhNBClTxXQG5URAUc1tfimOAeah7EtZ+xqVcpSPo6BY41MxOrB/u5PZPDsGnjak4woJqhgpwo7UmAyiw==
|
|
||||||
dependencies:
|
|
||||||
body-scroll-lock "^2.6.1"
|
|
||||||
element-matches "^0.1.2"
|
|
||||||
lodash.defer "^4.1.0"
|
|
||||||
lodash.iselement "^4.1.1"
|
|
||||||
lodash.isobjectlike "^4.0.0"
|
|
||||||
lodash.zipobject "^4.1.3"
|
|
||||||
smoothscroll-polyfill "^0.4.4"
|
|
||||||
tippy.js "^4.3.4"
|
|
||||||
|
|
||||||
smoothscroll-polyfill@^0.4.4:
|
|
||||||
version "0.4.4"
|
|
||||||
resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
|
|
||||||
integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
|
|
||||||
|
|
||||||
tippy.js@^4.3.4:
|
|
||||||
version "4.3.4"
|
|
||||||
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.4.tgz#9a91fd5ce8c401f181b7adaa6b2c27f3d105f3ba"
|
|
||||||
integrity sha512-O2ukxHOJTLVYZ/TfHjNd8WgAWoefX9uk5QiWRdHfX2PR2lBpUU4BJQLl7U2Ykc8K7o16gTeHEElpuRfgD5b0aA==
|
|
||||||
dependencies:
|
|
||||||
popper.js "^1.14.7"
|
|
Loading…
x
Reference in New Issue
Block a user