Added support for Khan Academy

README.md

@@ -1,4 +1,4 @@
-Olly.js (1.0)
+Olly.js (1.1)
 =======
 
 A JavaScript library to convert URLs into embedable HTML.
@@ -10,11 +10,11 @@ Example
 
 Usage
 -----
-Instal with bower or download dist/olly.js
+Install with bower or download dist/olly.js
 
     bower install Olly.js
 
-After being included with a `<script>` tag, Olly exposes the `olly` object (weird, right?). This object has one important method `olly.embed` The `.embed` method takes, at a minimum, a URL from a supported service and a DOM element. The method then fills the provided element with the rich media from the provided URL. For example, a link to a Youtube video will fill the provided element with an embedded Youtube player for the video:
+After being included with a `<script>` tag, Olly exposes the `olly` object (weird, right?). This object has one important method `olly.embed` The `.embed` method takes, at a minimum, a URL from a supported service and a DOM element (Or any boolean value if you'd rather have Olly return the html that would have been rendered). The method then fills the provided element with the rich media from the provided URL or it returns the html that will render the rich media. For example, a link to a Youtube video will fill the provided element with an embedded Youtube player for the video:
 
 ```js
 olly.embed("https://www.youtube.com/watch?v=x-8QAFqAAJ8", document.getElementById("youtube"));
@@ -26,6 +26,15 @@ This will fill `#youtube` with the following markup.
 <embed width="420" height="345" src="http://www.youtube.com/v/x-8QAFqAAJ8" type="application/x-shockwave-flash">
 ```
 
+But if you simply feed any boolean value to the parameter that usually takes the element, like so:
+
+```js
+var richMedia = olly.embed("https://www.youtube.com/watch?v=x-8QAFqAAJ8", true);
+```
+
+Olly will then return an object filled with two main properties: `scripts` which contains an array of scripts that are needed for the rich media to work properly & `markdown` which contains the html that will compose the rich media.
+
+
 These methods can both take an optional `services` argument which allows you to specify which types of URLs should be embedded. For example, if we only want Youtube videos to be embedded, we can do this:
 
 ```js
@@ -53,6 +62,7 @@ Supported Services
 * LiveLeak
 * Vine
 * TED
+* Khan Academy
 
 **Audio**
 

markup/example.html

@@ -27,6 +27,27 @@ <h3>Output</h3>
             <div class="output" id="blob"></div>
             <script>olly.richify("Hi, welcome to my site, please watch <a href='https://www.youtube.com/watch?v=x-8QAFqAAJ8'>this awesome video</a>:<br />https://www.youtube.com/watch?v=7VFBQLAjcDU<br />Thanks! All the best, Abe", document.getElementById("blob"), {youtube: olly.EMBED});</script>
         </div>-->
+        <div class="service">
+            <h2></h2>
+            <h3>&nbsp;&nbsp;&nbsp;&nbsp;To use Olly.js without feeding it an element<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;you can replace the element argument with any boolean value:</h3>
+            <div class="string">
+                &lt;script&gt;<br>
+                var embedResults = olly.embed("http://vimeo.com/78276911", <b>true</b>);<br>
+                &lt;/script&gt;
+            </div>
+            <h3>Output</h3>
+            <div class="output" id="vimeoNoElement">
+                &lt;script&gt;<br>
+                var embedResults = <br>
+                &nbsp;&nbsp;&nbsp;&nbsp;{<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>scripts</b>: Array[0],<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>markdown</b>: '<i>&lt;iframe src="//player.vimeo.com/video/78276911" width="420" height="345" <br>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;</i>',<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;}<br>
+                &lt;/script&gt;
+            </div>
+        </div>
 
         <div class="service">
             <h2>Youtube</h2>
@@ -223,6 +244,17 @@ <h3>Output</h3>
             <script>olly.embed("http://gfycat.com/BoringPessimisticBrownbear", document.getElementById("gfycat"));</script>
         </div>
 
+        <div class="service">
+            <h2>Khan Academy</h2>
+            <h3>Original String</h3>
+            <div class="string">
+                "https://www.khanacademy.org/embed_video?v=IFKnq9QM6_A"
+            </div>
+            <h3>Output</h3>
+            <div class="output" id="khan-academy"></div>
+            <script>olly.embed("https://www.khanacademy.org/embed_video?v=IFKnq9QM6_A", document.getElementById("khan-academy"));</script>
+        </div>
+
         <div class="service">
             <h2>Images (.jpg, .png, .bmp, .gif)</h2>
             <h3>Original String</h3>

src/domains.js

@@ -175,7 +175,7 @@
             };
         },
 
-
+                
         // Twitch Structure
         twitch: function (URL) {
             return {
@@ -192,7 +192,19 @@
                     embedID: URL.pathchunks[0]
                 }
             };
+        },
+
+        // Khan Academy Video Structure
+        khanacademy: function (URL) {
+            var structure = {
+                template: 'khanacademy',
+                data: {
+                    embedURL: 'https://www.khanacademy.org/embed_video?v=' + URL.query.v
+                }
+            };
+            return structure;
         }
+
     };
 
 }(typeof module !== 'undefined' && module.exports? module.exports : window.olly));

src/olly.js

@@ -19,13 +19,13 @@
             }
         };
 
-        self.embed = function (URLString, element, services) {
-            var URL;
+        self.embed = function (URLString, elementOrReturn, services) {
+            var URL, renderResults;
 
             URL = this.parseURL(URLString);
-            this.render(element, URL, services);
+            renderResults = this.render(elementOrReturn, URL, services);
 
-            return true;
+            return (typeof renderResults === "boolean") ? true : renderResults;
         };
 
         self.richify = function (blob, parentElement, services) {

src/parser.js

@@ -1,7 +1,7 @@
 /*global window,module,olly,document */
 (function (olly) {
     "use strict";
-
+        
     //Inspired from https://gist.github.com/jlong/2428561
     olly.parseURL = function (URLString) {
         var document = typeof module !== 'undefined'? module.document : window.document;

src/render.js

@@ -3,34 +3,58 @@
     "use strict";
 
     olly.render = function (element, URL, services) {
-        var src, definition, domainName, extensionName, field, templateObj, scriptIndex;
+        var src, definition, domainName, extensionName, field, templateObj, scriptIndex, shouldRender;
 
         domainName = this.findDomain(URL);
         extensionName = this.findExtension(URL);
+        shouldRender = (typeof element === "boolean") ? false : true;
 
         if ((!domainName && !extensionName) || (services || {})[domainName] == olly.TEXT) {
             return "";
         }
 
+        if(!shouldRender) {
+            element = shouldRender;
+            var returnMarkdown = {
+                scripts: new Array(),
+                markdown: ""
+            };
+        }
+
         definition = (this.domains[domainName] || this.extensions[extensionName])(URL);
         templateObj = this.templates[definition.template || domainName || extensionName];
 
         if (templateObj && templateObj.scripts) {
             for (scriptIndex = 0; scriptIndex < templateObj.scripts.length; scriptIndex += 1) {
-                src = templateObj.scripts[scriptIndex];
-                this.loadScript(element, olly.generate(src, definition.data));
+                if(!shouldRender) {
+                    returnMarkdown.scripts.push(olly.generate(src, definition.data));
+                }
+                else {
+                    src = templateObj.scripts[scriptIndex];
+                    this.loadScript(element, olly.generate(src, definition.data));
+                }
             }
         }
 
-        if (definition.templatePromise) {
-            definition.templatePromise.then(function (templateObj) {
+        if(shouldRender) {
+            if (definition.templatePromise) {
+                definition.templatePromise.then(function (templateObj) {
+                    this.display(templateObj, definition.data, element);
+                });
+            } else {
                 this.display(templateObj, definition.data, element);
-            });
+            }
         } else {
-            this.display(templateObj, definition.data, element);
+            if (definition.templatePromise) {
+                definition.templatePromise.then(function (templateObj) {
+                    returnMarkdown.markdown = this.display(templateObj, definition.data, element);
+                });
+            } else {
+                returnMarkdown.markdown = this.display(templateObj, definition.data, element);
+            }
         }
-
-        return true;
+    
+        return (typeof returnMarkdown === "undefined") ? true : returnMarkdown;
     };
 
     olly.findDomain = function (URL) {
@@ -74,7 +98,7 @@
         return deferred.promise;
     };
 
-    olly.loadScript = function (element, src) {
+    olly.loadScript = function (element, src) {console.log("src:", src);
         var script;
         script = document.createElement('script');
         script.type = 'text/javascript';
@@ -86,7 +110,13 @@
         if (typeof templateObj === "string") {
             templateObj = {markup: templateObj};
         }
-        element.innerHTML = olly.generate(templateObj.markup, data);
+
+        if(!element) {
+            return olly.generate(templateObj.markup, data);
+        }
+        else {
+            element.innerHTML = olly.generate(templateObj.markup, data);
+        }
     };
 
     olly.generate = function (template, data) {

src/templates.js

@@ -29,7 +29,7 @@
         twitter_timeline: {
             markup: '<a class="twitter-timeline" href="{{embedURL}}"></a>',
             scripts: ['//platform.twitter.com/widgets.js']
-        },
+        },            
 
         github: {
             markup: '<div class="github-widget" data-repo="{{repo}}"></div>',
@@ -57,6 +57,8 @@
             ]
         },
 
+        khanacademy: '<iframe frameborder="0" scrolling="no" width="560" height="355" src="{{embedURL}}" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>',
+
         video: {
             markup: '<video src="{{embedURL}}" controls="true" autoplay loop></video>'
         },