@acrodata/gradient-picker
Version:
A powerful and beautiful gradient picker.
79 lines • 11.3 kB
JavaScript
import { resolveColorInterp, resolvePosition, resolveStops, split } from './utils';
const set = new Set(['from', 'in', 'at']);
function resolvePrefix(k, props, start, end) {
switch (k) {
case 'from':
return { angle: props.slice(start, end).join(' ') };
case 'at':
return { position: resolvePosition(props.slice(start, end).join(' ')) };
case 'in': {
const arr = props.slice(start, end);
return {
color: resolveColorInterp(arr.join(' ')),
};
}
default:
return null;
}
}
export function parseConicGradient(input) {
if (!/(repeating-)?conic-gradient/.test(input))
throw new SyntaxError(`could not find syntax for this item: ${input}`);
const [, repeating, props] = input
.replace(/[\n\t]/g, '')
.match(/(repeating-)?conic-gradient\((.+)\)/);
const result = {
repeating: Boolean(repeating),
angle: '0deg',
position: {
x: { type: 'keyword', value: 'center' },
y: { type: 'keyword', value: 'center' },
},
stops: [],
};
const properties = split(props).map(v => v.trim());
const prefix = split(properties[0], /\s+/);
let k = '';
let j = 0;
for (let i = 0, n = prefix.length; i < n; i++) {
if (set.has(prefix[i])) {
if (i > 0) {
Object.assign(result, resolvePrefix(k, prefix, j, i));
}
k = prefix[i];
j = i + 1;
}
}
if (k) {
Object.assign(result, resolvePrefix(k, prefix, j, prefix.length));
properties.shift();
}
return { ...result, stops: resolveStops(properties) };
}
export function stringifyConicGradient(input) {
const { repeating, angle, position, color, stops } = input;
const type = repeating ? 'repeating-conic-gradient' : 'conic-gradient';
const prefixArr = [];
if (angle.trim()) {
prefixArr.push(`from ${angle}`);
}
const posX = position.x.value;
const posY = position.y.value;
const pos = posX.trim() || posY.trim() ? 'at ' + `${posX} ${posY}`.trim() : '';
if (pos) {
prefixArr.push(pos);
}
if (color && color.space) {
prefixArr.push(`in ${color.space} ${color.method || ''}`.trim());
}
const props = [];
if (prefixArr.length > 0) {
props.push(prefixArr.join(' '));
}
const stopsStr = stops
.map(s => `${s.color} ${s.offset?.value}${s.offset?.unit}`.trim())
.join(', ');
props.push(stopsStr);
return `${type}(${props.join(', ')})`;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uaWMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmFkaWVudC1waWNrZXIvc3JjL2xpYi9wYXJzZXIvY29uaWMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLGtCQUFrQixFQUFFLGVBQWUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBYW5GLE1BQU0sR0FBRyxHQUFHLElBQUksR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDO0FBRTFDLFNBQVMsYUFBYSxDQUFDLENBQVMsRUFBRSxLQUFlLEVBQUUsS0FBYSxFQUFFLEdBQVc7SUFDM0UsUUFBUSxDQUFDLEVBQUUsQ0FBQztRQUNWLEtBQUssTUFBTTtZQUNULE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUM7UUFDdEQsS0FBSyxJQUFJO1lBQ1AsT0FBTyxFQUFFLFFBQVEsRUFBRSxlQUFlLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUMxRSxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUM7WUFDVixNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLEtBQUssRUFBRSxHQUFHLENBQUMsQ0FBQztZQUNwQyxPQUFPO2dCQUNMLEtBQUssRUFBRSxrQkFBa0IsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQ3pDLENBQUM7UUFDSixDQUFDO1FBQ0Q7WUFDRSxPQUFPLElBQUksQ0FBQztJQUNoQixDQUFDO0FBQ0gsQ0FBQztBQUVELE1BQU0sVUFBVSxrQkFBa0IsQ0FBQyxLQUFhO0lB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LCBQb3NpdGlvblByb3BlcnR5VmFsdWUgfSBmcm9tICcuL3R5cGUnO1xuaW1wb3J0IHsgcmVzb2x2ZUNvbG9ySW50ZXJwLCByZXNvbHZlUG9zaXRpb24sIHJlc29sdmVTdG9wcywgc3BsaXQgfSBmcm9tICcuL3V0aWxzJztcblxuZXhwb3J0IGludGVyZmFjZSBDb25pY0dyYWRpZW50UmVzdWx0IHtcbiAgcmVwZWF0aW5nOiBib29sZWFuO1xuICBhbmdsZTogc3RyaW5nO1xuICBwb3NpdGlvbjoge1xuICAgIHg6IFBvc2l0aW9uUHJvcGVydHlWYWx1ZTtcbiAgICB5OiBQb3NpdGlvblByb3BlcnR5VmFsdWU7XG4gIH07XG4gIGNvbG9yPzogQ29sb3I7XG4gIHN0b3BzOiBDb2xvclN0b3BbXTtcbn1cblxuY29uc3Qgc2V0ID0gbmV3IFNldChbJ2Zyb20nLCAnaW4nLCAnYXQnXSk7XG5cbmZ1bmN0aW9uIHJlc29sdmVQcmVmaXgoazogc3RyaW5nLCBwcm9wczogc3RyaW5nW10sIHN0YXJ0OiBudW1iZXIsIGVuZDogbnVtYmVyKSB7XG4gIHN3aXRjaCAoaykge1xuICAgIGNhc2UgJ2Zyb20nOlxuICAgICAgcmV0dXJuIHsgYW5nbGU6IHByb3BzLnNsaWNlKHN0YXJ0LCBlbmQpLmpvaW4oJyAnKSB9O1xuICAgIGNhc2UgJ2F0JzpcbiAgICAgIHJldHVybiB7IHBvc2l0aW9uOiByZXNvbHZlUG9zaXRpb24ocHJvcHMuc2xpY2Uoc3RhcnQsIGVuZCkuam9pbignICcpKSB9O1xuICAgIGNhc2UgJ2luJzoge1xuICAgICAgY29uc3QgYXJyID0gcHJvcHMuc2xpY2Uoc3RhcnQsIGVuZCk7XG4gICAgICByZXR1cm4ge1xuICAgICAgICBjb2xvcjogcmVzb2x2ZUNvbG9ySW50ZXJwKGFyci5qb2luKCcgJykpLFxuICAgICAgfTtcbiAgICB9XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBudWxsO1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBwYXJzZUNvbmljR3JhZGllbnQoaW5wdXQ6IHN0cmluZyk6IENvbmljR3JhZGllbnRSZXN1bHQge1xuICBpZiAoIS8ocmVwZWF0aW5nLSk/Y29uaWMtZ3JhZGllbnQvLnRlc3QoaW5wdXQpKVxuICAgIHRocm93IG5ldyBTeW50YXhFcnJvcihgY291bGQgbm90IGZpbmQgc3ludGF4IGZvciB0aGlzIGl0ZW06ICR7aW5wdXR9YCk7XG5cbiAgY29uc3QgWywgcmVwZWF0aW5nLCBwcm9wc10gPSBpbnB1dFxuICAgIC5yZXBsYWNlKC9bXFxuXFx0XS9nLCAnJylcbiAgICAubWF0Y2goLyhyZXBlYXRpbmctKT9jb25pYy1ncmFkaWVudFxcKCguKylcXCkvKSE7XG4gIGNvbnN0IHJlc3VsdDogQ29uaWNHcmFkaWVudFJlc3VsdCA9IHtcbiAgICByZXBlYXRpbmc6IEJvb2xlYW4ocmVwZWF0aW5nKSxcbiAgICBhbmdsZTogJzBkZWcnLFxuICAgIHBvc2l0aW9uOiB7XG4gICAgICB4OiB7IHR5cGU6ICdrZXl3b3JkJywgdmFsdWU6ICdjZW50ZXInIH0sXG4gICAgICB5OiB7IHR5cGU6ICdrZXl3b3JkJywgdmFsdWU6ICdjZW50ZXInIH0sXG4gICAgfSxcbiAgICBzdG9wczogW10sXG4gIH07XG5cbiAgY29uc3QgcHJvcGVydGllcyA9IHNwbGl0KHByb3BzKS5tYXAodiA9PiB2LnRyaW0oKSk7XG5cbiAgY29uc3QgcHJlZml4ID0gc3BsaXQocHJvcGVydGllc1swXSwgL1xccysvKTtcblxuICBsZXQgayA9ICcnO1xuICBsZXQgaiA9IDA7XG4gIGZvciAobGV0IGkgPSAwLCBuID0gcHJlZml4Lmxlbmd0aDsgaSA8IG47IGkrKykge1xuICAgIGlmIChzZXQuaGFzKHByZWZpeFtpXSkpIHtcbiAgICAgIGlmIChpID4gMCkge1xuICAgICAgICBPYmplY3QuYXNzaWduKHJlc3VsdCwgcmVzb2x2ZVByZWZpeChrLCBwcmVmaXgsIGosIGkpKTtcbiAgICAgIH1cbiAgICAgIGsgPSBwcmVmaXhbaV07XG4gICAgICBqID0gaSArIDE7XG4gICAgfVxuICB9XG5cbiAgaWYgKGspIHtcbiAgICBPYmplY3QuYXNzaWduKHJlc3VsdCwgcmVzb2x2ZVByZWZpeChrLCBwcmVmaXgsIGosIHByZWZpeC5sZW5ndGgpKTtcbiAgICBwcm9wZXJ0aWVzLnNoaWZ0KCk7XG4gIH1cblxuICByZXR1cm4geyAuLi5yZXN1bHQsIHN0b3BzOiByZXNvbHZlU3RvcHMocHJvcGVydGllcykgfTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHN0cmluZ2lmeUNvbmljR3JhZGllbnQoaW5wdXQ6IENvbmljR3JhZGllbnRSZXN1bHQpIHtcbiAgY29uc3QgeyByZXBlYXRpbmcsIGFuZ2xlLCBwb3NpdGlvbiwgY29sb3IsIHN0b3BzIH0gPSBpbnB1dDtcblxuICBjb25zdCB0eXBlID0gcmVwZWF0aW5nID8gJ3JlcGVhdGluZy1jb25pYy1ncmFkaWVudCcgOiAnY29uaWMtZ3JhZGllbnQnO1xuXG4gIGNvbnN0IHByZWZpeEFycjogc3RyaW5nW10gPSBbXTtcblxuICBpZiAoYW5nbGUudHJpbSgpKSB7XG4gICAgcHJlZml4QXJyLnB1c2goYGZyb20gJHthbmdsZX1gKTtcbiAgfVxuXG4gIGNvbnN0IHBvc1ggPSBwb3NpdGlvbi54LnZhbHVlO1xuICBjb25zdCBwb3NZID0gcG9zaXRpb24ueS52YWx1ZTtcbiAgY29uc3QgcG9zID0gcG9zWC50cmltKCkgfHwgcG9zWS50cmltKCkgPyAnYXQgJyArIGAke3Bvc1h9ICR7cG9zWX1gLnRyaW0oKSA6ICcnO1xuICBpZiAocG9zKSB7XG4gICAgcHJlZml4QXJyLnB1c2gocG9zKTtcbiAgfVxuXG4gIGlmIChjb2xvciAmJiBjb2xvci5zcGFjZSkge1xuICAgIHByZWZpeEFyci5wdXNoKGBpbiAke2NvbG9yLnNwYWNlfSAke2NvbG9yLm1ldGhvZCB8fCAnJ31gLnRyaW0oKSk7XG4gIH1cblxuICBjb25zdCBwcm9wczogc3RyaW5nW10gPSBbXTtcblxuICBpZiAocHJlZml4QXJyLmxlbmd0aCA+IDApIHtcbiAgICBwcm9wcy5wdXNoKHByZWZpeEFyci5qb2luKCcgJykpO1xuICB9XG5cbiAgY29uc3Qgc3RvcHNTdHIgPSBzdG9wc1xuICAgIC5tYXAocyA9PiBgJHtzLmNvbG9yfSAke3Mub2Zmc2V0Py52YWx1ZX0ke3Mub2Zmc2V0Py51bml0fWAudHJpbSgpKVxuICAgIC5qb2luKCcsICcpO1xuXG4gIHByb3BzLnB1c2goc3RvcHNTdHIpO1xuXG4gIHJldHVybiBgJHt0eXBlfSgke3Byb3BzLmpvaW4oJywgJyl9KWA7XG59XG4iXX0=