Skip to content

Commit

Permalink
fix(gradient): support ie10
Browse files Browse the repository at this point in the history
  • Loading branch information
林永吉 committed Sep 28, 2020
1 parent cdfb0f8 commit ff25fb4
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 106 deletions.
2 changes: 1 addition & 1 deletion dist/colorfuls.js
View file

Large diffs are not rendered by default.

53 changes: 10 additions & 43 deletions src/color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,29 +137,23 @@ function channelDown(channel, ratio) {
throwPercentageLikeError(ratio)
}

return bigNumberRange(
channel.times(new Big(1).minus(percentage2Length(ratio)))
)
return bigNumberRange(channel.times(new Big(1).minus(percentage2Length(ratio))))
}

function channelUp(channel, ratio) {
if (!isNumeric(ratio)) {
throwPercentageLikeError(ratio)
}

return bigNumberRange(
channel.times(new Big(1).plus(percentage2Length(ratio)))
)
return bigNumberRange(channel.times(new Big(1).plus(percentage2Length(ratio))))
}

function isBig(object) {
return object instanceof Big
}

function throwPercentageLikeError(value) {
throw new Error(
`parameter should be number/percentage instead of ${typeof value}`
)
throw new Error(`parameter should be number/percentage instead of ${typeof value}`)
}

/**
Expand Down Expand Up @@ -293,9 +287,7 @@ class RGBA {
}

hexa() {
return new HEXA(
_rgb2hex(this._r, this._g, this._b) + decimal2Hex(this._a, 2)
)
return new HEXA(_rgb2hex(this._r, this._g, this._b) + decimal2Hex(this._a, 2))
}

toHex() {
Expand Down Expand Up @@ -609,19 +601,8 @@ function value2Binary(value) {
export function rgba2RGBA(rgba) {
let matches

if (
isObject(rgba) &&
isNumeric(rgba.r) &&
isNumeric(rgba.g) &&
isNumeric(rgba.b)
) {
matches = [
null,
rgba.r,
rgba.g,
rgba.b,
isBig(rgba.a) || isNumeric(rgba.a) ? rgba.a : 1
]
if (isObject(rgba) && isNumeric(rgba.r) && isNumeric(rgba.g) && isNumeric(rgba.b)) {
matches = [null, rgba.r, rgba.g, rgba.b, isBig(rgba.a) || isNumeric(rgba.a) ? rgba.a : 1]
} else if (isRgba(rgba)) {
matches = rgbaReg.exec(rgba.trim())
} else {
Expand Down Expand Up @@ -669,8 +650,7 @@ function hue2rgb(p1, p2, hue) {
if (hue.gt(1)) hue = hue.minus(1)
if (hue.times(6).lt(1)) return p1.plus(p2.minus(p1).times(6).times(hue))
if (hue.times(2).lt(1)) return p2
if (hue.times(3).lt(2))
return p1.plus(p2.minus(p1).times(new Big(2 / 3).minus(hue).times(6)))
if (hue.times(3).lt(2)) return p1.plus(p2.minus(p1).times(new Big(2 / 3).minus(hue).times(6)))
return p1
}

Expand All @@ -681,12 +661,7 @@ function hue2rgb(p1, p2, hue) {
export function hsla2HSLA(hsla) {
let matches

if (
isObject(hsla) &&
isNumber(hsla.h) &&
isNumeric(hsla.s) &&
isNumeric(hsla.l)
) {
if (isObject(hsla) && isNumber(hsla.h) && isNumeric(hsla.s) && isNumeric(hsla.l)) {
matches = [null, hsla.h, hsla.s, hsla.l, isNumeric(hsla.a) ? hsla.a : 1]
} else if (isHsla(hsla)) {
matches = hslaReg.exec(hsla.trim())
Expand Down Expand Up @@ -719,19 +694,11 @@ export function clone(object) {
*/
export function Color(value) {
if (isObject(value)) {
if (
value instanceof RGBA ||
value instanceof HSLA ||
value instanceof HEXA
) {
if (value instanceof RGBA || value instanceof HSLA || value instanceof HEXA) {
return clone(value)
} else if (isNumeric(value.r) && isNumeric(value.g) && isNumeric(value.b)) {
return rgba2RGBA(value)
} else if (
isNumber(value.h) &&
isLimitPercentage(value.s) &&
isLimitPercentage(value.l)
) {
} else if (isNumber(value.h) && isLimitPercentage(value.s) && isLimitPercentage(value.l)) {
return hsla2HSLA(value)
}
} else if (isHexa(value)) {
Expand Down
26 changes: 10 additions & 16 deletions src/gradient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ function getStepColor(p, colors, gamma) {
start = color2Array(prevItem.color, gamma)
end = color2Array(item.color, gamma)

p = p
.minus(prevItem.percentage)
.div(item.percentage.minus(prevItem.percentage))
p = p.minus(prevItem.percentage).div(item.percentage.minus(prevItem.percentage))
break
}
}
Expand Down Expand Up @@ -62,9 +60,7 @@ function parseColors(args) {

if (isArray(args[i])) {
item.color = Color(args[i][0]).rgba()
item.percentage = new Big(
numberRange(percentage2Length(args[i][1]), minPercentage, 1)
)
item.percentage = new Big(numberRange(percentage2Length(args[i][1]), minPercentage, 1))
} else {
item.color = Color(args[i]).rgba()
}
Expand All @@ -85,9 +81,7 @@ function parseColors(args) {
.div(unknownPercentageIndexs.length + 1)

unknownPercentageIndexs.forEach((colorIndex, k) => {
colors[colorIndex].percentage = item.percentage.minus(
step.times(unknownPercentageIndexs.length - k)
)
colors[colorIndex].percentage = item.percentage.minus(step.times(unknownPercentageIndexs.length - k))
})
unknownPercentageIndexs = []
}
Expand All @@ -105,14 +99,14 @@ function parseColors(args) {
function steps2ColorArray(gs, method) {
const arr = []

gs.forEach(color => {
arr.push(color[method]())
})
for (let i = 0; i < gs.length; i++) {
arr.push(gs[i][method]())
}

return arr
}

class GradientSteps extends Array {
class GradientSteps {
toRgbs() {
return steps2ColorArray(this, 'toRgb')
}
Expand Down Expand Up @@ -153,11 +147,11 @@ class Gradient {
const output = new GradientSteps()

for (let i = 0; i < length; i++) {
output.push(
getStepColor(new Big(i).div(length - 1), this.colors, this.gamma)
)
output[i] = getStepColor(new Big(i).div(length - 1), this.colors, this.gamma)
}

output.length = length

return output
}

Expand Down
9 changes: 2 additions & 7 deletions src/mix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,11 @@ export default function mix(color1, color2, weight) {
const c1 = Color(color1).rgba()
const c2 = Color(color2).rgba()

const p = new Big(
isUndefined(weight) ? 0.5 : numberRange(percentage2Length(weight))
)
const p = new Big(isUndefined(weight) ? 0.5 : numberRange(percentage2Length(weight)))

const w = p.times(2).minus(1)
const a = c1._a.minus(c2._a)
const w1 = (w.times(a).eq(-1)
? w
: w.plus(a).div(w.times(a).plus(1)).plus(1)
).div(2.0)
const w1 = (w.times(a).eq(-1) ? w : w.plus(a).div(w.times(a).plus(1)).plus(1)).div(2.0)
const w2 = new Big(1).minus(w1)

return rgba2RGBA({
Expand Down
78 changes: 39 additions & 39 deletions test/tests.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,134 @@
/* global should, Colorfuls */

describe('Color', () => {
describe('Conversion', () => {
describe('Color', function() {
describe('Conversion', function() {
// hex rgb rgba
it('HEX "#5CB1F8" should be RGB "rgb(92, 177, 248)"', () => {
it('HEX "#5CB1F8" should be RGB "rgb(92, 177, 248)"', function() {
should.equal(Colorfuls.hex2Rgb('#5CB1F8'), 'rgb(92, 177, 248)')
})
it('HEX "#5CB1F8" should be HSLA "hsl(207, 92%, 67%)"', () => {
it('HEX "#5CB1F8" should be HSLA "hsl(207, 92%, 67%)"', function() {
should.equal(Colorfuls.hex2Hsl('#5CB1F8'), 'hsl(207, 92%, 67%)')
})
it('RGB "rgb(92, 177, 248)" should be HEX "#5CB1F8"', () => {
it('RGB "rgb(92, 177, 248)" should be HEX "#5CB1F8"', function() {
should.equal(Colorfuls.rgb2Hex('rgb(92, 177, 248)'), '#5CB1F8')
})
it('RGB "rgb(92, 177, 248)" should be HSL "hsl(207, 92%, 67%)"', () => {
it('RGB "rgb(92, 177, 248)" should be HSL "hsl(207, 92%, 67%)"', function() {
should.equal(Colorfuls.rgb2Hsl('rgb(92, 177, 248)'), 'hsl(207, 92%, 67%)')
})
it('HSL "hsl(207, 92%, 67%)" should be RGB "rgb(93, 179, 248)"', () => {
it('HSL "hsl(207, 92%, 67%)" should be RGB "rgb(93, 179, 248)"', function() {
should.equal(Colorfuls.hsl2Rgb('hsl(207, 92%, 67%)'), 'rgb(93, 179, 248)')
})
it('HSL "hsl(207, 92%, 67%)" should be HEX "#5DB3F8"', () => {
it('HSL "hsl(207, 92%, 67%)" should be HEX "#5DB3F8"', function() {
should.equal(Colorfuls.hsl2Hex('hsl(207, 92%, 67%)'), '#5DB3F8')
})

// rgba hexa hsla
it('HEXA "#5CB1F8FF" should be RGBA "rgba(92, 177, 248, 1)"', () => {
it('HEXA "#5CB1F8FF" should be RGBA "rgba(92, 177, 248, 1)"', function() {
should.equal(Colorfuls.hexa2Rgba('#5CB1F8FF'), 'rgba(92, 177, 248, 1)')
})
it('HEXA "#5CB1F8FF" should be HSLA "hsla(207, 92%, 67%, 1)"', () => {
it('HEXA "#5CB1F8FF" should be HSLA "hsla(207, 92%, 67%, 1)"', function() {
should.equal(Colorfuls.hexa2Hsla('#5CB1F8FF'), 'hsla(207, 92%, 67%, 1)')
})
it('RGBA "rgba(92, 177, 248, 1)" should be HEXA "#5CB1F8FF"', () => {
it('RGBA "rgba(92, 177, 248, 1)" should be HEXA "#5CB1F8FF"', function() {
should.equal(Colorfuls.rgba2Hexa('rgba(92, 177, 248, 1)'), '#5CB1F8FF')
})
it('RGBA "rgba(92, 177, 248, 1)" should be HSLA "hsla(207, 92%, 67%, 1)"', () => {
it('RGBA "rgba(92, 177, 248, 1)" should be HSLA "hsla(207, 92%, 67%, 1)"', function() {
should.equal(Colorfuls.rgba2Hsla('rgba(92, 177, 248, 1)'), 'hsla(207, 92%, 67%, 1)')
})
it('HSLA "hsla(207, 92%, 67%, 1)" should be RGBA "rgba(93, 179, 248, 1)"', () => {
it('HSLA "hsla(207, 92%, 67%, 1)" should be RGBA "rgba(93, 179, 248, 1)"', function() {
should.equal(Colorfuls.hsla2Rgba('hsla(207, 92%, 67%, 1)'), 'rgba(93, 179, 248, 1)')
})
it('HSLA "hsla(207, 92%, 67%, 1)" should be HEXA "#5DB3F8FF"', () => {
it('HSLA "hsla(207, 92%, 67%, 1)" should be HEXA "#5DB3F8FF"', function() {
should.equal(Colorfuls.hsla2Hexa('hsla(207, 92%, 67%, 1)'), '#5DB3F8FF')
})
})

describe('Manipulation', () => {
it('grayscale(#5CBF54) -> #959595', () => {
describe('Manipulation', function() {
it('grayscale(#5CBF54) -> #959595', function() {
should.equal(Colorfuls.grayscale('#5CBF54').toHex(), '#959595')
})
it('complement(#7FFFD4): #7FFFD4 -> #FF7FAA', () => {
it('complement(#7FFFD4): #7FFFD4 -> #FF7FAA', function() {
should.equal(Colorfuls.complement('#7FFFD4').toHex(), '#FF7FAA')
})
it('invert(rgb(0, 100, 255)): -> rgb(255, 155, 0)', () => {
it('invert(rgb(0, 100, 255)): -> rgb(255, 155, 0)', function() {
should.equal(Colorfuls.invert('rgb(0, 100, 255)').toRgb(), 'rgb(255, 155, 0)')
})
it('isDark(rgb(255, 155, 0)): -> true', () => {
it('isDark(rgb(255, 155, 0)): -> true', function() {
should.equal(Colorfuls.isDark('rgb(255, 155, 0)'), false)
})
it('isLight(rgb(255, 155, 0)): -> false', () => {
it('isLight(rgb(255, 155, 0)): -> false', function() {
should.equal(Colorfuls.isLight('rgb(255, 155, 0)'), true)
})

// rgba
it('rgba.fade(): rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)', () => {
it('rgba.fade(): rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)', function() {
should.equal(Colorfuls.Color('rgba(10, 10, 10, 0.8)').fade(0.5).toRgba(), 'rgba(10, 10, 10, 0.4)')
})
it('rgba.opaque(): rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1)', () => {
it('rgba.opaque(): rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1)', function() {
should.equal(Colorfuls.Color('rgba(10, 10, 10, 0.8)').opaque(0.5).toRgba(), 'rgba(10, 10, 10, 1)')
})

// hsla
it('hsla.rotate(180): hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)', () => {
it('hsla.rotate(180): hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)', function() {
should.equal(Colorfuls.Color('hsl(60, 20%, 20%)').rotate(180).toHsl(), 'hsl(240, 20%, 20%)')
})
it('hsla.rotate(-90): hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)', () => {
it('hsla.rotate(-90): hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)', function() {
should.equal(Colorfuls.Color('hsl(60, 20%, 20%)').rotate(-90).toHsl(), 'hsl(330, 20%, 20%)')
})
it('hsla.saturate(0.5): hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)', () => {
it('hsla.saturate(0.5): hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)', function() {
should.equal(Colorfuls.Color('hsl(100, 50%, 50%)').saturate(0.5).toHsl(), 'hsl(100, 75%, 50%)')
})
it('hsla.desaturate(0.5): hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)', () => {
it('hsla.desaturate(0.5): hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)', function() {
should.equal(Colorfuls.Color('hsl(100, 50%, 50%)').desaturate(0.5).toHsl(), 'hsl(100, 25%, 50%)')
})
it('hsla.lighten(0.5): hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)', () => {
it('hsla.lighten(0.5): hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)', function() {
should.equal(Colorfuls.Color('hsl(100, 50%, 50%)').lighten(0.5).toHsl(), 'hsl(100, 50%, 75%)')
})
it('hsla.darken(0.5): hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)', () => {
it('hsla.darken(0.5): hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)', function() {
should.equal(Colorfuls.Color('hsl(100, 50%, 50%)').darken(0.5).toHsl(), 'hsl(100, 50%, 25%)')
})
})

// mix
describe('Mix', () => {
it('mix(#f00, #00f) -> #800080', () => {
describe('Mix', function() {
it('mix(#f00, #00f) -> #800080', function() {
should.equal(Colorfuls.mix('#f00', '#00f').toHex(), '#800080')
})
it('mix(#f00, #00f, 25%) -> #3F00BF', () => {
it('mix(#f00, #00f, 25%) -> #3F00BF', function() {
should.equal(Colorfuls.mix('#f00', '#00f', '25%').toHex(), '#4000BF')
})
it('mix(rgba(255, 0, 0, 0.5), #00f) -> rgba(64, 0, 191, 0.75)', () => {
it('mix(rgba(255, 0, 0, 0.5), #00f) -> rgba(64, 0, 191, 0.75)', function() {
should.equal(Colorfuls.mix('rgba(255, 0, 0, 0.5)', '#00f').toRgba(), 'rgba(64, 0, 191, 0.75)')
})
})

// gradient
describe('Gradient', () => {
it('gradient(#000, #fff).step(0.5) -> #808080', () => {
describe('Gradient', function() {
it('gradient(#000, #fff).step(0.5) -> #808080', function() {
should.equal(Colorfuls.gradient('#000', '#fff').step(0.5).toHex(), '#808080')
})
it('gradient(#000, #fff).steps(3) -> #000000, #808080, #FFFFFF', () => {
it('gradient(#000, #fff).steps(3) -> #000000, #808080, #FFFFFF', function() {
should.equal(Colorfuls.gradient('#000', '#fff').steps(3).toHexs().join(', '), '#000000, #808080, #FFFFFF')
})
it('linearGradient(#000, #fff, #000).steps(3) -> #000000, #FFFFFF, #000000', () => {
it('linearGradient(#000, #fff, #000).steps(3) -> #000000, #FFFFFF, #000000', function() {
should.equal(
Colorfuls.linearGradient('#000', '#fff', '#000').steps(3).toHexs().join(', '),
'#000000, #FFFFFF, #000000'
)
})
it('linearGradient(#000, #fff, #000).steps(5) -> #000000, #808080, #FFFFFF, #808080, #000000', () => {
it('linearGradient(#000, #fff, #000).steps(5) -> #000000, #808080, #FFFFFF, #808080, #000000', function() {
should.equal(
Colorfuls.linearGradient('#000', '#fff', '#000').steps(5).toHexs().join(', '),
'#000000, #808080, #FFFFFF, #808080, #000000'
)
})
it('linearGradient(#000, #111, #222, #333, [#444, 0.4], #fff).steps(11) -> #000000, #111111, #222222, #333333, #444444, #636363, #828282, #A2A2A2, #C1C1C1, #E0E0E0, #FFFFFF', () => {
it('linearGradient(#000, #111, #222, #333, [#444, 0.4], #fff).steps(11) -> #000000, #111111, #222222, #333333, #444444, #636363, #828282, #A2A2A2, #C1C1C1, #E0E0E0, #FFFFFF', function() {
should.equal(
Colorfuls.linearGradient('#000', '#111', '#222', '#333', ['#444', '40%'], '#fff').steps(11).toHexs().join(', '),
'#000000, #111111, #222222, #333333, #444444, #636363, #828282, #A2A2A2, #C1C1C1, #E0E0E0, #FFFFFF'
)
})
it('linearGradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)).steps(5) -> rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1)', () => {
it('linearGradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)).steps(5) -> rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1)', function() {
should.equal(
Colorfuls.linearGradient(
'rgba(0, 0, 0, 0)',
Expand Down

0 comments on commit ff25fb4

Please sign in to comment.