diff --git a/Makefile b/Makefile
index c88d64244..6d585865f 100644
--- a/Makefile
+++ b/Makefile
@@ -39,6 +39,8 @@ all: \
js/id/format/*.js \
js/id/graph/*.js \
js/id/renderer/*.js \
+ js/id/svg.js \
+ js/id/svg/*.js \
js/id/ui/*.js \
js/id/end.js
diff --git a/index.html b/index.html
index 77684f97c..5c2624e5b 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,7 @@
+
diff --git a/js/id/renderer/style.js b/js/id/renderer/style.js
index ed61f44a8..734ce10ca 100644
--- a/js/id/renderer/style.js
+++ b/js/id/renderer/style.js
@@ -36,32 +36,3 @@ iD.Style.waystack = function(a, b) {
}
return as - bs;
};
-
-iD.Style.TAG_CLASSES = iD.util.trueObj([
- 'highway', 'railway', 'motorway', 'amenity', 'natural',
- 'landuse', 'building', 'oneway', 'bridge'
-]);
-
-iD.Style.styleClasses = function() {
- var tagClassRe = /^tag-/;
- return function(selection) {
- selection.each(function(d, i) {
- var classes, value = this.className;
-
- if (value.baseVal !== undefined) value = value.baseVal;
-
- classes = value.trim().split(/\s+/).filter(function(name) {
- return name.length && !tagClassRe.test(name);
- });
-
- var tags = d.tags;
- for (var k in tags) {
- if (!iD.Style.TAG_CLASSES[k]) continue;
- classes.push('tag-' + k);
- classes.push('tag-' + k + '-' + tags[k]);
- }
-
- return d3.select(this).attr('class', classes.join(' '));
- });
- };
-};
diff --git a/js/id/svg/areas.js b/js/id/svg/areas.js
index ec77d95c2..e0c2cfed0 100644
--- a/js/id/svg/areas.js
+++ b/js/id/svg/areas.js
@@ -28,7 +28,7 @@ iD.svg.Areas = function() {
paths
.order()
.attr('d', lineString)
- .call(iD.Style.styleClasses());
+ .call(iD.svg.TagClasses());
paths.exit()
.remove();
diff --git a/js/id/svg/lines.js b/js/id/svg/lines.js
index 2f0d6cece..521c0bcd1 100644
--- a/js/id/svg/lines.js
+++ b/js/id/svg/lines.js
@@ -33,7 +33,7 @@ iD.svg.Lines = function() {
paths
.order()
.attr('d', lineString)
- .call(iD.Style.styleClasses());
+ .call(iD.svg.TagClasses());
paths.exit()
.remove();
diff --git a/js/id/svg/tag_classes.js b/js/id/svg/tag_classes.js
new file mode 100644
index 000000000..39e54d062
--- /dev/null
+++ b/js/id/svg/tag_classes.js
@@ -0,0 +1,27 @@
+iD.svg.TagClasses = function() {
+ var keys = iD.util.trueObj([
+ 'highway', 'railway', 'motorway', 'amenity', 'natural',
+ 'landuse', 'building', 'oneway', 'bridge'
+ ]), tagClassRe = /^tag-/;
+
+ return function(selection) {
+ selection.each(function(d, i) {
+ var classes, value = this.className;
+
+ if (value.baseVal !== undefined) value = value.baseVal;
+
+ classes = value.trim().split(/\s+/).filter(function(name) {
+ return name.length && !tagClassRe.test(name);
+ });
+
+ var tags = d.tags;
+ for (var k in tags) {
+ if (!keys[k]) continue;
+ classes.push('tag-' + k);
+ classes.push('tag-' + k + '-' + tags[k]);
+ }
+
+ return d3.select(this).attr('class', classes.join(' '));
+ });
+ };
+};
diff --git a/test/index.html b/test/index.html
index 03b4b9d1a..473c2327c 100644
--- a/test/index.html
+++ b/test/index.html
@@ -45,6 +45,7 @@
+
@@ -137,7 +138,8 @@
-
+
+
diff --git a/test/index_packaged.html b/test/index_packaged.html
index 22d613ec3..2d53e41b9 100644
--- a/test/index_packaged.html
+++ b/test/index_packaged.html
@@ -56,7 +56,8 @@
-
+
+
diff --git a/test/spec/renderer/style.js b/test/spec/renderer/style.js
index 1fccc9658..dad18866b 100644
--- a/test/spec/renderer/style.js
+++ b/test/spec/renderer/style.js
@@ -14,50 +14,4 @@ describe('iD.Style', function() {
expect(iD.Style.waystack(b, a)).to.equal(-1);
});
});
-
- describe('#styleClasses', function() {
- var selection;
-
- beforeEach(function () {
- selection = d3.select(document.createElement('div'));
- });
-
- it('adds no classes to elements whose datum has no tags', function() {
- selection
- .datum(iD.Entity())
- .call(iD.Style.styleClasses());
- expect(selection.attr('class')).to.equal('');
- });
-
- it('adds classes for highway tags', function() {
- selection
- .datum(iD.Entity({tags: {highway: 'primary'}}))
- .call(iD.Style.styleClasses());
- expect(selection.attr('class')).to.equal('tag-highway tag-highway-primary');
- });
-
- it('removes classes for tags that are no longer present', function() {
- selection
- .attr('class', 'tag-highway tag-highway-primary')
- .datum(iD.Entity())
- .call(iD.Style.styleClasses());
- expect(selection.attr('class')).to.equal('');
- });
-
- it('preserves existing non-"tag-"-prefixed classes', function() {
- selection
- .attr('class', 'selected')
- .datum(iD.Entity())
- .call(iD.Style.styleClasses());
- expect(selection.attr('class')).to.equal('selected');
- });
-
- it('works on SVG elements', function() {
- selection = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
- selection
- .datum(iD.Entity())
- .call(iD.Style.styleClasses());
- expect(selection.attr('class')).to.equal('');
- });
- });
});
diff --git a/test/spec/svg/tag_classes.js b/test/spec/svg/tag_classes.js
new file mode 100644
index 000000000..49fd8fa20
--- /dev/null
+++ b/test/spec/svg/tag_classes.js
@@ -0,0 +1,45 @@
+describe("iD.svg.TagClasses", function () {
+ var selection;
+
+ beforeEach(function () {
+ selection = d3.select(document.createElement('div'));
+ });
+
+ it('adds no classes to elements whose datum has no tags', function() {
+ selection
+ .datum(iD.Entity())
+ .call(iD.svg.TagClasses());
+ expect(selection.attr('class')).to.equal('');
+ });
+
+ it('adds classes for highway tags', function() {
+ selection
+ .datum(iD.Entity({tags: {highway: 'primary'}}))
+ .call(iD.svg.TagClasses());
+ expect(selection.attr('class')).to.equal('tag-highway tag-highway-primary');
+ });
+
+ it('removes classes for tags that are no longer present', function() {
+ selection
+ .attr('class', 'tag-highway tag-highway-primary')
+ .datum(iD.Entity())
+ .call(iD.svg.TagClasses());
+ expect(selection.attr('class')).to.equal('');
+ });
+
+ it('preserves existing non-"tag-"-prefixed classes', function() {
+ selection
+ .attr('class', 'selected')
+ .datum(iD.Entity())
+ .call(iD.svg.TagClasses());
+ expect(selection.attr('class')).to.equal('selected');
+ });
+
+ it('works on SVG elements', function() {
+ selection = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
+ selection
+ .datum(iD.Entity())
+ .call(iD.svg.TagClasses());
+ expect(selection.attr('class')).to.equal('');
+ });
+});