webshims-rails 1.14.1 → 1.14.3

data/vendor/assets/javascripts/webshims/shims/jme/mediacontrols-lazy.js

@@ -24,7 +24,7 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 				var className = (track.kind == 'caption') ? 'caption-type' : 'subtitle-type';
 				var lang = track.language;
 				lang = (lang) ? ' <span class="track-lang">'+ lang +'</span>' : '';
-				return '<li class="'+ className +'" role="presentation"><button role="menuitemcheckbox">'+ track.label + lang +'</button></li>';
+				return '<li class="'+ className +'" role="presentation"><button role="menuitemcheckbox" type="button">'+ track.label + lang +'</button></li>';
 			})
 			;
 		return '<div><ul>' + items.join('') +'</ul></div>';
@@ -49,7 +49,7 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 					}
 
 					touch = changedTouches[0];
-					if(Math.abs(touchData.x - touch.pageX) > 40 || Math.abs(touchData.y - touch.pageY) > 40 || Date.now() - touchData.now > 600){
+					if(Math.abs(touchData.x - touch.pageX) > 40 || Math.abs(touchData.y - touch.pageY) > 40 || Date.now() - touchData.now > 300){
 						return;
 					}
 					e.preventDefault();
@@ -207,6 +207,49 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 
 			}
 		},
+		'jme-media-overlay': {
+			_create: function(control, media, base){
+				var stopFocus, focusTimer, markedFocus;
+				var specialUnStop = {
+					touchend: 1,
+					click: 1
+				};
+				var unStop = function(){
+					stopFocus = false;
+				};
+				control.wsTouchClick(function(e){
+					if(media.jmeProp('isPlaying') && base.attr('data-useractivity') != 'false'){
+						media.pause();
+					} else {
+						media.play();
+					}
+				});
+
+				base.on({
+					'touchstart touchend mousedown click mouseover': function(e){
+						var delay = 500;
+						stopFocus = true;
+						clearTimeout(focusTimer);
+						if(markedFocus && specialUnStop[e.type] && e.target.className.indexOf('ws-a11y-focus') != -1){
+							delay = 0;
+						}
+						focusTimer = setTimeout(unStop, delay);
+					},
+					focusin: function(e){
+						if(!stopFocus && e.originalEvent){
+							markedFocus = true;
+							$(e.target).addClass('ws-a11y-focus');
+						}
+					},
+					focusout: function(e){
+						if(markedFocus){
+							markedFocus = false;
+							$(e.target).removeClass('ws-a11y-focus');
+						}
+					}
+				});
+			}
+		},
 		'volume-slider': {
 			_create: function(control, media){
 
@@ -256,7 +299,7 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 				var module = this;
 
 				var createFn = function(){
-					var time, durationChange, api, timeShow, wasPaused;
+					var time, durationChange, api, timeShow, wasPaused, hideTime;
 					var hasDuration = 'has-duration';
 					var duration = media.prop('duration');
 
@@ -312,7 +355,15 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 							base.addClass(module[pseudoClasses].no);
 						}
 					};
-
+					hideTime = function(){
+						setTimeout(function(){
+							timeShow.removeClass('show-time-select');
+							control.off('.jmetimeselect');
+							if(document.removeEventListener){
+								document.removeEventListener('touchend', hideTime, true);
+							}
+						});
+					};
 					api = control
 						.rangeUI({
 							min: 0,
@@ -332,8 +383,9 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 
 					control
 						.on({
-							'mouseenter': function(e){
-								if(hasDuration){
+							'mouseenter touchstart': function(e){
+								if(hasDuration && e.type != 'touchstart' || (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches.length == 1)){
+
 									var widgetLeft = (control.offset() || {left: 0}).left;
 									var widgetWidth = control.innerWidth();
 									var posLeft = function(x){
@@ -344,24 +396,24 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 										;
 									};
 
+									$.fn.rangeUI.normalizeTouch(e);
 									setTimeout(function(){
 										posLeft(e.pageX);
 										timeShow.addClass('show-time-select');
 									});
+									if(document.addEventListener){
+										document.addEventListener('touchend', hideTime, true);
+									}
 									control
 										.off('.jmetimeselect')
-										.on('mousemove.jmetimeselect', function(e){
+										.on('mousemove.jmetimeselect touchmove.jmetimeselect', function(e){
+											$.fn.rangeUI.normalizeTouch(e);
 											posLeft(e.pageX);
 										})
 									;
 								}
 							},
-							mouseleave: function(){
-								setTimeout(function(){
-									timeShow.removeClass('show-time-select');
-									control.off('.jmetimeselect');
-								});
-							}
+							'mouseleave touchend': hideTime
 						})
 					;
 
@@ -1086,7 +1138,7 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 				if(!data.bound){
 					jElm
 						.on('mouseleave.jmeuseractivity', setInactive)
-						.on('mousemove.jmeuseractivity focusin.jmeuseractivity mouseenter.jmeuseractivity keydown.jmeuseractivity keyup.jmeuseractivity mousedown.jmeuseractivity', setActive)
+						.on('touchend.jmeuseractivity setuseractive.jmeuseractivity mousemove.jmeuseractivity focusin.jmeuseractivity mouseenter.jmeuseractivity keydown.jmeuseractivity keyup.jmeuseractivity mousedown.jmeuseractivity', setActive)
 					;
 					data.bound = true;
 				}

data/vendor/assets/javascripts/webshims/shims/jpicker/jpicker.css

@@ -1,8 +1,5 @@
-.jPicker,
-.jPicker *  {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+.jPicker {
+  box-sizing: content-box;
 }
 .jPicker label {
     display: inline;
@@ -18,19 +15,20 @@
   background-position: 2px 2px;
   display: block;
   height: 100%;
-  left: 0px;
+  left: 0;
   position: absolute;
-  top: 0px;
+  top: 0;
   width: 100%;
+  box-sizing: border-box;
 }
 .jPicker .Icon span.Image {
   background-repeat: no-repeat;
   cursor: pointer;
   display: block;
   height: 100%;
-  left: 0px;
+  left: 0;
   position: absolute;
-  top: 0px;
+  top: 0;
   width: 100%;
 }
 .jPicker.Container {
@@ -40,7 +38,7 @@
 table.jPicker {
   font-family: Arial, Helvetica, Sans-Serif;
   font-size: 12px !important;
-  margin: 0px;
+  margin: 0;
   padding: 0;
   width: 545px;
   z-index: 20;
@@ -55,7 +53,8 @@ table.jPicker {
   border-width: 1px;
   cursor: move;
   height: 12px;
-  padding: 0px;
+  padding: 0;
+  box-sizing: border-box;
 }
 .jPicker .Title {
   display: none;
@@ -66,15 +65,17 @@ table.jPicker {
   border-right: 2px solid #fff;
   border-top: 2px solid #9a9a9a;
   cursor: crosshair;
-  height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
-  margin: 0px 10px 10px 10px;
+  height: 260px;
+  margin: 0 10px 10px 10px;
   overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */
-  padding: 0px;
+  padding: 0;
   position: relative; /* make this element an absolute positioning container */
-  width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
+  width: 260px;
+  box-sizing: border-box;
 }
 
 .jPicker div.Bar {
+  box-sizing: border-box;
   border-bottom: 2px solid #fff;
   border-left: 2px solid #9a9a9a;
   border-right: 2px solid #fff;
@@ -83,7 +84,7 @@ table.jPicker {
   height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
   margin: -11px 10px 0 5px;
   overflow: hidden;
-  padding: 0px;
+  padding: 0;
   position: relative;
   width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
 }
@@ -92,9 +93,9 @@ table.jPicker {
   background-color: transparent;
   background-image: none;
   display: block;
-  left: 0px;
+  left: 0;
   position: absolute;
-  top: 0px;
+  top: 0;
 }
 .jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3 {
   height: 2596px;
@@ -126,70 +127,74 @@ table.jPicker {
 }
 .jPicker .Bar .Arrow {
   display: block;
-  left: 0px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
+  left: 0; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
   position: absolute;
 }
 .jPicker .Preview {
   font-size: 9px;
-  padding: 5px 0px 0px 0px;
+  padding: 5px 0 0 0;
   text-align: center;
 }
-.jPicker .Preview div {
+.jPicker .Preview > div {
+  box-sizing: border-box;
   border: 2px inset #eee;
   height: 62px;
-  margin: 0px auto;
-  padding: 0px;
+  margin: 0 auto;
+  padding: 0;
   width: 62px;
 }
-.jPicker .Preview div span {
+.jPicker .Preview > div > span {
+  box-sizing: border-box;
   border: 1px solid #000;
   display: block;
   height: 30px;
-  margin: 0px auto;
-  padding: 0px;
+  margin: 0 auto;
+  padding: 0;
   width: 60px;
 }
 .jPicker .Preview .Active {
-  border-bottom-width: 0px;
+  border-bottom-width: 0;
 }
 .jPicker .Preview .Current {
-  border-top-width: 0px;
+  border-top-width: 0;
   cursor: pointer;
 }
 .jPicker input {
   font-size: 13px;
 }
 .jPicker .Button {
+  box-sizing: border-box;
   text-align: center;
-  padding: 0px 4px;
+  padding: 0 4px;
   width: 115px;
 }
 .jPicker .Button input {
-  padding: 2px 0px;
+  box-sizing: border-box;
+  padding: 2px 0;
   width: 100px;
 }
 .jPicker .Button .Ok {
-  margin: 12px 0px 5px 0px;
+  margin: 12px 0 5px 0;
 }
 .jPicker td {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 .jPicker td.Radio {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   width: 32px;
 }
 .jPicker td.Radio input {
-  margin: 0px 5px 0px 0px;
-  padding: 0px;
+  margin: 0 5px 0 0;
+  padding: 0;
   display: inline-block;
 }
 .jPicker td.Text {
   font-size: 12px !important;
   height: 22px;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   text-align: left;
   width: 70px;
 }
@@ -197,10 +202,11 @@ table.jPicker {
   width: 100px;
 }
 .jPicker td.Text input {
+  box-sizing: border-box;
   background-color: #fff;
   border: 1px inset #aaa;
   height: 19px;
-  margin: 0px 0px 0px 5px;
+  margin: 0 0 0 5px;
   text-align: left;
   width: 30px;
 }
@@ -231,24 +237,25 @@ table.jPicker {
   overflow: hidden;
 }
 .jPicker .Grid span.QuickColor {
+  box-sizing: border-box;
   border: 1px inset #aaa;
   cursor: pointer;
   display: inline-block;
   height: 15px;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   width: 17px;
   float: left;
 }
 
-@media all 
+@media all
 {
-	#jPicker { margin: 0px 8px; text-align: left; }
-	#jPicker ul { font-size: 15px; margin: 0px 0px 0px 15px; padding: 0px; }
-	#jPicker ul li { list-style: disc; padding: 2px 0px; }
+	#jPicker { margin: 0 8px; text-align: left; }
+	#jPicker ul { font-size: 15px; margin: 0 0 0 15px; padding: 0; }
+	#jPicker ul li { list-style: disc; padding: 2px 0; }
 	#jPicker ul li ul { margin-bottom: 10px; }
 	#jPicker ul li ul li { list-style: circle; }
-	#jPicker p { font-size: 13px; padding: 0px 10px; }
+	#jPicker p { font-size: 13px; padding: 0 10px; }
 	#jPicker hr { clear: both; }
 	#jPicker h2.jPicker { font-size: 16px; padding: 20px 10px; }
 	#jPicker code { color: #8bd; font-size: 14px; font-weight: bold; }
@@ -256,5 +263,5 @@ table.jPicker {
 	#jPicker span { font-size: 13px; text-align: center; }
 	#jPicker a { color: #ff8050; }
 	#jPicker input { font-size: 13px; padding: 2px 5px; }
-	#jPicker h2 { font-size: 16px; margin: 10px 0px; }
+	#jPicker h2 { font-size: 16px; margin: 10px 0; }
 }

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

@@ -15,7 +15,7 @@
 
 	var wsCfg = webshims.cfg;
 	var options = wsCfg.mediaelement;
-	var hasSwf;
+	var isIE = navigator.userAgent.indexOf('MSIE') != -1;
 	if(!options){
 		webshims.error("mediaelement wasn't implemented but loaded");
 		return;
@@ -30,7 +30,7 @@
 
 		webshims.capturingEvents(['play', 'playing', 'waiting', 'paused', 'ended', 'durationchange', 'loadedmetadata', 'canplay', 'volumechange']);
 		
-		if( !Modernizr.videoBuffered || !supportsLoop || (!Modernizr.mediaDefaultMuted && navigator.userAgent.indexOf('MSIE') != -1 && 'ActiveXObject' in window) ){
+		if( !Modernizr.videoBuffered || !supportsLoop || (!Modernizr.mediaDefaultMuted && isIE && 'ActiveXObject' in window) ){
 			webshims.addPolyfill('mediaelement-native-fix', {
 				d: ['dom-support']
 			});
@@ -58,7 +58,7 @@
 	}
 
 webshims.register('mediaelement-core', function($, webshims, window, document, undefined, options){
-	hasSwf = swfmini.hasFlashPlayerVersion('10.0.3');
+	var hasSwf = swfmini.hasFlashPlayerVersion('10.0.3');
 	var mediaelement = webshims.mediaelement;
 	
 	mediaelement.parseRtmp = function(data){
@@ -120,11 +120,7 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 				}
 			}
 		}
-		
-		if(!src.container){
-			$(elem).attr('data-wsrecheckmimetype', '');
-		}
-		
+
 		tmp = elem.attr('media');
 		if(tmp){
 			src.media = tmp;
@@ -254,11 +250,6 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 		}
 	};
 	
-	
-	$.fn.loadMediaSrc = function(){
-		webshims.error('loadMediaSrc was removed.');
-	};
-	
 	mediaelement.swfMimeTypes = ['video/3gpp', 'video/x-msvideo', 'video/quicktime', 'video/x-m4v', 'video/mp4', 'video/m4p', 'video/x-flv', 'video/flv', 'audio/mpeg', 'audio/aac', 'audio/mp4', 'audio/x-m4a', 'audio/m4a', 'audio/mp3', 'audio/x-fla', 'audio/fla', 'youtube/flv', 'video/jarisplayer', 'jarisplayer/jarisplayer', 'video/youtube', 'video/rtmp', 'audio/rtmp'];
 	
 	mediaelement.canThirdPlaySrces = function(mediaElem, srces){
@@ -316,7 +307,7 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 				message = "can't play sources";
 			}
 			$(elem).pause().data('mediaerror', message);
-			webshims.error('mediaelementError: '+ message);
+			webshims.error('mediaelementError: '+ message +'. Run the following line in your console to get more info: webshim.mediaelement.loadDebugger();');
 			setTimeout(function(){
 				if($(elem).data('mediaerror')){
 					$(elem).addClass('media-error').trigger('mediaerror');
@@ -348,36 +339,49 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 			}
 		};
 	})();
-	
-	var stepSources = function(elem, data, useSwf, _srces, _noLoop){
-		var ret;
-		if(useSwf || (useSwf !== false && data && data.isActive == 'third')){
-			ret = mediaelement.canThirdPlaySrces(elem, _srces);
-			if(!ret){
-				if(_noLoop){
-					mediaelement.setError(elem, false);
-				} else {
-					stepSources(elem, data, false, _srces, true);
-				}
-			} else {
-				handleThird(elem, ret, data);
+
+	var activate = {
+		native: function(elem, src, data){
+			if(data && data.isActive == 'third') {
+				mediaelement.setActive(elem, 'html5', data);
 			}
-		} else {
-			ret = mediaelement.canNativePlaySrces(elem, _srces);
-			if(!ret){
-				if(_noLoop){
-					mediaelement.setError(elem, false);
-					if(data && data.isActive == 'third') {
-						mediaelement.setActive(elem, 'html5', data);
-					}
-				} else {
-					stepSources(elem, data, true, _srces, true);
-				}
-			} else if(data && data.isActive == 'third') {
+		},
+		third: handleThird
+	};
+
+	var stepSources = function(elem, data, srces){
+		var i, src;
+		var testOrder = [{test: 'canNativePlaySrces', activate: 'native'}, {test: 'canThirdPlaySrces', activate: 'third'}];
+		if(options.preferFlash || (data && data.isActive == 'third') ){
+			testOrder.reverse();
+		}
+		for(i = 0; i < 2; i++){
+			src = mediaelement[testOrder[i].test](elem, srces);
+			if(src){
+				activate[testOrder[i].activate](elem, src, data);
+				break;
+			}
+		}
+
+		if(!src){
+			mediaelement.setError(elem, false);
+			if(data && data.isActive == 'third') {
 				mediaelement.setActive(elem, 'html5', data);
 			}
 		}
 	};
+	var allowedPreload = {'metadata': 1, 'auto': 1, '': 1};
+	var fixPreload = function(elem){
+		var preload, img;
+		if(elem.getAttribute('preload') == 'none'){
+			if(allowedPreload[(preload = $.attr(elem, 'data-preload'))]){
+				$.attr(elem, 'preload', preload);
+			} else if(hasNative && (preload = elem.getAttribute('poster'))){
+				img = document.createElement('img');
+				img.src = preload;
+			}
+		}
+	};
 	var stopParent = /^(?:embed|object|datalist)$/i;
 	var selectSource = function(elem, data){
 		var baseData = webshims.data(elem, 'mediaelementBase') || webshims.data(elem, 'mediaelementBase', {});
@@ -393,7 +397,9 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 		if(mediaelement.sortMedia){
 			_srces.sort(mediaelement.sortMedia);
 		}
-		stepSources(elem, data, options.preferFlash || undefined, _srces);
+		fixPreload(elem);
+		stepSources(elem, data, _srces);
+
 	};
 	mediaelement.selectSource = selectSource;
 	
@@ -404,20 +410,22 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 		setTimeout(function(){
 			if( $.prop(e.target, 'paused') || !$.prop(e.target, 'loop') ){return;}
 			$(e.target).prop('currentTime', 0).play();
-		}, 1);
+		});
 		
 	});
 	
 	var handleMedia = false;
+
 	var initMediaElements = function(){
 		var testFixMedia = function(){
+
 			if(webshims.implement(this, 'mediaelement')){
 				selectSource(this);
 				if(!Modernizr.mediaDefaultMuted && $.attr(this, 'muted') != null){
 					$.prop(this, 'muted', true);
 				}
+
 			}
-			
 		};
 		
 		webshims.ready('dom-support', function(){
@@ -433,6 +441,7 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 					prop: {
 						value: function(){
 							var data = webshims.data(this, 'mediaelement');
+
 							selectSource(this, data);
 							if(hasNative && (!data || data.isActive == 'html5') && supLoad.prop._supvalue){
 								supLoad.prop._supvalue.apply(this, arguments);
@@ -444,6 +453,7 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 						}
 					}
 				});
+
 				nativeCanPlayType[nodeName] = webshims.defineNodeNameProperty(nodeName, 'canPlayType',  {
 					prop: {
 						value: function(type){
@@ -460,6 +470,9 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 									ret = 'maybe';
 								}
 							}
+							if(!ret && hasYt && type == 'video/youtube'){
+								ret = 'maybe';
+							}
 							return ret;
 						}
 					}
@@ -509,8 +522,18 @@ webshims.register('mediaelement-core', function($, webshims, window, document, u
 			});
 		}
 	};
-	
 
+	mediaelement.loadDebugger = function(){
+		webshims.ready('dom-support', function(){
+			webshims.loader.loadScript('mediaelement-debug');
+		});
+	};
+
+	if(({noCombo: 1, media: 1})[webshims.cfg.debug]){
+		$(document).on('mediaerror', function(e){
+			mediaelement.loadDebugger();
+		});
+	}
 	//set native implementation ready, before swf api is retested
 	if(hasNative){
 		webshims.isReady('mediaelement-core', true);