mirror of
https://github.com/less/less.js.git
synced 2026-02-08 14:05:24 -05:00
84 lines
3.6 KiB
JavaScript
84 lines
3.6 KiB
JavaScript
module.exports = function(environment) {
|
|
var Dimension = require("../tree/dimension"),
|
|
Color = require("../tree/color"),
|
|
Anonymous = require("../tree/anonymous"),
|
|
URL = require("../tree/url"),
|
|
functionRegistry = require("./function-registry");
|
|
|
|
functionRegistry.add("svg-gradient", function(direction) {
|
|
|
|
function throwArgumentDescriptor() {
|
|
throw { type: "Argument", message: "svg-gradient expects direction, start_color [start_position], [color position,]..., end_color [end_position]" };
|
|
}
|
|
|
|
if (arguments.length < 3) {
|
|
throwArgumentDescriptor();
|
|
}
|
|
var stops = Array.prototype.slice.call(arguments, 1),
|
|
gradientDirectionSvg,
|
|
gradientType = "linear",
|
|
rectangleDimension = 'x="0" y="0" width="1" height="1"',
|
|
useBase64 = true,
|
|
renderEnv = {compress: false},
|
|
returner,
|
|
directionValue = direction.toCSS(renderEnv),
|
|
i, color, position, positionValue, alpha;
|
|
|
|
switch (directionValue) {
|
|
case "to bottom":
|
|
gradientDirectionSvg = 'x1="0%" y1="0%" x2="0%" y2="100%"';
|
|
break;
|
|
case "to right":
|
|
gradientDirectionSvg = 'x1="0%" y1="0%" x2="100%" y2="0%"';
|
|
break;
|
|
case "to bottom right":
|
|
gradientDirectionSvg = 'x1="0%" y1="0%" x2="100%" y2="100%"';
|
|
break;
|
|
case "to top right":
|
|
gradientDirectionSvg = 'x1="0%" y1="100%" x2="100%" y2="0%"';
|
|
break;
|
|
case "ellipse":
|
|
case "ellipse at center":
|
|
gradientType = "radial";
|
|
gradientDirectionSvg = 'cx="50%" cy="50%" r="75%"';
|
|
rectangleDimension = 'x="-50" y="-50" width="101" height="101"';
|
|
break;
|
|
default:
|
|
throw { type: "Argument", message: "svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center'" };
|
|
}
|
|
returner = '<?xml version="1.0" ?>' +
|
|
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">' +
|
|
'<' + gradientType + 'Gradient id="gradient" gradientUnits="userSpaceOnUse" ' + gradientDirectionSvg + '>';
|
|
|
|
for (i = 0; i < stops.length; i+= 1) {
|
|
if (stops[i].value) {
|
|
color = stops[i].value[0];
|
|
position = stops[i].value[1];
|
|
} else {
|
|
color = stops[i];
|
|
position = undefined;
|
|
}
|
|
|
|
if (!(color instanceof Color) || (!((i === 0 || i+1 === stops.length) && position === undefined) && !(position instanceof Dimension))) {
|
|
throwArgumentDescriptor();
|
|
}
|
|
positionValue = position ? position.toCSS(renderEnv) : i === 0 ? "0%" : "100%";
|
|
alpha = color.alpha;
|
|
returner += '<stop offset="' + positionValue + '" stop-color="' + color.toRGB() + '"' + (alpha < 1 ? ' stop-opacity="' + alpha + '"' : '') + '/>';
|
|
}
|
|
returner += '</' + gradientType + 'Gradient>' +
|
|
'<rect ' + rectangleDimension + ' fill="url(#gradient)" /></svg>';
|
|
|
|
if (useBase64) {
|
|
try {
|
|
returner = environment.encodeBase64(returner);
|
|
} catch(e) {
|
|
useBase64 = false;
|
|
}
|
|
}
|
|
|
|
returner = "'data:image/svg+xml" + (useBase64 ? ";base64" : "") + "," + returner + "'";
|
|
return new URL(new Anonymous(returner), this.index, this.currentFileInfo);
|
|
});
|
|
};
|