guided_tour 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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