pageflow-oembed 1.1.1 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: df20bdf9cb6436b3923f6f49929d80db90da2a1d
-  data.tar.gz: 71b6e3bbc4340f258acc5afd0ddc8b53bb5ba742
+  metadata.gz: e76b40d356c5a7a0aa6cb10a5c62c39e78d4bd98
+  data.tar.gz: dd73e23099b3248527f177b68be9f1b41d979edc
 SHA512:
-  metadata.gz: 6bb34329b1ac035837811729d593093e8e89a461d0606f9b1c88b87cecc65ec3313553584bfe0bfd220e1b3c0cd894d9a89c70b0e1adb6ac4421687811cba00b
-  data.tar.gz: 665daf414db08b8f5e9806730dbacf06d88df911e2495ca1db4edc1d7a4fee76020f9d7b35c2827783a9299686e10a6a5a7636e398bb5407d6e161a206911780
+  metadata.gz: 2b2e5acdbd3fcfa99c1875656ae1404fa39572f18d6ce74bf0fed8c7887c604f5eced10613c2877b8541cbd90e1d2b06cf47fb70948f67bc02b962d598af296f
+  data.tar.gz: 90e68ca87a7afd1227d8f501789f0b4088837cbbeffbe50968b605b02ca3ed45f3c9bd2ecea31ed2fbd894575981d4f0040363f2b27578cfd7ed1223f6687d21

data/CHANGELOG

@@ -1,3 +1,11 @@
+Version 1.2.0—28 July 2017
+
+Added Facebook single post support. Uses the Facebook JS SDK. Spy on all the things!
+
+* facebook, post: https://www.facebook.com/20531316728/posts/10154009990506729/
+
+Will add Facebook Video in a future release.
+
 Version 1.1.1—25 July 2017
 
 Bugfix: make the URL test more strict. Otherwise non-embeddable links were found.

data/README.md

@@ -5,7 +5,7 @@ into embedded content when possible. For example, instead of a link to a
 [Tweet URL](https://twitter.com/scrollytelling/status/885128273239396352), people
 reading your story will see the Tweet embedded in the page.
 
-[Read the introduction on Scrollytelling](https://app.scrollytelling.io/embed-a-tweet)
+🌟 [Read the introduction on Scrollytelling](https://app.scrollytelling.io/embed-a-tweet) 🌟
 
 It usually works using [oEmbed](http://oembed.com), the standard protocol for discovering
 and showing embedded content. Although sometimes we use a JavaScript SDK, since it
@@ -14,26 +14,40 @@ the database.
 
 The best aspect about this plugin is for editors working with Pageflow. You
 don't have to do anything out of the ordinary. Continue to add links as normal,
-using the built-in html editor in Pageflow. Your hand-creafted, artisanal words
-are not affected by our code. The link will be visible to you as always. It's just
-that on the front end, the link is replaced by the embedded content.
+using the built-in html editor in Pageflow. Your hand-crafted, artisanal words
+are not affected by our code. The plain link will be visible to you, dear editor, as always. It's just
+that on the front end, the link is replaced by embedded content.
+
+![Party Hard](https://media.giphy.com/media/Hd3GXtH7xs1CU/giphy.gif)
 
 If you don't want the embed, remove the link. In a future release there might
 be a mechanism to deal with this.
 
+### 🖤 Heads up: contains ~~evil spyware~~ social scripts 👀
+
+To create the best versions of embedded content, we usually include the
+JavaScript SDK a provider has created. For example, Twitter and Facebook. The
+embeds sans JS aren't so nice to see, they don't live update the hearts and
+thumbs and all that, and certainly won't open the respective apps on your phone.
+
+If you hate the thought of being tracked on the interwebs, well, I hear what
+you're saying but we wanna be pragmatic. Should I make using the SDKs configurable?
+Why me? It's open source, you do it! Send me a patch!
+
 ### Whitelisted URLs
 
-We work with a whitelist and will convert only some links.
+We work with a whitelist _(actually a regex, hurr durr)_ and will convert only some links.
 
 Currently supported:
 
 * twitter, single tweet: https://twitter.com/scrollytelling/status/885128273239396352
 * spotify, single track: https://open.spotify.com/track/298gs9ATwr2rD9tGYJKlQR
 * spotify, artist: https://open.spotify.com/artist/0IIPgITtEO4JJfipw57KGv
+* facebook, post: https://www.facebook.com/20531316728/posts/10154009990506729/
 
-Note that the URL you use must look exactly like the ones above.
+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.
 
-More providers will follow.
+#### More providers will follow. Want your fave in here? [Create an issue!](https://github.com/scrollytelling/pageflow-oembed/issues/new)
 
 ### Just uses JavaScript
 
@@ -42,19 +56,10 @@ have two polyfills to get IE on board. These don't get loaded if your browser
 is up to date. And if you are using a really ancient browser, well, that's
 your choice.
 
-### Heads up: social scripts will be included in the page
-
-To create the best versions of embedded content, we usually include the
-JavaScript SDK a provider has created. For example, Twitter. The widget sans JS
-is hardly usable, and certainly won't open the Twitter app on your phone. If
-you hate the thought of being tracked on the interwebs, well, I hear what you're
-saying but we gotta be pragmatic. Should I make using the SDKs configurable?
-
-
 ## Scrollytelling. What's that now?
 
 We are [Scrollytelling](https://www.scrollytelling.io/). We enable online
-stories. we host multimedia content for national media. We run a custom version
+stories. We host stories for national media. We run a custom version
 of the awesome [Pageflow](https://github.com/codevise/pageflow) storytelling
 tool. We continously give back to the community and we hope that you'll
 enjoy this plugin too.
@@ -77,7 +82,7 @@ And then execute:
 Add it to the Pageflow initializer in the host application:
 
 ```ruby
-# config/initializer/pageflow.rb
+# config/initializers/pageflow.rb
 Pageflow.configure do |config|
   config.plugin(Pageflow::Oembed.plugin)
 end
@@ -111,6 +116,8 @@ end
 
 In the Pageflow editor, insert a plain old link into the content text. Voila!
 
+🌟 [Read the introduction on Scrollytelling](https://app.scrollytelling.io/embed-a-tweet) 🌟
+
 ## Development
 
 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.

data/app/assets/javascript/pageflow/oembed.js

@@ -2,27 +2,29 @@
 //
 pageflow.widgetTypes.register('pageflow_oembed', {
   enhance: function(element) {
-    var embedLinks = [];
-    var urls = document.querySelectorAll('.contentText a');
-    for(var i = urls.length; i--; embedLinks.unshift(urls[i]));
-
-    for (var i = 0, len = embedLinks.length; i < len; i++) {
-      var url = embedLinks[i].getAttribute('href');
-      if( /twitter\.com\/\w*\/status\/\d*/i.test(url) )
-        this.embedTwitter(embedLinks[i], url);
-      else if( /open\.spotify\.com\/artist\/\w*/i.test(url) )
-        this.embedSpotify(embedLinks[i], url);
-      else if( /open\.spotify\.com\/track\/\w*/i.test(url) )
-        this.embedSpotify(embedLinks[i], url);
-    };
+    var links = document.querySelectorAll('.contentText a');
+
+    for (var i = 0; i < links.length; ++i) {
+      var link = links[i];
+      var url = link.getAttribute('href');
+
+      if( this.regex.twitter.test(url) )
+        this.embedTwitter(link, url);
+      else if( this.regex.spotify.test(url) )
+        this.embedSpotify(link, url);
+      else if( this.regex.facebookPost.test(url) )
+        this.embedFacebookPost(link, url);
+    }
   },
 
-  token: function() {
-    return document.querySelector("meta[name='csrf-token']").content;
+  regex: {
+    twitter: /twitter\.com\/\w*\/status\/\d*/i,
+    spotify: /open\.spotify\.com\/\w*\/\w*/i,
+    facebookPost: /facebook\.com\/\d*\/posts\/\d*/i
   },
 
-  page: function(link) {
-    return link.closest('.page');
+  token: function() {
+    return document.querySelector("meta[name='csrf-token']").content;
   },
 
   embedSpotify: function(anchor, url) {
@@ -42,9 +44,10 @@ pageflow.widgetTypes.register('pageflow_oembed', {
   embedTwitter: function(anchor, url) {
     var match = /(\d+)$/.exec(url);
     tweetId = match[0];
-    var theme = this.page(anchor).classList.contains('invert') ? 'light' : 'dark';
+    var page = anchor.closest('.page');
+    var theme = page.classList.contains('invert') ? 'light' : 'dark';
 
-    anchor.insertAdjacentHTML('beforebegin', '<span id="tweet-'+tweetId+'"></span>')
+    anchor.insertAdjacentHTML('beforebegin', '<span id="tweet-'+tweetId+'"></span>');
 
     var options = {omit_script: true, related: 'scrollytelling', lang: pageflow.seed.locale, theme: theme, dnt: 'true'};
     twttr.widgets.createTweet(
@@ -53,5 +56,11 @@ pageflow.widgetTypes.register('pageflow_oembed', {
       options
     );
     anchor.style.display = 'none';
+  },
+
+  embedFacebookPost: function(anchor, url) {
+    anchor.insertAdjacentHTML('beforebegin', '<div class="fb-post" data-href="'+url+'"></div>');
+    FB.XFBML.parse(anchor.parentNode);
+    anchor.style.display = 'none';
   }
 });

data/app/views/pageflow/oembed/_widget.html.erb

@@ -1 +1,9 @@
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
 <div data-widget="pageflow_oembed"></div>

data/lib/pageflow/oembed/version.rb

@@ -1,5 +1,5 @@
 module Pageflow
   module Oembed
-    VERSION = "1.1.1"
+    VERSION = "1.2.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-oembed
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: 1.2.0
 platform: ruby
 authors:
 - Joost Baaij
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-07-25 00:00:00.000000000 Z
+date: 2017-07-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow