CSS styling for all preset icons

This commit is contained in:
Bryan Housel
2015-11-04 02:30:44 -05:00
parent d5a239159f
commit eb88b67673
10 changed files with 586 additions and 697 deletions
+22 -14
View File
@@ -2,15 +2,26 @@ iD.ui.PresetIcon = function() {
var preset, geometry;
function presetIcon(selection) {
selection.each(setup);
selection.each(render);
}
function setup() {
function render() {
var selection = d3.select(this),
p = preset.apply(this, arguments),
geom = geometry.apply(this, arguments),
icon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'),
isMaki = iD.data.featureIcons.hasOwnProperty(icon + '-24');
maki = iD.data.featureIcons.hasOwnProperty(icon + '-24');
function tag_classes(p) {
var s = '';
for (var i in p.tags) {
s += ' tag-' + i;
if (p.tags[i] !== '*') {
s += ' tag-' + i + '-' + p.tags[i];
}
}
return s;
}
var $fill = selection.selectAll('.preset-icon-fill')
.data([0]);
@@ -18,11 +29,7 @@ iD.ui.PresetIcon = function() {
$fill.enter().append('div');
$fill.attr('class', function() {
var s = 'preset-icon-fill preset-icon-fill-' + geom;
for (var i in p.tags) {
s += ' tag-' + i + ' tag-' + i + '-' + p.tags[i];
}
return s;
return 'preset-icon-fill preset-icon-fill-' + geom + tag_classes(p);
});
var $frame = selection.selectAll('.preset-icon-frame')
@@ -46,14 +53,15 @@ iD.ui.PresetIcon = function() {
.call(iD.svg.Icon(''));
$icon
.classed('preset-icon-60', !isMaki)
.classed('preset-icon-32', isMaki);
.attr('class', 'preset-icon preset-icon-' + (maki ? '32' : '60'));
$icon.selectAll('use')
.attr('href', function() {
// workaround: maki parking-24 broken?
return '#' + icon + (isMaki ? ( icon === 'parking' ? '-18' : '-24') : '');
$icon.selectAll('svg')
.attr('class', function() {
return 'icon ' + icon + tag_classes(p);
});
$icon.selectAll('use') // workaround: maki parking-24 broken?
.attr('href', '#' + icon + (maki ? ( icon === 'parking' ? '-18' : '-24') : ''));
}
presetIcon.preset = function(_) {