From 1cd811c2c11f14d7bdb095841dcd815dddc979ca Mon Sep 17 00:00:00 2001 From: Alan Cutter Date: Mon, 23 Jun 2014 13:35:25 +1000 Subject: [PATCH 1/4] Attach handlers to properties according to whether they accept a specified handler value --- src/color-handler.js | 2 +- src/dimension-handler.js | 3 +-- src/number-handler.js | 2 +- src/property-interpolation.js | 30 ++++++++++++++++++++++++------ src/transform-handler.js | 2 +- 5 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/color-handler.js b/src/color-handler.js index 410bd3e..f991845 100644 --- a/src/color-handler.js +++ b/src/color-handler.js @@ -49,7 +49,7 @@ }]; } - scope.addPropertiesHandler(parseColor, mergeColors, ['color', 'backgroundColor']); + scope.addCSSValueHandler(parseColor, mergeColors, 'rgb(1, 2, 3)'); if (TESTING) { testing.parseColor = parseColor; diff --git a/src/dimension-handler.js b/src/dimension-handler.js index cea01dc..b9752da 100644 --- a/src/dimension-handler.js +++ b/src/dimension-handler.js @@ -92,7 +92,6 @@ scope.parseAngle = parseAngle; scope.mergeDimensions = mergeDimensions; - scope.addPropertiesHandler(parseLengthOrPercent, mergeDimensions, - 'left|right|top|bottom|width|height'.split('|')); + scope.addCSSValueHandler(parseLengthOrPercent, mergeDimensions, '12em'); })(minifill, testing); diff --git a/src/number-handler.js b/src/number-handler.js index 32431c8..915b00c 100644 --- a/src/number-handler.js +++ b/src/number-handler.js @@ -39,7 +39,7 @@ }; } - scope.addPropertiesHandler(parseNumber, clampedMergeNumbers(0, 1), ['opacity']); + scope.addCSSValueHandler(parseNumber, clampedMergeNumbers(0, 1), '0.5'); scope.parseNumber = parseNumber; scope.mergeNumbers = mergeNumbers; diff --git a/src/property-interpolation.js b/src/property-interpolation.js index d07f913..7c4e1af 100644 --- a/src/property-interpolation.js +++ b/src/property-interpolation.js @@ -16,14 +16,32 @@ var propertyHandlers = {}; - function addPropertiesHandler(parser, merger, properties) { - for (var i = 0; i < properties.length; i++) { - var property = properties[i]; - propertyHandlers[property] = propertyHandlers[property] || []; - propertyHandlers[property].push([parser, merger]); + function propertiesAcceptingCSSValue(cssValue) { + var properties = []; + var style = document.createElement('div').style; + for (var property in style) { + if (style[property] !== '') + continue; + var prefixed = ['webkit', 'Moz', 'ms'].some(function(prefix) { + return property.startsWith(prefix); + }); + if (prefixed) + continue; + style[property] = cssValue; + if (style[property] === cssValue) + properties.push(property); + style[property] = ''; } + console.log(cssValue, properties); + return properties; } - scope.addPropertiesHandler = addPropertiesHandler; + + scope.addCSSValueHandler = function(parser, merger, cssValue) { + propertiesAcceptingCSSValue(cssValue).forEach(function(property) { + propertyHandlers[property] = propertyHandlers[property] || []; + propertyHandlers[property].push([parser, merger]); + }); + }; function propertyInterpolation(property, left, right) { var handlers = left == right ? [] : propertyHandlers[property]; diff --git a/src/transform-handler.js b/src/transform-handler.js index 1efbdc5..ff9a7e5 100644 --- a/src/transform-handler.js +++ b/src/transform-handler.js @@ -192,7 +192,7 @@ }]; } - scope.addPropertiesHandler(parseTransform, mergeTransforms, ['transform']); + scope.addCSSValueHandler(parseTransform, mergeTransforms, 'rotate(10deg) scale(2)'); if (TESTING) { testing.parseTransform = parseTransform; From 40ffe98aec8e5ec2fa189e0af6e183a1d90e7c78 Mon Sep 17 00:00:00 2001 From: Alan Cutter Date: Tue, 24 Jun 2014 22:39:25 +1000 Subject: [PATCH 2/4] Review changes and IE fixes --- src/color-handler.js | 2 +- src/dimension-handler.js | 2 +- src/number-handler.js | 2 +- src/property-interpolation.js | 17 ++++++++++------- src/transform-handler.js | 2 +- 5 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/color-handler.js b/src/color-handler.js index f991845..036f298 100644 --- a/src/color-handler.js +++ b/src/color-handler.js @@ -49,7 +49,7 @@ }]; } - scope.addCSSValueHandler(parseColor, mergeColors, 'rgb(1, 2, 3)'); + scope.addCssValueHandler(parseColor, mergeColors, 'rgb(1, 2, 3)'); if (TESTING) { testing.parseColor = parseColor; diff --git a/src/dimension-handler.js b/src/dimension-handler.js index b9752da..1e176e9 100644 --- a/src/dimension-handler.js +++ b/src/dimension-handler.js @@ -92,6 +92,6 @@ scope.parseAngle = parseAngle; scope.mergeDimensions = mergeDimensions; - scope.addCSSValueHandler(parseLengthOrPercent, mergeDimensions, '12em'); + scope.addCssValueHandler(parseLengthOrPercent, mergeDimensions, '12em'); })(minifill, testing); diff --git a/src/number-handler.js b/src/number-handler.js index 915b00c..da39913 100644 --- a/src/number-handler.js +++ b/src/number-handler.js @@ -39,7 +39,7 @@ }; } - scope.addCSSValueHandler(parseNumber, clampedMergeNumbers(0, 1), '0.5'); + scope.addCssValueHandler(parseNumber, clampedMergeNumbers(0, 1), '0.5'); scope.parseNumber = parseNumber; scope.mergeNumbers = mergeNumbers; diff --git a/src/property-interpolation.js b/src/property-interpolation.js index 7c4e1af..65ae088 100644 --- a/src/property-interpolation.js +++ b/src/property-interpolation.js @@ -22,21 +22,24 @@ for (var property in style) { if (style[property] !== '') continue; - var prefixed = ['webkit', 'Moz', 'ms'].some(function(prefix) { - return property.startsWith(prefix); + var rejected = ['webkit', 'Moz', 'ms', 'animation', 'transition'].some(function(disallowed) { + return property.indexOf(disallowed) === 0; }); - if (prefixed) + if (rejected) continue; - style[property] = cssValue; - if (style[property] === cssValue) - properties.push(property); + // style['content'] = 'css value' throws in IE. + try { + style[property] = cssValue; + if (style[property] === cssValue) + properties.push(property); + } catch (error) {} style[property] = ''; } console.log(cssValue, properties); return properties; } - scope.addCSSValueHandler = function(parser, merger, cssValue) { + scope.addCssValueHandler = function(parser, merger, cssValue) { propertiesAcceptingCSSValue(cssValue).forEach(function(property) { propertyHandlers[property] = propertyHandlers[property] || []; propertyHandlers[property].push([parser, merger]); diff --git a/src/transform-handler.js b/src/transform-handler.js index ff9a7e5..af7afaa 100644 --- a/src/transform-handler.js +++ b/src/transform-handler.js @@ -192,7 +192,7 @@ }]; } - scope.addCSSValueHandler(parseTransform, mergeTransforms, 'rotate(10deg) scale(2)'); + scope.addCssValueHandler(parseTransform, mergeTransforms, 'rotate(10deg) scale(2)'); if (TESTING) { testing.parseTransform = parseTransform; From 648aa743b5c351e877c1a411732971ef2f377bdc Mon Sep 17 00:00:00 2001 From: Alan Cutter Date: Tue, 24 Jun 2014 22:50:08 +1000 Subject: [PATCH 3/4] Remove console.log --- src/property-interpolation.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/property-interpolation.js b/src/property-interpolation.js index 65ae088..c00dda1 100644 --- a/src/property-interpolation.js +++ b/src/property-interpolation.js @@ -35,7 +35,6 @@ } catch (error) {} style[property] = ''; } - console.log(cssValue, properties); return properties; } From 41bf084c6f1a653b7681697a54a5ed1fcd0ba5c2 Mon Sep 17 00:00:00 2001 From: Alan Cutter Date: Tue, 24 Jun 2014 22:54:03 +1000 Subject: [PATCH 4/4] Extra rename --- src/property-interpolation.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/property-interpolation.js b/src/property-interpolation.js index c00dda1..49b8797 100644 --- a/src/property-interpolation.js +++ b/src/property-interpolation.js @@ -16,7 +16,7 @@ var propertyHandlers = {}; - function propertiesAcceptingCSSValue(cssValue) { + function propertiesAcceptingCssValue(cssValue) { var properties = []; var style = document.createElement('div').style; for (var property in style) { @@ -39,7 +39,7 @@ } scope.addCssValueHandler = function(parser, merger, cssValue) { - propertiesAcceptingCSSValue(cssValue).forEach(function(property) { + propertiesAcceptingCssValue(cssValue).forEach(function(property) { propertyHandlers[property] = propertyHandlers[property] || []; propertyHandlers[property].push([parser, merger]); });