Adding support for YouTube and Vimeo video embeds in share bookmarklet.

assets.yml

@@ -92,6 +92,7 @@ javascripts:
         - media/js/vendor/jquery.corners.js
         - media/js/vendor/jquery.hotkeys.js
         - media/js/vendor/jquery.easing.js
+        - media/js/vendor/jquery.url.js
         - media/js/vendor/underscore-*.js
         - media/js/vendor/readability-*.js
     blurblog:

media/css/bookmarklet.css

@@ -97,7 +97,7 @@
   overflow: hidden;
 }
 .NB-bookmarklet .NB-bookmarklet-main {
-    width: 530px;
+    width: 514px;
     overflow: hidden;
     float: right;
     border-left: 6px solid #38457E;
@@ -284,7 +284,7 @@
     float: left;
 }
 .NB-bookmarklet .NB-bookmarklet-comment-input textarea {
-    width: 316px;
+    width: 300px;
     float: left;
     border: 1px solid #E0E0E0;
     padding: 6px;

media/js/vendor/jquery.url.js

@@ -0,0 +1,214 @@
+/* ===========================================================================
+ *
+ * JQuery URL Parser
+ * Version 1.0
+ * Parses URLs and provides easy access to information within them.
+ *
+ * Author: Mark Perkins
+ * Author email: mark@allmarkedup.com
+ *
+ * For full documentation and more go to http://projects.allmarkedup.com/jquery_url_parser/
+ *
+ * ---------------------------------------------------------------------------
+ *
+ * CREDITS:
+ *
+ * Parser based on the Regex-based URI parser by Steven Levithan.
+ * For more information (including a detailed explaination of the differences
+ * between the 'loose' and 'strict' pasing modes) visit http://blog.stevenlevithan.com/archives/parseuri
+ *
+ * ---------------------------------------------------------------------------
+ *
+ * LICENCE:
+ *
+ * Released under a MIT Licence. See licence.txt that should have been supplied with this file,
+ * or visit http://projects.allmarkedup.com/jquery_url_parser/licence.txt
+ *
+ * ---------------------------------------------------------------------------
+ * 
+ * EXAMPLES OF USE:
+ *
+ * Get the domain name (host) from the current page URL
+ * jQuery.url.attr("host")
+ *
+ * Get the query string value for 'item' for the current page
+ * jQuery.url.param("item") // null if it doesn't exist
+ *
+ * Get the second segment of the URI of the current page
+ * jQuery.url.segment(2) // null if it doesn't exist
+ *
+ * Get the protocol of a manually passed in URL
+ * jQuery.url.setUrl("http://allmarkedup.com/").attr("protocol") // returns 'http'
+ *
+ */
+
+jQuery.url = function()
+{
+	var segments = {};
+	
+	var parsed = {};
+	
+	/**
+    * Options object. Only the URI and strictMode values can be changed via the setters below.
+    */
+  	var options = {
+	
+		url : window.location, // default URI is the page in which the script is running
+		
+		strictMode: false, // 'loose' parsing by default
+	
+		key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"], // keys available to query 
+		
+		q: {
+			name: "queryKey",
+			parser: /(?:^|&)([^&=]*)=?([^&]*)/g
+		},
+		
+		parser: {
+			strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,  //less intuitive, more accurate to the specs
+			loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/ // more intuitive, fails on relative paths and deviates from specs
+		}
+		
+	};
+	
+    /**
+     * Deals with the parsing of the URI according to the regex above.
+ 	 * Written by Steven Levithan - see credits at top.
+     */		
+	var parseUri = function()
+	{
+		str = decodeURI( options.url );
+		
+		var m = options.parser[ options.strictMode ? "strict" : "loose" ].exec( str );
+		var uri = {};
+		var i = 14;
+
+		while ( i-- ) {
+			uri[ options.key[i] ] = m[i] || "";
+		}
+
+		uri[ options.q.name ] = {};
+		uri[ options.key[12] ].replace( options.q.parser, function ( $0, $1, $2 ) {
+			if ($1) {
+				uri[options.q.name][$1] = $2;
+			}
+		});
+
+		return uri;
+	};
+
+    /**
+     * Returns the value of the passed in key from the parsed URI.
+  	 * 
+	 * @param string key The key whose value is required
+     */		
+	var key = function( key )
+	{
+		if ( ! parsed.length )
+		{
+			setUp(); // if the URI has not been parsed yet then do this first...	
+		} 
+		if ( key == "base" )
+		{
+			if ( parsed.port !== null && parsed.port !== "" )
+			{
+				return parsed.protocol+"://"+parsed.host+":"+parsed.port+"/";	
+			}
+			else
+			{
+				return parsed.protocol+"://"+parsed.host+"/";
+			}
+		}
+	
+		return ( parsed[key] === "" ) ? null : parsed[key];
+	};
+	
+	/**
+     * Returns the value of the required query string parameter.
+  	 * 
+	 * @param string item The parameter whose value is required
+     */		
+	var param = function( item )
+	{
+		if ( ! parsed.length )
+		{
+			setUp(); // if the URI has not been parsed yet then do this first...	
+		}
+		return ( parsed.queryKey[item] === null ) ? null : parsed.queryKey[item];
+	};
+
+    /**
+     * 'Constructor' (not really!) function.
+     *  Called whenever the URI changes to kick off re-parsing of the URI and splitting it up into segments. 
+     */	
+	var setUp = function()
+	{
+		parsed = parseUri();
+		
+		getSegments();	
+	};
+	
+    /**
+     * Splits up the body of the URI into segments (i.e. sections delimited by '/')
+     */
+	var getSegments = function()
+	{
+		var p = parsed.path;
+		segments = []; // clear out segments array
+		segments = parsed.path.length == 1 ? {} : ( p.charAt( p.length - 1 ) == "/" ? p.substring( 1, p.length - 1 ) : path = p.substring( 1 ) ).split("/");
+	};
+	
+	return {
+		
+	    /**
+	     * Sets the parsing mode - either strict or loose. Set to loose by default.
+	     *
+	     * @param string mode The mode to set the parser to. Anything apart from a value of 'strict' will set it to loose!
+	     */
+		setMode : function( mode )
+		{
+			strictMode = mode == "strict" ? true : false;
+			return this;
+		},
+		
+		/**
+	     * Sets URI to parse if you don't want to to parse the current page's URI.
+		 * Calling the function with no value for newUri resets it to the current page's URI.
+	     *
+	     * @param string newUri The URI to parse.
+	     */		
+		setUrl : function( newUri )
+		{
+			options.url = newUri === undefined ? window.location : newUri;
+			setUp();
+			return this;
+		},		
+		
+		/**
+	     * Returns the value of the specified URI segment. Segments are numbered from 1 to the number of segments.
+		 * For example the URI http://test.com/about/company/ segment(1) would return 'about'.
+		 *
+		 * If no integer is passed into the function it returns the number of segments in the URI.
+	     *
+	     * @param int pos The position of the segment to return. Can be empty.
+	     */	
+		segment : function( pos )
+		{
+			if ( ! parsed.length )
+			{
+				setUp(); // if the URI has not been parsed yet then do this first...	
+			} 
+			if ( pos === undefined )
+			{
+				return segments.length;
+			}
+			return ( segments[pos] === "" || segments[pos] === undefined ) ? null : segments[pos];
+		},
+		
+		attr : key, // provides public access to private 'key' function - see above
+		
+		param : param // provides public access to private 'param' function - see above
+		
+	};
+	
+}();

templates/api/share_bookmarklet.js

@@ -489,11 +489,30 @@
                 this.story_title = $readability.children("h1").text();
                 this.story_content = $("#readability-content", $readability).html();
             }
+            
+            this.find_video_embeds();
 
             $title.html(this.story_title);
             $content.html(this.story_content);
         },
         
+        find_video_embeds: function() {
+            var video_id, video_html;
+            
+            if (window.location.href.indexOf('youtube.com') != -1) {
+                video_id = jQuery.url.param('v');
+                video_html = '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/' + video_id + '" frameborder="0" allowFullScreen></iframe>';
+            } else if (window.location.href.indexOf('vimeo.com') != -1) {
+                video_id = jQuery.url.segment(0);
+                video_html = '<iframe src="http://player.vimeo.com/video/'+ video_id +'" width="640" height="390" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
+                console.log(["vimeo", video_id, jQuery.url]);
+            }
+
+            if (video_id && video_id.length) {
+                this.story_content = video_html + this.story_content;
+            }
+        },
+        
         get_selected_html: function() {
             var html = "";
             if (typeof window.getSelection != "undefined") {