pageflow-oembed 1.1.1 → 1.2.0
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 +4 -4
- data/CHANGELOG +8 -0
- data/README.md +25 -18
- data/app/assets/javascript/pageflow/oembed.js +28 -19
- data/app/views/pageflow/oembed/_widget.html.erb +8 -0
- data/lib/pageflow/oembed/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e76b40d356c5a7a0aa6cb10a5c62c39e78d4bd98
|
4
|
+
data.tar.gz: dd73e23099b3248527f177b68be9f1b41d979edc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2b2e5acdbd3fcfa99c1875656ae1404fa39572f18d6ce74bf0fed8c7887c604f5eced10613c2877b8541cbd90e1d2b06cf47fb70948f67bc02b962d598af296f
|
7
|
+
data.tar.gz: 90e68ca87a7afd1227d8f501789f0b4088837cbbeffbe50968b605b02ca3ed45f3c9bd2ecea31ed2fbd894575981d4f0040363f2b27578cfd7ed1223f6687d21
|
data/CHANGELOG
CHANGED
@@ -1,3 +1,11 @@
|
|
1
|
+
Version 1.2.0—28 July 2017
|
2
|
+
|
3
|
+
Added Facebook single post support. Uses the Facebook JS SDK. Spy on all the things!
|
4
|
+
|
5
|
+
* facebook, post: https://www.facebook.com/20531316728/posts/10154009990506729/
|
6
|
+
|
7
|
+
Will add Facebook Video in a future release.
|
8
|
+
|
1
9
|
Version 1.1.1—25 July 2017
|
2
10
|
|
3
11
|
Bugfix: make the URL test more strict. Otherwise non-embeddable links were found.
|
data/README.md
CHANGED
@@ -5,7 +5,7 @@ into embedded content when possible. For example, instead of a link to a
|
|
5
5
|
[Tweet URL](https://twitter.com/scrollytelling/status/885128273239396352), people
|
6
6
|
reading your story will see the Tweet embedded in the page.
|
7
7
|
|
8
|
-
[Read the introduction on Scrollytelling](https://app.scrollytelling.io/embed-a-tweet)
|
8
|
+
🌟 [Read the introduction on Scrollytelling](https://app.scrollytelling.io/embed-a-tweet) 🌟
|
9
9
|
|
10
10
|
It usually works using [oEmbed](http://oembed.com), the standard protocol for discovering
|
11
11
|
and showing embedded content. Although sometimes we use a JavaScript SDK, since it
|
@@ -14,26 +14,40 @@ the database.
|
|
14
14
|
|
15
15
|
The best aspect about this plugin is for editors working with Pageflow. You
|
16
16
|
don't have to do anything out of the ordinary. Continue to add links as normal,
|
17
|
-
using the built-in html editor in Pageflow. Your hand-
|
18
|
-
are not affected by our code. The link will be visible to you as always. It's just
|
19
|
-
that on the front end, the link is replaced by
|
17
|
+
using the built-in html editor in Pageflow. Your hand-crafted, artisanal words
|
18
|
+
are not affected by our code. The plain link will be visible to you, dear editor, as always. It's just
|
19
|
+
that on the front end, the link is replaced by embedded content.
|
20
|
+
|
21
|
+

|
20
22
|
|
21
23
|
If you don't want the embed, remove the link. In a future release there might
|
22
24
|
be a mechanism to deal with this.
|
23
25
|
|
26
|
+
### 🖤 Heads up: contains ~~evil spyware~~ social scripts 👀
|
27
|
+
|
28
|
+
To create the best versions of embedded content, we usually include the
|
29
|
+
JavaScript SDK a provider has created. For example, Twitter and Facebook. The
|
30
|
+
embeds sans JS aren't so nice to see, they don't live update the hearts and
|
31
|
+
thumbs and all that, and certainly won't open the respective apps on your phone.
|
32
|
+
|
33
|
+
If you hate the thought of being tracked on the interwebs, well, I hear what
|
34
|
+
you're saying but we wanna be pragmatic. Should I make using the SDKs configurable?
|
35
|
+
Why me? It's open source, you do it! Send me a patch!
|
36
|
+
|
24
37
|
### Whitelisted URLs
|
25
38
|
|
26
|
-
We work with a whitelist and will convert only some links.
|
39
|
+
We work with a whitelist _(actually a regex, hurr durr)_ and will convert only some links.
|
27
40
|
|
28
41
|
Currently supported:
|
29
42
|
|
30
43
|
* twitter, single tweet: https://twitter.com/scrollytelling/status/885128273239396352
|
31
44
|
* spotify, single track: https://open.spotify.com/track/298gs9ATwr2rD9tGYJKlQR
|
32
45
|
* spotify, artist: https://open.spotify.com/artist/0IIPgITtEO4JJfipw57KGv
|
46
|
+
* facebook, post: https://www.facebook.com/20531316728/posts/10154009990506729/
|
33
47
|
|
34
|
-
Note that the URL you use must look exactly like the ones above.
|
48
|
+
Note that the URL you use must look exactly like the ones above. Not *exactly*, the numbers and things can be different. You know what I mean.
|
35
49
|
|
36
|
-
More providers will follow.
|
50
|
+
#### More providers will follow. Want your fave in here? [Create an issue!](https://github.com/scrollytelling/pageflow-oembed/issues/new)
|
37
51
|
|
38
52
|
### Just uses JavaScript
|
39
53
|
|
@@ -42,19 +56,10 @@ have two polyfills to get IE on board. These don't get loaded if your browser
|
|
42
56
|
is up to date. And if you are using a really ancient browser, well, that's
|
43
57
|
your choice.
|
44
58
|
|
45
|
-
### Heads up: social scripts will be included in the page
|
46
|
-
|
47
|
-
To create the best versions of embedded content, we usually include the
|
48
|
-
JavaScript SDK a provider has created. For example, Twitter. The widget sans JS
|
49
|
-
is hardly usable, and certainly won't open the Twitter app on your phone. If
|
50
|
-
you hate the thought of being tracked on the interwebs, well, I hear what you're
|
51
|
-
saying but we gotta be pragmatic. Should I make using the SDKs configurable?
|
52
|
-
|
53
|
-
|
54
59
|
## Scrollytelling. What's that now?
|
55
60
|
|
56
61
|
We are [Scrollytelling](https://www.scrollytelling.io/). We enable online
|
57
|
-
stories.
|
62
|
+
stories. We host stories for national media. We run a custom version
|
58
63
|
of the awesome [Pageflow](https://github.com/codevise/pageflow) storytelling
|
59
64
|
tool. We continously give back to the community and we hope that you'll
|
60
65
|
enjoy this plugin too.
|
@@ -77,7 +82,7 @@ And then execute:
|
|
77
82
|
Add it to the Pageflow initializer in the host application:
|
78
83
|
|
79
84
|
```ruby
|
80
|
-
# config/
|
85
|
+
# config/initializers/pageflow.rb
|
81
86
|
Pageflow.configure do |config|
|
82
87
|
config.plugin(Pageflow::Oembed.plugin)
|
83
88
|
end
|
@@ -111,6 +116,8 @@ end
|
|
111
116
|
|
112
117
|
In the Pageflow editor, insert a plain old link into the content text. Voila!
|
113
118
|
|
119
|
+
🌟 [Read the introduction on Scrollytelling](https://app.scrollytelling.io/embed-a-tweet) 🌟
|
120
|
+
|
114
121
|
## Development
|
115
122
|
|
116
123
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
@@ -2,27 +2,29 @@
|
|
2
2
|
//
|
3
3
|
pageflow.widgetTypes.register('pageflow_oembed', {
|
4
4
|
enhance: function(element) {
|
5
|
-
var
|
6
|
-
|
7
|
-
for(var i =
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
if(
|
12
|
-
this.embedTwitter(
|
13
|
-
else if(
|
14
|
-
this.embedSpotify(
|
15
|
-
else if(
|
16
|
-
this.
|
17
|
-
}
|
5
|
+
var links = document.querySelectorAll('.contentText a');
|
6
|
+
|
7
|
+
for (var i = 0; i < links.length; ++i) {
|
8
|
+
var link = links[i];
|
9
|
+
var url = link.getAttribute('href');
|
10
|
+
|
11
|
+
if( this.regex.twitter.test(url) )
|
12
|
+
this.embedTwitter(link, url);
|
13
|
+
else if( this.regex.spotify.test(url) )
|
14
|
+
this.embedSpotify(link, url);
|
15
|
+
else if( this.regex.facebookPost.test(url) )
|
16
|
+
this.embedFacebookPost(link, url);
|
17
|
+
}
|
18
18
|
},
|
19
19
|
|
20
|
-
|
21
|
-
|
20
|
+
regex: {
|
21
|
+
twitter: /twitter\.com\/\w*\/status\/\d*/i,
|
22
|
+
spotify: /open\.spotify\.com\/\w*\/\w*/i,
|
23
|
+
facebookPost: /facebook\.com\/\d*\/posts\/\d*/i
|
22
24
|
},
|
23
25
|
|
24
|
-
|
25
|
-
return
|
26
|
+
token: function() {
|
27
|
+
return document.querySelector("meta[name='csrf-token']").content;
|
26
28
|
},
|
27
29
|
|
28
30
|
embedSpotify: function(anchor, url) {
|
@@ -42,9 +44,10 @@ pageflow.widgetTypes.register('pageflow_oembed', {
|
|
42
44
|
embedTwitter: function(anchor, url) {
|
43
45
|
var match = /(\d+)$/.exec(url);
|
44
46
|
tweetId = match[0];
|
45
|
-
var
|
47
|
+
var page = anchor.closest('.page');
|
48
|
+
var theme = page.classList.contains('invert') ? 'light' : 'dark';
|
46
49
|
|
47
|
-
anchor.insertAdjacentHTML('beforebegin', '<span id="tweet-'+tweetId+'"></span>')
|
50
|
+
anchor.insertAdjacentHTML('beforebegin', '<span id="tweet-'+tweetId+'"></span>');
|
48
51
|
|
49
52
|
var options = {omit_script: true, related: 'scrollytelling', lang: pageflow.seed.locale, theme: theme, dnt: 'true'};
|
50
53
|
twttr.widgets.createTweet(
|
@@ -53,5 +56,11 @@ pageflow.widgetTypes.register('pageflow_oembed', {
|
|
53
56
|
options
|
54
57
|
);
|
55
58
|
anchor.style.display = 'none';
|
59
|
+
},
|
60
|
+
|
61
|
+
embedFacebookPost: function(anchor, url) {
|
62
|
+
anchor.insertAdjacentHTML('beforebegin', '<div class="fb-post" data-href="'+url+'"></div>');
|
63
|
+
FB.XFBML.parse(anchor.parentNode);
|
64
|
+
anchor.style.display = 'none';
|
56
65
|
}
|
57
66
|
});
|
@@ -1 +1,9 @@
|
|
1
|
+
<div id="fb-root"></div>
|
2
|
+
<script>(function(d, s, id) {
|
3
|
+
var js, fjs = d.getElementsByTagName(s)[0];
|
4
|
+
if (d.getElementById(id)) return;
|
5
|
+
js = d.createElement(s); js.id = id;
|
6
|
+
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
|
7
|
+
fjs.parentNode.insertBefore(js, fjs);
|
8
|
+
}(document, 'script', 'facebook-jssdk'));</script>
|
1
9
|
<div data-widget="pageflow_oembed"></div>
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: pageflow-oembed
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Joost Baaij
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-07-
|
11
|
+
date: 2017-07-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: pageflow
|