Skip to content

Commit

Permalink
🐛 Do not prettier js in less
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 committed May 7, 2019
1 parent 32bb3bc commit 15e5e4c
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 83 deletions.
1 change: 1 addition & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,4 @@ components/*/*.jsx
.editorconfig
.eslintignore
**/*.yml
components/style/color/*.less
155 changes: 103 additions & 52 deletions components/style/color/bezierEasing.less
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,108 @@
/* stylelint-disable */
.bezierEasingMixin() {
@functions: ~`(
function() {var NEWTON_ITERATIONS = 4; var NEWTON_MIN_SLOPE = 0.001; var SUBDIVISION_PRECISION
= 0.0000001; var SUBDIVISION_MAX_ITERATIONS = 10; var kSplineTableSize = 11; var kSampleStepSize
= 1 / (kSplineTableSize - 1) ; var float32ArraySupported = typeof Float32Array === 'function'
; function A (aA1, aA2) {return 1 - 3 * aA2 + 3 * aA1;} function B (aA1, aA2) {return 3 *
aA2 - 6 * aA1;} function C (aA1) {return 3 * aA1;} / / Returns x(t) given t,
x1,
and x2,
or y(t) given t,
y1,
and y2. function calcBezier (aT, aA1, aA2) {return (
(A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)
) * aT;} / / Returns dx/dt given t,
x1,
and x2,
or dy/dt given t,
y1,
and y2. function getSlope (aT, aA1, aA2) {return 3 * A(aA1, aA2) * aT * aT + 2 * B(aA1, aA2) *
aT + C(aA1) ;} function binarySubdivide (aX, aA, aB, mX1, mX2) {var currentX,
currentT,
i = 0; do {currentT = aA + (aB - aA) / 2.0; currentX = calcBezier(currentT, mX1, mX2) - aX; if
(currentX > 0) {aB = currentT;} else {aA = currentT;}} while
(Math.abs(currentX) > SUBDIVISION_PRECISION && + +i < SUBDIVISION_MAX_ITERATIONS) ; return
currentT;} function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {for
(var i = 0; i < NEWTON_ITERATIONS; + +i) {var currentSlope = getSlope(aGuessT, mX1, mX2) ; if
(currentSlope === 0) {return aGuessT;} var currentX = calcBezier(aGuessT, mX1, mX2) - aX; aGuessT -=
currentX / currentSlope;} return aGuessT;} var BezierEasing = function (mX1, mY1, mX2, mY2)
{if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {throw new
Error('bezier x values must be in [0, 1] range') ;} / / Precompute samples table var sampleValues
= float32ArraySupported ? new Float32Array(kSplineTableSize): new Array(kSplineTableSize) ; if
(mX1 !== mY1 || mX2 !== mY2) {for (var i = 0; i < kSplineTableSize; + +i) {sampleValues[i] =
calcBezier(i * kSampleStepSize, mX1, mX2) ;}} function getTForX (aX) {var intervalStart =
0.0; var currentSample = 1; var lastSample = kSplineTableSize - 1; for
(; currentSample !== lastSample && sampleValues[currentSample] <= aX; + +currentSample) {intervalStart +
= kSampleStepSize;} --currentSample; / / Interpolate to provide an initial guess for t var
dist = (aX - sampleValues[currentSample]) /
(sampleValues[currentSample + 1] - sampleValues[currentSample]) ; var guessForT =
intervalStart + dist * kSampleStepSize; var initialSlope = getSlope(guessForT, mX1, mX2) ;
if (initialSlope >= NEWTON_MIN_SLOPE) {return newtonRaphsonIterate(aX, guessForT, mX1, mX2) ;}
else if (initialSlope === 0) {return guessForT;} else {return binarySubdivide(
aX,
intervalStart,
intervalStart + kSampleStepSize,
mX1,
mX2
) ;}} return function BezierEasing (x) {if (mX1 === mY1 && mX2 === mY2) {return x; / / linear} / /
Because JavaScript number are imprecise,
we should guarantee the extremes are right. if (x === 0) {return 0;} if (x === 1) {return 1;}
return calcBezier(getTForX(x), mY1, mY2) ;};}; this.colorEasing =
BezierEasing(0.26, 0.09, 0.37, 0.18) ; / / less 3 requires a return return '' ;}
)
() `;
@functions: ~`(function() {
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
var SUBDIVISION_MAX_ITERATIONS = 10;

var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);

var float32ArraySupported = typeof Float32Array === 'function';

function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
function C (aA1) { return 3.0 * aA1; }

// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }

// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }

function binarySubdivide (aX, aA, aB, mX1, mX2) {
var currentX, currentT, i = 0;
do {
currentT = aA + (aB - aA) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - aX;
if (currentX > 0.0) {
aB = currentT;
} else {
aA = currentT;
}
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
return currentT;
}

function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
var currentSlope = getSlope(aGuessT, mX1, mX2);
if (currentSlope === 0.0) {
return aGuessT;
}
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}

var BezierEasing = function (mX1, mY1, mX2, mY2) {
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
throw new Error('bezier x values must be in [0, 1] range');
}

// Precompute samples table
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
if (mX1 !== mY1 || mX2 !== mY2) {
for (var i = 0; i < kSplineTableSize; ++i) {
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
}
}

function getTForX (aX) {
var intervalStart = 0.0;
var currentSample = 1;
var lastSample = kSplineTableSize - 1;

for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
intervalStart += kSampleStepSize;
}
--currentSample;

// Interpolate to provide an initial guess for t
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
var guessForT = intervalStart + dist * kSampleStepSize;

var initialSlope = getSlope(guessForT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
} else if (initialSlope === 0.0) {
return guessForT;
} else {
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
}
}

return function BezierEasing (x) {
if (mX1 === mY1 && mX2 === mY2) {
return x; // linear
}
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
return calcBezier(getTForX(x), mY1, mY2);
};
};

this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
// less 3 requires a return
return '';
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
Expand Down
93 changes: 63 additions & 30 deletions components/style/color/colorPalette.less
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,73 @@
/* stylelint-disable no-duplicate-selectors */
@import 'bezierEasing';
@import 'tinyColor';
@import "bezierEasing";
@import "tinyColor";

// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it 👻
// and create an entire color palette magicly by inputing just a single primary color.
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() {
@functions: ~`(
function() {var hueStep = 2; var saturationStep = 16; var saturationStep2 = 5; var brightnessStep1
= 5; var brightnessStep2 = 15; var lightColorCount = 5; var darkColorCount = 4; var getHue =
function(hsv, i, isLight) {var hue; if (hsv.h >= 60 && hsv.h <= 240) {hue = isLight ? hsv.h -
hueStep * i: hsv.h + hueStep * i;} else {hue = isLight ? hsv.h + hueStep * i: hsv.h - hueStep *
i;} if (hue < 0) {hue + = 360;} else if (hue >= 360) {hue -= 360;} return Math.round(hue) ;};
var getSaturation = function(hsv, i, isLight) {var saturation; if (isLight) {saturation = Math.round(
hsv.s * 100
) - saturationStep * i;} else if (i == darkColorCount) {saturation = Math.round(
hsv.s * 100
) + saturationStep;} else {saturation = Math.round(hsv.s * 100) + saturationStep2 * i;} if
(saturation > 100) {saturation = 100;} if
(isLight && i === lightColorCount && saturation > 10) {saturation = 10;} if (saturation < 6)
{saturation = 6;} return Math.round(saturation) ;}; var getValue = function(hsv, i, isLight)
{if (isLight) {return Math.round(hsv.v * 100) + brightnessStep1 * i;} return Math.round(
hsv.v * 100
) - brightnessStep2 * i;}; this.colorPalette = function(color, index) {var isLight = index
<= 6; var hsv = tinycolor(color) .toHsv() ; var i = isLight ? lightColorCount + 1 - index:
index - lightColorCount - 1; return
tinycolor(
{h: getHue(hsv, i, isLight),
s: getSaturation(hsv, i, isLight),
v: getValue(hsv, i, isLight),
}
)
.toHexString() ;};}
)
() `;
@functions: ~`(function() {
var hueStep = 2;
var saturationStep = 16;
var saturationStep2 = 5;
var brightnessStep1 = 5;
var brightnessStep2 = 15;
var lightColorCount = 5;
var darkColorCount = 4;

var getHue = function(hsv, i, isLight) {
var hue;
if (hsv.h >= 60 && hsv.h <= 240) {
hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
} else {
hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
}
if (hue < 0) {
hue += 360;
} else if (hue >= 360) {
hue -= 360;
}
return Math.round(hue);
};
var getSaturation = function(hsv, i, isLight) {
var saturation;
if (isLight) {
saturation = Math.round(hsv.s * 100) - saturationStep * i;
} else if (i == darkColorCount) {
saturation = Math.round(hsv.s * 100) + saturationStep;
} else {
saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
}
if (saturation > 100) {
saturation = 100;
}
if (isLight && i === lightColorCount && saturation > 10) {
saturation = 10;
}
if (saturation < 6) {
saturation = 6;
}
return Math.round(saturation);
};
var getValue = function(hsv, i, isLight) {
if (isLight) {
return Math.round(hsv.v * 100) + brightnessStep1 * i;
}
return Math.round(hsv.v * 100) - brightnessStep2 * i;
};

this.colorPalette = function(color, index) {
var isLight = index <= 6;
var hsv = tinycolor(color).toHsv();
var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
return tinycolor({
h: getHue(hsv, i, isLight),
s: getSaturation(hsv, i, isLight),
v: getValue(hsv, i, isLight),
}).toHexString();
};
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
Expand Down
2 changes: 1 addition & 1 deletion components/style/color/tinyColor.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.tinyColorMixin() {
@functions: ~`(function() {
@functions: ~`(function() {
// TinyColor v1.4.1
// https://github.com/bgrins/TinyColor
// 2016-07-07, Brian Grinstead, MIT License
Expand Down

0 comments on commit 15e5e4c

Please sign in to comment.