Load temaki icons, make the icon loader more data driven

This commit is contained in:
Bryan Housel
2018-06-05 12:38:23 -04:00
parent f006d35962
commit 1b0cd63633
2 changed files with 28 additions and 19 deletions
+26 -19
View File
@@ -8,21 +8,6 @@ import { select as d3_select } from 'd3-selection';
*/
export function svgDefs(context) {
function SVGSpriteDefinition(id, href) {
return function(defs) {
d3_request(href)
.mimeType('image/svg+xml')
.response(function(xhr) { return xhr.responseXML; })
.get(function(err, svg) {
if (err) return;
defs.node().appendChild(
d3_select(svg.documentElement).attr('id', id).node()
);
});
};
}
return function drawDefs(selection) {
var defs = selection.append('defs');
@@ -132,9 +117,31 @@ export function svgDefs(context) {
.attr('height', function (d) { return d; });
// symbol spritesheets
defs
.call(SVGSpriteDefinition('iD-sprite', context.imagePath('iD-sprite.svg')))
.call(SVGSpriteDefinition('maki-sprite', context.imagePath('maki-sprite.svg')))
.call(SVGSpriteDefinition('community-sprite', context.imagePath('community-sprite.svg')));
defs.selectAll('.spritesheet')
.data([
'iD-sprite',
'maki-sprite',
'temaki-sprite',
'community-sprite'
])
.enter()
.append('g')
.attr('class', function (d) { return 'spritesheet spritesheet-' + d; })
.each(loadSprite);
function loadSprite(d) {
var url = context.imagePath(d + '.svg');
var node = d3_select(this).node();
d3_request(url)
.mimeType('image/svg+xml')
.response(function(xhr) { return xhr.responseXML; })
.get(function(err, svg) {
if (err) return;
node.appendChild(
d3_select(svg.documentElement).attr('id', d).node()
);
});
}
};
}
+2
View File
@@ -19,6 +19,7 @@
"dist:svg:id": "node svg/spriteify.js --svg svg/iD-sprite.src.svg --json svg/iD-sprite.json > dist/img/iD-sprite.svg",
"dist:svg:community": "svg-sprite --symbol --symbol-dest . --shape-id-generator \"community-%s\" --symbol-sprite dist/img/community-sprite.svg node_modules/osm-community-index/dist/img/*.svg",
"dist:svg:maki": "svg-sprite --symbol --symbol-dest . --symbol-sprite dist/img/maki-sprite.svg node_modules/@mapbox/maki/icons/*.svg",
"dist:svg:temaki": "svg-sprite --symbol --symbol-dest . --shape-id-generator \"temaki-%s\" --symbol-sprite dist/img/temaki-sprite.svg node_modules/temaki/icons/*.svg",
"imagery": "node data/update_imagery",
"lint": "eslint *.js js/id test/spec modules",
"start": "node development_server.js develop",
@@ -73,6 +74,7 @@
"sinon-chai": "^3.1.0",
"smash": "0.0",
"svg-sprite": "1.4.0",
"temaki": "1.0.0",
"uglify-js": "~3.4.0",
"xml2js": "^0.4.17",
"xmlbuilder": "^10.0.0"