embeditor-rails 0.0.1 → 0.1.0

data/README.md

@@ -41,16 +41,26 @@ occur, and call its `swap()` function to perform the swapping:
 </script>
 ```
 
-Embeditor works by replacing `A` tags (eg. `<a href="...">Embed</a>`) with the
-appropriate embed. There are several adapters included with this engine:
+Embeditor works by replacing `A` tags with a specific class with the
+appropriate embed. The default class is `embed-placeholder`, but that can be
+configured.
 
-* **Embedly** - Covers several services, such as SoundCloud, Spotify,
-  Facebook, Scribd, among others. Unfortunately, Embedly doesn't work perfectly
-  all the time.
+There are several adapters included with this engine:
+
+* **Embedly** - Covers several services, such as SoundCloud, Spotify, Scribd, Google
+  Maps, and others. See
+  [the list of Embedly's providers](http://embed.ly/embed/features/providers).
+  Embedly doesn't always work perfectly, so Embeditor provides manual adapters
+  for some of the providers that Embedly claims to support.
 * **Cover It Live**
-* **Document Cloud**
+* **Polldaddy**
 * **KPCC's Fire Tracker**
-* **Rebel Mouse**
+* **Instagram**
+* **Facebook**
+* **Twitter**
+* **Storify**
+* **Document Cloud** - Not yet supported.
+* **Rebel Mouse** - Not yet supported.
 
 None of these are included automatically. To install just the ones you need,
 add them to your `application.js` :
@@ -80,6 +90,20 @@ You can also selectively require templates:
 
 ### Configuration
 
+#### Embeditor
+
+You can configure:
+
+* `defaultAdapter` - The adapter that will be used if no adapter is found for
+  the provided service.
+* `defaultService` - The service that will be used if no service is provided
+  on the placeholder link.
+* `wrapperClass` - The class of the div that will get wrapped around the embed.
+* `placeholderClass` - The class of the `<A>` tags that Embeditor will look for.
+
+
+#### Embeds
+
 Embeditor offers a system of configuration precedence.
 The order of precedence is:
 
@@ -181,8 +205,31 @@ new Embeditor.Base({
 ```
 
 
+### oEmbed vs. non-oEmbed
+
+This library isn't necessarily tied to oEmbed, however it does have support for
+it. Even for services which support oEmbed, there are static templates which
+are able to render the embed properly just based off of the provided URL.
+This eliminates any oEmbed headaches (Access-Control-Allowed-Origin, for
+example), and also reduces the time it takes for an embed to load.
+
+
+
 ## Extending
 
 You can/should add your own adapters! It's easy, I promise. If you add one
 which you think could be useful to a lot of people, please submit a PR and
 share the wealth!
+
+You can extend your adapter from:
+
+* `Embeditor.Adapter`, which is the base adapter.
+* `Embeditor.Adapters.Oembed`, for oEmbed endpoints.
+* `Embeditor.Adapters.StaticTemplate`, for embeds where the embed code is
+  stored in the `/templates` directory and rendered with JST.
+
+
+## Contributing
+
+If you have an adapter that you think would be useful for many, please open
+up a pull request.

data/app/assets/javascripts/embeditor/adapter.js.coffee

@@ -1,24 +1,34 @@
-# Your Adapter should define:
-# * QueryDefaults - an object of defaults to send as query parameters
+# Your Adapter SHOULD define:
+# * @QueryDefaults - The default parameters if no others are passed in.
 
 class Embeditor.Adapter
-    @TemplatePath = "embeditor/templates/"
+    className: "Adapter"
 
-    constructor: (@element, options={}) ->
-        @href = @element.attr('href')
+    @QueryDefaults = {}
+
+    constructor: (@element, @options={}) ->
+        @adapter        = Embeditor.Adapters[@className]
+        @href           = @element.attr('href')
+        @dataOptions    = @_extractData()
+        @queryParams    = @_buildParams(@dataOptions, options)
 
 
     swap: ->
         return
 
 
+    embed: (html) ->
+        @wrapper = $("<div />", class: @options.wrapperClass)
+        @wrapper.html(html)
+        @element.after @wrapper
+
+
     _extractData: ->
-        adapter = @constructor.name
         dataOptions = {}
 
         for key,val of @element.data()
             # Make sure we care about this attribute
-            if Embeditor.Adapters[adapter].QueryDefaults?[key]
+            if @adapter.QueryDefaults?[key]
                 dataOptions[key] = val
 
         dataOptions
@@ -31,8 +41,8 @@ class Embeditor.Adapter
     # 3. The global options specified at Embeditor initialization,
     # 4. This adapter's default options (fallback options).
     _buildParams: (dataOptions, options) ->
-        adapter = @constructor.name
-
         _.defaults(dataOptions,
-            options[adapter]?['query'], options['query']
-            Embeditor.Adapters[adapter].QueryDefaults)
+            @adapter.query,
+            options['query'],
+            @adapter.QueryDefaults
+        )

data/app/assets/javascripts/embeditor/adapters/cover_it_live.js.coffee

@@ -1,24 +1,25 @@
-class Embeditor.Adapters.CoverItLive extends Embeditor.Adapter
-    @Template = JST[Embeditor.Adapter.TemplatePath + 'cover_it_live']
+class Embeditor.Adapters.CoverItLive extends Embeditor.Adapters.StaticTemplate
+    className: "CoverItLive"
+
+    @Template = Embeditor.Template('cover_it_live')
 
     @QueryDefaults =
-        maxheight : 550
         maxwidth  : 620
+        maxheight : 550
 
-    @Matcher = new RegExp "/altcast_code=([^/]+)/", "gi"
-
-
-    constructor: (@element, options={}) ->
-        @dataOptions = @_extractData()
-        @queryParams = @_buildParams(@dataOptions, options)
-
-        super
-
+    @Matchers = [
+        new RegExp "/altcast_code=([^/]+)/", "gi"
+    ]
 
     swap: ->
-        event_id = CoverItLive.Matcher.exec(@href)[1]
+        # If the href doesn't match our known URL schemes
+        # for this adapter, then let's not bother trying.
+        match = @_parseUrl()
+        return false if not match
+
+        event_id = match[1]
 
-        @element.after CoverItLive.Template
+        @embed CoverItLive.Template
             maxheight   : @queryParams.maxheight,
             maxwidth    : @queryParams.maxwidth,
-            event_id    : @event_id
+            event_id    : event_id

data/app/assets/javascripts/embeditor/adapters/document_cloud.js.coffee

@@ -1 +1,2 @@
 class Embeditor.Adapters.DocumentCloud extends Embeditor.Adapter
+    className: "DocumentCloud"

data/app/assets/javascripts/embeditor/adapters/embedly.js.coffee

@@ -1,6 +1,8 @@
 # This doesn't inherit from Adapters.Oembed because the Embedly plugin
 # handles most of that stuff on its own.
 class Embeditor.Adapters.Embedly extends Embeditor.Adapter
+    className: "Embedly"
+
     # This object should hold any keys that we want to
     # send to the API. Any key not in this object will
     # be ignored as a data attribute.
@@ -14,7 +16,7 @@ class Embeditor.Adapters.Embedly extends Embeditor.Adapter
         # Key must be specified
 
 
-    constructor: (@element, options={}) ->
+    constructor: (@element, @options={}) ->
         pluginOpts = options['Embedly']?['plugin'] or {}
         @pluginOptions = _.defaults(pluginOpts, Embedly.PluginDefaults)
 

data/app/assets/javascripts/embeditor/adapters/facebook.js.coffee

@@ -0,0 +1,18 @@
+class Embeditor.Adapters.Facebook extends Embeditor.Adapters.StaticTemplate
+    className: "Facebook"
+
+    @Template = Embeditor.Template('facebook')
+
+    @QueryDefaults =
+        maxwidth  : 550
+        maxheight : 600
+
+    # For facebook, we just use the full URL, so no matchers are needed.
+    @Matchers = []
+
+
+    swap: ->
+        @embed Facebook.Template
+            maxheight   : @queryParams.maxheight,
+            maxwidth    : @queryParams.maxwidth,
+            url         : @href

data/app/assets/javascripts/embeditor/adapters/fire_tracker.js.coffee

@@ -1,5 +1,7 @@
 class Embeditor.Adapters.FireTracker extends Embeditor.Adapters.Oembed
-    @Path = "http://projects.scpr.org/firetracker/oembed"
+    className: "FireTracker"
+
+    @Endpoint = "http://projects.scpr.org/firetracker/oembed"
 
     @QueryDefaults =
         maxwidth    : 510

data/app/assets/javascripts/embeditor/adapters/instagram.js.coffee

@@ -0,0 +1,28 @@
+# Instagram's oembed endpoint returns "photo" oembed types (instead of "rich"),
+# and only a URL to the photo, not an actual embed code. Therefore, we need to
+# use StaticTemplate to use the iframe embed code.
+class Embeditor.Adapters.Instagram extends Embeditor.Adapters.StaticTemplate
+    className: "Instagram"
+
+    @Template = Embeditor.Template('instagram')
+
+    @QueryDefaults =
+        maxwidth  : 612
+        maxheight : 710
+
+    @Matchers = [
+        # http://instagram.com/p/e8hJe6CvTW/
+        new RegExp "instagram\.com\/p\/([^/]+)", "gi"
+    ]
+
+
+    swap: ->
+        match = @_parseUrl()
+        return false if not match
+
+        photo_id = match[1]
+
+        @embed Instagram.Template
+            maxheight   : @queryParams.maxheight
+            maxwidth    : @queryParams.maxwidth
+            photo_id    : photo_id

data/app/assets/javascripts/embeditor/adapters/oembed.js.coffee

@@ -1,17 +1,23 @@
+# Oembed adapters MUST define:
+# * @Endpoint      - The URL to the oembed endpoint
+#
+# Oembed adapters SHOULD defined:
+# * @QueryDefaults - The fallback query parameters if no others are specified.
 class Embeditor.Adapters.Oembed extends Embeditor.Adapter
-    # Override this. Oembed endpoint.
-    @Path = null
+    className: "Oembed"
 
-    constructor: (@element, options={}) ->
-        @dataOptions = @_extractData()
-        @queryParams = @_buildParams(@dataOptions, options)
+    # Override this. Oembed endpoint.
+    @Endpoint = null
 
-        super
+    swap: ->
+        $.ajax
+            url         : @adapter.Endpoint
+            type        : 'GET'
+            dataType    : 'json'
+            data        :  _.extend(@queryParams, {url: @href})
 
+            success: (data, textStatus, jqXHR) =>
+                @embed data.html
 
-    swap: ->
-        $.getJSON(
-            Embeditor.Adapters[@constructor.name].Path,
-            _.extend({url: @href}, @queryParams),
-            (data, textStatus, jqXHR) => @element.after(data.html)
-        )
+            error: (jqXHR, textStatus, errorThrown) =>
+                console.log('[embeditor oembed] error.', jqXHR)

data/app/assets/javascripts/embeditor/adapters/polldaddy.js.coffee

@@ -1,7 +1,17 @@
 class Embeditor.Adapters.Polldaddy extends Embeditor.Adapters.Oembed
-    @Path = "http://polldaddy.com/oembed"
+    className: "Polldaddy"
+
+    @Endpoint = "http://polldaddy.com/oembed/" # Doesn't work w/o trailing slash...
 
     @QueryDefaults =
-        maxwidth    : 510
-        maxheight   : 374
-        format      : 'json'
+        maxwidth  : 620
+        maxheight : 550
+        format    : 'json'
+
+
+    constructor: (@element, @options={}) ->
+        super
+
+        # Work around a polldaddy bug where the oembed endpoint doesn't
+        # properly recognize SSL URL's given to it.
+        @href = Embeditor.Utility.convertProtocolToHttp(@href)

data/app/assets/javascripts/embeditor/adapters/rebel_mouse.js.coffee

@@ -1 +1,2 @@
 class Embeditor.Adapters.RebelMouse extends Embeditor.Adapter
+    className: "RebelMouse"

data/app/assets/javascripts/embeditor/adapters/static_template.js.coffee

@@ -0,0 +1,43 @@
+# StaticTemplate is for when you just want to hard-code the embed code
+# into the /templates directory. This is either to avoid an expensive
+# call to an oEmbed endpoint, or if there simply isn't another way to
+# programatically retrieve the embed code.
+#
+# Your StaticTemplate adapter MUST define:
+# * @Tempalte - The name of the template to use (in the templates directory)
+#
+# Your StaticTemplate adapter SHOULD define:
+# * @QueryDefaults - The default query paramters if no others are passed in.
+#
+# Your StaticTemplate adapter MAY define:
+# * @Matchers - An array of regular expressions which will be used to extract
+#               important information from the URL (such as an ID).
+#               If your adapter doesn't need a Matcher, then you don't have to
+#               define this property. This property is used by _parseUrl(),
+#               which doesn't get called automatically.
+#
+class Embeditor.Adapters.StaticTemplate extends Embeditor.Adapter
+    className: "StaticTemplate"
+
+    # The template to use.
+    @Template = null
+
+    # Query parameter defaults
+    @QueryDefaults = {}
+
+    # The matchers to extract the info out of the URL.
+    @Matchers = []
+
+
+    swap: ->
+        # Extract the info and render the template
+        return
+
+
+    _parseUrl: ->
+        match = null
+
+        _.find @adapter.Matchers, (m) =>
+            match = m.exec(@href)
+
+        match

data/app/assets/javascripts/embeditor/adapters/storify.js.coffee

@@ -0,0 +1,24 @@
+class Embeditor.Adapters.Storify extends Embeditor.Adapters.StaticTemplate
+    className: "Storify"
+
+    @Template = Embeditor.Template('storify')
+
+    @QueryDefaults =
+        maxwidth  : 550
+        maxheight : 750
+
+    # For storify, we just use the full URL, so no matchers are needed.
+    @Matchers = []
+
+
+    swap: ->
+        # Storify's embed code doesn't provide a protocol (http/s), so let's
+        # strip it out. We also want to make sure that there is no trailing
+        # slash so that we can concatenate other things to the URL.
+        url = Embeditor.Utility.stripProtocol(
+                Embeditor.Utility.stripTrailingSlash(@href))
+
+        # Storify embed is responsive, so we don't need to provide a width.
+        @embed Storify.Template
+            maxheight   : @queryParams.maxheight
+            url         : url

data/app/assets/javascripts/embeditor/adapters/twitter.js.coffee

@@ -0,0 +1,14 @@
+class Embeditor.Adapters.Twitter extends Embeditor.Adapters.StaticTemplate
+    className: "Twitter"
+
+    @Template = Embeditor.Template('twitter')
+
+    # Twitter doesn't give a damn about you or your dimensions.
+    @QueryDefaults = {}
+
+    # For twitter, we just use the full URL, so no matchers are needed.
+    @Matchers = []
+
+
+    swap: ->
+        @embed Twitter.Template(url : @href)

data/app/assets/javascripts/embeditor/embeditor.js.coffee

@@ -7,21 +7,26 @@ window.Embeditor = {
         # 'brightcove'    : 'Embedly'
         'ustream'       : 'Embedly'
         'vine'          : 'Embedly'
-        # 'googlemaps'    : 'Embedly'
+        'googlemaps'    : 'Embedly'
         'scribd'        : 'Embedly'
         # 'documentcloud' : 'DocumentCloud'
         'polldaddy'     : 'Polldaddy'
-        'facebook'      : 'Embedly'
-        # 'storify'       : 'Embedly'
+        'facebook'      : 'Facebook'
+        'storify'       : 'Storify'
         'coveritlive'   : 'CoverItLive'
         # 'rebelmouse'    : 'RebelMouse'
         'firetracker'   : 'FireTracker'
-        # 'twitter'       : 'Embedly'
-        'instagram'     : 'Embedly'
+        'twitter'       : 'Twitter'
+        'instagram'     : 'Instagram'
         'soundcloud'    : 'Embedly'
         'spotify'       : 'Embedly'
         'other'         : 'Embedly'
 
+    TemplatePath : 'embeditor/templates/'
+
+    Template : (template) ->
+        JST[@TemplatePath + template]
+
     DefaultOptions :
         defaultAdapter      : 'Embedly' # Adapter that gets used when the service isn't recognized
         defaultService      : 'other'   # Service that gets used when the `data-service` attribute is missing

data/app/assets/javascripts/embeditor/templates/facebook.jst.eco

@@ -0,0 +1,2 @@
+<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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
+<div class="fb-post" data-href="<%=@url%>" data-width="<%=@maxwidth%>"></div>

data/app/assets/javascripts/embeditor/templates/instagram.jst.eco

@@ -0,0 +1 @@
+<iframe src="//instagram.com/p/<%=@photo_id%>/embed/" width="<%=@maxwidth%>" height="<%=@maxheight%>" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

data/app/assets/javascripts/embeditor/templates/polldaddy.jst.eco

@@ -0,0 +1,4 @@
+<div class="pd-embed" data-settings="{&quot;type&quot;:&quot;iframe&quot;,&quot;auto&quot;:true,&quot;domain&quot;:&quot;<%=@domain%>\/s\/&quot;,&quot;id&quot;:&quot;<%=@poll_id%>&quot;}"></div>
+<script type="text/javascript">
+(function(d,c,j){if(!document.getElementById(j)){var pd=d.createElement(c),s;pd.id=j;pd.src=('https:'==document.location.protocol)?'https://polldaddy.com/survey.js':'http://i0.poll.fm/survey.js';s=document.getElementsByTagName(c)[0];s.parentNode.insertBefore(pd,s);}}(document,'script','pd-embed'));
+</script>

data/app/assets/javascripts/embeditor/templates/storify.jst.eco

@@ -0,0 +1 @@
+<div class="storify"><iframe src="<%=@url%>/embed" width="100%" height=<%=@maxheight%>frameborder=no allowtransparency=true></iframe><script src="<%=@url%>.js"></script></div>

data/app/assets/javascripts/embeditor/templates/twitter.jst.eco

@@ -0,0 +1,2 @@
+<blockquote class="twitter-tweet"><a href="<%=@url%>"></a></blockquote>
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

data/app/assets/javascripts/embeditor/utility.js.coffee

@@ -0,0 +1,15 @@
+class Embeditor.Utility
+    @stripProtocol: (str) ->
+        str.replace(/^https?:/, "")
+
+
+    @stripTrailingSlash: (str) ->
+        str.replace(/\/$/, "")
+
+
+    @convertProtocolToHttp: (str) ->
+        str.replace(/^https:/, 'http:')
+
+
+    @convertProtocolToHttps: (str) ->
+        str.replace(/^http:/, 'https:')

data/app/assets/javascripts/embeditor.js

@@ -1,2 +1,5 @@
 //= require embeditor/embeditor
+//= require embeditor/utility
 //= require embeditor/adapter
+//= require embeditor/adapters/oembed
+//= require embeditor/adapters/static_template

data/lib/embeditor-rails/version.rb

@@ -1,5 +1,5 @@
 module Embeditor
   module Rails
-    VERSION = "0.0.1"
+    VERSION = "0.1.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: embeditor-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-10-02 00:00:00.000000000 Z
+date: 2013-10-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -72,14 +72,25 @@ files:
 - app/assets/javascripts/embeditor/adapters/cover_it_live.js.coffee
 - app/assets/javascripts/embeditor/adapters/document_cloud.js.coffee
 - app/assets/javascripts/embeditor/adapters/embedly.js.coffee
+- app/assets/javascripts/embeditor/adapters/facebook.js.coffee
 - app/assets/javascripts/embeditor/adapters/fire_tracker.js.coffee
+- app/assets/javascripts/embeditor/adapters/instagram.js.coffee
 - app/assets/javascripts/embeditor/adapters/oembed.js.coffee
 - app/assets/javascripts/embeditor/adapters/polldaddy.js.coffee
 - app/assets/javascripts/embeditor/adapters/rebel_mouse.js.coffee
+- app/assets/javascripts/embeditor/adapters/static_template.js.coffee
+- app/assets/javascripts/embeditor/adapters/storify.js.coffee
+- app/assets/javascripts/embeditor/adapters/twitter.js.coffee
 - app/assets/javascripts/embeditor/adapters.js
 - app/assets/javascripts/embeditor/embeditor.js.coffee
 - app/assets/javascripts/embeditor/templates/cover_it_live.jst.eco
+- app/assets/javascripts/embeditor/templates/facebook.jst.eco
+- app/assets/javascripts/embeditor/templates/instagram.jst.eco
+- app/assets/javascripts/embeditor/templates/polldaddy.jst.eco
+- app/assets/javascripts/embeditor/templates/storify.jst.eco
+- app/assets/javascripts/embeditor/templates/twitter.jst.eco
 - app/assets/javascripts/embeditor/templates.js
+- app/assets/javascripts/embeditor/utility.js.coffee
 - app/assets/javascripts/embeditor.js
 - lib/embeditor-rails/version.rb
 - lib/embeditor-rails.rb
@@ -87,7 +98,8 @@ files:
 - Rakefile
 - README.md
 homepage: https://github.com/SCPR/embeditor-rails
-licenses: []
+licenses:
+- MIT
 post_install_message: 
 rdoc_options: []
 require_paths:
@@ -111,3 +123,4 @@ signing_key:
 specification_version: 3
 summary: Embeditor plugin for Rails.
 test_files: []
+has_rdoc: