Stringify
This commit is contained in:
parent
37e8f70262
commit
3559c23b44
112
build/node.js
112
build/node.js
|
@ -9,39 +9,115 @@ GradientParser.stringify = (function() {
|
||||||
var visitor = {
|
var visitor = {
|
||||||
|
|
||||||
'visit_linear-gradient': function(node) {
|
'visit_linear-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_repeating-linear-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_radial-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_repeating-radial-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_gradient': function(node) {
|
||||||
var orientation = visitor.visit(node.orientation);
|
var orientation = visitor.visit(node.orientation);
|
||||||
if (orientation) {
|
if (orientation) {
|
||||||
orientation += ', ';
|
orientation += ', ';
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'linear-gradient('+ orientation + visitor.visit(node.colorStops) + ')';
|
return node.type + '(' + orientation + visitor.visit(node.colorStops) + ')';
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_literal: function(node) {
|
'visit_shape': function(node) {
|
||||||
|
var result = node.value,
|
||||||
|
at = visitor.visit(node.at),
|
||||||
|
style = visitor.visit(node.style);
|
||||||
|
|
||||||
|
if (style) {
|
||||||
|
result += ' ' + style;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (at) {
|
||||||
|
result += ' at ' + at;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_default-radial': function(node) {
|
||||||
|
var result = '',
|
||||||
|
at = visitor.visit(node.at);
|
||||||
|
|
||||||
|
if (at) {
|
||||||
|
result += at;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_extent-keyword': function(node) {
|
||||||
return node.value;
|
return node.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_angular: function(node) {
|
'visit_position-keyword': function(node) {
|
||||||
|
return node.value;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_position': function(node) {
|
||||||
|
return visitor.visit(node.value.x) + ' ' + visitor.visit(node.value.y);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_%': function(node) {
|
||||||
|
return node.value + '%';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_em': function(node) {
|
||||||
|
return node.value + 'em';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_px': function(node) {
|
||||||
|
return node.value + 'px';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_literal': function(node) {
|
||||||
|
return visitor.visit_color(node.value, node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_hex': function(node) {
|
||||||
|
return visitor.visit_color('#' + node.value, node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_rgb': function(node) {
|
||||||
|
return visitor.visit_color('rgb(' + node.value.join(', ') + ')', node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_rgba': function(node) {
|
||||||
|
return visitor.visit_color('rgba(' + node.value.join(', ') + ')', node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_color': function(resultColor, node) {
|
||||||
|
var result = resultColor,
|
||||||
|
length = visitor.visit(node.length);
|
||||||
|
|
||||||
|
if (length) {
|
||||||
|
result += ' ' + length;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_angular': function(node) {
|
||||||
return node.value + 'deg';
|
return node.value + 'deg';
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_hex: function(node) {
|
'visit_directional': function(node) {
|
||||||
return '#' + node.value;
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_rgb: function(node) {
|
|
||||||
return 'rgb(' + node.value.join(', ') + ')';
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_rgba: function(node) {
|
|
||||||
return 'rgba(' + node.value.join(', ') + ')';
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_directional: function(node) {
|
|
||||||
return 'to ' + node.value;
|
return 'to ' + node.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_array: function(elements) {
|
'visit_array': function(elements) {
|
||||||
var result = '',
|
var result = '',
|
||||||
size = elements.length;
|
size = elements.length;
|
||||||
|
|
||||||
|
@ -55,7 +131,7 @@ GradientParser.stringify = (function() {
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit: function(element) {
|
'visit': function(element) {
|
||||||
if (!element) {
|
if (!element) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
112
build/web.js
112
build/web.js
|
@ -349,39 +349,115 @@ GradientParser.stringify = (function() {
|
||||||
var visitor = {
|
var visitor = {
|
||||||
|
|
||||||
'visit_linear-gradient': function(node) {
|
'visit_linear-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_repeating-linear-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_radial-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_repeating-radial-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_gradient': function(node) {
|
||||||
var orientation = visitor.visit(node.orientation);
|
var orientation = visitor.visit(node.orientation);
|
||||||
if (orientation) {
|
if (orientation) {
|
||||||
orientation += ', ';
|
orientation += ', ';
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'linear-gradient('+ orientation + visitor.visit(node.colorStops) + ')';
|
return node.type + '(' + orientation + visitor.visit(node.colorStops) + ')';
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_literal: function(node) {
|
'visit_shape': function(node) {
|
||||||
|
var result = node.value,
|
||||||
|
at = visitor.visit(node.at),
|
||||||
|
style = visitor.visit(node.style);
|
||||||
|
|
||||||
|
if (style) {
|
||||||
|
result += ' ' + style;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (at) {
|
||||||
|
result += ' at ' + at;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_default-radial': function(node) {
|
||||||
|
var result = '',
|
||||||
|
at = visitor.visit(node.at);
|
||||||
|
|
||||||
|
if (at) {
|
||||||
|
result += at;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_extent-keyword': function(node) {
|
||||||
return node.value;
|
return node.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_angular: function(node) {
|
'visit_position-keyword': function(node) {
|
||||||
|
return node.value;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_position': function(node) {
|
||||||
|
return visitor.visit(node.value.x) + ' ' + visitor.visit(node.value.y);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_%': function(node) {
|
||||||
|
return node.value + '%';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_em': function(node) {
|
||||||
|
return node.value + 'em';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_px': function(node) {
|
||||||
|
return node.value + 'px';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_literal': function(node) {
|
||||||
|
return visitor.visit_color(node.value, node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_hex': function(node) {
|
||||||
|
return visitor.visit_color('#' + node.value, node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_rgb': function(node) {
|
||||||
|
return visitor.visit_color('rgb(' + node.value.join(', ') + ')', node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_rgba': function(node) {
|
||||||
|
return visitor.visit_color('rgba(' + node.value.join(', ') + ')', node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_color': function(resultColor, node) {
|
||||||
|
var result = resultColor,
|
||||||
|
length = visitor.visit(node.length);
|
||||||
|
|
||||||
|
if (length) {
|
||||||
|
result += ' ' + length;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_angular': function(node) {
|
||||||
return node.value + 'deg';
|
return node.value + 'deg';
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_hex: function(node) {
|
'visit_directional': function(node) {
|
||||||
return '#' + node.value;
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_rgb: function(node) {
|
|
||||||
return 'rgb(' + node.value.join(', ') + ')';
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_rgba: function(node) {
|
|
||||||
return 'rgba(' + node.value.join(', ') + ')';
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_directional: function(node) {
|
|
||||||
return 'to ' + node.value;
|
return 'to ' + node.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_array: function(elements) {
|
'visit_array': function(elements) {
|
||||||
var result = '',
|
var result = '',
|
||||||
size = elements.length;
|
size = elements.length;
|
||||||
|
|
||||||
|
@ -395,7 +471,7 @@ GradientParser.stringify = (function() {
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit: function(element) {
|
'visit': function(element) {
|
||||||
if (!element) {
|
if (!element) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
112
lib/stringify.js
112
lib/stringify.js
|
@ -9,39 +9,115 @@ GradientParser.stringify = (function() {
|
||||||
var visitor = {
|
var visitor = {
|
||||||
|
|
||||||
'visit_linear-gradient': function(node) {
|
'visit_linear-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_repeating-linear-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_radial-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_repeating-radial-gradient': function(node) {
|
||||||
|
return visitor.visit_gradient(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_gradient': function(node) {
|
||||||
var orientation = visitor.visit(node.orientation);
|
var orientation = visitor.visit(node.orientation);
|
||||||
if (orientation) {
|
if (orientation) {
|
||||||
orientation += ', ';
|
orientation += ', ';
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'linear-gradient('+ orientation + visitor.visit(node.colorStops) + ')';
|
return node.type + '(' + orientation + visitor.visit(node.colorStops) + ')';
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_literal: function(node) {
|
'visit_shape': function(node) {
|
||||||
|
var result = node.value,
|
||||||
|
at = visitor.visit(node.at),
|
||||||
|
style = visitor.visit(node.style);
|
||||||
|
|
||||||
|
if (style) {
|
||||||
|
result += ' ' + style;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (at) {
|
||||||
|
result += ' at ' + at;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_default-radial': function(node) {
|
||||||
|
var result = '',
|
||||||
|
at = visitor.visit(node.at);
|
||||||
|
|
||||||
|
if (at) {
|
||||||
|
result += at;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_extent-keyword': function(node) {
|
||||||
return node.value;
|
return node.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_angular: function(node) {
|
'visit_position-keyword': function(node) {
|
||||||
|
return node.value;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_position': function(node) {
|
||||||
|
return visitor.visit(node.value.x) + ' ' + visitor.visit(node.value.y);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_%': function(node) {
|
||||||
|
return node.value + '%';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_em': function(node) {
|
||||||
|
return node.value + 'em';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_px': function(node) {
|
||||||
|
return node.value + 'px';
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_literal': function(node) {
|
||||||
|
return visitor.visit_color(node.value, node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_hex': function(node) {
|
||||||
|
return visitor.visit_color('#' + node.value, node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_rgb': function(node) {
|
||||||
|
return visitor.visit_color('rgb(' + node.value.join(', ') + ')', node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_rgba': function(node) {
|
||||||
|
return visitor.visit_color('rgba(' + node.value.join(', ') + ')', node);
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_color': function(resultColor, node) {
|
||||||
|
var result = resultColor,
|
||||||
|
length = visitor.visit(node.length);
|
||||||
|
|
||||||
|
if (length) {
|
||||||
|
result += ' ' + length;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
'visit_angular': function(node) {
|
||||||
return node.value + 'deg';
|
return node.value + 'deg';
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_hex: function(node) {
|
'visit_directional': function(node) {
|
||||||
return '#' + node.value;
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_rgb: function(node) {
|
|
||||||
return 'rgb(' + node.value.join(', ') + ')';
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_rgba: function(node) {
|
|
||||||
return 'rgba(' + node.value.join(', ') + ')';
|
|
||||||
},
|
|
||||||
|
|
||||||
visit_directional: function(node) {
|
|
||||||
return 'to ' + node.value;
|
return 'to ' + node.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit_array: function(elements) {
|
'visit_array': function(elements) {
|
||||||
var result = '',
|
var result = '',
|
||||||
size = elements.length;
|
size = elements.length;
|
||||||
|
|
||||||
|
@ -55,7 +131,7 @@ GradientParser.stringify = (function() {
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
||||||
visit: function(element) {
|
'visit': function(element) {
|
||||||
if (!element) {
|
if (!element) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,10 @@
|
||||||
var expect = require('expect.js');
|
var expect = require('expect.js');
|
||||||
var gradients = require('build/node');
|
var gradients = require('build/node');
|
||||||
|
|
||||||
|
function pprint(ast) {
|
||||||
|
console.log(JSON.stringify(ast, true, 2));
|
||||||
|
}
|
||||||
|
|
||||||
describe('lib/stringify.js', function () {
|
describe('lib/stringify.js', function () {
|
||||||
var subject;
|
var subject;
|
||||||
|
|
||||||
|
@ -46,6 +50,49 @@ describe('lib/stringify.js', function () {
|
||||||
expect(gradients.stringify(gradients.parse(gradientDef))).to.equal(gradientDef);
|
expect(gradients.stringify(gradients.parse(gradientDef))).to.equal(gradientDef);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('all metric values', function() {
|
||||||
|
[
|
||||||
|
'px',
|
||||||
|
'em',
|
||||||
|
'%'
|
||||||
|
].forEach(function(metric) {
|
||||||
|
var expectedResult;
|
||||||
|
|
||||||
|
describe('stringify color stop for metric '+ metric, function() {
|
||||||
|
beforeEach(function() {
|
||||||
|
expectedResult = 'linear-gradient(blue 10.3' + metric + ', transparent)';
|
||||||
|
var ast = gradients.parse(expectedResult);
|
||||||
|
subject = gradients.stringify(ast);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should result as expected', function() {
|
||||||
|
expect(subject).to.equal(expectedResult);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('different radial declarations', function() {
|
||||||
|
[
|
||||||
|
'ellipse farthest-corner',
|
||||||
|
'ellipse cover',
|
||||||
|
'circle cover',
|
||||||
|
'center bottom, ellipse cover',
|
||||||
|
'circle at 87.23px -58.3px'
|
||||||
|
].forEach(function(declaration) {
|
||||||
|
|
||||||
|
it('should parse ' + declaration + ' declaration', function() {
|
||||||
|
var expectedResult = 'radial-gradient(' + declaration + ', red, blue)';
|
||||||
|
var ast = gradients.parse(expectedResult);
|
||||||
|
subject = gradients.stringify(ast);
|
||||||
|
|
||||||
|
expect(subject).to.equal(expectedResult);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue