From db7f42145e9ddbeaac936c872ee4ff45155100c7 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Tue, 5 Feb 2013 12:00:10 -0500
Subject: [PATCH] Continue removing any non-scoped selectors. Refs #595

Last hits will be combobox and layerswitcher.
---
 index.html            |  8 +++---
 js/id/modes/select.js |  2 +-
 js/id/oauth.js        |  4 +--
 js/id/ui.js           |  2 +-
 js/id/ui/confirm.js   |  4 +--
 js/id/ui/flash.js     |  4 +--
 js/id/ui/geocoder.js  | 10 +++++--
 js/id/ui/inspector.js | 20 +++++++-------
 js/id/ui/loading.js   |  9 ++++---
 js/id/ui/modal.js     |  9 ++++---
 js/id/ui/save.js      | 61 +++++++++++++++++++++++--------------------
 11 files changed, 73 insertions(+), 60 deletions(-)
diff --git a/index.html b/index.html
index b0a1cea53..afcb8e6be 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,8 @@
 
         <!-- mobile devices -->
         <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name='apple-mobile-web-app-capable' content='yes' />
+        <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
 
         <script src='js/lib/lodash.js'></script>
         <script src='js/lib/d3.v3.js'></script>
@@ -140,7 +140,7 @@
         <script src='data/deprecated.js'></script>
     </head>
     <body>
-        <div id="iD"></div><script>
+        <div id='iD'></div><script>
             locale.current = 'en';
             d3.json('keys.json', function(err, keys) {
                 var id = iD();
@@ -153,7 +153,7 @@
                     .call(id.ui())
             });
         </script>
-<script type="text/javascript">
+<script type='text/javascript'>
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-38039653-2']);
 _gaq.push(['_trackPageview']);
diff --git a/js/id/modes/select.js b/js/id/modes/select.js
index 126e01029..99fef11ab 100644
--- a/js/id/modes/select.js
+++ b/js/id/modes/select.js
@@ -57,7 +57,7 @@ iD.modes.Select = function(context, selection, initial) {
         }), true));
 
         if (entity) {
-            inspector.graph(context.graph());
+            inspector.context(context);
 
             context.container()
                 .select('.inspector-wrap')
diff --git a/js/id/oauth.js b/js/id/oauth.js
index d7cb095a8..ec6a12668 100644
--- a/js/id/oauth.js
+++ b/js/id/oauth.js
@@ -60,7 +60,7 @@ iD.OAuth = function(context) {
         o.oauth_signature = ohauth.signature(oauth_secret, '',
             ohauth.baseString('POST', url, o));
 
-        var l = iD.ui.loading('contacting openstreetmap...');
+        var l = iD.ui.loading(context.container(), 'contacting openstreetmap...');
 
         // it would make more sense to have this code within the callback
         // to oauth.xhr below. however, it needs to be directly within a
@@ -109,7 +109,7 @@ iD.OAuth = function(context) {
             var request_token_secret = token('oauth_request_token_secret');
             o.oauth_signature = ohauth.signature(oauth_secret, request_token_secret,
                 ohauth.baseString('POST', url, o));
-            var l = iD.ui.loading('contacting openstreetmap...');
+            var l = iD.ui.loading(context.container(), 'contacting openstreetmap...');
 
             function accessTokenDone(err, xhr) {
                 if (err) callback(err);
diff --git a/js/id/ui.js b/js/id/ui.js
index 03e5c6199..ace66703d 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -128,7 +128,7 @@ iD.ui = function(context) {
         }
 
         container.append('div').attr('class', 'geocode-control map-control')
-            .call(iD.ui.geocoder().map(map));
+            .call(iD.ui.geocoder().map(map).context(context));
 
         container.append('div').attr('class', 'map-control layerswitcher-control')
             .call(iD.ui.layerswitcher(context));
diff --git a/js/id/ui/confirm.js b/js/id/ui/confirm.js
index 02133406b..177bb94f0 100644
--- a/js/id/ui/confirm.js
+++ b/js/id/ui/confirm.js
@@ -1,5 +1,5 @@
-iD.ui.confirm = function() {
-    var modal = iD.ui.modal();
+iD.ui.confirm = function(selection) {
+    var modal = iD.ui.modal(selection);
     modal.select('.modal').classed('modal-alert', true);
     modal.select('.content')
         .attr('class','modal-section fillD')
diff --git a/js/id/ui/flash.js b/js/id/ui/flash.js
index 1e4d7379d..416b4a144 100644
--- a/js/id/ui/flash.js
+++ b/js/id/ui/flash.js
@@ -1,5 +1,5 @@
-iD.ui.flash = function() {
-    var modal = iD.ui.modal();
+iD.ui.flash = function(selection) {
+    var modal = iD.ui.modal(selection);
 
     modal.select('.modal').classed('modal-flash', true);
 
diff --git a/js/id/ui/geocoder.js b/js/id/ui/geocoder.js
index 063e8b517..ffb735305 100644
--- a/js/id/ui/geocoder.js
+++ b/js/id/ui/geocoder.js
@@ -1,6 +1,6 @@
 iD.ui.geocoder = function() {
 
-    var map;
+    var map, context;
 
     function geocoder(selection) {
         function keydown() {
@@ -28,7 +28,7 @@ iD.ui.geocoder = function() {
                 .on('click.geocoder-inside', function() {
                     return d3.event.stopPropagation();
                 });
-            d3.select('body').on('click.geocoder-outside', hide);
+            context.container().on('click.geocoder-outside', hide);
         }
 
         function show() { setVisible(true); }
@@ -64,5 +64,11 @@ iD.ui.geocoder = function() {
         return geocoder;
     };
 
+    geocoder.context = function(_) {
+        if (!arguments.length) return context;
+        context = _;
+        return geocoder;
+    };
+
     return geocoder;
 };
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index 32e3fc857..bf6099823 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -2,7 +2,7 @@ iD.ui.inspector = function() {
     var event = d3.dispatch('changeTags', 'close'),
         taginfo = iD.taginfo(),
         initial = false,
-        graph,
+        context,
         tagList;
 
     function inspector(selection) {
@@ -50,7 +50,7 @@ iD.ui.inspector = function() {
         var h2 = selection.append('h2');
 
         h2.append('span')
-            .attr('class', 'icon big icon-pre-text big-' + entity.geometry(graph));
+            .attr('class', 'icon big icon-pre-text big-' + entity.geometry(context.graph()));
 
         h2.append('span')
             .text(entity.friendlyName());
@@ -124,7 +124,7 @@ iD.ui.inspector = function() {
             .attr('class', 'tag-help minor')
             .on('click', function(d) {
                 var params = _.extend({}, d, {
-                    geometry: entity.geometry(graph)
+                    geometry: entity.geometry(context.graph())
                 });
                 if (d.key && d.value) {
                     taginfo.docs(params, function(err, docs) {
@@ -140,12 +140,12 @@ iD.ui.inspector = function() {
                             if (en.on_node) types.push('point');
                             if (en.on_way) types.push('line');
                             en.types = types;
-                            iD.ui.modal()
+                            iD.ui.modal(context.container())
                                 .select('.content')
                                 .datum(en)
                                 .call(iD.ui.tagReference);
                         } else {
-                            iD.ui.flash()
+                            iD.ui.flash(context.container())
                                 .select('.content')
                                 .append('h3')
                                 .text(t('inspector.no_documentation_combination'));
@@ -154,14 +154,14 @@ iD.ui.inspector = function() {
                 } else if (d.key) {
                     taginfo.values(params, function(err, values) {
                         if (!err && values.data.length) {
-                            iD.ui.modal()
+                            iD.ui.modal(context.container())
                                 .select('.content')
                                 .datum({
                                     data: values.data,
                                     title: 'Key:' + params.key,
                                     geometry: params.geometry
                                 })
-                                .call(iD.keyReference);
+                                .call(iD.keyReference(context));
                         } else {
                             iD.ui.flash()
                                 .select('.content')
@@ -194,7 +194,7 @@ iD.ui.inspector = function() {
 
     function bindTypeahead() {
         var entity = tagList.datum(),
-            geometry = entity.geometry(graph),
+            geometry = entity.geometry(context.graph()),
             row = d3.select(this),
             key = row.selectAll('.key'),
             value = row.selectAll('.value');
@@ -275,8 +275,8 @@ iD.ui.inspector = function() {
         return inspector;
     };
 
-    inspector.graph = function(_) {
-        graph = _;
+    inspector.context = function(_) {
+        context = _;
         return inspector;
     };
 
diff --git a/js/id/ui/loading.js b/js/id/ui/loading.js
index ec6568e5d..c07426a0b 100644
--- a/js/id/ui/loading.js
+++ b/js/id/ui/loading.js
@@ -1,11 +1,12 @@
-iD.ui.loading = function(message, blocking) {
-    var modal = iD.ui.modal(blocking);
+iD.ui.loading = function(selection, message, blocking) {
+    var modal = iD.ui.modal(selection, blocking);
 
     var loadertext = modal.select('.content')
         .classed('loading-modal', true)
         .append('div').attr('class','modal-section fillL');
-        loadertext.append('img').attr('class','loader').attr('src', 'img/loader.gif');
-        loadertext.append('h3').text(message || '');
+
+    loadertext.append('img').attr('class','loader').attr('src', 'img/loader.gif');
+    loadertext.append('h3').text(message || '');
 
     return modal;
 };
diff --git a/js/id/ui/modal.js b/js/id/ui/modal.js
index b91c2772a..cd69e0219 100644
--- a/js/id/ui/modal.js
+++ b/js/id/ui/modal.js
@@ -1,6 +1,7 @@
-iD.ui.modal = function(blocking) {
+iD.ui.modal = function(selection, blocking) {
 
-    var animate = d3.select('div.modal').empty();
+    var previous = selection.select('div.modal');
+    var animate = previous.empty();
 
     var keybinding = d3.keybinding('modal')
         .on('⌫', close)
@@ -8,10 +9,10 @@ iD.ui.modal = function(blocking) {
 
     d3.select(document).call(keybinding);
 
-    d3.select('div.modal').transition()
+    previous.transition()
         .style('opacity', 0).remove();
 
-    var shaded = d3.select(document.body)
+    var shaded = selection
         .append('div')
         .attr('class', 'shaded')
         .style('opacity', 0)
diff --git a/js/id/ui/save.js b/js/id/ui/save.js
index 4e3bf883c..905a43b11 100644
--- a/js/id/ui/save.js
+++ b/js/id/ui/save.js
@@ -6,17 +6,32 @@ iD.ui.save = function(context) {
             tooltip = bootstrap.tooltip()
                 .placement('bottom');
 
-        selection.html("<span class='label'>" + t('save') + "</span><small id='as-username'></small>")
-            .attr('title', t('save_help'))
-            .attr('tabindex', -1)
-            .property('disabled', true)
-            .call(tooltip)
-            .on('click', function() {
+        function success(e, changeset_id) {
+            var modal = iD.ui.modal(context.container());
+            modal.select('.content')
+                .classed('success-modal', true)
+                .datum({
+                    id: changeset_id,
+                    comment: e.comment
+                })
+                .call(iD.ui.success(connection)
+                    .on('cancel', function() {
+                        modal.remove();
+                    }));
+        }
+
+        function clickFix(d) {
+            map.extent(d.entity.extent(context.graph()));
+            if (map.zoom() > 19) map.zoom(19);
+            context.enter(iD.modes.Select(context, [d.entity.id]));
+            modal.remove();
+        }
+
+        function click() {
 
             function commit(e) {
-
                 d3.select('.shaded').remove();
-                var l = iD.ui.loading(t('uploading_changes'), true);
+                var l = iD.ui.loading(context.container(), t('uploading_changes'), true);
 
                 connection.putChangeset(history.changes(),
                     e.comment,
@@ -31,25 +46,14 @@ iD.ui.save = function(context) {
                             .text(t('save_error'));
                         desc.append('p').text(err.responseText);
                     } else {
-                        var modal = iD.ui.modal();
-                        modal.select('.content')
-                            .classed('success-modal', true)
-                            .datum({
-                                id: changeset_id,
-                                comment: e.comment
-                            })
-                            .call(iD.ui.success(connection)
-                                .on('cancel', function() {
-                                    modal.remove();
-                                }));
+                        success(e, changeset_id);
                     }
                 });
-
             }
 
             if (history.hasChanges()) {
                 connection.authenticate(function(err) {
-                    var modal = iD.ui.modal();
+                    var modal = iD.ui.modal(context.container());
                     var changes = history.changes();
                     changes.connection = connection;
                     modal.select('.content')
@@ -59,20 +63,21 @@ iD.ui.save = function(context) {
                             .on('cancel', function() {
                                 modal.remove();
                             })
-                            .on('fix', function(d) {
-                                map.extent(d.entity.extent(context.graph()));
-                                if (map.zoom() > 19) map.zoom(19);
-                                context.enter(iD.modes.Select(context, [d.entity.id]));
-                                modal.remove();
-                            })
+                            .on('fix', clickFix)
                             .on('save', commit));
                 });
             } else {
                 iD.ui.confirm().select('.description')
                     .append('h3').text(t('no_changes'));
             }
+        }
 
-        });
+        selection.html("<span class='label'>" + t('save') + "</span><small id='as-username'></small>")
+            .attr('title', t('save_help'))
+            .attr('tabindex', -1)
+            .property('disabled', true)
+            .call(tooltip)
+            .on('click', click);
 
         selection.append('span')
             .attr('class', 'count');
