stimulus-overlay-helpers 0.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.
- checksums.yaml +7 -0
- data/README.md +52 -0
- data/lib/stimulus-overlay-helpers.rb +20 -0
- data/lib/stimulus_overlay_helpers/railtie.rb +10 -0
- data/lib/stimulus_overlay_helpers/view_helpers.rb +137 -0
- metadata +49 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: ed9c39b6dd74b4ae136adeb53976a9f163274fdb5a015c64893914fa036f976d
|
|
4
|
+
data.tar.gz: a82288e58dbadef0ae37d6c06de3e380151aa7aee6c59deab531ea732b1ea2ea
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: b1f99ebd83e1077f7b0e2fce50691d51931e6af30f1b967ef929adbc4fccab8da54ce9eae9efeddbe2e7bf782698090cd2d8f213caebb95772aa67711fefb748
|
|
7
|
+
data.tar.gz: a38b5ee26de87f5a14ab19486ce86c052752a358c6e27a91fa70382e37d1503d7a0417de9f7e5af34d48d68b84cabaf9802c9bfbc570772e325d0497dffc3f7b
|
data/README.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Stimulus Overlay Helpers
|
|
2
|
+
|
|
3
|
+
This gem adds two view helpers corresponding to the npm package
|
|
4
|
+
[@csedl/hotwire-svelte-helpers](https://www.npmjs.com/package/@csedl/hotwire-svelte-helpers), to a rails app.
|
|
5
|
+
|
|
6
|
+
There is a [online example rails app](https://hotwire-svelte-helpers.sedlmair.ch/).
|
|
7
|
+
|
|
8
|
+
**Links**
|
|
9
|
+
* [How we are building a Rails App](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
add
|
|
14
|
+
|
|
15
|
+
```ruby
|
|
16
|
+
gem 'stimulus-overlay-helpers'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
to your Gemfile and run `bundle install`
|
|
20
|
+
|
|
21
|
+
## Configuration
|
|
22
|
+
|
|
23
|
+
If you work with the helpers on this gem, you can setup a initializer for a custom close-button, like:
|
|
24
|
+
|
|
25
|
+
```ruby
|
|
26
|
+
#=> config/initializers/stimulus_overlay_helpers.rb
|
|
27
|
+
|
|
28
|
+
StimulusDropdown.configure do |config|
|
|
29
|
+
config.close_button_proc = ->(view) do
|
|
30
|
+
view.content_tag(:span, 'X', class: 'close-button')
|
|
31
|
+
end
|
|
32
|
+
end
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Usage Examples
|
|
36
|
+
|
|
37
|
+
```haml
|
|
38
|
+
= dropdown('button-label-or-proc', class: 'fetch-from-server', src: optional_server_request_path) do
|
|
39
|
+
'any content here ...'
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
```haml
|
|
43
|
+
= dropdown(->{inline_svg_tag("my-svg")}, class: 'fetch-from-server', src: optional_server_request_path) do
|
|
44
|
+
'any content here ...'
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
```haml
|
|
48
|
+
= tooltip('tooltip-text-or-proc', class: 'primary-tooltip') do
|
|
49
|
+
tooltip-content
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
License: MIT
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
require 'stimulus_overlay_helpers/railtie' if defined?(Rails)
|
|
2
|
+
require 'stimulus_overlay_helpers/view_helpers'
|
|
3
|
+
|
|
4
|
+
# Provides helpers and configuration for Stimulus overlay behavior.
|
|
5
|
+
module StimulusOverlayHelpers
|
|
6
|
+
class << self
|
|
7
|
+
attr_accessor :close_button_proc
|
|
8
|
+
|
|
9
|
+
def configure
|
|
10
|
+
yield self
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
def reset_config!
|
|
14
|
+
self.close_button_proc = nil
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
# Default fallback if no config is set
|
|
19
|
+
self.close_button_proc = nil
|
|
20
|
+
end
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
module StimulusOverlayHelpers
|
|
2
|
+
module ViewHelpers
|
|
3
|
+
#== dropdown helper
|
|
4
|
+
# @param [button_content] Proc or String for content of the button element
|
|
5
|
+
# @param [panel_at_place] true (default: false) => it would render the panel into content_for(:dropdown_panels) on sticky parts (left-menu / top-bar) panels should be at place for avoiding that the panel would scroll with the content
|
|
6
|
+
# @block [panel_content] Panel Content as block
|
|
7
|
+
# what it does:
|
|
8
|
+
# * a) wraps the button_content in element like: %button{ data: { controller: 'dropdown', ... } } and renders it at place
|
|
9
|
+
# * b) wraps the panel_content in a corresponding element and renders it to the dropdown_panels-box (because of z-index-hierarchy)
|
|
10
|
+
# * c) the stimulus controller always adds the class .dropdown-panel to the panel
|
|
11
|
+
def dropdown(button_content, title = nil, options = {}, &panel_content)
|
|
12
|
+
if title.is_a?(Hash)
|
|
13
|
+
options = title.dup
|
|
14
|
+
title = nil
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
panel_at_place = options.delete(:panel_at_place)
|
|
18
|
+
|
|
19
|
+
id = "dropdown-panel-#{SecureRandom.hex(4)}"
|
|
20
|
+
|
|
21
|
+
src = options.delete(:src)
|
|
22
|
+
|
|
23
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
24
|
+
# create the Button
|
|
25
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
26
|
+
|
|
27
|
+
button_options = options.dup
|
|
28
|
+
button_options[:class] = [options[:class], 'dropdown-button'].compact.join(' ')
|
|
29
|
+
button_options = button_options.merge(data: { controller: 'csedl-dropdown', panel_id: id })
|
|
30
|
+
|
|
31
|
+
button_content = capture(&button_content) if button_content.is_a?(Proc)
|
|
32
|
+
btn = content_tag(:div, button_content, button_options)
|
|
33
|
+
|
|
34
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
35
|
+
# create the panel
|
|
36
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
37
|
+
|
|
38
|
+
panel_options = options.dup
|
|
39
|
+
panel_options[:class] = [options[:class], 'dropdown-panel'].compact.join(' ')
|
|
40
|
+
panel_options[:style] = "display: none;"
|
|
41
|
+
panel_options[:id] = id
|
|
42
|
+
panel_options['data-src'] = src if src
|
|
43
|
+
close_btn_proc = StimulusOverlayHelpers.close_button_proc
|
|
44
|
+
|
|
45
|
+
panel = content_tag(:div, panel_options) do
|
|
46
|
+
safe_join([
|
|
47
|
+
content_tag(:div, class: 'header') do
|
|
48
|
+
concat content_tag(:div, title, class: 'title')
|
|
49
|
+
concat content_tag(:div, class: 'buttons') { close_btn_proc.present? ? close_btn_proc.call(self) : content_tag(:span, 'X', class: 'close-button') }
|
|
50
|
+
end,
|
|
51
|
+
content_tag(:div, class: 'content') do
|
|
52
|
+
capture(&panel_content) if block_given?
|
|
53
|
+
end
|
|
54
|
+
])
|
|
55
|
+
end
|
|
56
|
+
|
|
57
|
+
if panel_at_place
|
|
58
|
+
btn + panel
|
|
59
|
+
else
|
|
60
|
+
content_for(:dropdown_panels, panel)
|
|
61
|
+
btn
|
|
62
|
+
end
|
|
63
|
+
end
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
def tooltip(label, options = {}, &content)
|
|
67
|
+
|
|
68
|
+
panel_at_place = options.delete(:panel_at_place) || false
|
|
69
|
+
delay = options.delete(:delay) || 0.4
|
|
70
|
+
src = options.delete(:src)
|
|
71
|
+
label_class = options.delete(:label_class) || 'tooltip-label'
|
|
72
|
+
|
|
73
|
+
id = ['tooltip', SecureRandom.hex(4)].join('-')
|
|
74
|
+
|
|
75
|
+
lab = if label.is_a?(Proc)
|
|
76
|
+
capture &label
|
|
77
|
+
else
|
|
78
|
+
label
|
|
79
|
+
end
|
|
80
|
+
cont = capture(&content) if block_given?
|
|
81
|
+
|
|
82
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
83
|
+
# create the Label
|
|
84
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
85
|
+
|
|
86
|
+
label_options = options.dup
|
|
87
|
+
label_options[:id] = options.delete(:id)
|
|
88
|
+
label_options[:class] = [options[:class], label_class].compact.join(' ')
|
|
89
|
+
label_options = label_options.merge(data: { controller: 'csedl-tooltip', panel_id: id, delay: delay })
|
|
90
|
+
|
|
91
|
+
label_element = if block_given? && cont.present?
|
|
92
|
+
content_tag(:span, label_options) do
|
|
93
|
+
lab
|
|
94
|
+
end
|
|
95
|
+
else
|
|
96
|
+
lab
|
|
97
|
+
end
|
|
98
|
+
|
|
99
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
100
|
+
# create the panel
|
|
101
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
102
|
+
|
|
103
|
+
panel_options = options.dup
|
|
104
|
+
panel_options[:class] = [options[:class], 'tooltip-panel'].compact.join(' ')
|
|
105
|
+
panel_options[:id] = id
|
|
106
|
+
panel_options[:style] = 'display: none;'
|
|
107
|
+
panel_options['data-src'] = src if src
|
|
108
|
+
|
|
109
|
+
panel_element = if block_given? && cont.present?
|
|
110
|
+
content_tag(:div, panel_options) do
|
|
111
|
+
content_tag(:div, class: 'content') do
|
|
112
|
+
cont
|
|
113
|
+
end
|
|
114
|
+
end
|
|
115
|
+
end
|
|
116
|
+
|
|
117
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
118
|
+
# return the result
|
|
119
|
+
# xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
if !panel_element
|
|
123
|
+
label_element
|
|
124
|
+
elsif panel_at_place
|
|
125
|
+
r = label_element
|
|
126
|
+
r << panel_element
|
|
127
|
+
else
|
|
128
|
+
content_for(:dropdown_panels) do
|
|
129
|
+
panel_element
|
|
130
|
+
end
|
|
131
|
+
label_element
|
|
132
|
+
end
|
|
133
|
+
|
|
134
|
+
end
|
|
135
|
+
|
|
136
|
+
end
|
|
137
|
+
end
|
metadata
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: stimulus-overlay-helpers
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.0.1
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Christian Sedlmair
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2026-04-22 00:00:00.000000000 Z
|
|
12
|
+
dependencies: []
|
|
13
|
+
description:
|
|
14
|
+
email: christian@sedlmair.ch
|
|
15
|
+
executables: []
|
|
16
|
+
extensions: []
|
|
17
|
+
extra_rdoc_files: []
|
|
18
|
+
files:
|
|
19
|
+
- README.md
|
|
20
|
+
- lib/stimulus-overlay-helpers.rb
|
|
21
|
+
- lib/stimulus_overlay_helpers/railtie.rb
|
|
22
|
+
- lib/stimulus_overlay_helpers/view_helpers.rb
|
|
23
|
+
homepage: https://gitlab.com/sedl/csedl-stimulus-dropdown
|
|
24
|
+
licenses:
|
|
25
|
+
- MIT
|
|
26
|
+
metadata:
|
|
27
|
+
homepage_uri: https://gitlab.com/sedl/csedl-stimulus-dropdown
|
|
28
|
+
source_code_uri: https://gitlab.com/sedl/csedl-stimulus-dropdown
|
|
29
|
+
changelog_uri: https://gitlab.com/sedl/csedl-stimulus-dropdown
|
|
30
|
+
post_install_message:
|
|
31
|
+
rdoc_options: []
|
|
32
|
+
require_paths:
|
|
33
|
+
- lib
|
|
34
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
35
|
+
requirements:
|
|
36
|
+
- - ">="
|
|
37
|
+
- !ruby/object:Gem::Version
|
|
38
|
+
version: '0'
|
|
39
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
40
|
+
requirements:
|
|
41
|
+
- - ">="
|
|
42
|
+
- !ruby/object:Gem::Version
|
|
43
|
+
version: '0'
|
|
44
|
+
requirements: []
|
|
45
|
+
rubygems_version: 3.1.6
|
|
46
|
+
signing_key:
|
|
47
|
+
specification_version: 4
|
|
48
|
+
summary: View helpers for the npm package @csedl/hotwire-svelte-helpers
|
|
49
|
+
test_files: []
|