Skip to content

Commit

Permalink
Auto parameters now accept unit changes and any colour names.
Browse files Browse the repository at this point in the history
Had to add `laxbreak` option to jshint or the code is hard to read.
All named colours are replaced with rgba(), and it is possible to use the colour names within rgb/rgba too (ie, from "rgba(red,0.1)" to "rgba(purple,0.8)"
This *requires* calc for unit conversion (a future release may deal with simple x->y, but that's not how this is meant to be used) - http://caniuse.com/#feat=calc
  • Loading branch information
Rycochet committed Dec 4, 2016
1 parent 13bace0 commit d81e17a
Show file tree
Hide file tree
Showing 4 changed files with 294 additions and 53 deletions.
1 change: 1 addition & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ module.exports = function(grunt) {
freeze: true,
funcscope: true,
futurehostile: true,
laxbreak: true, // Makes it very hard to write readable code in some places without this option
loopfunc: true, // Velocity 1.*
nocomma: true,
nonbsp: true,
Expand Down
18 changes: 10 additions & 8 deletions test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,7 @@
Velocity($target3, testPropertiesEndNoConvert);
assert.equal(Data($target3, pluginName).tweensContainer.paddingLeft.startValue, parseFloat(testStartValues.paddingLeft), "Start value #1 wasn't unit converted.");
assert.equal(Data($target3, pluginName).tweensContainer.height.startValue, parseFloat(testStartValues.height), "Start value #2 wasn't unit converted.");
assert.equal(Data($target3, pluginName).tweensContainer.paddingRight.startValue, parseFloat(testStartValues.paddingRight), "Start value #3 wasn't unit converted.");
// assert.deepEqual(Data($target3, pluginName).tweensContainer.paddingRight.startValue, [Math.floor((parentWidth * parseFloat(testStartValues.paddingRight)) / 100), 0], "Start value #3 was pattern matched.");

/* Properties that should cause start values to be unit-converted. */
var testPropertiesEndConvert = { paddingLeft: "20%", height: "40%", lineHeight: "0.5em", wordSpacing: "2rem", marginLeft: "10vw", marginTop: "5vh", marginBottom: "100px" };
Expand All @@ -414,16 +414,18 @@
Velocity($target4, testPropertiesEndConvert);

/* Long decimal results can be returned after unit conversion, and Velocity's code and the code here can differ in precision. So, we round floor values before comparison. */
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.paddingLeft.startValue), Math.floor((parseFloat(testStartValues.paddingLeft) / parentWidth) * 100), "Horizontal property converted to %.");
// assert.deepEqual(Data($target4, pluginName).tweensContainer.paddingLeft.startValue, [parseFloat(testStartValues.paddingLeft), 0], "Horizontal property converted to %.");
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.height.startValue), Math.floor((parseFloat(testStartValues.height) / parentHeight) * 100), "Vertical property converted to %.");
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.lineHeight.startValue), Math.floor(parseFloat(testStartValues.lineHeight) / parseFloat(parentFontSize)), "Property converted to em.");
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.wordSpacing.startValue), Math.floor(parseFloat(testStartValues.wordSpacing) / parseFloat(remSize)), "Property converted to rem.");
// assert.equal(Data($target4, pluginName).tweensContainer.lineHeight.startValue, Math.floor(parseFloat(testStartValues.lineHeight) / parseFloat(parentFontSize)), "Property converted to em.");
// assert.equal(Data($target4, pluginName).tweensContainer.wordSpacing.startValue, Math.floor(parseFloat(testStartValues.wordSpacing) / parseFloat(remSize)), "Property converted to rem.");
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.marginBottom.startValue), parseFloat(testStartValues.marginBottom) / 100 * parseFloat($target4.parentNode.offsetWidth), "Property converted to px.");

if (!(IE<=8) && !isAndroid) {
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.marginLeft.startValue), Math.floor(parseFloat(testStartValues.marginLeft) / window.innerWidth * 100), "Horizontal property converted to vw.");
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.marginTop.startValue), Math.floor(parseFloat(testStartValues.marginTop) / window.innerHeight * 100), "Vertical property converted to vh.");
}
// if (!(IE<=8) && !isAndroid) {
// assert.equal(Data($target4, pluginName).tweensContainer.marginLeft.startValue, Math.floor(parseFloat(testStartValues.marginLeft) / window.innerWidth * 100), "Horizontal property converted to vw.");
// assert.equal(Data($target4, pluginName).tweensContainer.marginTop.startValue, Math.floor(parseFloat(testStartValues.marginTop) / window.innerHeight * 100), "Vertical property converted to vh.");
// }

// TODO: Tests for auto-parameters as the units are no longer converted.

/* jQuery TRBL deferring. */
var testPropertiesTRBL = { left: "1000px" };
Expand Down
Loading

0 comments on commit d81e17a

Please sign in to comment.