webshims-rails 0.4.7 → 1.10.3

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

@@ -2,9 +2,9 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 	"use strict";
 	
 	var mediaelement = webshims.mediaelement;
-	var swfobject = window.swfobject;
+	var swfmini = window.swfmini;
 	var hasNative = Modernizr.audio && Modernizr.video;
-	var hasFlash = swfobject.hasFlashPlayerVersion('9.0.115');
+	var hasFlash = swfmini.hasFlashPlayerVersion('9.0.115');
 	var loadedSwf = 0;
 	var getProps = {
 		paused: true,
@@ -366,11 +366,6 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 		var hidevents = hideEvtArray.map(function(evt){
 			return evt +'.webshimspolyfill';
 		}).join(' ');
-		var opposite = {
-			'html5': 'third',
-			'third': 'html5'
-		};
-		
 		
 		var hidePlayerEvents = function(event){
 			var data = webshims.data(event.target, 'mediaelement');
@@ -378,14 +373,8 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 			var isNativeHTML5 = ( event.originalEvent && event.originalEvent.type === event.type );
 			if( isNativeHTML5 == (data.activating == 'third') ){
 				event.stopImmediatePropagation();
-				if(stopEvents[event.type]){
-					if(data.isActive != data.activating){
-						$(event.target).pause();
-					} else {
-						data.isActive = opposite[data.isActive];
-						$(event.target).pause();
-						data.isActive = opposite[data.isActive];
-					}
+				if(stopEvents[event.type] && data.isActive != data.activating){
+					$(event.target).pause();
 				}
 			}
 		};
@@ -462,6 +451,31 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 		}
 	};
 	
+	var bufferSrc = (function(){
+		var preloads = {
+			'': 1,
+			'auto': 1
+		};
+		return function(elem){
+			var preload = $.attr(elem, 'preload');
+			if(preload == null || preload == 'none' || $.prop(elem, 'autoplay')){
+				return false;
+			}
+			preload =  $.prop(elem, 'preload');
+			return !!(preloads[preload] || (preload == 'metadata' && $(elem).is('.preload-in-doubt, video:not([poster])')));
+		};
+	})();
+	
+	var regs = {
+		A: /&/g,
+		a: /&/g,
+		e: /\=/g,
+		q: /\?/g
+	},
+	replaceVar = function(val){
+		return (val.replace) ? val.replace(regs.A, '%26').replace(regs.a, '%26').replace(regs.e, '%3D').replace(regs.q, '%3F') : val;
+	};
+	
 	mediaelement.createSWF = function( elem, canPlaySrc, data ){
 		if(!hasFlash){
 			setTimeout(function(){
@@ -475,17 +489,23 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 		} else {
 			loadedSwf++;
 		}
+		if(!data){
+			data = webshims.data(elem, 'mediaelement');
+		}
+		
+		if($.attr(elem, 'height') || $.attr(elem, 'width')){
+			webshims.warn("width or height content attributes used. Webshims only uses CSS (computed styles or inline styles) to detect size of a video/audio");
+		}
+		
 		var isRtmp = canPlaySrc.type == 'audio/rtmp' || canPlaySrc.type == 'video/rtmp';
 		var vars = $.extend({}, options.vars, {
-				poster: $.attr(elem, 'poster') && $.prop(elem, 'poster') || '',
-				source: canPlaySrc.streamId || canPlaySrc.srcProp,
-				server: canPlaySrc.server || ''
+				poster: replaceVar($.attr(elem, 'poster') && $.prop(elem, 'poster') || ''),
+				source: replaceVar(canPlaySrc.streamId || canPlaySrc.srcProp),
+				server: replaceVar(canPlaySrc.server || '')
 		});
 		var elemVars = $(elem).data('vars') || {};
 		
-		if(!data){
-			data = webshims.data(elem, 'mediaelement');
-		}
+		
 		
 		var hasControls = $.prop(elem, 'controls');
 		var elemId = 'jarisplayer-'+ webshims.getID(elem);
@@ -505,6 +525,10 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 			},
 			$(elem).data('attrs')
 		);
+		var setDimension = function(){
+			setElementDimension(data, $.prop(elem, 'controls'));
+		};
+		
 		var box;
 		
 		if(data && data.swfCreated){
@@ -519,10 +543,6 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 			box = data.shadowElem;
 			resetSwfProps(data);
 		} else {
-			var setDimensions = function(){
-				setElementDimension(data, $.prop(elem, 'controls'));
-			};
-			
 			box = $('<div class="polyfill-'+ (elemNodeName) +' polyfill-mediaelement" id="wrapper-'+ elemId +'"><div id="'+ elemId +'"></div>')
 				.css({
 					position: 'relative',
@@ -582,19 +602,25 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 			webshims.addShadowDom(elem, box);
 			addMediaToStopEvents(elem);
 			mediaelement.setActive(elem, 'third', data);
-			$(document).on('updateshadowdom', setDimensions);
-			$(elem).on('updatemediaelementdimensions', setDimensions);
+			$(elem).on('updatemediaelementdimensions', setDimension);
+			$(document).on('updateshadowdom', setDimension);
 		}
 		
 		if(!mediaelement.jarisEvent[data.id]){
 			mediaelement.jarisEvent[data.id] = function(jaris){
 				if(jaris.type == 'ready'){
+					var onReady = function(){
+						if(data.api){
+							if(bufferSrc(elem)){
+								data.api.api_preload();
+							}
+							onEvent.ready(jaris, data);
+						}
+					};
 					if(data.api){
-						onEvent[jaris.type](jaris, data);
+						onReady();
 					} else {
-						setTimeout(function(){
-							onEvent[jaris.type](jaris, data);
-						}, 9);
+						setTimeout(onReady, 9);
 					}
 				} else {
 					data.currentTime = jaris.position;
@@ -639,7 +665,8 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 		}
 		options.changeSWF(vars, elem, canPlaySrc, data, 'embed');
 		clearTimeout(data.flashBlock);
-		swfobject.embedSWF(playerSwfPath, elemId, "100%", "100%", "9.0.0", false, vars, params, attrs, function(swfData){
+		
+		swfmini.embedSWF(playerSwfPath, elemId, "100%", "100%", "9.0.115", false, vars, params, attrs, function(swfData){
 			
 			if(swfData.success){
 				
@@ -807,15 +834,22 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 			$(this)[boolProp ? 'addClass' : 'removeClass']('webshims-controls');
 			
 			if(data){
-				webshims.warn("changing controls currently not fully supported with jaris player");
 				if(nodeName == 'audio'){
 					setElementDimension(data, boolProp);
 				}
-				
 				queueSwfMethod(this, 'api_controls', [boolProp], data);
 			}
 		});
 		
+		webshims.onNodeNamesPropertyModify(nodeName, 'preload', function(val){
+			var data = getSwfDataFromElem(this);
+			
+			
+			if(data && bufferSrc(this)){
+				queueSwfMethod(this, 'api_preload', [], data);
+			}
+		});
+		
 		mediaSup = webshims.defineNodeNameProperties(nodeName, descs, 'prop');
 	});
 	
@@ -825,6 +859,7 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 			object: 1,
 			OBJECT: 1
 		};
+		
 		$.cleanData = function(elems){
 			var i, len, prop;
 			if(elems && (len = elems.length) && loadedSwf){
@@ -837,13 +872,6 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 								elems[i].api_pause();
 							} catch(er){}
 						}
-						try {
-							for (prop in elems[i]) {
-								if (typeof elems[i][prop] == "function") {
-									elems[i][prop] = null;
-								}
-							}
-						} catch(er){}
 					}
 				}
 				
@@ -862,6 +890,13 @@ jQuery.webshims.register('mediaelement-jaris', function($, webshims, window, doc
 			});
 		});
 		
+		webshims.defineNodeNamesProperty(['audio', 'video'], 'preload', {
+			reflect: true,
+			propType: 'enumarated',
+			defaultValue: '',
+			limitedTo: ['', 'auto', 'metadata', 'none']
+		});
+		
 		
 		['autoplay', 'controls'].forEach(function(name){
 			webshims.defineNodeNamesBooleanProperty(['audio', 'video'], name);

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

@@ -158,10 +158,6 @@ var addMediaToStopEvents = $.noop;
 	var hidevents = hideEvtArray.map(function(evt){
 		return evt +'.webshimspolyfill';
 	}).join(' ');
-	var opposite = {
-		'html5': 'third',
-		'third': 'html5'
-	};
 	
 	var hidePlayerEvents = function(event){
 		var data = webshims.data(event.target, 'mediaelement');
@@ -169,14 +165,8 @@ var addMediaToStopEvents = $.noop;
 		var isNativeHTML5 = ( event.originalEvent && event.originalEvent.type === event.type );
 		if( isNativeHTML5 == (data.activating == 'third') ){
 			event.stopImmediatePropagation();
-			if(stopEvents[event.type]){
-				if(data.isActive != data.activating){
-					$(event.target).pause();
-				} else {
-					data.isActive = opposite[data.isActive];
-					$(event.target).pause();
-					data.isActive = opposite[data.isActive];
-				}
+			if(stopEvents[event.type] && data.isActive != data.activating){
+				$(event.target).pause();
 			}
 		}
 	};
@@ -310,6 +300,8 @@ var addYtAPI = function(mediaElm, elemId, data, ytID){
 		data._ytAPI = new YT.Player(elemId, {
 			height: '100%',
 			width: '100%',
+			allowfullscreen: 'allowfullscreen',
+			webkitallowfullscreen: 'allowfullscreen',
 			playerVars: {
 				allowfullscreen: true,
 				fs: 1,
@@ -406,10 +398,10 @@ mediaelement.createSWF = function(mediaElem, src, data){
 			overflow: 'hidden'
 		})
 	;
-	var setDimensions = function(){
+	var setDimension = function(){
 		setElementDimension(data);
 	};
-			
+	
 	
 	
 	data = webshims.data(mediaElem, 'mediaelement', webshims.objectCreate(playerStateObj, {
@@ -453,8 +445,8 @@ mediaelement.createSWF = function(mediaElem, src, data){
 	addMediaToStopEvents(mediaElem);
 	
 	addYtAPI(mediaElem, elemId, data, ytID);
-	$(document).on('updateshadowdom', setDimensions);
-	$(mediaElem).on('updatemediaelementdimensions', setDimensions);
+	$(mediaElem).on('updatemediaelementdimensions', setDimension);
+	$(document).on('updateshadowdom', setDimension);
 };
 
 (function(){

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

@@ -0,0 +1,388 @@
+(function($){
+	
+	var id = 0;
+	var isNumber = function(string){
+		return (typeof string == 'number' || (string && string == string * 1));
+	};
+	var retDefault = function(val, def){
+		if(!(typeof val == 'number' || (val && val == val * 1))){
+			return def;
+		}
+		return val * 1;
+	};
+	var createOpts = ['step', 'min', 'max', 'readonly', 'title', 'disabled', 'tabindex'];
+	var rangeProto = {
+		_create: function(){
+			var i;
+			
+			
+			this.element.addClass('ws-range').attr({role: 'slider'}).append('<span class="ws-range-min" /><span class="ws-range-rail"><span class="ws-range-thumb" /></span>');
+			this.trail = $('.ws-range-rail', this.element);
+			this.range = $('.ws-range-min', this.element);
+			this.thumb = $('.ws-range-thumb', this.trail);
+			
+			this.updateMetrics();
+			
+			this.orig = this.options.orig;
+			
+			for(i = 0; i < createOpts.length; i++){
+				this[createOpts[i]](this.options[createOpts[i]]);
+			}
+			this.value = this._value;
+			this.value(this.options.value);
+			this.initDataList();
+			this.element.data('rangeUi', this);
+			this.addBindings();
+			this._init = true;
+		},
+		value: $.noop,
+		_value: function(val, _noNormalize, animate){
+			var left, posDif;
+			var o = this.options;
+			var oVal = val;
+			var thumbStyle = {};
+			var rangeStyle = {};
+			if(!_noNormalize && parseFloat(val, 10) != val){
+				val = o.min + ((o.max - o.min) / 2);
+			}
+			
+			if(!_noNormalize){
+				val = this.normalizeVal(val);
+			}
+			left =  100 * ((val - o.min) / (o.max - o.min));
+			
+			this.options.value = val;
+			this.thumb.stop();
+			this.range.stop();
+			
+			rangeStyle[this.dirs.width] = left+'%';
+			if(this.vertical){
+				left = Math.abs(left - 100);
+			}
+			thumbStyle[this.dirs.left] = left+'%';
+			
+			
+			if(!animate){
+				this.thumb.css(thumbStyle);
+				this.range.css(rangeStyle);
+			} else {
+				if(typeof animate != 'object'){
+					animate = {};
+				} else {
+					animate = $.extend({}, animate);
+				}
+				if(!animate.duration){
+					posDif = Math.abs(left - parseInt(this.thumb[0].style[this.dirs.left] || 50, 10));
+					animate.duration = Math.max(Math.min(999, posDif * 5), 99);
+				}
+				this.thumb.animate(thumbStyle, animate);
+				this.range.animate(rangeStyle, animate);
+			}
+			if(this.orig && (oVal != val || (!this._init && this.orig.value != val)) ){
+				this.options._change(val);
+			}
+			this.element.attr({
+				'aria-valuenow': this.options.value,
+				'aria-valuetext': this.options.textValue ? this.options.textValue(this.options.value) : this.options.options[this.options.value] || this.options.value
+			});
+		},
+		initDataList: function(){
+			if(this.orig){
+				var listTimer;
+				var that = this;
+				var updateList = function(){
+					$(that.orig)
+						.jProp('list')
+						.off('updateDatalist', updateList)
+						.on('updateDatalist', updateList)
+					;
+					clearTimeout(listTimer);
+					listTimer = setTimeout(function(){
+						if(that.list){
+							that.list();
+						}
+					}, 9);
+					
+				};
+				
+				$(this.orig).on('listdatalistchange', updateList);
+				this.list();
+			}
+		},
+		list: function(opts){
+			var o = this.options;
+			var min = o.min;
+			var max = o.max;
+			var trail = this.trail;
+			var that = this;
+			
+			this.element.attr({'aria-valuetext': o.options[o.value] || o.value});
+			$('.ws-range-ticks', trail).remove();
+			
+			
+			$(this.orig).jProp('list').find('option').each(function(){
+				o.options[$.prop(this, 'value')] = $.prop(this, 'label');
+			});
+			
+			$.each(o.options, function(val, label){
+				if(!isNumber(val) || val < min || val > max){return;}
+				var left = 100 * ((val - min) / (max - min));
+				var title = o.showLabels ? ' title="'+ label +'"' : '';
+				if(that.vertical){
+					left = Math.abs(left - 100);
+				}
+				trail.append('<span class="ws-range-ticks"'+ title +' style="'+(that.dirs.left)+': '+left+'%;" />');
+			});
+		},
+		readonly: function(val){
+			val = !!val;
+			this.options.readonly = val;
+			this.element.attr('aria-readonly', ''+val);
+		},
+		disabled: function(val){
+			val = !!val;
+			this.options.disabled = val;
+			if(val){
+				this.element.attr({tabindex: -1, 'aria-disabled': 'true'});
+			} else {
+				this.element.attr({tabindex: this.options.tabindex, 'aria-disabled': 'false'});
+			}
+		},
+		tabindex: function(val){
+			this.options.tabindex = val;
+			if(!this.options.disabled){
+				this.element.attr({tabindex: val});
+			}
+		},
+		title: function(val){
+			this.element.prop('title', val);
+		},
+		min: function(val){
+			this.options.min = retDefault(val, 0);
+			this.value(this.options.value, true);
+		},
+		max: function(val){
+			this.options.max = retDefault(val, 100);
+			this.value(this.options.value, true);
+		},
+		step: function(val){
+			this.options.step = val == 'any' ? 'any' : retDefault(val, 1);
+			this.value(this.options.value);
+		},
+		
+		normalizeVal: function(val){
+			var valModStep, alignValue, step;
+			var o = this.options;
+			
+			if(val <= o.min){
+				val = o.min;
+			} else if(val >= o.max) {
+				val = o.max;
+			} else if(o.step != 'any'){
+				step = o.step;
+				valModStep = (val - o.min) % step;
+				alignValue = val - valModStep;
+				
+				if ( Math.abs(valModStep) * 2 >= step ) {
+					alignValue += ( valModStep > 0 ) ? step : ( -step );
+				}
+				val = alignValue.toFixed(5) * 1;
+			}
+			return val;
+		},
+		doStep: function(factor, animate){
+			var step = retDefault(this.options.step, 1);
+			if(this.options.step == 'any'){
+				step = Math.min(step, (this.options.max - this.options.min) / 10);
+			}
+			this.value( this.options.value + (step * factor), false, animate );
+			
+		},
+		 
+		getStepedValueFromPos: function(pos){
+			var val, valModStep, alignValue, step;
+			
+			if(pos <= 0){
+				val = this.options[this.dirs.min];
+			} else if(pos > 100) {
+				val = this.options[this.dirs.max];
+			} else {
+				if(this.vertical){
+					pos = Math.abs(pos - 100);
+				}
+				val = ((this.options.max - this.options.min) * (pos / 100)) + this.options.min;
+				step = this.options.step;
+				if(step != 'any'){
+					valModStep = (val - this.options.min) % step;
+					alignValue = val - valModStep;
+					
+					if ( Math.abs(valModStep) * 2 >= step ) {
+						alignValue += ( valModStep > 0 ) ? step : ( -step );
+					}
+					val = ((alignValue).toFixed(5)) * 1;
+					
+				}
+			}
+			
+			return val;
+		},
+		addBindings: function(){
+			var leftOffset, widgetUnits, hasFocus;
+			var that = this;
+			var o = this.options;
+			
+			var eventTimer = (function(){
+				var events = {};
+				return {
+					init: function(name, curVal, fn){
+						if(!events[name]){
+							events[name] = {fn: fn};
+							if(that.orig){
+								$(that.orig).on(name, function(){
+									events[name].val = $.prop(that.orig, 'value');
+								});
+							}
+							
+						}
+						events[name].val = curVal;
+					},
+					call: function(name, val){
+						if(events[name].val != val){
+							clearTimeout(events[name].timer);
+							events[name].val = val;
+							events[name].timer = setTimeout(function(){
+								events[name].fn(val, that);
+							}, 0);
+						}
+					}
+				};
+			})();
+			
+			var setValueFromPos = function(e, animate){
+				
+				var val = that.getStepedValueFromPos((e[that.dirs.mouse] - leftOffset) * widgetUnits);
+				if(val != o.value){
+					that.value(val, false, animate);
+					eventTimer.call('input', val);
+				}
+			};
+			
+			var remove = function(e){
+				if(e && e.type == 'mouseup'){
+					eventTimer.call('input', o.value);
+					eventTimer.call('change', o.value);
+				}
+				that.element.removeClass('ws-active');
+				$(document).off('mousemove', setValueFromPos).off('mouseup', remove);
+			};
+			var add = function(e){
+				e.preventDefault();
+				$(document).off('mousemove', setValueFromPos).off('mouseup', remove);
+				if(!o.readonly && !o.disabled){
+					leftOffset = that.element.focus().addClass('ws-active').offset();
+					widgetUnits = that.element[that.dirs.width]();
+					if(!widgetUnits || !leftOffset){return;}
+					leftOffset = leftOffset[that.dirs.pos];
+					widgetUnits = 100 / (widgetUnits  - ((that.thumb[that.dirs.outerWidth]() || 2) / 2));
+					setValueFromPos(e, o.animate);
+					$(document)
+						.on({
+							mouseup: remove,
+							mousemove: setValueFromPos
+						})
+					;
+					e.stopPropagation();
+				}
+			};
+			var elementEvts = {
+				mousedown: add,
+				focus: function(e){
+					if(!o.disabled){
+						eventTimer.init('input', o.value);
+						eventTimer.init('change', o.value);
+						that.element.addClass('ws-focus');
+					}
+					hasFocus = true;
+				},
+				blur: function(e){
+					that.element.removeClass('ws-focus ws-active');
+					hasFocus = false;
+					eventTimer.init('input', o.value);
+					eventTimer.call('change', o.value);
+				},
+				keyup: function(){
+					that.element.removeClass('ws-active');
+					eventTimer.call('input', o.value);
+					eventTimer.call('change', o.value);
+				},
+				
+				keydown: function(e){
+					var step = true;
+					var code = e.keyCode;
+					if(!o.readonly && !o.disabled){
+						if (code == 39 || code == 38) {
+							that.doStep(1);
+						} else if (code == 37 || code == 40) {
+							that.doStep(-1);
+						} else if (code == 33) {
+							that.doStep(10, o.animate);
+						} else if (code == 34) {
+							that.doStep(-10, o.animate);
+						} else if (code == 36) {
+							that.value(that.options.max, false, o.animate);
+						} else if (code == 35) {
+							that.value(that.options.min, false, o.animate);
+						} else {
+							step = false;
+						}
+						if (step) {
+							that.element.addClass('ws-active');
+							eventTimer.call('input', o.value);
+							e.preventDefault();
+						}
+					}
+				}
+			};
+			
+			eventTimer.init('input', o.value, this.options.input);
+			eventTimer.init('change', o.value, this.options.change);
+			
+			elementEvts[$.fn.mwheelIntent ? 'mwheelIntent' : 'mousewheel'] = function(e, delta){
+				if(delta && hasFocus && !o.readonly && !o.disabled){
+					that.doStep(delta);
+					e.preventDefault();
+					eventTimer.call('input', o.value);
+				}
+			};
+			this.element.on(elementEvts);
+			this.thumb.on({
+				mousedown: add
+			});
+		},
+		updateMetrics: function(){
+			var width = this.element.innerWidth();
+			this.vertical = (width && this.element.innerHeight() - width  > 10);
+			
+			this.dirs = this.vertical ? 
+				{mouse: 'pageY', pos: 'top', min: 'max', max: 'min', left: 'top', width: 'height', outerWidth: 'outerHeight'} :
+				{mouse: 'pageX', pos: 'left', min: 'min', max: 'max', left: 'left', width: 'width', outerWidth: 'outerWidth'}
+			;
+			this.element
+				[this.vertical ? 'addClass' : 'removeClass']('vertical-range')
+				[this.vertical ? 'addClass' : 'removeClass']('horizontal-range')
+			;
+		}
+	};
+	
+	$.fn.rangeUI = function(opts){
+		opts = $.extend({readonly: false, disabled: false, tabindex: 0, min: 0, step: 1, max: 100, value: 50, input: $.noop, change: $.noop, _change: $.noop, showLabels: true, options: {}}, opts);
+		return this.each(function(){
+			$.webshims.objectCreate(rangeProto, {
+				element: {
+					value: $(this)
+				}
+			}, opts);
+		});
+	};
+	jQuery.webshims.isReady('range-ui', true);
+})(jQuery);