Merge branch 'attr'

Author: Prinzhorn

src/skrollr.js

@@ -67,7 +67,7 @@
 	//Find all data-attributes. data-[_constant]-[offset]-[anchor]-[anchor].
 	var rxKeyframeAttribute = /^data(?:-(_\w+))?(?:-?(-?\d*\.?\d+p?))?(?:-?(start|end|top|center|bottom))?(?:-?(top|center|bottom))?$/;
 
-	var rxPropValue = /\s*([\w\-\[\]]+)\s*:\s*(.+?)\s*(?:;|$)/gi;
+	var rxPropValue = /\s*(@?[\w\-\[\]]+)\s*:\s*(.+?)\s*(?:;|$)/gi;
 
 	//Easing function names follow the property in square brackets.
 	var rxPropEasing = /^([a-z\-]+)\[(\w+)\]$/;
@@ -984,7 +984,12 @@
 							if(hasProp.call(props, key)) {
 								value = _interpolateString(props[key].value);
 
-								skrollr.setStyle(element, key, value);
+								//Set style or attribute.
+								if(key.indexOf('@') === 0) {
+									element.setAttribute(key.substr(1), value);
+								} else {
+									skrollr.setStyle(element, key, value);
+								}
 							}
 						}
 
@@ -1018,7 +1023,12 @@
 
 							value = _interpolateString(value);
 
-							skrollr.setStyle(element, key, value);
+							//Set style or attribute.
+							if(key.indexOf('@') === 0) {
+								element.setAttribute(key.substr(1), value);
+							} else {
+								skrollr.setStyle(element, key, value);
+							}
 						}
 					}
 

test/index.html

@@ -80,6 +80,8 @@
 
 	<div id="auto-z-index" data-0="z-index:!1;" data-250="z-index:auto;">TEST</div>
 
+	<div id="attr" data-0="@title:500;@data-test:skrollr" data-250="@title:250" data-500="@title:0;@data-test:skrollr-test">TEST</div>
+
 	<div id="qunit"></div>
 
 	<script src="qunit.js" type="text/javascript"></script>

test/tests.js

@@ -24,9 +24,15 @@ var countAssertions = function(tests) {
 		var curTest = tests[i];
 
 		if(curTest.styles) {
-			for(var k in curTest.styles) {
-				counter += Object.prototype.hasOwnProperty.call(curTest.styles, k);
-			}
+			$.each(curTest.styles, function() {
+				counter++;
+			});
+		}
+
+		if(curTest.attributes) {
+			$.each(curTest.attributes, function() {
+				counter++;
+			});
 		}
 
 		counter += !!curTest.selector;
@@ -58,11 +64,16 @@ var scrollTests = function(offset, tests) {
 				var curTest = tests[i];
 
 				if(curTest.styles) {
-					for(var k in curTest.styles) {
-						if(Object.prototype.hasOwnProperty.call(curTest.styles, k)) {
-							QUnit.numericCSSPropertyEquals(curTest.element.css(k), curTest.styles[k], curTest.message || 'element\'s (#' + curTest.element[0].id + ') "' + k + '" CSS property is correct');
-						}
-					}
+					$.each(curTest.styles, function(k) {
+						QUnit.numericCSSPropertyEquals(curTest.element.css(k), curTest.styles[k], curTest.message || 'element\'s (#' + curTest.element[0].id + ') "' + k + '" CSS property is correct');
+					});
+				}
+
+				if(curTest.attributes) {
+					$.each(curTest.attributes, function(k, value) {
+						console.log(curTest.element.prop(k));
+						QUnit.numericCSSPropertyEquals(curTest.element.attr(k), curTest.attributes[k], curTest.message || 'element\'s (#' + curTest.element[0].id + ') "' + k + '" attribute is correct');
+					});
 				}
 
 				if(curTest.selector) {
@@ -86,7 +97,7 @@ s.refresh(newElement[0]);
 module('basic stuff');
 
 test('CSS classes present', function() {
-	strictEqual($('.skrollable').length, 22, 'All elements have the .skrollable class');
+	strictEqual($('.skrollable').length, 23, 'All elements have the .skrollable class');
 
 	ok($('html').is('.skrollr'), 'HTML element has skrollr class');
 	ok($('html').is(':not(.no-skrollr)'), 'HTML element does not have no-skrollr class');
@@ -180,6 +191,13 @@ scrollTests(500, [
 		styles: {
 			zIndex: 'auto'
 		}
+	},
+	{
+		message: 'attribute interpolation',
+		element: $('#attr'),
+		attributes: {
+			title: '0'
+		}
 	}
 ]);
 
@@ -254,6 +272,14 @@ scrollTests(0, [
 		styles: {
 			zIndex: '1'
 		}
+	},
+	{
+		message: 'attribute interpolation',
+		element: $('#attr'),
+		attributes: {
+			title: '500',
+			'data-test': 'skrollr'
+		}
 	}
 ]);
 
@@ -330,6 +356,14 @@ scrollTests(250, [
 		styles: {
 			float: 'none'
 		}
+	},
+	{
+		message: 'attribute interpolation',
+		element: $('#attr'),
+		attributes: {
+			title: '250',
+			'data-test': 'skrollr'
+		}
 	}
 ]);
 
@@ -350,6 +384,13 @@ scrollTests(600, [
 		styles: {
 			left: '500px'
 		}
+	},
+	{
+		message: 'attribute interpolation',
+		element: $('#attr'),
+		attributes: {
+			'data-test': 'skrollr-test'
+		}
 	}
 ]);