From c70812eece050cb6d1f16abb0b02df0e7c2bab3b Mon Sep 17 00:00:00 2001
From: sergio zambrano <cuentanumerouno@Hotmail.com>
Date: Sat, 23 May 2015 16:52:53 -0400
Subject: [PATCH] Resolving constants in attribute values, alowed as CSS val()

This is my first pull request ever. Excuse all my mistakes (you are welcome to point them out though).

Now properties can be expressed as variables, which will use the constants defined in the init.

e.g.
val(--constantname)  =   _constantname

Example usage:
data-top="margin-top: val(--constantname)px;"
---
 src/skrollr.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/skrollr.js b/src/skrollr.js
index 89b98e9a..8fbb47a3 100644
--- a/src/skrollr.js
+++ b/src/skrollr.js
@@ -82,6 +82,9 @@
 	//Numeric values with optional sign.
 	var rxNumericValue = /[\-+]?[\d]*\.?[\d]+/g;
 
+	//Used to find constants inside attributes.
+	var rxConstants = /val\(--([^\)]+?)\)\s?(em|px|\%|pt|rem|vh|ex|vmin|vmax)/g;
+
 	//Used to replace occurences of {?} with a number.
 	var rxInterpolateString = /\{\?\}/g;
 
@@ -1164,6 +1167,7 @@
 		//Iterate over all key frames
 		var keyFrameIndex = 0;
 		var keyFramesLength = skrollable.keyFrames.length;
+		var processedConstants = _processConstants();
 
 		for(; keyFrameIndex < keyFramesLength; keyFrameIndex++) {
 			var frame = skrollable.keyFrames[keyFrameIndex];
@@ -1171,13 +1175,27 @@
 			var value;
 			var prop;
 			var props = {};
-
+			var foundConstants;
+			
 			var match;
 
 			while((match = rxPropValue.exec(frame.props)) !== null) {
 				prop = match[1];
 				value = match[2];
 
+				foundConstants = value.match(rxConstants);
+				if(foundConstants !== null) {
+
+					value = value.replace( rxConstants, function( everything, constant_name, unit_str ){
+						
+						if(  !processedConstants[constant_name] ) {
+							throw 'Constant "' + constant_name + ' not defined';
+						}
+						
+						return processedConstants[constant_name] + '' + unit_str;
+					});
+				}
+				
 				easing = prop.match(rxPropEasing);
 
 				//Is there an easing specified for this prop?