Stringify
This commit is contained in:
parent
37e8f70262
commit
3559c23b44
4 changed files with 329 additions and 54 deletions
112
build/node.js
112
build/node.js
|
@ -9,39 +9,115 @@ GradientParser.stringify = (function() {
|
|||
var visitor = {
|
||||
|
||||
'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);
|
||||
if (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;
|
||||
},
|
||||
|
||||
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';
|
||||
},
|
||||
|
||||
visit_hex: 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) {
|
||||
'visit_directional': function(node) {
|
||||
return 'to ' + node.value;
|
||||
},
|
||||
|
||||
visit_array: function(elements) {
|
||||
'visit_array': function(elements) {
|
||||
var result = '',
|
||||
size = elements.length;
|
||||
|
||||
|
@ -55,7 +131,7 @@ GradientParser.stringify = (function() {
|
|||
return result;
|
||||
},
|
||||
|
||||
visit: function(element) {
|
||||
'visit': function(element) {
|
||||
if (!element) {
|
||||
return '';
|
||||
}
|
||||
|
|
112
build/web.js
112
build/web.js
|
@ -349,39 +349,115 @@ GradientParser.stringify = (function() {
|
|||
var visitor = {
|
||||
|
||||
'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);
|
||||
if (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;
|
||||
},
|
||||
|
||||
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';
|
||||
},
|
||||
|
||||
visit_hex: 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) {
|
||||
'visit_directional': function(node) {
|
||||
return 'to ' + node.value;
|
||||
},
|
||||
|
||||
visit_array: function(elements) {
|
||||
'visit_array': function(elements) {
|
||||
var result = '',
|
||||
size = elements.length;
|
||||
|
||||
|
@ -395,7 +471,7 @@ GradientParser.stringify = (function() {
|
|||
return result;
|
||||
},
|
||||
|
||||
visit: function(element) {
|
||||
'visit': function(element) {
|
||||
if (!element) {
|
||||
return '';
|
||||
}
|
||||
|
|
112
lib/stringify.js
112
lib/stringify.js
|
@ -9,39 +9,115 @@ GradientParser.stringify = (function() {
|
|||
var visitor = {
|
||||
|
||||
'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);
|
||||
if (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;
|
||||
},
|
||||
|
||||
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';
|
||||
},
|
||||
|
||||
visit_hex: 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) {
|
||||
'visit_directional': function(node) {
|
||||
return 'to ' + node.value;
|
||||
},
|
||||
|
||||
visit_array: function(elements) {
|
||||
'visit_array': function(elements) {
|
||||
var result = '',
|
||||
size = elements.length;
|
||||
|
||||
|
@ -55,7 +131,7 @@ GradientParser.stringify = (function() {
|
|||
return result;
|
||||
},
|
||||
|
||||
visit: function(element) {
|
||||
'visit': function(element) {
|
||||
if (!element) {
|
||||
return '';
|
||||
}
|
||||
|
|
|
@ -3,6 +3,10 @@
|
|||
var expect = require('expect.js');
|
||||
var gradients = require('build/node');
|
||||
|
||||
function pprint(ast) {
|
||||
console.log(JSON.stringify(ast, true, 2));
|
||||
}
|
||||
|
||||
describe('lib/stringify.js', function () {
|
||||
var subject;
|
||||
|
||||
|
@ -46,6 +50,49 @@ describe('lib/stringify.js', function () {
|
|||
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