FennNaten/vimeo_jsonp.html

## vimeo_jsonp.html
<!-- This code is an example made to illustrate a blog post about JSONP. It shouldn't be used in any production system.

    Copyright (C) 2014 Damien Lebreuilly

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

-->
<!doctype html>
<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>Vimeo via JSONP example</title>
	</head>
	<body>
		<div id="video-exemple"></div>
		<div id="info-exemple"></div>
		<div>
			<div>URL: <input type="text" id="video-url" /></div>
			<div>Width: <input type="text" id="video-width" /></div>
			<div>Height: <input type="text" id="video-height" /></div>
			<div><input type="button" id="video-query" value="display!"/></div>
		</div>
		<script type="text/javascript">
			//we make use of a simple single app object pattern
			var app = app || {};
			//init method to be called on window load
			app.init = function() {
				app.initElementsCache();
				//not a good practice
				app.cachedElements.button.onclick = app.vimeoExample.buttonClickHandler;
			};
			//caches html elements that may be queryied several times
			app.initElementsCache = function() {
				app.cachedElements = app.cachedElements || {};
				app.cachedElements.head = document.getElementsByTagName('head')[0];
				app.cachedElements.videoContainer = document.getElementById('video-exemple');
				app.cachedElements.infoContainer = document.getElementById('info-exemple');
				app.cachedElements.urlField = document.getElementById('video-url');
				app.cachedElements.widthField = document.getElementById('video-width');
				app.cachedElements.heightField = document.getElementById('video-height');
				app.cachedElements.button = document.getElementById('video-query');
			};
			//make a jsonp query is simple: dynamically load a script tag with the query as source
			//for this simple example, we won't try any error handling
			app.sendJsonpQuery = function(url){
				var script= document.createElement('script');
				var head = app.cachedElements.head;
				script.type= 'text/javascript';
				script.src= url;
				head.appendChild(script);
				head.removeChild(script);
				script = null;
			};
			//a small helper to change a js object into a query string and add the query string to an url
			//note that the js object must be flat (no nesting)
			//the function doesn't work as expected if the url contains a hash part.
			//the url should not contain params with the same name as any of the ones which are appended (they would be duplicated)
			app.addParamsToURL = function(url, params){
				var mainSeparator = url.indexOf('?') != -1 ? '&' : '?';
				var queryStringSeparator = '&';
				var kvpSeparator = '=';
				var kvps = [];
				for(p in params){
					var key = encodeURIComponent(p);
					var value = encodeURIComponent(params[p].toString());
					var kvp = [key, value];
					kvps.push(kvp.join(kvpSeparator));
				}
				var queryStringToAppend = kvps.join(queryStringSeparator);
				return url.concat(mainSeparator, queryStringToAppend);
			};
			//builds the full query url
			app.buildJsonpQuery = function(url, params, callbackName){
				if(params){
					url = app.addParamsToURL(url, params);
				}
				return app.addParamsToURL(url, {'callback':callbackName});
			};
			//builds the full query url and performs the query
			app.performJsonpQuery = function(url, params, callbackName){
				var query = app.buildJsonpQuery(url, params, callbackName);
				app.sendJsonpQuery(query);
			};

			app.vimeoExample = app.vimeoExample || {};
			app.vimeoExample.apiUrl = 'http://vimeo.com/api/oembed.json';
			//performs a jsonp call on app.vimeoExample.apiUrl
			//uses app.vimeoExample.callback as callback
			app.vimeoExample.makeVimeoCall = function(params){
				params = params || {};
				var defaults = {
					url:'',
					width: 300,
					height: 300,
					byline: false,
					portrait: false,
					title: false,
					autoplay: false,
					loop: false,
				};

				//use default params for each param which is not provided
				//if a param is provided but empty, it won't be overloaded by the default
				for(var p in defaults){
					if(undefined == params[p]){
						params[p] = defaults[p];
					}
				}
				if(params.url && app.vimeoExample.callback){
					app.performJsonpQuery(app.vimeoExample.apiUrl, params, 'app.vimeoExample.callback');
				}
			};
			//callback for vimeo call: video player and some data are injected into divs
			app.vimeoExample.callback = function(data){
				if(data){
					if(data.html){
						//small hack: html for player is send without protocol specification
						//we inject the http protocol, otherwise it will fail when testing locally
						data.html = data.html.replace('src="//', 'src="http://');
						app.cachedElements.videoContainer.innerHTML = data.html;
					}
					if(data.title && data.author_name){
						app.cachedElements.infoContainer.innerHTML = data.title + ' - ' + data.author_name;
					}
				}
			};
			//handler for click on the button
			//get values from the text inpput fields and performs the JSONP call
			app.vimeoExample.buttonClickHandler = function(){
				var params = {};
				params.url = app.cachedElements.urlField.value;
				params.width = app.cachedElements.widthField.value;
				params.height = app.cachedElements.heightField.value;
				app.vimeoExample.makeVimeoCall(params);
			};
			//calls init function on load
			window.onload = app.init();
		</script>
	</body>
</html>
	<!-- This code is an example made to illustrate a blog post about JSONP. It shouldn't be used in any production system.

	Copyright (C) 2014 Damien Lebreuilly

	Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

	The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

	-->
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Vimeo via JSONP example</title>
	</head>
	<body>
	<div id="video-exemple"></div>
	<div id="info-exemple"></div>
	<div>
	<div>URL: <input type="text" id="video-url" /></div>
	<div>Width: <input type="text" id="video-width" /></div>
	<div>Height: <input type="text" id="video-height" /></div>
	<div><input type="button" id="video-query" value="display!"/></div>
	</div>
	<script type="text/javascript">
	//we make use of a simple single app object pattern
	var app = app \|\| {};
	//init method to be called on window load
	app.init = function() {
	app.initElementsCache();
	//not a good practice
	app.cachedElements.button.onclick = app.vimeoExample.buttonClickHandler;
	};
	//caches html elements that may be queryied several times
	app.initElementsCache = function() {
	app.cachedElements = app.cachedElements \|\| {};
	app.cachedElements.head = document.getElementsByTagName('head')[0];
	app.cachedElements.videoContainer = document.getElementById('video-exemple');
	app.cachedElements.infoContainer = document.getElementById('info-exemple');
	app.cachedElements.urlField = document.getElementById('video-url');
	app.cachedElements.widthField = document.getElementById('video-width');
	app.cachedElements.heightField = document.getElementById('video-height');
	app.cachedElements.button = document.getElementById('video-query');
	};
	//make a jsonp query is simple: dynamically load a script tag with the query as source
	//for this simple example, we won't try any error handling
	app.sendJsonpQuery = function(url){
	var script= document.createElement('script');
	var head = app.cachedElements.head;
	script.type= 'text/javascript';
	script.src= url;
	head.appendChild(script);
	head.removeChild(script);
	script = null;
	};
	//a small helper to change a js object into a query string and add the query string to an url
	//note that the js object must be flat (no nesting)
	//the function doesn't work as expected if the url contains a hash part.
	//the url should not contain params with the same name as any of the ones which are appended (they would be duplicated)
	app.addParamsToURL = function(url, params){
	var mainSeparator = url.indexOf('?') != -1 ? '&' : '?';
	var queryStringSeparator = '&';
	var kvpSeparator = '=';
	var kvps = [];
	for(p in params){
	var key = encodeURIComponent(p);
	var value = encodeURIComponent(params[p].toString());
	var kvp = [key, value];
	kvps.push(kvp.join(kvpSeparator));
	}
	var queryStringToAppend = kvps.join(queryStringSeparator);
	return url.concat(mainSeparator, queryStringToAppend);
	};
	//builds the full query url
	app.buildJsonpQuery = function(url, params, callbackName){
	if(params){
	url = app.addParamsToURL(url, params);
	}
	return app.addParamsToURL(url, {'callback':callbackName});
	};
	//builds the full query url and performs the query
	app.performJsonpQuery = function(url, params, callbackName){
	var query = app.buildJsonpQuery(url, params, callbackName);
	app.sendJsonpQuery(query);
	};

	app.vimeoExample = app.vimeoExample \|\| {};
	app.vimeoExample.apiUrl = 'http://vimeo.com/api/oembed.json';
	//performs a jsonp call on app.vimeoExample.apiUrl
	//uses app.vimeoExample.callback as callback
	app.vimeoExample.makeVimeoCall = function(params){
	params = params \|\| {};
	var defaults = {
	url:'',
	width: 300,
	height: 300,
	byline: false,
	portrait: false,
	title: false,
	autoplay: false,
	loop: false,
	};

	//use default params for each param which is not provided
	//if a param is provided but empty, it won't be overloaded by the default
	for(var p in defaults){
	if(undefined == params[p]){
	params[p] = defaults[p];
	}
	}
	if(params.url && app.vimeoExample.callback){
	app.performJsonpQuery(app.vimeoExample.apiUrl, params, 'app.vimeoExample.callback');
	}
	};
	//callback for vimeo call: video player and some data are injected into divs
	app.vimeoExample.callback = function(data){
	if(data){
	if(data.html){
	//small hack: html for player is send without protocol specification
	//we inject the http protocol, otherwise it will fail when testing locally
	data.html = data.html.replace('src="//', 'src="http://');
	app.cachedElements.videoContainer.innerHTML = data.html;
	}
	if(data.title && data.author_name){
	app.cachedElements.infoContainer.innerHTML = data.title + ' - ' + data.author_name;
	}
	}
	};
	//handler for click on the button
	//get values from the text inpput fields and performs the JSONP call
	app.vimeoExample.buttonClickHandler = function(){
	var params = {};
	params.url = app.cachedElements.urlField.value;
	params.width = app.cachedElements.widthField.value;
	params.height = app.cachedElements.heightField.value;
	app.vimeoExample.makeVimeoCall(params);
	};
	//calls init function on load
	window.onload = app.init();
	</script>
	</body>
	</html>