Merge branch 'performance-tweaks' of https://github.com/acdha/TimelineJS into acdha-pulls

source/js/Core/Core/VMM.Browser.js

@@ -12,12 +12,17 @@ if(typeof VMM != 'undefined' && typeof VMM.Browser == 'undefined') {
 			this.OS = this.searchString(this.dataOS) || "an unknown OS";
 			this.device = this.searchDevice(navigator.userAgent);
 			this.orientation = this.searchOrientation(window.orientation);
+			this.features = {
+				css: {
+					transitions: this.cssTransitionSupport()
+				}
+			};
 		},
 		searchOrientation: function(orientation) {
 			var orient = "";
-			if ( orientation == 0  || orientation == 180) {  
+			if ( orientation == 0  || orientation == 180) {
 				orient = "portrait";
-			} else if ( orientation == 90 || orientation == -90) {  
+			} else if ( orientation == 90 || orientation == -90) {
 				orient = "landscape";
 			} else {
 				orient = "normal";
@@ -155,8 +160,29 @@ if(typeof VMM != 'undefined' && typeof VMM.Browser == 'undefined') {
 				subString: "Linux",
 				identity: "Linux"
 			}
-		]
+		],
+		cssTransitionSupport: function () {
+			// See https://gist.github.com/jackfuchs/556448
+			var b = document.body || document.documentElement,
+			s = b.style,
+			p = 'transition';
+
+			if (typeof s[p] == 'string') {
+				return true;
+			}
+
+			// Tests for vendor specific prop
+			var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
+			p = p.charAt(0).toUpperCase() + p.substr(1);
+
+			for (var i=0; i<v.length; i++) {
+				if (typeof s[v[i] + p] == 'string') {
+					return true;
+				}
+			}
 
-	}
+			return false;
+		}
+	};
 	VMM.Browser.init();
 }

source/js/Core/Core/VMM.Library.js

@@ -274,28 +274,27 @@ if(typeof VMM != 'undefined') {
 				}
 			}
 		},
-		
+
 		prop: function(element, aName, value) {
-			if (typeof jQuery == 'undefined' || !/[1-9]\.[3-9].[1-9]/.test(jQuery.fn.jquery)) {
+			if (typeof jQuery == 'undefined' || !('prop' in jQuery.fn)) {
-			    VMM.Lib.attribute(element, aName, value);
+			    return VMM.Lib.attribute(element, aName, value);
+			} else if (typeof value != 'undefined') {
+				return jQuery(element).prop(aName, value);
 			} else {
-				jQuery(element).prop(aName, value);
+				return jQuery(element).prop(aName);
 			}
 		},
-		
+
 		attribute: function(element, aName, value) {
-			
+			if (typeof(jQuery) != 'undefined') {
-			if (value != null && value != "") {
+				if (typeof(value) != 'undefined' && value != null && value != "") {
-				if( typeof( jQuery ) != 'undefined' ){
+					return jQuery(element).attr(aName, value);
-					jQuery(element).attr(aName, value);
+				} else {
-				}
-			} else {
-				if( typeof( jQuery ) != 'undefined' ){
 					return jQuery(element).attr(aName);
 				}
 			}
 		},
-		
+
 		visible: function(element, show) {
 			if (show != null) {
 				if( typeof( jQuery ) != 'undefined' ){
@@ -421,9 +420,10 @@ if(typeof VMM != 'undefined') {
 				jQuery(element).stop();
 			}
 		},
-		
+
+		// TODO: Consider removing this as it's referenced by one commented line
 		delay_animate: function(delay, element, duration, ease, att, callback_function) {
-			if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") {
+			if (VMM.Browser.features.css.transitions && !('scrollTop' in _att)) {
 				var _tdd		= Math.round((duration/1500)*10)/10,
 					__duration	= _tdd + 's';
 					
@@ -446,8 +446,8 @@ if(typeof VMM != 'undefined') {
 			var _ease		= "easein",
 				_que		= false,
 				_duration	= 1000,
-				_att		= {};
+				_att;
-			
+
 			if (duration != null) {
 				if (duration < 1) {
 					_duration = 1;
@@ -467,20 +467,18 @@ if(typeof VMM != 'undefined') {
 			
 			
 			if (att != null) {
-				_att = att
+				_att = att;
 			} else {
-				_att = {opacity: 0}
+				_att = {opacity: 0};
 			}
-			
+
-			
+			if (VMM.Browser.features.css.transitions && !('scrollTop' in _att)) {
-			if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") {
-				
 				var _tdd		= Math.round((_duration/1500)*10)/10,
 					__duration	= _tdd + 's';
 					
 				_ease = " cubic-bezier(0.33, 0.66, 0.66, 1)";
 				//_ease = " ease-in-out";
-				for (x in _att) {
+				for (var x in _att) {
 					if (Object.prototype.hasOwnProperty.call(_att, x)) {
 						trace(x + " to " + _att[x]);
 						VMM.Lib.css(element, '-webkit-transition',  x + ' ' + __duration + _ease);

source/js/Core/Slider/VMM.Slider.js

@@ -689,6 +689,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 			} else {
 				VMM.Lib.css(layout, "overflow-y", "hidden" );
 				var scroll_height = 0;
+
+                // FIXME: Chrome cannot optimize this try/catch block, which appears to be unnecessary – see https://github.com/NUKnightLab/TimelineJS/pull/681#issuecomment-52365420
 				try {
 					scroll_height = VMM.Lib.prop(layout, "scrollHeight");
 					VMM.Lib.animate(layout, _duration, _ease, {scrollTop: scroll_height - VMM.Lib.height(layout) });