1 | "use strict";
|
---|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
---|
3 | var tslib_1 = require("tslib");
|
---|
4 | var dimension_1 = tslib_1.__importDefault(require("../tree/dimension"));
|
---|
5 | var color_1 = tslib_1.__importDefault(require("../tree/color"));
|
---|
6 | var expression_1 = tslib_1.__importDefault(require("../tree/expression"));
|
---|
7 | var quoted_1 = tslib_1.__importDefault(require("../tree/quoted"));
|
---|
8 | var url_1 = tslib_1.__importDefault(require("../tree/url"));
|
---|
9 | exports.default = (function (environment) {
|
---|
10 | return { 'svg-gradient': function (direction) {
|
---|
11 | var stops;
|
---|
12 | var gradientDirectionSvg;
|
---|
13 | var gradientType = 'linear';
|
---|
14 | var rectangleDimension = 'x="0" y="0" width="1" height="1"';
|
---|
15 | var renderEnv = { compress: false };
|
---|
16 | var returner;
|
---|
17 | var directionValue = direction.toCSS(renderEnv);
|
---|
18 | var i;
|
---|
19 | var color;
|
---|
20 | var position;
|
---|
21 | var positionValue;
|
---|
22 | var alpha;
|
---|
23 | function throwArgumentDescriptor() {
|
---|
24 | throw { type: 'Argument',
|
---|
25 | message: 'svg-gradient expects direction, start_color [start_position], [color position,]...,' +
|
---|
26 | ' end_color [end_position] or direction, color list' };
|
---|
27 | }
|
---|
28 | if (arguments.length == 2) {
|
---|
29 | if (arguments[1].value.length < 2) {
|
---|
30 | throwArgumentDescriptor();
|
---|
31 | }
|
---|
32 | stops = arguments[1].value;
|
---|
33 | }
|
---|
34 | else if (arguments.length < 3) {
|
---|
35 | throwArgumentDescriptor();
|
---|
36 | }
|
---|
37 | else {
|
---|
38 | stops = Array.prototype.slice.call(arguments, 1);
|
---|
39 | }
|
---|
40 | switch (directionValue) {
|
---|
41 | case 'to bottom':
|
---|
42 | gradientDirectionSvg = 'x1="0%" y1="0%" x2="0%" y2="100%"';
|
---|
43 | break;
|
---|
44 | case 'to right':
|
---|
45 | gradientDirectionSvg = 'x1="0%" y1="0%" x2="100%" y2="0%"';
|
---|
46 | break;
|
---|
47 | case 'to bottom right':
|
---|
48 | gradientDirectionSvg = 'x1="0%" y1="0%" x2="100%" y2="100%"';
|
---|
49 | break;
|
---|
50 | case 'to top right':
|
---|
51 | gradientDirectionSvg = 'x1="0%" y1="100%" x2="100%" y2="0%"';
|
---|
52 | break;
|
---|
53 | case 'ellipse':
|
---|
54 | case 'ellipse at center':
|
---|
55 | gradientType = 'radial';
|
---|
56 | gradientDirectionSvg = 'cx="50%" cy="50%" r="75%"';
|
---|
57 | rectangleDimension = 'x="-50" y="-50" width="101" height="101"';
|
---|
58 | break;
|
---|
59 | default:
|
---|
60 | throw { type: 'Argument', message: 'svg-gradient direction must be \'to bottom\', \'to right\',' +
|
---|
61 | ' \'to bottom right\', \'to top right\' or \'ellipse at center\'' };
|
---|
62 | }
|
---|
63 | returner = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><" + gradientType + "Gradient id=\"g\" " + gradientDirectionSvg + ">";
|
---|
64 | for (i = 0; i < stops.length; i += 1) {
|
---|
65 | if (stops[i] instanceof expression_1.default) {
|
---|
66 | color = stops[i].value[0];
|
---|
67 | position = stops[i].value[1];
|
---|
68 | }
|
---|
69 | else {
|
---|
70 | color = stops[i];
|
---|
71 | position = undefined;
|
---|
72 | }
|
---|
73 | if (!(color instanceof color_1.default) || (!((i === 0 || i + 1 === stops.length) && position === undefined) && !(position instanceof dimension_1.default))) {
|
---|
74 | throwArgumentDescriptor();
|
---|
75 | }
|
---|
76 | positionValue = position ? position.toCSS(renderEnv) : i === 0 ? '0%' : '100%';
|
---|
77 | alpha = color.alpha;
|
---|
78 | returner += "<stop offset=\"" + positionValue + "\" stop-color=\"" + color.toRGB() + "\"" + (alpha < 1 ? " stop-opacity=\"" + alpha + "\"" : '') + "/>";
|
---|
79 | }
|
---|
80 | returner += "</" + gradientType + "Gradient><rect " + rectangleDimension + " fill=\"url(#g)\" /></svg>";
|
---|
81 | returner = encodeURIComponent(returner);
|
---|
82 | returner = "data:image/svg+xml," + returner;
|
---|
83 | return new url_1.default(new quoted_1.default("'" + returner + "'", returner, false, this.index, this.currentFileInfo), this.index, this.currentFileInfo);
|
---|
84 | } };
|
---|
85 | });
|
---|
86 | //# sourceMappingURL=svg.js.map |
---|