futurism 0.1.2 → 0.3.2

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: 1d1c3294580dbbd5e9a52e891b639201f10e9731c7485229da9c739480d39dab
4
- data.tar.gz: 91ce7571e8a406c820845f55d3bdb3eb83d905b8fd030242adfac73eba6d9f25
3
+ metadata.gz: c5a13955e5c2902320a9eb601cd12058c16782a4002ec2c05ca1dff9eddd3190
4
+ data.tar.gz: 636b6c0b298bb686600026d5f065190e2c94edec85a25c0afa715891841c0b38
5
5
  SHA512:
6
- metadata.gz: b6da86985c57394373be9cac152629ed42d8ff85de888e30e49f48dcffadd2dd21e67e5906e8b295c4e2d3d1c1dec90a26880f36dffc006254d347476a134743
7
- data.tar.gz: 0d683568af28890339ccaea473e9b7eede53006597ccf00223be42558e4ee162db39e9e1c192ef725ceeefcbf588c667006dc2ddc294ffbf0bf8fb70e21bc38a
6
+ metadata.gz: ee386095ed1c02325e6eea34b0f8a85e67709a0a4b17d5705de035cf7bac667487687a99135654f15bc24f202b81af9d6320d70b61c296279e6c8bc437fc9d96
7
+ data.tar.gz: 8e73598941f69c36aac9e2b53536369e1cb689a50e76986692c37cc04fca2d253abe7dfb7b3416fa657f0bdbc29f7d34aac4920ec5b9ecff3ce44f4368e672c6
data/README.md CHANGED
@@ -1,14 +1,36 @@
1
1
  # Futurism
2
+ [![Twitter follow](https://img.shields.io/twitter/follow/julian_rubisch?style=social)](https://twitter.com/julian_rubisch)
2
3
  <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
3
- [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
4
+ [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
4
5
  <!-- ALL-CONTRIBUTORS-BADGE:END -->
5
6
  Lazy-load Rails partials via CableReady
6
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
+
7
27
  ## Usage
8
28
  with a helper in your template
9
29
 
10
30
  ```erb
11
- <%= futurize @posts %>
31
+ <%= futurize @posts, extends: :div do %>
32
+ <!-- placeholder -->
33
+ <% end %>
12
34
  ```
13
35
 
14
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.
@@ -25,7 +47,21 @@ You can pass the placeholder as a block:
25
47
 
26
48
  ![aa601dec1930151f71dbf0d6b02b61c9](https://user-images.githubusercontent.com/4352208/87131629-f768a480-c294-11ea-89a9-ea0a76ee06ef.gif)
27
49
 
28
- ### Partial Path
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
29
65
 
30
66
  Remember that you can override the partial path in you models, like so:
31
67
 
@@ -39,6 +75,56 @@ end
39
75
 
40
76
  That way you get maximal flexibility when just specifying a single resource.
41
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
+ #### Collections
97
+
98
+ Collection rendering is also possible:
99
+
100
+ ```erb
101
+ <%= futurize partial: "items/card", collection: @cards, extends: :div do %>
102
+ <div class="spinner"></div>
103
+ <% end %>
104
+ ```
105
+
106
+ ### HTML Options
107
+
108
+ 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.
109
+
110
+ ```erb
111
+ <%= futurize @posts, extends: :tr, html_options: {style: "width: 50px; height: 50px;"} do %>
112
+ <td class="placeholder"></td>
113
+ <% end %>
114
+ ```
115
+
116
+ This will output the following:
117
+
118
+ ```html
119
+ <tr style="width: 50px; height: 50px;">
120
+ <td class="placeholder"></td>
121
+ </tr>
122
+ ```
123
+
124
+ ## Events
125
+
126
+ Once your futurize element has been rendered, the `futurize:appeared` custom event will be called.
127
+
42
128
  ## Installation
43
129
  Add this line to your application's Gemfile:
44
130
 
@@ -57,6 +143,25 @@ To copy over the javascript files to your application, run
57
143
  $ bin/rails futurism:install
58
144
  ```
59
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
+ ```
60
165
 
61
166
  ## Contributing
62
167
 
@@ -75,6 +180,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
75
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>
76
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>
77
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
+ <td align="center"><a href="http://hass.codes"><img src="https://avatars2.githubusercontent.com/u/1064205?v=4" width="100px;" alt=""/><br /><sub><b>Hassanin Ahmed</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=sas1ni69" title="Code">💻</a></td>
191
+ <td align="center"><a href="https://marcoroth.dev"><img src="https://avatars2.githubusercontent.com/u/6411752?v=4" width="100px;" alt=""/><br /><sub><b>Marco Roth</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=marcoroth" title="Code">💻</a></td>
78
192
  </tr>
79
193
  </table>
80
194
 
@@ -82,4 +196,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
82
196
  <!-- prettier-ignore-end -->
83
197
  <!-- ALL-CONTRIBUTORS-LIST:END -->
84
198
 
85
- This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
199
+ 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,51 @@
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.klass.name
21
+ as = options.delete(:as) || collection_class_name.downcase
22
+ collection.map { |record|
23
+ render_element(extends: extends, placeholder: placeholder, options: options.deep_merge(locals: {as.to_sym => record}))
24
+ }.join.html_safe
25
+ end
26
+ end
27
+
28
+ def futurize_active_record(records, extends:, placeholder:, **options)
5
29
  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
30
+ render_element(extends: extends, placeholder: placeholder, options: options.merge(model: record))
12
31
  }.join.html_safe
13
32
  end
33
+
34
+ def render_element(extends:, options:, placeholder:)
35
+ html_options = options.delete(:html_options) || {}
36
+ model_or_options = options.delete(:model) || options
37
+ case extends
38
+ when :li
39
+ content_tag :li, placeholder, {data: {signed_params: futurism_signed_params(model_or_options)}, is: "futurism-li"}.merge(html_options)
40
+ when :tr
41
+ content_tag :tr, placeholder, {data: {signed_params: futurism_signed_params(model_or_options)}, is: "futurism-table-row"}.merge(html_options)
42
+ else
43
+ content_tag :"futurism-element", placeholder, {data: {signed_params: futurism_signed_params(model_or_options)}}.merge(html_options)
44
+ end
45
+ end
46
+
47
+ def futurism_signed_params(params)
48
+ Rails.application.message_verifier("futurism").generate(params)
49
+ end
14
50
  end
15
51
  end
@@ -1,3 +1,3 @@
1
1
  module Futurism
2
- VERSION = "0.1.2"
2
+ VERSION = "0.3.2"
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.2
4
+ version: 0.3.2
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-12 00:00:00.000000000 Z
11
+ date: 2020-07-27 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
@@ -159,14 +173,6 @@ files:
159
173
  - lib/futurism/version.rb
160
174
  - lib/tasks/futurism_tasks.rake
161
175
  - lib/tasks/futurism_tasks.rake~
162
- - lib/templates/elements/futurism_element.js
163
- - lib/templates/elements/futurism_table_row.js
164
- - lib/templates/elements/futurism_utils.js
165
- - lib/templates/elements/index.js
166
- - lib/templates/futurism_channel.js
167
- - lib/templates/futurism_element.js~
168
- - lib/templates/futurism_table_row.js~
169
- - lib/templates/index.js~
170
176
  homepage: https://github.com/julianrubisch/futurism
171
177
  licenses:
172
178
  - MIT
@@ -1,9 +0,0 @@
1
- /* global HTMLElement */
2
-
3
- import { extendElementWithIntersectionObserver } from './futurism_utils'
4
-
5
- export default class FuturismElement extends HTMLElement {
6
- connectedCallback () {
7
- extendElementWithIntersectionObserver(this)
8
- }
9
- }
@@ -1,9 +0,0 @@
1
- /* global HTMLTableRowElement */
2
-
3
- import { extendElementWithIntersectionObserver } from './futurism_utils'
4
-
5
- export default class FuturismTableRow extends HTMLTableRowElement {
6
- connectedCallback () {
7
- extendElementWithIntersectionObserver(this)
8
- }
9
- }
@@ -1,33 +0,0 @@
1
- /* global IntersectionObserver, CustomEvent, setTimeout */
2
-
3
- const dispatchAppearEvent = (entry, observer) => {
4
- if (!window.Futurism) {
5
- setTimeout(() => dispatchAppearEvent(entry, observer), 1)
6
- return
7
- }
8
-
9
- const evt = new CustomEvent('futurism:appear', {
10
- bubbles: true,
11
- detail: {
12
- target: entry.target,
13
- observer
14
- }
15
- })
16
-
17
- entry.target.dispatchEvent(evt)
18
- }
19
-
20
- const observerCallback = (entries, observer) => {
21
- entries.forEach(entry => {
22
- if (!entry.isIntersecting) return
23
- dispatchAppearEvent(entry, observer)
24
- })
25
- }
26
-
27
- export const extendElementWithIntersectionObserver = element => {
28
- Object.assign(element, {
29
- observer: new IntersectionObserver(observerCallback.bind(element), {})
30
- })
31
-
32
- element.observer.observe(element)
33
- }
@@ -1,7 +0,0 @@
1
- /* global customElements */
2
-
3
- import FuturismElement from './futurism_element'
4
- import FuturismTableRow from './futurism_table_row'
5
-
6
- customElements.define('futurism-element', FuturismElement)
7
- customElements.define('futurism-table-row', FuturismTableRow, { extends: 'tr' })
@@ -1,36 +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(events => {
24
- this.send({ sgids: events.map(e => e.target.dataset.sgid) })
25
- })
26
- )
27
- },
28
-
29
- received (data) {
30
- if (data.cableReady) {
31
- CableReady.perform(data.operations, {
32
- emitMissingElementWarnings: false
33
- })
34
- }
35
- }
36
- })
@@ -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 };