abraham 1.5.3 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c5e2441be140ebda54d2e6d25d2bab0f9ff1c4a60c074ad47f05e56675f70ec6
4
- data.tar.gz: 5389309e36ef642778c020ec0674143ea96875c7694b96ecc7fe5644cf87ceaf
3
+ metadata.gz: c8a61048b60ffe74990a86c146886551d315f2da86eb70ce31f5b28dcdb4fe5e
4
+ data.tar.gz: 8dc414098b445450cf739cec4b5b43b4b15c0322bacbc2d5dc4b2ba3f2e3aa45
5
5
  SHA512:
6
- metadata.gz: fb21305418c187e1f72eededaa0a4a40a3d7af01cf819b18a34d96f0015c322a70f4ac1cb227ac0d8107e30093695d0a2f21af6d0f01a0d9457b75853fc79b32
7
- data.tar.gz: 6dff4bceecb90c0ef59246a8442fa605498fd4c6870df9e4ae68cff5b8b70b585e2604607086ca40323b3adba5bf26d66945a234e2845b223f64b697b2aeb30d
6
+ metadata.gz: 17a96b08513bd5adda880abe973557c685b8c4b4d0aba48475ec6c1dcf5fcda2192f72a3536ab5fa01f7740353dcc38e24e9a2a8236a3e3684c17050b679f486
7
+ data.tar.gz: 57d9abd011c6168fabfba830288f0855a9a24e40a634254264d453efb3d2c556d7ef685b751729bcd9e69ba460cf0652415d20ab82f03244a2e85775d869eebd
data/README.md CHANGED
@@ -6,11 +6,12 @@ _Guide your users in the one true path._
6
6
 
7
7
  ![Watercolor Sheep](https://upload.wikimedia.org/wikipedia/commons/e/e4/Watercolor_Sheep_Drawing.jpg)
8
8
 
9
- 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.
9
+ 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.
10
10
 
11
11
  * Define tour content with simple YAML files, in any/many languages.
12
12
  * Organize tours by controller and action.
13
13
  * Plays nicely with Turbolinks.
14
+ * Ships with two basic CSS themes (default & dark) -- or write your own
14
15
 
15
16
  ## Requirements
16
17
 
@@ -36,7 +37,7 @@ $ rails db:migrate
36
37
  Install the JavaScript dependencies:
37
38
 
38
39
  ```
39
- $ yarn add jquery js-cookie shepherd.js
40
+ $ yarn add jquery@^3.4.0 js-cookie@^2.2.0 shepherd.js@^6.0.0-beta
40
41
  ```
41
42
 
42
43
  Require `abraham` in `app/assets/javascripts/application.js`
@@ -45,29 +46,26 @@ Require `abraham` in `app/assets/javascripts/application.js`
45
46
  //= require abraham
46
47
  ```
47
48
 
48
- Require a Shepherd.js CSS theme in `app/assets/stylesheets/application.scss`
49
+ Require a CSS theme in `app/assets/stylesheets/application.scss`
49
50
 
50
51
  ```
51
- //= require "shepherd.js/dist/css/shepherd-theme-default"
52
+ *= require abraham/theme-default
52
53
  ```
53
54
 
54
- Shepherd.js provides the following themes:
55
+ Abraham provides the following themes:
55
56
 
56
- - `shepherd-theme-arrows`
57
- - `shepherd-theme-arrows-fix`
58
- - `shepherd-theme-arrows-plain-buttons`
59
- - `shepherd-theme-dark`
60
- - `shepherd-theme-default`
61
- - `shepherd-theme-square`
62
- - `shepherd-theme-square-dark`
57
+ - `theme-default`
58
+ - `theme-dark`
63
59
 
64
60
  Update `config/abraham.yml` if you choose a different theme:
65
61
 
66
62
  ```
67
63
  defaults: &defaults
68
- :default_theme: 'shepherd-theme-arrows'
64
+ :tour_options: '{ defaultStepOptions: { classes: "theme-dark" } }'
69
65
  ```
70
66
 
67
+ 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).
68
+
71
69
  Tell Abraham where to insert its generated JavaScript in `app/views/layouts/application.html.erb`, just before the closing `body` tag:
72
70
 
73
71
  ```erb
@@ -136,6 +134,24 @@ Rails.application.configure do
136
134
  end
137
135
  ```
138
136
 
137
+ ## Upgrading from version 1
138
+
139
+ Abraham v1 was built using Shepherd 1.8, v2 now uses Shepherd 6 -- quite a jump, yes.
140
+
141
+ If you were using Abraham v1, you'll want to take the following steps to upgrade:
142
+
143
+ 1. Update your gem to the latest version
144
+ 1. Fix your yarn dependencies to use the right versions
145
+ 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.
146
+ 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`
147
+ 1. There's been a slight change to `initializers/abraham.rb`. You can just change line 22 to:
148
+
149
+ ```rb
150
+ config.abraham.tour_options = abraham_config[:tour_options]
151
+ ```
152
+
153
+ If you have any trouble at all, please [submit an issue](https://github.com/actmd/abraham/issues) for assistance!
154
+
139
155
  ## Contributing
140
156
 
141
157
  Contributions are welcome!
@@ -150,6 +166,8 @@ Everyone interacting in Abraham's codebase, issue tracker, etc. is expected to f
150
166
 
151
167
  This Rails engine contains a test app called `dummy` with controller and system tests. They'll all get run with `rails t`.
152
168
 
169
+ 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.
170
+
153
171
  Final testing should be done in a standalone Rails app, following the README instructions.
154
172
 
155
173
  To install the `abraham` gem with a local path:
@@ -160,7 +178,7 @@ gem 'abraham', path: '~/Workspace/abraham'
160
178
 
161
179
  #### Automated testing
162
180
 
163
- We use TravisCI automatically testing this rails engine. For test history, venture over to [TravisCI](https://travis-ci.com/actmd/abraham).
181
+ 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).
164
182
 
165
183
  ### Releasing
166
184
 
@@ -0,0 +1,194 @@
1
+ .shepherd-button {
2
+ background: #3288e6;
3
+ border: 0;
4
+ border-radius: 3px;
5
+ color: hsla(0, 0%, 100%, .75);
6
+ cursor: pointer;
7
+ margin-right: .5rem;
8
+ padding: .5rem 1.5rem;
9
+ transition: all .5s ease;
10
+ }
11
+
12
+ .shepherd-button:not(:disabled):hover {
13
+ background: #196fcc;
14
+ color: hsla(0, 0%, 100%, .75);
15
+ }
16
+
17
+ .shepherd-button.shepherd-button-secondary {
18
+ background: #f1f2f3;
19
+ color: rgba(0, 0, 0, .75);
20
+ }
21
+
22
+ .shepherd-button.shepherd-button-secondary:not(:disabled):hover {
23
+ background: #d6d9db;
24
+ color: rgba(0, 0, 0, .75);
25
+ }
26
+
27
+ .shepherd-button:disabled {
28
+ cursor: not-allowed;
29
+ }
30
+
31
+ .shepherd-footer {
32
+ border-bottom-left-radius: 5px;
33
+ border-bottom-right-radius: 5px;
34
+ display: flex;
35
+ justify-content: flex-end;
36
+ padding: 0 1rem 1rem;
37
+ }
38
+
39
+ .shepherd-footer .shepherd-button:last-child {
40
+ margin-right: 0;
41
+ }
42
+
43
+ .shepherd-cancel-icon {
44
+ background: transparent;
45
+ border: none;
46
+ color: hsla(0, 0%, 50.2%, .75);
47
+ font-size: 2em;
48
+ cursor: pointer;
49
+ font-weight: 400;
50
+ margin: 0;
51
+ padding: 0;
52
+ transition: color .5s ease;
53
+ }
54
+
55
+ .shepherd-cancel-icon:hover {
56
+ color: rgba(0, 0, 0, .75);
57
+ }
58
+
59
+ .shepherd-has-title .shepherd-content .shepherd-cancel-icon {
60
+ color: hsla(0, 0%, 50.2%, .75);
61
+ }
62
+
63
+ .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
64
+ color: rgba(0, 0, 0, .75);
65
+ }
66
+
67
+ .shepherd-title {
68
+ display: flex;
69
+ font-size: 1rem;
70
+ font-weight: 400;
71
+ flex: 1 0 auto;
72
+ margin: 0;
73
+ padding: 0;
74
+ }
75
+
76
+ .shepherd-header {
77
+ align-items: center;
78
+ border-top-left-radius: 5px;
79
+ border-top-right-radius: 5px;
80
+ display: flex;
81
+ justify-content: flex-end;
82
+ padding: 0.5rem 1rem 0;
83
+ }
84
+
85
+ .shepherd-has-title .shepherd-content .shepherd-header {
86
+ padding: 1rem;
87
+ }
88
+
89
+ .shepherd-text {
90
+ font-size: 1rem;
91
+ padding: 1rem;
92
+ }
93
+
94
+ .shepherd-text p {
95
+ margin-top: 0;
96
+ }
97
+
98
+ .shepherd-text p:last-child {
99
+ margin-bottom: 0;
100
+ }
101
+
102
+ .shepherd-content {
103
+ border-radius: 5px;
104
+ outline: none;
105
+ padding: 0;
106
+ }
107
+
108
+ .shepherd-element {
109
+ border-radius: 5px;
110
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
111
+ max-width: 400px;
112
+ outline: none;
113
+ z-index: 9999;
114
+ line-height: 1.2;
115
+ }
116
+
117
+ .shepherd-element,
118
+ .shepherd-element *,
119
+ .shepherd-element :after,
120
+ .shepherd-element :before {
121
+ box-sizing: border-box;
122
+ }
123
+
124
+ .shepherd-element .shepherd-arrow {
125
+ border: 16px solid transparent;
126
+ content: "";
127
+ display: block;
128
+ height: 16px;
129
+ pointer-events: none;
130
+ position: absolute;
131
+ width: 16px;
132
+ z-index: 10000;
133
+ }
134
+
135
+ .shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
136
+ .shepherd-element.shepherd-pinned-top .shepherd-arrow {
137
+ bottom: 0;
138
+ border-top-color: #232323;
139
+ left: 50%;
140
+ transform: translate(-50%, 100%);
141
+ }
142
+
143
+ .shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
144
+ border-bottom-color: #232323;
145
+ left: 50%;
146
+ top: 0;
147
+ transform: translate(-50%, -100%);
148
+ }
149
+
150
+ .shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
151
+ border-bottom-color: #303030;
152
+ }
153
+
154
+ .shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
155
+ .shepherd-element.shepherd-pinned-right .shepherd-arrow {
156
+ border-right-color: #232323;
157
+ left: 0;
158
+ top: 50%;
159
+ transform: translate(-100%, -50%);
160
+ }
161
+
162
+ .shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
163
+ .shepherd-element.shepherd-pinned-left .shepherd-arrow {
164
+ border-left-color: #232323;
165
+ right: 0;
166
+ top: 50%;
167
+ transform: translate(100%, -50%);
168
+ }
169
+
170
+ .shepherd-modal-overlay-container {
171
+ -ms-filter: progid:dximagetransform.microsoft.gradient.alpha(Opacity=50);
172
+ filter: alpha(opacity=50);
173
+ fill-rule: evenodd;
174
+ height: 0;
175
+ left: 0;
176
+ opacity: 0;
177
+ overflow: hidden;
178
+ pointer-events: none;
179
+ position: fixed;
180
+ top: 0;
181
+ transition: all .3s ease-out, height 0ms .3s, opacity .3s 0ms;
182
+ width: 100vw;
183
+ z-index: 9997;
184
+ }
185
+
186
+ .shepherd-modal-overlay-container.shepherd-modal-is-visible {
187
+ height: 100vh;
188
+ opacity: .5;
189
+ transition: all .3s ease-out, height 0s 0s, opacity .3s 0s;
190
+ }
191
+
192
+ .shepherd-modal-overlay-container.shepherd-modal-is-visible path {
193
+ pointer-events: all;
194
+ }
@@ -0,0 +1,40 @@
1
+ @import "_common";
2
+
3
+ .theme-dark.shepherd-element {
4
+ background: #232323;
5
+
6
+ .shepherd-text {
7
+ color: #eee;
8
+ }
9
+
10
+ .shepherd-title {
11
+ color: #fff;
12
+ }
13
+
14
+ &.shepherd-has-title .shepherd-content .shepherd-header {
15
+ background: #303030;
16
+ }
17
+
18
+ &.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
19
+ &.shepherd-pinned-top .shepherd-arrow {
20
+ border-top-color: #232323;
21
+ }
22
+
23
+ &.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
24
+ border-bottom-color: #232323;
25
+ }
26
+
27
+ &.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
28
+ border-bottom-color: #303030;
29
+ }
30
+
31
+ &.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
32
+ &.shepherd-pinned-right .shepherd-arrow {
33
+ border-right-color: #232323;
34
+ }
35
+
36
+ &.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
37
+ &.shepherd-pinned-left .shepherd-arrow {
38
+ border-left-color: #232323;
39
+ }
40
+ }
@@ -0,0 +1,40 @@
1
+ @import "_common";
2
+
3
+ .theme-default.shepherd-element {
4
+ background: #fff;
5
+
6
+ .shepherd-text {
7
+ color: rgba(0, 0, 0, .75);
8
+ }
9
+
10
+ .shepherd-title {
11
+ color: rgba(0, 0, 0, .75);
12
+ }
13
+
14
+ &.shepherd-has-title .shepherd-content .shepherd-header {
15
+ background: #e6e6e6;
16
+ }
17
+
18
+ &.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
19
+ &.shepherd-pinned-top .shepherd-arrow {
20
+ border-top-color: #fff;
21
+ }
22
+
23
+ &.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
24
+ border-bottom-color: #fff;
25
+ }
26
+
27
+ &.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
28
+ border-bottom-color: #e6e6e6;
29
+ }
30
+
31
+ &.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
32
+ &.shepherd-pinned-right .shepherd-arrow {
33
+ border-right-color: #fff;
34
+ }
35
+
36
+ &.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
37
+ &.shepherd-pinned-left .shepherd-arrow {
38
+ border-left-color: #fff;
39
+ }
40
+ }
@@ -1,9 +1,5 @@
1
1
  <script>
2
- var tour = new Shepherd.Tour({
3
- defaults: {
4
- classes: '<%= Rails.configuration.abraham.default_theme %>'
5
- }
6
- });
2
+ const tour = new Shepherd.Tour(<%= Rails.configuration.abraham.tour_options.html_safe unless Rails.configuration.abraham.tour_options.nil? %>);
7
3
 
8
4
  tour.on("complete", function() {
9
5
  // ajax
@@ -26,7 +22,8 @@
26
22
  });
27
23
 
28
24
  <% steps.each_with_index do |(key, step), index| %>
29
- tour.addStep('step-<%= key %>', {
25
+ tour.addStep({
26
+ id: 'step-<%= key %>',
30
27
  <% if step.key?('title') %>
31
28
  title: "<%= step['title'] %>",
32
29
  <% end %>
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Abraham
4
- VERSION = "1.5.3"
4
+ VERSION = "2.0.0"
5
5
  end
@@ -1,5 +1,8 @@
1
1
  defaults: &defaults
2
- :default_theme: 'shepherd-theme-default'
2
+ # Add any valid Shepherd.js configuration JSON here
3
+ # and it will be passed into the `new Shepherd.Tour()`
4
+ # initializer.
5
+ :tour_options: '{ defaultStepOptions: { classes: "theme-default" } }'
3
6
 
4
7
  development:
5
8
  <<: *defaults
@@ -19,6 +19,6 @@ Rails.application.configure do
19
19
 
20
20
  abraham_config = Rails.application.config_for :abraham
21
21
  config.abraham = ActiveSupport::OrderedOptions.new
22
- config.abraham.default_theme = abraham_config[:default_theme]
22
+ config.abraham.tour_options = abraham_config[:tour_options]
23
23
  config.abraham.tours = tours
24
24
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: abraham
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.5.3
4
+ version: 2.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jonathan Abbett
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-09-04 00:00:00.000000000 Z
11
+ date: 2019-10-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sassc-rails
@@ -77,6 +77,9 @@ files:
77
77
  - Rakefile
78
78
  - app/assets/config/abraham_manifest.js
79
79
  - app/assets/javascripts/abraham/index.js
80
+ - app/assets/stylesheets/abraham/_common.scss
81
+ - app/assets/stylesheets/abraham/theme-dark.scss
82
+ - app/assets/stylesheets/abraham/theme-default.scss
80
83
  - app/controllers/abraham_histories_controller.rb
81
84
  - app/helpers/abraham_helper.rb
82
85
  - app/models/abraham_history.rb