embedded-media.html

<!--script src="../javascript-detect-element-resize/javascript-detect-element-resize.js"></script-->
<script src="../css-element-queries/src/ResizeSensor.js"></script>
<script src="../screenfull/dist/screenfull.min.js"></script>
<!-- script src="../ResizeSensor/ResizeSensorApi.js"></script -->


<dom-module id="embedded-media">
	<style>
	</style>
	size [[width]] [[height]]
	<template><content></content></template>
</dom-module>

<script>
	(function () {
		// since there's no magic way to talk to an iframe, the client-side way is to simply know which sites' embeds should not be scaled. Can be a domain name or a specific script
		var NOSCALING = ['www.facebook.com', 'platform.twitter.com'];
	
		function wontScale(url) {
			return NOSCALING.filter(function(knownUrl) { return new RegExp("^(https?:\/\/)?" + knownUrl).test(url) }).length;
		}
	
		Polymer({
			is : 'embedded-media',
			
			properties : {
				width : {
					value : 0,
					//observer : 'widthChanged',
					//notify : true
				},
				height : {
					value : 0,
					//observer : 'widthChanged'
					//notify : true
				}
			},

			created : function() { 
	
			},
			
			ready : function() {
			},
			
			attached : function() {	
				this.sizeFromContainer();
				ResizeSensor(Polymer.dom(this).parentNode, this.sizeFromContainer.bind(this));
				window.addEventListener('resize', this.sizeFromContainer.bind(this));
			},
			
			sizeFromContainer : function() {
				this.debounce('resizeMedia', this._sizeFromContainer, 50);
			},
			
			_sizeFromContainer : function(iframeLoaded) {
				var p = Polymer.dom(this).parentNode,
					content = Polymer.dom(this).firstChild,
					w, h, avw;

				if(!content || !content.tagName || !p || screenfull.isFullscreen) // screenfull.js polyfill is imported at the top of this file
					return;
				
				this.content = content;
				
				if(content.tagName == 'IFRAME' && content.src && !wontScale(content.src))
				{
					if(!this.ratio) {
						this.original = {};
						this.original.width = content.width;
						this.original.height = content.height;
						this.ratio = calculateRatio(this.original.width, this.original.height);
					}

					avw = this.availableWidth();

					w = avw;
					h = Math.round(w * this.ratio);
					
					console.log("ratio", this.ratio)
					console.log("w:", w, "ow:", this.original.width, "w/w", w/this.original.width)
					console.log("h:", h, "oh:", this.original.height, "h/h", h/this.original.height)

					
					content.style.width = (content.width = w) + "px";
					content.style.height = (content.height = h) + "px";					
					
					console.log(content.style.width, content.style.height);
					console.log(content.width, content.height);

					if(w != this.width || h != this.height) {
						this.set('width', w)
						this.set('height', h)

						content.src += ''; 	// there's no way for us to know the iframe content will reflow itself. 
											// could be specified per service (eg youtube works it out but idnes.cz doesn't)
					}
				}

			},
			
			widthChanged : function() {
				if(!this.resizedBefore)
					return this.resizedBefore = true;
				
				this.debounce('refresh', function() {
					var p, cl;
					p = Polymer.dom(this).parentNode;
					
					if(!p)
						return;

					p = Polymer.dom(p);
					cl = Polymer.dom(this).cloneNode(true);
					
					p.insertBefore(cl, this);
					Polymer.dom.flush();
					p.removeChild(this);
					Polymer.dom.flush();
				}, 100);
			},
			
			availableWidth : function() {
				var p, bcr, m;
				
				p = Polymer.dom(this).parentNode;
				if(!p)
					return;
				
				bcr = p.getBoundingClientRect();
				m = p.offsetWidth;
				
				do { 
					m = Math.min(p.offsetWidth, m);
					p = Polymer.dom(p).parentNode; 
				} while(p && p != document);
				return m;
			}

		});

		function calculateRatio(w, h){
			return Math.round((h * 100000) / (w)) / 100000;
		}

	})();
</script>