futurism 0.1.1 → 0.3.1

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: 54844ecdb7da8a4fe22cc7635a9b7eba3a5a6ffe29a68c8f5a12f9aae0f616da
4
- data.tar.gz: 1b4e6c2d0ae11095ae535e1248e72af66dd030c9e3bb3b7d8fbda47cb204eccb
3
+ metadata.gz: d4790301758ddfdcf0a2e22b4f0f55977cdaf96f64fcef74ba85ccb4f6e7c71c
4
+ data.tar.gz: 07435fbcfbc75b1846015b319f8dc2056897f8cbb020ff29bf92c48366ea8a9a
5
5
  SHA512:
6
- metadata.gz: 47de6e6462abad9b682b01297cf3ee76ba7b4111f41afd8c8d81baa9b3d36b5be02c548e2421150437f84cbab8644d2766e976fa836490ca37a57b6497536f18
7
- data.tar.gz: a1c145a00972f4ed088bfc1283a2e1bd133dc59828740be0bf6a599968a914fcbf1771d25747265166b1c193e801029490d981a7baf29e0041948402f372430b
6
+ metadata.gz: 88a0bb998ccc4192238f8936f80f77cf9b938bd70d141413be1d049265e59eb555d35ad77940ebae8d072b512aa97291a81d57ac1d397bf9c8fc37d54db4e55a
7
+ data.tar.gz: 6d5e8a2af44e58857f27fb54e6304f903c43901a05e8036f0ba1622e8ed0b8c29fbdbf1fc99e2fdfcbcaf841430ed3f3a7e5bd7d905d891797bbf294d803fe8b
data/README.md CHANGED
@@ -1,14 +1,39 @@
1
1
  # Futurism
2
+ [![Twitter follow](https://img.shields.io/twitter/follow/julian_rubisch?style=social)](https://twitter.com/julian_rubisch)
3
+ <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
4
+ [![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)
5
+ <!-- ALL-CONTRIBUTORS-BADGE:END -->
2
6
  Lazy-load Rails partials via CableReady
3
7
 
8
+ :rotating_light: *Futurism is still in pre-1.0 state. As much as I hope to keep the API backwards-compatible, I cannot guarantee it* :rotating_light:
9
+
10
+ <img src="https://user-images.githubusercontent.com/4352208/88374198-9e6f3500-cd99-11ea-804b-0216ed320eff.jpg" alt="birmingham-museums-trust-GrvC6MI-z4w-unsplash" width="50%" align="center"/>
11
+ <span>Photo by <a href="https://unsplash.com/@birminghammuseumstrust?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Birmingham Museums Trust</a> on <a href="https://unsplash.com/s/photos/futurism?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
12
+
13
+ ## Facts
14
+ - only one dependency: CableReady
15
+ - bundle size (without CableReady) is around [~1.04kB](https://bundlephobia.com/result?p=@minthesize/futurism@0.1.3)
16
+
17
+ ### Browser Support
18
+
19
+ - Chrome v67+ (v54+ via Polyfill)
20
+ - Firefox v63+
21
+ - Edge v79+
22
+ - Safari v10.1+ via Polyfill
23
+ - iOS Safari & Chrome v10.3+ via Polyfill
24
+
25
+ [Caniuse](https://www.caniuse.com/#search=custom%20elements)
26
+
4
27
  ## Usage
5
28
  with a helper in your template
6
29
 
7
30
  ```erb
8
- <%= futurize @posts %>
31
+ <%= futurize @posts, extends: :div do %>
32
+ <!-- placeholder -->
33
+ <% end %>
9
34
  ```
10
35
 
11
- custom `<futurism-elements>` (in the form of a `<div>` or a `<tr is="futurism-table-row">` are rendered. Those custom elements have an `IntersectionObserver` attached that will send a signed global id to an ActionCable channel (`FuturismChannel`) which will then replace the placeholders with the actual resource partial.
36
+ custom `<futurism-element>`s (in the form of a `<div>` or a `<tr is="futurism-table-row">` are rendered. Those custom elements have an `IntersectionObserver` attached that will send a signed global id to an ActionCable channel (`FuturismChannel`) which will then replace the placeholders with the actual resource partial.
12
37
 
13
38
  With that method, you could lazy load every class that has to_partial_path defined (ActiveModel has by default).
14
39
 
@@ -20,6 +45,86 @@ You can pass the placeholder as a block:
20
45
  <% end %>
21
46
  ```
22
47
 
48
+ ![aa601dec1930151f71dbf0d6b02b61c9](https://user-images.githubusercontent.com/4352208/87131629-f768a480-c294-11ea-89a9-ea0a76ee06ef.gif)
49
+
50
+ ## API
51
+
52
+ Currently there are two ways to call `futurize`, designed to wrap `render`'s behavior:
53
+
54
+ ### Resource
55
+
56
+ You can pass a single `ActiveRecord` or an `ActiveRecord::Relation` to `futurize`, just as you would call `render`:
57
+
58
+ ```erb
59
+ <%= futurize @posts, extends: :tr do %>
60
+ <td class="placeholder"></td>
61
+ <% end %>
62
+ ```
63
+
64
+ #### Partial Path
65
+
66
+ Remember that you can override the partial path in you models, like so:
67
+
68
+ ```rb
69
+ class Post < ApplicationRecord
70
+ def to_partial_path
71
+ "home/post"
72
+ end
73
+ end
74
+ ```
75
+
76
+ That way you get maximal flexibility when just specifying a single resource.
77
+
78
+ ### Explicit Partial
79
+
80
+ Call `futurize` with a `partial` keyword:
81
+
82
+ ```erb
83
+ <%= futurize partial: "items/card", locals: {card: @card}, extends: :div do %>
84
+ <div class="spinner"></div>
85
+ <% end %>
86
+ ```
87
+
88
+ You can also use the shorthand syntax:
89
+
90
+ ```erb
91
+ <%= futurize "items/card", card: @card, extends: :div do %>
92
+ <div class="spinner"></div>
93
+ <% end %>
94
+ ```
95
+
96
+ ### HTML Options
97
+
98
+ You can pass a hash of attribute/value pairs which will be mixed into the HTML markup for the placeholder element. This is important for layouts that require elements to have dimensionality. For example, many scripts calculate size based on element height and width. This option ensures that your elements have integrity, even if they are gone before you see them.
99
+
100
+ ```erb
101
+ <%= futurize @posts, extends: :tr, html_options: {style: "width: 50px; height: 50px;"} do %>
102
+ <td class="placeholder"></td>
103
+ <% end %>
104
+ ```
105
+
106
+ This will output the following:
107
+
108
+ ```html
109
+ <tr style="width: 50px; height: 50px;">
110
+ <td class="placeholder"></td>
111
+ </tr>
112
+ ```
113
+
114
+ #### Collections
115
+
116
+ Collection rendering is also possible:
117
+
118
+ ```erb
119
+ <%= futurize partial: "items/card", collection: @cards, extends: :div do %>
120
+ <div class="spinner"></div>
121
+ <% end %>
122
+ ```
123
+
124
+ ## Events
125
+
126
+ Once your futurize element has been rendered, the `futurize:appeared` custom event will be called.
127
+
23
128
  ## Installation
24
129
  Add this line to your application's Gemfile:
25
130
 
@@ -38,8 +143,55 @@ To copy over the javascript files to your application, run
38
143
  $ bin/rails futurism:install
39
144
  ```
40
145
 
146
+ **! Note that the installer will run `yarn add @minthesize/futurism` for you !**
147
+
148
+ ### Manual Installation
149
+ After `bundle`, install the Javascript library:
150
+
151
+ ```bash
152
+ $ bin/yarn add @minthesize/futurism
153
+ ```
154
+
155
+ In your `app/javascript/channels/index.js`, add the following
156
+
157
+ ```js
158
+ import * as Futurism from '@minthesize/futurism''
159
+
160
+ import consumer from './consumer'
161
+
162
+ Futurism.initializeElements()
163
+ Futurism.createSubscription(consumer)
164
+ ```
41
165
 
42
166
  ## Contributing
43
167
 
44
168
  ## License
45
169
  The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
170
+
171
+ ## Contributors ✨
172
+
173
+ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
174
+
175
+ <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
176
+ <!-- prettier-ignore-start -->
177
+ <!-- markdownlint-disable -->
178
+ <table>
179
+ <tr>
180
+ <td align="center"><a href="http://www.julianrubisch.at"><img src="https://avatars0.githubusercontent.com/u/4352208?v=4" width="100px;" alt=""/><br /><sub><b>Julian Rubisch</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=julianrubisch" title="Code">💻</a></td>
181
+ <td align="center"><a href="https://github.com/darkrubyist"><img src="https://avatars2.githubusercontent.com/u/11207292?v=4" width="100px;" alt=""/><br /><sub><b>darkrubyist</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=darkrubyist" title="Code">💻</a> <a href="https://github.com/julianrubisch/futurism/commits?author=darkrubyist" title="Documentation">📖</a></td>
182
+ <td align="center"><a href="https://ParamagicDev.github.io/portfolio"><img src="https://avatars2.githubusercontent.com/u/26425882?v=4" width="100px;" alt=""/><br /><sub><b>Konnor Rogers</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=ParamagicDev" title="Code">💻</a></td>
183
+ <td align="center"><a href="https://www.andrewm.codes"><img src="https://avatars1.githubusercontent.com/u/18423853?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Mason</b></sub></a><br /><a href="#maintenance-andrewmcodes" title="Maintenance">🚧</a></td>
184
+ <td align="center"><a href="http://gorails.com"><img src="https://avatars1.githubusercontent.com/u/67093?v=4" width="100px;" alt=""/><br /><sub><b>Chris Oliver</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=excid3" title="Code">💻</a> <a href="https://github.com/julianrubisch/futurism/pulls?q=is%3Apr+reviewed-by%3Aexcid3" title="Reviewed Pull Requests">👀</a></td>
185
+ <td align="center"><a href="https://github.com/leastbad"><img src="https://avatars2.githubusercontent.com/u/38150464?v=4" width="100px;" alt=""/><br /><sub><b>leastbad</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=leastbad" title="Code">💻</a></td>
186
+ <td align="center"><a href="http://code.digimonkey.com"><img src="https://avatars0.githubusercontent.com/u/74207?v=4" width="100px;" alt=""/><br /><sub><b>M. E. Patterson</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/issues?q=author%3Amepatterson" title="Bug reports">🐛</a></td>
187
+ </tr>
188
+ <tr>
189
+ <td align="center"><a href="http://fractaledmind.com"><img src="https://avatars3.githubusercontent.com/u/5077225?v=4" width="100px;" alt=""/><br /><sub><b>Stephen Margheim</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=fractaledmind" title="Code">💻</a></td>
190
+ </tr>
191
+ </table>
192
+
193
+ <!-- markdownlint-enable -->
194
+ <!-- prettier-ignore-end -->
195
+ <!-- ALL-CONTRIBUTORS-LIST:END -->
196
+
197
+ This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
@@ -6,6 +6,10 @@ require "futurism/channel"
6
6
  require "futurism/helpers"
7
7
 
8
8
  module Futurism
9
+ extend ActiveSupport::Autoload
10
+
11
+ autoload :Helpers, "futurism/helpers"
12
+
9
13
  ActiveSupport.on_load(:action_view) {
10
14
  include Futurism::Helpers
11
15
  }
@@ -7,13 +7,15 @@ module Futurism
7
7
  end
8
8
 
9
9
  def receive(data)
10
- resources = data["sgids"].map { |sgid|
11
- [sgid, GlobalID::Locator.locate_signed(sgid)]
10
+ resources = data["signed_params"].map { |signed_params|
11
+ [signed_params, Rails.application.message_verifier("futurism").verify(signed_params)]
12
12
  }
13
13
 
14
- resources.each do |sgid, resource|
14
+ ApplicationController.renderer.instance_variable_set(:@env, connection.env)
15
+
16
+ resources.each do |signed_params, resource|
15
17
  cable_ready["Futurism::Channel"].outer_html(
16
- selector: "[data-sgid='#{sgid}']",
18
+ selector: "[data-signed-params='#{signed_params}']",
17
19
  html: ApplicationController.render(resource)
18
20
  )
19
21
  end
@@ -1,22 +1,26 @@
1
- class FuturismChannel < ApplicationCable::Channel
2
- include CableReady::Broadcaster
1
+ module Futurism
2
+ class Channel < ActionCable::Channel::Base
3
+ include CableReady::Broadcaster
3
4
 
4
- def subscribed
5
- stream_from "FuturismChannel"
6
- end
5
+ def subscribed
6
+ stream_from "Futurism::Channel"
7
+ end
7
8
 
8
- def receive(data)
9
- resources = data["sgids"].map { |sgid|
10
- [sgid, GlobalID::Locator.locate_signed(sgid)]
11
- }
9
+ def receive(data)
10
+ resources = data["signed_params"].map { |signed_params|
11
+ [signed_params, Rails.application.message_verifier("futurism").verify(signed_params)]
12
+ }
12
13
 
13
- resources.each do |sgid, resource|
14
- cable_ready["FuturismChannel"].outer_html(
15
- selector: "[data-sgid='#{sgid}']",
16
- html: ApplicationController.render(resource)
17
- )
18
- end
14
+ ApplicationController.renderer.instance_variable_set(:@env, connection.env)
19
15
 
20
- cable_ready.broadcast
16
+ resources.each do |signed_params, resource|
17
+ cable_ready["Futurism::Channel"].outer_html(
18
+ selector: "[data-signed-params='#{signed_params}']",
19
+ html: ApplicationController.render(resource)
20
+ )
21
+ end
22
+
23
+ cable_ready.broadcast
24
+ end
21
25
  end
22
26
  end
@@ -1,15 +1,50 @@
1
1
  module Futurism
2
2
  module Helpers
3
- def futurize(records, extends:, &block)
3
+ def futurize(records_or_string = nil, extends:, **options, &block)
4
4
  placeholder = capture(&block)
5
+
6
+ if records_or_string.is_a?(ActiveRecord::Base) || records_or_string.is_a?(ActiveRecord::Relation)
7
+ futurize_active_record(records_or_string, extends: extends, placeholder: placeholder, **options)
8
+ elsif records_or_string.is_a?(String)
9
+ futurize_with_options(extends: extends, partial: records_or_string, locals: options, placeholder: placeholder)
10
+ else
11
+ futurize_with_options(extends: extends, placeholder: placeholder, **options)
12
+ end
13
+ end
14
+
15
+ def futurize_with_options(extends:, placeholder:, **options)
16
+ collection = options.delete(:collection)
17
+ if collection.nil?
18
+ render_element(extends: extends, placeholder: placeholder, options: options)
19
+ else
20
+ collection_class_name = collection.first.class.name
21
+ collection.map { |record|
22
+ render_element(extends: extends, placeholder: placeholder, options: options.merge(locals: {collection_class_name.downcase.to_sym => record}))
23
+ }.join.html_safe
24
+ end
25
+ end
26
+
27
+ def futurize_active_record(records, extends:, placeholder:, **options)
5
28
  Array(records).map { |record|
6
- case extends
7
- when :tr
8
- content_tag :tr, placeholder, data: {sgid: record.to_sgid.to_s}, is: "futurism-table-row"
9
- else
10
- content_tag :"futurism-element", placeholder, data: {sgid: record.to_sgid.to_s}
11
- end
29
+ render_element(extends: extends, placeholder: placeholder, options: options.merge(model: record))
12
30
  }.join.html_safe
13
31
  end
32
+
33
+ def render_element(extends:, options:, placeholder:)
34
+ html_options = options.delete(:html_options) || {}
35
+ model_or_options = options.delete(:model) || options
36
+ case extends
37
+ when :li
38
+ content_tag :li, placeholder, {data: {signed_params: futurism_signed_params(model_or_options)}, is: "futurism-li"}.merge(html_options)
39
+ when :tr
40
+ content_tag :tr, placeholder, {data: {signed_params: futurism_signed_params(model_or_options)}, is: "futurism-table-row"}.merge(html_options)
41
+ else
42
+ content_tag :"futurism-element", placeholder, {data: {signed_params: futurism_signed_params(model_or_options)}}.merge(html_options)
43
+ end
44
+ end
45
+
46
+ def futurism_signed_params(params)
47
+ Rails.application.message_verifier("futurism").generate(params)
48
+ end
14
49
  end
15
50
  end
@@ -1,3 +1,3 @@
1
1
  module Futurism
2
- VERSION = "0.1.1"
2
+ VERSION = "0.3.1"
3
3
  end
@@ -3,17 +3,11 @@ require "fileutils"
3
3
  namespace :futurism do
4
4
  desc "Let's look into a brighter future with futurism and CableReady"
5
5
  task install: :environment do
6
- system "yarn add cable_ready"
7
-
8
- app_path_part = Webpacker && Rails ? Webpacker.config.source_path.relative_path_from(Rails.root) : "app/javascript"
9
-
10
- FileUtils.mkdir_p "./#{app_path_part}/channels"
11
- FileUtils.mkdir_p "./#{app_path_part}/elements"
12
-
13
- FileUtils.cp File.expand_path("../templates/futurism_channel.js", __dir__), "./#{app_path_part}/channels"
14
- FileUtils.cp_r File.expand_path("../templates/elements", __dir__), "./#{app_path_part}"
6
+ system "yarn add @minthesize/futurism"
15
7
 
16
8
  filepath = %w[
9
+ app/javascript/channels/index.js
10
+ app/javascript/channels/index.ts
17
11
  app/javascript/packs/application.js
18
12
  app/javascript/packs/application.ts
19
13
  ]
@@ -24,7 +18,21 @@ namespace :futurism do
24
18
  puts "Updating #{filepath}"
25
19
  lines = File.open(filepath, "r") { |f| f.readlines }
26
20
 
27
- lines << "\nimport 'elements'"
21
+ unless lines.find { |line| line.start_with?("import * as Futurism") }
22
+ matches = lines.select { |line| line =~ /\A(require|import)/ }
23
+ lines.insert lines.index(matches.last).to_i + 1, "import * as Futurism from '@minthesize/futurism'\n"
24
+ end
25
+
26
+ unless lines.find { |line| line.start_with?("import consumer") }
27
+ matches = lines.select { |line| line =~ /\A(require|import)/ }
28
+ lines.insert lines.index(matches.last).to_i + 1, "import consumer from '../channels/consumer'\n"
29
+ end
30
+
31
+ initialize_line = lines.find { |line| line.start_with?("Futurism.initializeElements") }
32
+ lines << "Futurism.initializeElements()\n" unless initialize_line
33
+
34
+ subscribe_line = lines.find { |line| line.start_with?("Futurism.createSubscription") }
35
+ lines << "Futurism.createSubscription(consumer)\n" unless subscribe_line
28
36
 
29
37
  File.open(filepath, "w") { |f| f.write lines.join }
30
38
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: futurism
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.1
4
+ version: 0.3.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Julian Rubisch
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-07-09 00:00:00.000000000 Z
11
+ date: 2020-07-25 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -52,6 +52,20 @@ dependencies:
52
52
  - - "~>"
53
53
  - !ruby/object:Gem::Version
54
54
  version: 0.12.2
55
+ - !ruby/object:Gem::Dependency
56
+ name: nokogiri
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - ">="
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
62
+ type: :development
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - ">="
67
+ - !ruby/object:Gem::Version
68
+ version: '0'
55
69
  - !ruby/object:Gem::Dependency
56
70
  name: standardrb
57
71
  requirement: !ruby/object:Gem::Requirement
@@ -66,6 +80,34 @@ dependencies:
66
80
  - - ">="
67
81
  - !ruby/object:Gem::Version
68
82
  version: '0'
83
+ - !ruby/object:Gem::Dependency
84
+ name: sqlite3
85
+ requirement: !ruby/object:Gem::Requirement
86
+ requirements:
87
+ - - ">="
88
+ - !ruby/object:Gem::Version
89
+ version: '0'
90
+ type: :development
91
+ prerelease: false
92
+ version_requirements: !ruby/object:Gem::Requirement
93
+ requirements:
94
+ - - ">="
95
+ - !ruby/object:Gem::Version
96
+ version: '0'
97
+ - !ruby/object:Gem::Dependency
98
+ name: spy
99
+ requirement: !ruby/object:Gem::Requirement
100
+ requirements:
101
+ - - ">="
102
+ - !ruby/object:Gem::Version
103
+ version: '0'
104
+ type: :development
105
+ prerelease: false
106
+ version_requirements: !ruby/object:Gem::Requirement
107
+ requirements:
108
+ - - ">="
109
+ - !ruby/object:Gem::Version
110
+ version: '0'
69
111
  - !ruby/object:Gem::Dependency
70
112
  name: rack
71
113
  requirement: !ruby/object:Gem::Requirement
@@ -84,9 +126,6 @@ dependencies:
84
126
  name: rails
85
127
  requirement: !ruby/object:Gem::Requirement
86
128
  requirements:
87
- - - ">="
88
- - !ruby/object:Gem::Version
89
- version: '5.2'
90
129
  - - ">="
91
130
  - !ruby/object:Gem::Version
92
131
  version: '6'
@@ -94,9 +133,6 @@ dependencies:
94
133
  prerelease: false
95
134
  version_requirements: !ruby/object:Gem::Requirement
96
135
  requirements:
97
- - - ">="
98
- - !ruby/object:Gem::Version
99
- version: '5.2'
100
136
  - - ">="
101
137
  - !ruby/object:Gem::Version
102
138
  version: '6'
@@ -137,13 +173,6 @@ files:
137
173
  - lib/futurism/version.rb
138
174
  - lib/tasks/futurism_tasks.rake
139
175
  - lib/tasks/futurism_tasks.rake~
140
- - lib/templates/elements/futurism_element.js
141
- - lib/templates/elements/futurism_table_row.js
142
- - lib/templates/elements/index.js
143
- - lib/templates/futurism_channel.js
144
- - lib/templates/futurism_element.js~
145
- - lib/templates/futurism_table_row.js~
146
- - lib/templates/index.js~
147
176
  homepage: https://github.com/julianrubisch/futurism
148
177
  licenses:
149
178
  - MIT
@@ -1,39 +0,0 @@
1
- class FuturismElement extends HTMLElement {
2
- connectedCallback () {
3
- const options = {}
4
-
5
- this.observer = new IntersectionObserver((entries, observer) => {
6
- entries.forEach(
7
- (entry => {
8
- if (entry.isIntersecting) {
9
- this.dispatchAppearEvent(entry, observer)
10
- }
11
- }).bind(this)
12
- )
13
- }, options)
14
-
15
- this.observer.observe(this)
16
- }
17
-
18
- dispatchAppearEvent (entry, observer) {
19
- if (window.Futurism) {
20
- const evt = new CustomEvent('futurism:appear', {
21
- bubbles: true,
22
- detail: {
23
- target: entry.target,
24
- observer
25
- }
26
- })
27
- this.dispatchEvent(evt)
28
- } else {
29
- setTimeout(
30
- (() => {
31
- this.dispatchAppearEvent(entry, observer)
32
- }).bind(this),
33
- 1
34
- )
35
- }
36
- }
37
- }
38
-
39
- customElements.define('futurism-element', FuturismElement)
@@ -1,41 +0,0 @@
1
- class FuturismTableRow extends HTMLTableRowElement {
2
- connectedCallback () {
3
- const options = {}
4
-
5
- this.observer = new IntersectionObserver((entries, observer) => {
6
- entries.forEach(
7
- (entry => {
8
- if (entry.isIntersecting) {
9
- this.dispatchAppearEvent(entry, observer)
10
- }
11
- }).bind(this)
12
- )
13
- }, options)
14
-
15
- this.observer.observe(this)
16
- }
17
-
18
- dispatchAppearEvent (entry, observer) {
19
- if (window.Futurism) {
20
- const evt = new CustomEvent('futurism:appear', {
21
- bubbles: true,
22
- detail: {
23
- target: entry.target,
24
- observer
25
- }
26
- })
27
- this.dispatchEvent(evt)
28
- } else {
29
- setTimeout(
30
- (() => {
31
- this.dispatchAppearEvent(entry, observer)
32
- }).bind(this),
33
- 1
34
- )
35
- }
36
- }
37
- }
38
-
39
- customElements.define('futurism-table-row', FuturismTableRow, {
40
- extends: 'tr'
41
- })
@@ -1,4 +0,0 @@
1
- import FuturismElement from './futurism_element'
2
- import FuturismTableRow from './futurism_table_row'
3
-
4
- export { FuturismElement, FuturismTableRow }
@@ -1,38 +0,0 @@
1
- import consumer from './consumer'
2
- import CableReady from 'cable_ready'
3
-
4
- const debounceEvents = (callback, delay = 250) => {
5
- let timeoutId
6
- let events = []
7
- return (...args) => {
8
- clearTimeout(timeoutId)
9
- events = [...events, ...args]
10
- timeoutId = setTimeout(() => {
11
- timeoutId = null
12
- callback(events)
13
- events = []
14
- }, delay)
15
- }
16
- }
17
-
18
- consumer.subscriptions.create('Futurism::Channel', {
19
- connected () {
20
- window.Futurism = this
21
- document.addEventListener(
22
- 'futurism:appear',
23
- debounceEvents(
24
- (events => {
25
- this.send({ sgids: events.map(e => e.target.dataset.sgid) })
26
- }).bind(this)
27
- )
28
- )
29
- },
30
-
31
- received (data) {
32
- if (data.cableReady) {
33
- CableReady.perform(data.operations, {
34
- emitMissingElementWarnings: false
35
- })
36
- }
37
- }
38
- })
@@ -1,40 +0,0 @@
1
- class FuturismElement extends HTMLElement {
2
- connectedCallback() {
3
- console.log("connected");
4
- const options = {};
5
-
6
- this.observer = new IntersectionObserver((entries, observer) => {
7
- entries.forEach(
8
- (entry => {
9
- if (entry.isIntersecting) {
10
- this.dispatchAppearEvent(entry, observer);
11
- }
12
- }).bind(this)
13
- );
14
- }, options);
15
-
16
- this.observer.observe(this);
17
- }
18
-
19
- dispatchAppearEvent(entry, observer) {
20
- if (window.Futurism) {
21
- const evt = new CustomEvent("futurism:appear", {
22
- bubbles: true,
23
- detail: {
24
- target: entry.target,
25
- observer
26
- }
27
- });
28
- this.dispatchEvent(evt);
29
- } else {
30
- setTimeout(
31
- (() => {
32
- this.dispatchAppearEvent(entry, observer);
33
- }).bind(this),
34
- 1
35
- );
36
- }
37
- }
38
- }
39
-
40
- customElements.define("futurism-element", FuturismElement);
@@ -1,40 +0,0 @@
1
- class FuturismElement extends HTMLElement {
2
- connectedCallback() {
3
- console.log("connected");
4
- const options = {};
5
-
6
- this.observer = new IntersectionObserver((entries, observer) => {
7
- entries.forEach(
8
- (entry => {
9
- if (entry.isIntersecting) {
10
- this.dispatchAppearEvent(entry, observer);
11
- }
12
- }).bind(this)
13
- );
14
- }, options);
15
-
16
- this.observer.observe(this);
17
- }
18
-
19
- dispatchAppearEvent(entry, observer) {
20
- if (window.Futurism) {
21
- const evt = new CustomEvent("futurism:appear", {
22
- bubbles: true,
23
- detail: {
24
- target: entry.target,
25
- observer
26
- }
27
- });
28
- this.dispatchEvent(evt);
29
- } else {
30
- setTimeout(
31
- (() => {
32
- this.dispatchAppearEvent(entry, observer);
33
- }).bind(this),
34
- 1
35
- );
36
- }
37
- }
38
- }
39
-
40
- customElements.define("futurism-element", FuturismElement);
@@ -1,3 +0,0 @@
1
- import FuturismElement from "./futurism_element";
2
-
3
- export { FuturismElement };