futurism 0.1.2 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +38 -2
- data/lib/futurism/version.rb +1 -1
- data/lib/tasks/futurism_tasks.rake +18 -10
- metadata +2 -10
- data/lib/templates/elements/futurism_element.js +0 -9
- data/lib/templates/elements/futurism_table_row.js +0 -9
- data/lib/templates/elements/futurism_utils.js +0 -33
- data/lib/templates/elements/index.js +0 -7
- data/lib/templates/futurism_channel.js +0 -36
- data/lib/templates/futurism_element.js~ +0 -40
- data/lib/templates/futurism_table_row.js~ +0 -40
- data/lib/templates/index.js~ +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 92467463ea6f80379a1dc26c85afe18564cd5cf2c6b92be207fe68d74f50b674
|
4
|
+
data.tar.gz: 7e5934d6194107a7d3b7ba39af4f38f0731ba8caa67fb706afeac5220ae46d85
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a6514295bff471bc75f02186eb0446166a14d4dfdf1993b481ce6f0df737b863a90c33d4eef5ae09b0ad5007d66fb4dda9639debdedfc3a6ce6cc0613a9d0c29
|
7
|
+
data.tar.gz: 5aedb6c88925314d27a46d933b243113006be0b49d0f20fb91d4b767426deecbc73ce78d99e3148e09ca2a8219bf61a510f12dc57d0c6d846e6149a85301e852
|
data/README.md
CHANGED
@@ -1,9 +1,24 @@
|
|
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-
|
4
|
+
[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
|
4
5
|
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
5
6
|
Lazy-load Rails partials via CableReady
|
6
7
|
|
8
|
+
## Facts
|
9
|
+
- only one dependency: CableReady
|
10
|
+
- bundle size (without CableReady) is around [~1.04kB](https://bundlephobia.com/result?p=@minthesize/futurism@0.1.3)
|
11
|
+
|
12
|
+
### Browser Support
|
13
|
+
|
14
|
+
- Chrome v67+ (v54+ via Polyfill)
|
15
|
+
- Firefox v63+
|
16
|
+
- Edge v79+
|
17
|
+
- Safari v10.1+ via Polyfill
|
18
|
+
- iOS Safari & Chrome v10.3+ via Polyfill
|
19
|
+
|
20
|
+
[Caniuse](https://www.caniuse.com/#search=custom%20elements)
|
21
|
+
|
7
22
|
## Usage
|
8
23
|
with a helper in your template
|
9
24
|
|
@@ -57,6 +72,25 @@ To copy over the javascript files to your application, run
|
|
57
72
|
$ bin/rails futurism:install
|
58
73
|
```
|
59
74
|
|
75
|
+
** ! Note that the installer will run `yarn install @minthesize/futurism` for you ! **
|
76
|
+
|
77
|
+
### Manual Installation
|
78
|
+
After `bundle`, install the Javascript library:
|
79
|
+
|
80
|
+
```bash
|
81
|
+
$ bin/yarn install @minthesize/futurism
|
82
|
+
```
|
83
|
+
|
84
|
+
In your `app/javascript/channels/index.js`, add the following
|
85
|
+
|
86
|
+
```js
|
87
|
+
import * as Futurism
|
88
|
+
|
89
|
+
import consumer from './consumer'
|
90
|
+
|
91
|
+
Futurism.initializeElements()
|
92
|
+
Futurism.createSubscription(consumer)
|
93
|
+
```
|
60
94
|
|
61
95
|
## Contributing
|
62
96
|
|
@@ -75,6 +109,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|
75
109
|
<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
110
|
<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
111
|
<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>
|
112
|
+
<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>
|
113
|
+
<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>
|
78
114
|
</tr>
|
79
115
|
</table>
|
80
116
|
|
@@ -82,4 +118,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|
82
118
|
<!-- prettier-ignore-end -->
|
83
119
|
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
84
120
|
|
85
|
-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
121
|
+
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
@@ -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
|
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
|
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.
|
4
|
+
version: 0.1.4
|
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-18 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -159,14 +159,6 @@ files:
|
|
159
159
|
- lib/futurism/version.rb
|
160
160
|
- lib/tasks/futurism_tasks.rake
|
161
161
|
- 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
162
|
homepage: https://github.com/julianrubisch/futurism
|
171
163
|
licenses:
|
172
164
|
- MIT
|
@@ -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);
|
data/lib/templates/index.js~
DELETED