webshims-rails 1.10.9 → 1.10.10

data/vendor/assets/javascripts/webshims/shims/mediaelement-jaris.js

@@ -438,20 +438,84 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 		};
 	})();
 	
+	
+	var transformDimension = (function(){
+		var dimCache = {};
+		var getRealDims = function(data){
+			var ret, poster, img;
+			if(dimCache[data.currentSrc]){
+				ret = dimCache[data.currentSrc];
+			} else if(data.videoHeight && data.videoWidth){
+				dimCache[data.currentSrc] = {
+					width: data.videoWidth,
+					height: data.videoHeight
+				};
+				ret = dimCache[data.currentSrc];
+			} else if((poster = $.attr(data._elem, 'poster'))){
+				ret = dimCache[poster];
+				if(!ret){
+					img = document.createElement('img');
+					img.onload = function(){
+						dimCache[poster] = {
+							width: this.width,
+							height: this.height
+						};
+						
+						if(dimCache[poster].height && dimCache[poster].width){
+							setElementDimension(data, $.prop(data._elem, 'controls'));
+						} else {
+							delete dimCache[poster];
+						}
+					};
+					img.src = poster;
+					if(img.complete){
+						img.onload();
+					}
+				}
+			}
+			return ret || {width: 300, height: data._elemNodeName == 'video' ? 150 : 50};
+		};
+		return function(data){
+			var realDims, ratio;
+			var ret = data.elemDimensions;
+			
+			if(ret.width == 'auto' || ret.height == 'auto'){
+				ret = $.extend({}, data.elemDimensions);
+				realDims = getRealDims(data);
+				ratio = realDims.width / realDims.height;
+				
+				if(ret.width == 'auto' && ret.height == 'auto'){
+					ret = realDims;
+				} else if(ret.width == 'auto'){
+					data.shadowElem.css({height: ret.height});
+					ret.width = data.shadowElem.height() * ratio;
+				} else {
+					data.shadowElem.css({width: ret.width});
+					ret.height = data.shadowElem.width() / ratio;
+				}
+			}
+			return ret;
+		};
+	})();
 	var setElementDimension = function(data, hasControls){
-		var cAttr;
+		var dims;
 		var elem = data._elem;
 		var box = data.shadowElem;
-		
 		$(elem)[hasControls ? 'addClass' : 'removeClass']('webshims-controls');
-		if(data._elemNodeName == 'audio' && !hasControls){
-			box.css({width: 0, height: 0});
-		} else {
-			
-			box.css({
-				width: elem.style.width || ((cAttr = $(elem).attr('width')) && cAttr+'px') || $(elem).width(),
-				height: elem.style.height|| ((cAttr = $(elem).attr('height')) && cAttr+'px') || $(elem).height()
-			});
+
+		if(data.isActive == 'third'){
+			if(data._elemNodeName == 'audio' && !hasControls){
+				box.css({width: 0, height: 0});
+			} else {
+				data.elemDimensions = {
+					width: elem.style.width || $.attr(elem, 'width') || $(elem).width(),
+					height: elem.style.height || $.attr(elem, 'height') || $(elem).height()
+				};
+				dims = transformDimension(data);
+				dims.minWidth = elem.style.minWidth;
+				dims.minHeight = elem.style.minHeight;
+				box.css(dims);
+			}
 		}
 	};
 	
@@ -479,6 +543,27 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 	replaceVar = function(val){
 		return (val.replace) ? val.replace(regs.A, '%26').replace(regs.a, '%26').replace(regs.e, '%3D').replace(regs.q, '%3F') : val;
 	};
+	
+	if('matchMedia' in window){
+		var allowMediaSorting = false;
+		try {
+			allowMediaSorting = window.matchMedia('only all').matches;
+		} catch(er){}
+		if(allowMediaSorting){
+			mediaelement.sortMedia = function(src1, src2){
+				try {
+					src1 = !src1.media || matchMedia( src1.media ).matches;
+					src2 = !src2.media || matchMedia( src2.media ).matches;
+				} catch(er){
+					return 0;
+				}
+				return src1 == src2 ? 
+					0 :
+					src1 ? -1
+					: 1;
+			};
+		}
+	}
 
 	mediaelement.createSWF = function( elem, canPlaySrc, data ){
 		if(!hasFlash){
@@ -530,7 +615,9 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 			$(elem).data('attrs')
 		);
 		var setDimension = function(){
-			setElementDimension(data, $.prop(elem, 'controls'));
+			if(data.isActive == 'third'){
+				setElementDimension(data, $.prop(elem, 'controls'));
+			}
 		};
 		
 		var box;
@@ -596,7 +683,7 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 				}
 			}));
 			
-			setElementDimension(data, hasControls);
+			
 		
 			box.insertBefore(elem);
 			
@@ -612,17 +699,20 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 			
 			mediaelement.setActive(elem, 'third', data);
 			
+			setElementDimension(data, hasControls);
+			
 			$(elem)
-				.on({'updatemediaelementdimensions': setDimension})
-				.onWSOff('updateshadowdom', setDimension)
-				.on('remove', function(e){
-					if(!e.originalEvent && mediaelement.jarisEvent[data.id] && mediaelement.jarisEvent[data.id].elem == elem){
-						delete mediaelement.jarisEvent[data.id];
-						clearTimeout(localConnectionTimer);
-						clearTimeout(data.flashBlock);
+				.on({
+					'updatemediaelementdimensions loadedmetadata emptied': setDimension,
+					'remove': function(e){
+						if(!e.originalEvent && mediaelement.jarisEvent[data.id] && mediaelement.jarisEvent[data.id].elem == elem){
+							delete mediaelement.jarisEvent[data.id];
+							clearTimeout(localConnectionTimer);
+							clearTimeout(data.flashBlock);
+						}
 					}
-					box.remove();
 				})
+				.onWSOff('updateshadowdom', setDimension)
 			;
 		}
 		
@@ -928,6 +1018,8 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 			limitedTo: ['', 'auto', 'metadata', 'none']
 		});
 		
+		webshims.reflectProperties('source', ['type', 'media']);
+		
 		
 		['autoplay', 'controls'].forEach(function(name){
 			webshims.defineNodeNamesBooleanProperty(['audio', 'video'], name);
@@ -963,6 +1055,8 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 			}
 					
 		}, 'prop');
+	} else if(!('media' in document.createElement('source'))){
+		webshims.reflectProperties('source', ['media']);
 	}
 	
 });

data/vendor/assets/javascripts/webshims/shims/mediaelement-yt.js

@@ -84,16 +84,85 @@ var resetSwfProps = (function(){
 	};
 })();
 
-var setElementDimension = function(data){
-	var cAttr;
-	var elem = data._elem;
-	var box = data.shadowElem;
-	
-	box.css({
-		width: elem.style.width || ((cAttr = $(elem).attr('width')) && cAttr+'px') || $(elem).width(),
-		height: elem.style.height || ((cAttr = $(elem).attr('width')) && cAttr+'px') || $(elem).height()
-	});
-};
+
+var transformDimension = (function(){
+	var dimCache = {};
+	var getRealDims = function(data){
+		var ret, poster, img;
+		if(dimCache[data.currentSrc]){
+			ret = dimCache[data.currentSrc];
+		} else if(data.videoHeight && data.videoWidth){
+			dimCache[data.currentSrc] = {
+				width: data.videoWidth,
+				height: data.videoHeight
+			};
+			ret = dimCache[data.currentSrc];
+		} else if((poster = $.attr(data._elem, 'poster'))){
+			ret = dimCache[poster];
+			if(!ret){
+				img = document.createElement('img');
+				img.onload = function(){
+					dimCache[poster] = {
+						width: this.width,
+						height: this.height
+					};
+					
+					if(dimCache[poster].height && dimCache[poster].width){
+						setElementDimension(data);
+					} else {
+						delete dimCache[poster];
+					}
+				};
+				img.src = poster;
+				if(img.complete){
+					img.onload();
+				}
+			}
+		}
+		return ret || {width: 300, height: data._elemNodeName == 'video' ? 150 : 50};
+	};
+	return function(data){
+		var realDims, ratio;
+		var ret = data.elemDimensions;
+		
+		if(ret.width == 'auto' || ret.height == 'auto'){
+			ret = $.extend({}, data.elemDimensions);
+			realDims = getRealDims(data);
+			ratio = realDims.width / realDims.height;
+			
+			if(ret.width == 'auto' && ret.height == 'auto'){
+				ret = realDims;
+			} else if(ret.width == 'auto'){
+				data.shadowElem.css({height: ret.height});
+				ret.width = data.shadowElem.height() * ratio;
+			} else {
+				data.shadowElem.css({width: ret.width});
+				ret.height = data.shadowElem.width() / ratio;
+			}
+		}
+		return ret;
+	};
+})();
+
+	var setElementDimension = function(data){
+		var dims;
+		var elem = data._elem;
+		var box = data.shadowElem;
+		
+		if(data.isActive == 'third'){
+			if(data && data._ytAPI && data._ytAPI.getPlaybackQuality){
+				window.ytapi = data._ytAPI
+			}
+			data.elemDimensions = {
+				width: elem.style.width || $.attr(elem, 'width') || $(elem).width(),
+				height: elem.style.height || $.attr(elem, 'height') || $(elem).height()
+			};
+			dims = transformDimension(data);
+			dims.minWidth = elem.style.minWidth;
+			dims.minHeight = elem.style.minHeight;
+			box.css(dims);
+		}
+	};
 
 var getYtDataFromElem = function(elem){
 	try {
@@ -236,6 +305,29 @@ var handlePlayPauseState = function(state, data){
 	}
 };
 
+var qualityLevels = {
+	small: {
+		height: 240,
+		width: 320
+	},
+	medium: {
+		height: 360,
+		width: 640 //480
+	},
+	large: {
+		height: 480,
+		width: 853 // 640
+	},
+	hd720: {
+		height: 720,
+		width: 1280 // 960
+	},
+	hd1080: {
+		height: 1080,
+		width: 1920 // 1440
+	}
+};
+
 var addYtAPI = function(mediaElm, elemId, data, ytID){
 	ytAPI.done(function(){
 		var handleBuffered = function(){
@@ -326,6 +418,7 @@ var addYtAPI = function(mediaElm, elemId, data, ytID){
 					var callMeta;
 					if(!data._metadata){
 						var duration = e.target.getDuration();
+						var quality = e.target.getPlaybackQuality();
 						if(duration){
 							data._metadata = true;
 							data.duration = duration;
@@ -335,8 +428,15 @@ var addYtAPI = function(mediaElm, elemId, data, ytID){
 							if(data.networkState < 1){
 								data.networkState = 2;
 							}
+							
 							callMeta = true;
+							if(!qualityLevels[quality]){
+								quality = 'large';
+							}
+							data.videoHeight = qualityLevels[quality].height;
+							data.videoWidth = qualityLevels[quality].width;
 						}
+						
 					}
 					
 					if(callMeta){
@@ -375,6 +475,24 @@ var addYtAPI = function(mediaElm, elemId, data, ytID){
 	});
 };
 
+
+if('matchMedia' in window){
+	var allowMediaSorting = false;
+	try {
+		allowMediaSorting = window.matchMedia('only all').matches;
+	} catch(er){}
+	if(allowMediaSorting){
+		mediaelement.sortMedia = function(src1, src2){
+			src1 = !src1.media || matchMedia( src1.media ).matches;
+			src2 = !src2.media || matchMedia( src2.media ).matches;
+			return src1 == src2 ? 
+				0 :
+				src1 ? -1
+				: 1;
+		};
+	}
+}
+
 mediaelement.createSWF = function(mediaElem, src, data){
 	if(!data){
 		data = webshims.data(mediaElem, 'mediaelement');
@@ -440,21 +558,18 @@ mediaelement.createSWF = function(mediaElem, src, data){
 	
 	
 	setElementDimension(data);
-	box.insertBefore(mediaElem);
+	
 	
 	webshims.addShadowDom(mediaElem, box);
 	mediaelement.setActive(mediaElem, 'third', data);
 	addMediaToStopEvents(mediaElem);
 	
+	box.insertBefore(mediaElem);
+	
 	addYtAPI(mediaElem, elemId, data, ytID);
 	$(mediaElem)
-		.on('updatemediaelementdimensions', setDimension)
+		.on('updatemediaelementdimensions loadedmetadata emptied', setDimension)
 		.onWSOff('updateshadowdom', setDimension)
-		.on('remove', function(e){
-			if(!e.originalEvent){
-				box.remove();
-			}
-		})
 	;
 };
 

data/vendor/assets/javascripts/webshims/shims/range-ui.js

@@ -493,4 +493,4 @@
 			 webshims._polyfill(['es5']);
 		}
 	}
-})(jQuery);
+})(window.webshims ? webshims.$ : jQuery);

data/vendor/assets/javascripts/webshims/shims/styles/scss/shim.scss

@@ -699,11 +699,23 @@ input[type="color"] {
 	-webkit-transform: translate(0, -100%);
 	transform: translate(0, -100%);
 	transition: all 400ms ease-in-out;
+	
+	[data-vertical="bottom"] & {
+		-webkit-transform: translate(0, 100%);
+		transform: translate(0, 100%);
+		padding: 4px 0 11px;
+	}
+	
+	[data-vertical="middle"] & {
+		-webkit-transform: translate(0, 0) scale(0);
+		transform: translate(0, 0) scale(0);
+		padding: 4px 0;
+	}
 
 	.ws-popover.ws-po-visible & {
 		opacity: 1;
-		-webkit-transform: translate(0, 0);
-		transform: translate(0, 0);
+		-webkit-transform: translate(0, 0) scale(1);
+		transform: translate(0, 0) scale(1);
 	}
 }
 
@@ -727,6 +739,23 @@ input[type="color"] {
 	border-top: none;
 	zoom: 1;
 	font-size: 0;
+	
+	[data-horizontal="center"] & {
+		left: 50%;
+		margin-left: -5px;
+	}
+	
+	[data-horizontal="right"] & {
+		left: auto;
+		right: 20px;
+	}
+	
+	[data-vertical="bottom"] & {
+		top: auto;
+		bottom: 4px;
+		border-bottom: none;
+		border-top: 7px solid #ccc;
+	}
 
 	html & {
 		border-left-color: transparent;
@@ -747,7 +776,7 @@ input[type="color"] {
 			border-right-color: transparent !important;
 		}
 	}
-
+	[data-vertical="middle"] &,
 	* html & {
 		display: none;
 	}
@@ -764,6 +793,12 @@ input[type="color"] {
 		border-bottom: 7px solid #fefefe;
 		border-top: none;
 		z-index: 999999999;
+		
+		[data-vertical="bottom"] & {
+			top: -9px;
+			border-bottom: none;
+			border-top: 7px solid #fefefe;
+		}
 	}
 }