futurism 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +41 -1
- data/lib/futurism/version.rb +1 -1
- data/lib/templates/elements/futurism_element.js +5 -35
- data/lib/templates/elements/futurism_table_row.js +5 -37
- data/lib/templates/elements/futurism_utils.js +33 -0
- data/lib/templates/elements/index.js +4 -1
- data/lib/templates/futurism_channel.js +3 -5
- metadata +31 -8
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1d1c3294580dbbd5e9a52e891b639201f10e9731c7485229da9c739480d39dab
|
4
|
+
data.tar.gz: 91ce7571e8a406c820845f55d3bdb3eb83d905b8fd030242adfac73eba6d9f25
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b6da86985c57394373be9cac152629ed42d8ff85de888e30e49f48dcffadd2dd21e67e5906e8b295c4e2d3d1c1dec90a26880f36dffc006254d347476a134743
|
7
|
+
data.tar.gz: 0d683568af28890339ccaea473e9b7eede53006597ccf00223be42558e4ee162db39e9e1c192ef725ceeefcbf588c667006dc2ddc294ffbf0bf8fb70e21bc38a
|
data/README.md
CHANGED
@@ -1,4 +1,7 @@
|
|
1
1
|
# Futurism
|
2
|
+
<!-- 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-BADGE:END -->
|
2
5
|
Lazy-load Rails partials via CableReady
|
3
6
|
|
4
7
|
## Usage
|
@@ -8,7 +11,7 @@ with a helper in your template
|
|
8
11
|
<%= futurize @posts %>
|
9
12
|
```
|
10
13
|
|
11
|
-
custom `<futurism-
|
14
|
+
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
15
|
|
13
16
|
With that method, you could lazy load every class that has to_partial_path defined (ActiveModel has by default).
|
14
17
|
|
@@ -20,6 +23,22 @@ You can pass the placeholder as a block:
|
|
20
23
|
<% end %>
|
21
24
|
```
|
22
25
|
|
26
|
+
![aa601dec1930151f71dbf0d6b02b61c9](https://user-images.githubusercontent.com/4352208/87131629-f768a480-c294-11ea-89a9-ea0a76ee06ef.gif)
|
27
|
+
|
28
|
+
### Partial Path
|
29
|
+
|
30
|
+
Remember that you can override the partial path in you models, like so:
|
31
|
+
|
32
|
+
```rb
|
33
|
+
class Post < ApplicationRecord
|
34
|
+
def to_partial_path
|
35
|
+
"home/post"
|
36
|
+
end
|
37
|
+
end
|
38
|
+
```
|
39
|
+
|
40
|
+
That way you get maximal flexibility when just specifying a single resource.
|
41
|
+
|
23
42
|
## Installation
|
24
43
|
Add this line to your application's Gemfile:
|
25
44
|
|
@@ -43,3 +62,24 @@ $ bin/rails futurism:install
|
|
43
62
|
|
44
63
|
## License
|
45
64
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
65
|
+
|
66
|
+
## Contributors ✨
|
67
|
+
|
68
|
+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
69
|
+
|
70
|
+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
71
|
+
<!-- prettier-ignore-start -->
|
72
|
+
<!-- markdownlint-disable -->
|
73
|
+
<table>
|
74
|
+
<tr>
|
75
|
+
<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
|
+
<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
|
+
<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>
|
78
|
+
</tr>
|
79
|
+
</table>
|
80
|
+
|
81
|
+
<!-- markdownlint-enable -->
|
82
|
+
<!-- prettier-ignore-end -->
|
83
|
+
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
84
|
+
|
85
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
data/lib/futurism/version.rb
CHANGED
@@ -1,39 +1,9 @@
|
|
1
|
-
|
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)
|
1
|
+
/* global HTMLElement */
|
14
2
|
|
15
|
-
|
16
|
-
}
|
3
|
+
import { extendElementWithIntersectionObserver } from './futurism_utils'
|
17
4
|
|
18
|
-
|
19
|
-
|
20
|
-
|
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
|
-
}
|
5
|
+
export default class FuturismElement extends HTMLElement {
|
6
|
+
connectedCallback () {
|
7
|
+
extendElementWithIntersectionObserver(this)
|
36
8
|
}
|
37
9
|
}
|
38
|
-
|
39
|
-
customElements.define('futurism-element', FuturismElement)
|
@@ -1,41 +1,9 @@
|
|
1
|
-
|
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)
|
1
|
+
/* global HTMLTableRowElement */
|
14
2
|
|
15
|
-
|
16
|
-
}
|
3
|
+
import { extendElementWithIntersectionObserver } from './futurism_utils'
|
17
4
|
|
18
|
-
|
19
|
-
|
20
|
-
|
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
|
-
}
|
5
|
+
export default class FuturismTableRow extends HTMLTableRowElement {
|
6
|
+
connectedCallback () {
|
7
|
+
extendElementWithIntersectionObserver(this)
|
36
8
|
}
|
37
9
|
}
|
38
|
-
|
39
|
-
customElements.define('futurism-table-row', FuturismTableRow, {
|
40
|
-
extends: 'tr'
|
41
|
-
})
|
@@ -0,0 +1,33 @@
|
|
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,4 +1,7 @@
|
|
1
|
+
/* global customElements */
|
2
|
+
|
1
3
|
import FuturismElement from './futurism_element'
|
2
4
|
import FuturismTableRow from './futurism_table_row'
|
3
5
|
|
4
|
-
|
6
|
+
customElements.define('futurism-element', FuturismElement)
|
7
|
+
customElements.define('futurism-table-row', FuturismTableRow, { extends: 'tr' })
|
@@ -20,11 +20,9 @@ consumer.subscriptions.create('Futurism::Channel', {
|
|
20
20
|
window.Futurism = this
|
21
21
|
document.addEventListener(
|
22
22
|
'futurism:appear',
|
23
|
-
debounceEvents(
|
24
|
-
(events =>
|
25
|
-
|
26
|
-
}).bind(this)
|
27
|
-
)
|
23
|
+
debounceEvents(events => {
|
24
|
+
this.send({ sgids: events.map(e => e.target.dataset.sgid) })
|
25
|
+
})
|
28
26
|
)
|
29
27
|
},
|
30
28
|
|
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.
|
4
|
+
version: 0.1.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-
|
11
|
+
date: 2020-07-12 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -66,6 +66,34 @@ dependencies:
|
|
66
66
|
- - ">="
|
67
67
|
- !ruby/object:Gem::Version
|
68
68
|
version: '0'
|
69
|
+
- !ruby/object:Gem::Dependency
|
70
|
+
name: sqlite3
|
71
|
+
requirement: !ruby/object:Gem::Requirement
|
72
|
+
requirements:
|
73
|
+
- - ">="
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: '0'
|
76
|
+
type: :development
|
77
|
+
prerelease: false
|
78
|
+
version_requirements: !ruby/object:Gem::Requirement
|
79
|
+
requirements:
|
80
|
+
- - ">="
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: '0'
|
83
|
+
- !ruby/object:Gem::Dependency
|
84
|
+
name: spy
|
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'
|
69
97
|
- !ruby/object:Gem::Dependency
|
70
98
|
name: rack
|
71
99
|
requirement: !ruby/object:Gem::Requirement
|
@@ -84,9 +112,6 @@ dependencies:
|
|
84
112
|
name: rails
|
85
113
|
requirement: !ruby/object:Gem::Requirement
|
86
114
|
requirements:
|
87
|
-
- - ">="
|
88
|
-
- !ruby/object:Gem::Version
|
89
|
-
version: '5.2'
|
90
115
|
- - ">="
|
91
116
|
- !ruby/object:Gem::Version
|
92
117
|
version: '6'
|
@@ -94,9 +119,6 @@ dependencies:
|
|
94
119
|
prerelease: false
|
95
120
|
version_requirements: !ruby/object:Gem::Requirement
|
96
121
|
requirements:
|
97
|
-
- - ">="
|
98
|
-
- !ruby/object:Gem::Version
|
99
|
-
version: '5.2'
|
100
122
|
- - ">="
|
101
123
|
- !ruby/object:Gem::Version
|
102
124
|
version: '6'
|
@@ -139,6 +161,7 @@ files:
|
|
139
161
|
- lib/tasks/futurism_tasks.rake~
|
140
162
|
- lib/templates/elements/futurism_element.js
|
141
163
|
- lib/templates/elements/futurism_table_row.js
|
164
|
+
- lib/templates/elements/futurism_utils.js
|
142
165
|
- lib/templates/elements/index.js
|
143
166
|
- lib/templates/futurism_channel.js
|
144
167
|
- lib/templates/futurism_element.js~
|