From 4ee620cb09835425945a1076b18abc10313b63ac Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Mon, 4 Feb 2013 12:23:46 -0500
Subject: [PATCH] Namespace selectors to iD-owned elements

---
 js/id/behavior/drag_midpoint.js |  2 +-
 js/id/renderer/map.js           |  1 +
 js/id/svg/labels.js             |  3 +--
 js/id/ui/commit.js              |  9 +++++----
 js/id/ui/layerswitcher.js       | 11 ++++++-----
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/js/id/behavior/drag_midpoint.js b/js/id/behavior/drag_midpoint.js
index 42099963c..4e39be2c6 100644
--- a/js/id/behavior/drag_midpoint.js
+++ b/js/id/behavior/drag_midpoint.js
@@ -9,7 +9,7 @@ iD.behavior.DragMidpoint = function(context) {
 
             context.perform(iD.actions.AddMidpoint(d, node));
 
-            var vertex = d3.selectAll('.vertex')
+            var vertex = context.surface().selectAll('.vertex')
                 .filter(function(data) { return data.id === node.id; });
 
             behavior.target(vertex.node(), vertex.datum());
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index b2561f21f..19354d7f3 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -49,6 +49,7 @@ iD.Map = function(context) {
 
         map.size(selection.size());
         map.surface = surface;
+        map.tilesurface = tilegroup;
 
         supersurface
             .call(tail);
diff --git a/js/id/svg/labels.js b/js/id/svg/labels.js
index eb4297bca..551c29e81 100644
--- a/js/id/svg/labels.js
+++ b/js/id/svg/labels.js
@@ -226,7 +226,7 @@ iD.svg.Labels = function(projection) {
         d3.select(surface.node().parentNode)
             .on('mousemove.hidelabels', hideOnMouseover);
 
-        var hidePoints = !d3.select('.node.point').node();
+        var hidePoints = !surface.select('.node.point').node();
 
         var labelable = [], i, k, entity;
         for (i = 0; i < label_stack.length; i++) labelable.push([]);
@@ -254,7 +254,6 @@ iD.svg.Labels = function(projection) {
             }
         }
 
-
         var positions = {
             point: [],
             line: [],
diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js
index 09bb99404..8d724a732 100644
--- a/js/id/ui/commit.js
+++ b/js/id/ui/commit.js
@@ -35,11 +35,12 @@ iD.ui.commit = function(context) {
 
         // Comment Box
         var comment_section = body.append('div').attr('class','modal-section fillD');
-        comment_section.append('textarea')
+        var commentField = comment_section.append('textarea')
             .attr('class', 'changeset-comment')
             .attr('placeholder', 'Brief Description of your contributions')
-            .property('value',  context.storage('comment') || '')
-            .node().select();
+            .property('value',  context.storage('comment') || '');
+
+        commentField.node().select();
 
         var commit_info =
             comment_section
@@ -73,7 +74,7 @@ iD.ui.commit = function(context) {
             .append('button')
             .attr('class', 'save action col6 button')
             .on('click.save', function() {
-                var comment = d3.select('textarea.changeset-comment').node().value;
+                var comment = commentField.node().value;
                 localStorage.comment = comment;
                 event.save({
                     comment: comment
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 5c4835757..9e5e4dd4f 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -61,9 +61,10 @@ iD.ui.layerswitcher = function(context) {
 
         opa.append('h4').text(t('layerswitcher.layers'));
 
-        opa.append('ul')
-            .attr('class', 'opacity-options')
-            .selectAll('div.opacity')
+        var opacityList = opa.append('ul')
+            .attr('class', 'opacity-options');
+
+        opacityList.selectAll('div.opacity')
             .data(opacities)
             .enter()
             .append('li')
@@ -71,11 +72,11 @@ iD.ui.layerswitcher = function(context) {
                     return t('layerswitcher.percent_brightness', { opacity: (d * 100) });
                 })
                 .on('click.set-opacity', function(d) {
-                    d3.select('#tile-g')
+                    context.map().tilesurface
                         .transition()
                         .style('opacity', d)
                         .attr('data-opacity', d);
-                    d3.selectAll('.opacity-options li')
+                    opacityList.selectAll('li')
                         .classed('selected', false);
                     d3.select(this)
                         .classed('selected', true);