guided_tour 1.0.0 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +56 -6
  3. data/app/helpers/guided_tour/application_helper.rb +19 -19
  4. data/lib/generators/guided_tour/install/install_generator.rb +1 -2
  5. data/lib/guided_tour/engine.rb +3 -1
  6. data/lib/guided_tour/version.rb +2 -2
  7. metadata +20 -40
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 34caeb0b7eb9107de61ce073bc57113b2a78b1c814845e37f60dc20a2d695b33
4
- data.tar.gz: 14cb5604d87c7c09e3c69b51aaa5cc3cc6a89d446662ff76269f56be05d13713
3
+ metadata.gz: 1f4dcb3f701d889ca4d411d7b6373dfb3faef73c16a170bf5315afbcb3a0df51
4
+ data.tar.gz: 1b80cb9f5727a91e4e9e0cecf05e99140eaa6c8b550d7c49ee56401ce2d83d87
5
5
  SHA512:
6
- metadata.gz: ba8083446e4a314a2d4a7385f4813e5a2149ef3c0e6adf12212c611c9c722ae7ae1115d641da821008b5c11e629b602c9ec73421a0d77703d4c3b7cf1a78d9c9
7
- data.tar.gz: bdd249f0f7dad550a40ec913fba847cc88c3839319f3752b7ead1e41272b93e1894825e82fc4bbdab1a4c7c092470882924c946d01fd3385455c9d086100ddf1
6
+ metadata.gz: 062a42f23cf9bbe2730cddae12d98432ad0186a46fbd0a0c2224c496f3071bdee6939496eef1106e7e6a28293c656cc1d0beb4ad3ffbd191caf14f56b031095e
7
+ data.tar.gz: dffcae670d567d7632e3ba3876b578abaf6a10425a865db911a37367913d33c4e9cd1e12113e940223318460a879994df0ad52e2b4eb26feb0d6f88dcab3e983
data/README.md CHANGED
@@ -2,14 +2,15 @@
2
2
 
3
3
  A simple Stimulus controller and a helper that enables you to show a guided tour overlay on your website. It requires Bootstrap to be installed and have Popover loaded.
4
4
 
5
- This gem comes with the npm package [@itsbede/guided-tour](https://www.npmjs.com/package/@itsbede/guided-tour) that is installed and included into your apps `app/javascript/controller/application.js` by running the installer.
5
+ This gem comes with the npm package [@itsbede/guided-tour](https://www.npmjs.com/package/@itsbede/guided-tour) ([package repo](https://github.com/its-bede/guided-tour-package)) that is installed and included into your apps `app/javascript/controller/application.js` by running the installer.
6
+
7
+ ## Demo
8
+
9
+ ![Demo Gif](./docs/guided_tour_demo.gif)
6
10
 
7
11
  ## Requirements
8
12
 
9
- - Rails >= 7.1
10
- - stimulus-rails
11
- - jsbundling-rails with esbuild
12
- - Node.js & Yarn
13
+ This gem is built for Rails apps (>= 7.1) using stimulus and esbuild (with jsbundling).
13
14
 
14
15
  ## Installation
15
16
 
@@ -19,7 +20,7 @@ This gem comes with the npm package [@itsbede/guided-tour](https://www.npmjs.com
19
20
  ```
20
21
  2. Run installer
21
22
  ```bash
22
- ./bin/rails guided_tour:install
23
+ ./bin/rails g guided_tour:install
23
24
  ```
24
25
 
25
26
  ## Usage
@@ -59,6 +60,8 @@ en:
59
60
 
60
61
  ## Customization
61
62
 
63
+ ### Texts
64
+
62
65
  You can customize the header and the navigation buttons of the popover by defining this keys in your locale .yml
63
66
 
64
67
  ```yaml
@@ -79,6 +82,53 @@ de:
79
82
 
80
83
  Make sure to include `{{current}}` and `{{total}}` in your `step-line` key to have the progress of the tour shown.
81
84
 
85
+ ### Styles
86
+
87
+ This is the default styling from the package that is inserted into the pages `<head></head>`.
88
+
89
+ ```css
90
+ .guided-tour--overlay {
91
+ box-shadow: rgb(233 77 77 / 80%) 0 0 1px 2px,
92
+ rgb(84 84 84 / 50%) 0 0 0 5000px;
93
+ box-sizing: content-box;
94
+ position: absolute;
95
+ border-radius: 4px;
96
+ transition: all .3s ease-out;
97
+ z-index: 9998;
98
+ pointer-events: none;
99
+ opacity: 0;
100
+ }
101
+
102
+ .guided-tour--starter-btn-wrapper {
103
+ position: absolute;
104
+ right: 1rem;
105
+ bottom: 1rem;
106
+ animation: slideFromRight 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
107
+ animation-delay: 1s;
108
+ /* Ensures button is hidden before animation starts */
109
+ opacity: 0;
110
+ /* Improve animation performance */
111
+ will-change: transform, opacity;
112
+
113
+ > .btn {
114
+ /* Prevent any layout shifts during animation */
115
+ transform-origin: right center;
116
+ z-index: 1000; /* Ensure button stays above other content */
117
+ }
118
+ }
119
+
120
+ .guided-tour--overlay.active {
121
+ opacity: 1;
122
+ }
123
+
124
+ .guided-tour--popover {
125
+ z-index: 9999;
126
+ max-width: 33.3%;
127
+ }
128
+ ```
129
+
130
+ You can override the default styles by using these CSS classes. Keep in mind that this package is meant to be used with bootstrap.
131
+
82
132
  ## License
83
133
 
84
134
  The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
data/app/helpers/guided_tour/application_helper.rb CHANGED
@@ -6,37 +6,37 @@ module GuidedTour
6
6
  # @param map [Hash] target element ids as keys, explantions as values
7
7
  # @return [String] the html markups as html_safe
8
8
  def guide_through(map)
9
- tag.div(class: 'guided-tour--wrapper', data: {
10
- controller: 'guided-tour--tour',
11
- guided_tour__tour_next_btn_text_value: t('guided-tour.next-btn-text'),
12
- guided_tour__tour_prev_btn_text_value: t('guided-tour.prev-btn-text'),
13
- guided_tour__tour_done_btn_text_value: t('guided-tour.done-btn-text'),
14
- guided_tour__tour_step_line_text_value: t('guided-tour.step-line')
9
+ tag.div(class: "guided-tour--wrapper", data: {
10
+ controller: "guided-tour--tour",
11
+ guided_tour__tour_next_btn_text_value: t("guided-tour.next-btn-text"),
12
+ guided_tour__tour_prev_btn_text_value: t("guided-tour.prev-btn-text"),
13
+ guided_tour__tour_done_btn_text_value: t("guided-tour.done-btn-text"),
14
+ guided_tour__tour_step_line_text_value: t("guided-tour.step-line")
15
15
  }) do
16
16
  safe_join([
17
- tag.div(class: 'guided-tour--starter-btn-wrapper') do
17
+ tag.div(class: "guided-tour--starter-btn-wrapper") do
18
18
  safe_join([
19
- tag.button(type: 'button', class: 'btn btn-primary ms-auto', id: 'guidedTourStarterBtn') do
19
+ tag.button(type: "button", class: "btn btn-primary ms-auto", id: "guidedTourStarterBtn") do
20
20
  safe_join([
21
- tag.i(class: 'bi bi-lightbulb'),
22
- '&nbsp;'.html_safe,
23
- t('guided-tour.starter-button-text')
21
+ tag.i(class: "bi bi-lightbulb"),
22
+ "&nbsp;".html_safe,
23
+ t("guided-tour.starter-button-text")
24
24
  ])
25
25
  end
26
26
  ])
27
27
  end,
28
- tag.div(class: 'guided-tour--overlay', data: {
29
- guided_tour__tour_target: 'overlay',
30
- bs_container: 'body',
31
- bs_toggle: 'popover',
32
- bs_placement: 'bottom',
33
- bs_content: ''
28
+ tag.div(class: "guided-tour--overlay", data: {
29
+ guided_tour__tour_target: "overlay",
30
+ bs_container: "body",
31
+ bs_toggle: "popover",
32
+ bs_placement: "bottom",
33
+ bs_content: ""
34
34
  }),
35
- tag.ol(class: 'd-none') do
35
+ tag.ol(class: "d-none") do
36
36
  safe_join(
37
37
  map.map do |id, guide_text|
38
38
  tag.li(guide_text, data: {
39
- guided_tour__tour_target: 'explanation',
39
+ guided_tour__tour_target: "explanation",
40
40
  target_element: id
41
41
  })
42
42
  end
data/lib/generators/guided_tour/install/install_generator.rb CHANGED
@@ -4,7 +4,6 @@
4
4
  module GuidedTour
5
5
  module Generators
6
6
  class InstallGenerator < Rails::Generators::Base
7
-
8
7
  def check_dependencies
9
8
  unless File.exist?("app/javascript/controllers/index.js")
10
9
  say "Installing stimulus-rails...", :green
@@ -36,4 +35,4 @@ module GuidedTour
36
35
  end
37
36
  end
38
37
  end
39
- end
38
+ end
data/lib/guided_tour/engine.rb CHANGED
@@ -1,5 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ require_relative "../../app/helpers/guided_tour/application_helper"
4
+
3
5
  # lib/guided_tour/engine.rb
4
6
  module GuidedTour
5
7
  class Engine < ::Rails::Engine
@@ -28,7 +30,7 @@ module GuidedTour
28
30
  ]
29
31
  end
30
32
 
31
- initializer 'guided_tour.action_controller' do
33
+ initializer "guided_tour.action_controller" do
32
34
  ActiveSupport.on_load :action_controller do
33
35
  helper GuidedTour::ApplicationHelper
34
36
  end
data/lib/guided_tour/version.rb CHANGED
@@ -4,8 +4,8 @@ module GuidedTour
4
4
  # update this version number when the used Rails version changes
5
5
  MAJOR = 1
6
6
  MINOR = 0
7
- TINY = 0
7
+ TINY = 1
8
8
  PRE = nil
9
9
 
10
- VERSION = [MAJOR, MINOR, TINY, PRE].compact.join(".")
10
+ VERSION = [ MAJOR, MINOR, TINY, PRE ].compact.join(".")
11
11
  end
metadata CHANGED
@@ -1,31 +1,17 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: guided_tour
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.0
4
+ version: 1.0.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Benjamin Deutscher
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-11-24 00:00:00.000000000 Z
11
+ date: 2024-11-26 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
- name: railties
15
- requirement: !ruby/object:Gem::Requirement
16
- requirements:
17
- - - ">="
18
- - !ruby/object:Gem::Version
19
- version: '7.1'
20
- type: :runtime
21
- prerelease: false
22
- version_requirements: !ruby/object:Gem::Requirement
23
- requirements:
24
- - - ">="
25
- - !ruby/object:Gem::Version
26
- version: '7.1'
27
- - !ruby/object:Gem::Dependency
28
- name: actionview
14
+ name: rails
29
15
  requirement: !ruby/object:Gem::Requirement
30
16
  requirements:
31
17
  - - ">="
@@ -33,7 +19,7 @@ dependencies:
33
19
  version: '7.1'
34
20
  - - "<"
35
21
  - !ruby/object:Gem::Version
36
- version: '8.0'
22
+ version: '9.0'
37
23
  type: :runtime
38
24
  prerelease: false
39
25
  version_requirements: !ruby/object:Gem::Requirement
@@ -43,55 +29,49 @@ dependencies:
43
29
  version: '7.1'
44
30
  - - "<"
45
31
  - !ruby/object:Gem::Version
46
- version: '8.0'
32
+ version: '9.0'
47
33
  - !ruby/object:Gem::Dependency
48
- name: activesupport
34
+ name: rails-i18n
49
35
  requirement: !ruby/object:Gem::Requirement
50
36
  requirements:
51
37
  - - ">="
52
38
  - !ruby/object:Gem::Version
53
- version: '7.1'
39
+ version: '7.0'
54
40
  - - "<"
55
41
  - !ruby/object:Gem::Version
56
- version: '8.0'
42
+ version: '9.0'
57
43
  type: :runtime
58
44
  prerelease: false
59
45
  version_requirements: !ruby/object:Gem::Requirement
60
46
  requirements:
61
47
  - - ">="
62
48
  - !ruby/object:Gem::Version
63
- version: '7.1'
49
+ version: '7.0'
64
50
  - - "<"
65
51
  - !ruby/object:Gem::Version
66
- version: '8.0'
52
+ version: '9.0'
67
53
  - !ruby/object:Gem::Dependency
68
- name: rails-i18n
54
+ name: stimulus-rails
69
55
  requirement: !ruby/object:Gem::Requirement
70
56
  requirements:
71
57
  - - ">="
72
58
  - !ruby/object:Gem::Version
73
- version: '7.0'
74
- - - "<"
75
- - !ruby/object:Gem::Version
76
- version: '8.0'
59
+ version: '0'
77
60
  type: :runtime
78
61
  prerelease: false
79
62
  version_requirements: !ruby/object:Gem::Requirement
80
63
  requirements:
81
64
  - - ">="
82
65
  - !ruby/object:Gem::Version
83
- version: '7.0'
84
- - - "<"
85
- - !ruby/object:Gem::Version
86
- version: '8.0'
66
+ version: '0'
87
67
  - !ruby/object:Gem::Dependency
88
- name: stimulus-rails
68
+ name: minitest
89
69
  requirement: !ruby/object:Gem::Requirement
90
70
  requirements:
91
71
  - - ">="
92
72
  - !ruby/object:Gem::Version
93
73
  version: '0'
94
- type: :runtime
74
+ type: :development
95
75
  prerelease: false
96
76
  version_requirements: !ruby/object:Gem::Requirement
97
77
  requirements:
@@ -99,19 +79,19 @@ dependencies:
99
79
  - !ruby/object:Gem::Version
100
80
  version: '0'
101
81
  - !ruby/object:Gem::Dependency
102
- name: minitest
82
+ name: capybara
103
83
  requirement: !ruby/object:Gem::Requirement
104
84
  requirements:
105
- - - "~>"
85
+ - - ">="
106
86
  - !ruby/object:Gem::Version
107
- version: '5.0'
87
+ version: '0'
108
88
  type: :development
109
89
  prerelease: false
110
90
  version_requirements: !ruby/object:Gem::Requirement
111
91
  requirements:
112
- - - "~>"
92
+ - - ">="
113
93
  - !ruby/object:Gem::Version
114
- version: '5.0'
94
+ version: '0'
115
95
  - !ruby/object:Gem::Dependency
116
96
  name: sqlite3
117
97
  requirement: !ruby/object:Gem::Requirement