Extract iD.ui.SourceSwitch

index.html

@@ -77,6 +77,7 @@
         <script src='js/id/ui/tag_reference.js'></script>
         <script src='js/id/ui/key_reference.js'></script>
         <script src='js/id/ui/lasso.js'></script>
+        <script src='js/id/ui/source_switch.js'></script>
 
         <script src='js/id/actions.js'></script>
         <script src="js/id/actions/add_midpoint.js"></script>

js/id/ui.js

@@ -174,23 +174,7 @@ iD.ui = function(context) {
 
         linkList.append('li')
             .attr('class', 'source-switch')
-            .append('a').attr('href', '#')
-            .text(t('live'))
-            .classed('live', true)
-            .on('click.editor', function() {
-                d3.event.preventDefault();
-                if (d3.select(this).classed('live')) {
-                    map.flush();
-                    context.connection()
-                        .url('http://api06.dev.openstreetmap.org');
-                    d3.select(this).text(t('dev')).classed('live', false);
-                } else {
-                    map.flush();
-                    context.connection()
-                        .url('http://www.openstreetmap.org');
-                    d3.select(this).text(t('live')).classed('live', true);
-                }
-            });
+            .call(iD.ui.SourceSwitch(context));
 
         linkList.append('li')
             .attr('id', 'user-list')

js/id/ui/source_switch.js

@@ -0,0 +1,25 @@
+iD.ui.SourceSwitch = function(context) {
+    function click() {
+        d3.event.preventDefault();
+
+        var live = d3.select(this).classed('live');
+
+        context.map()
+            .flush();
+
+        context.connection()
+            .url(live ? 'http://api06.dev.openstreetmap.org' : 'http://www.openstreetmap.org');
+
+        d3.select(this)
+            .text(live ? t('source_switch.dev') : t('source_switch.live'))
+            .classed('live', !live);
+    }
+
+    return function(selection) {
+        selection.append('a')
+            .attr('href', '#')
+            .text(t('source_switch.live'))
+            .classed('live', true)
+            .on('click', click);
+    }
+};

locale/en.js

@@ -179,8 +179,6 @@ locale.en = {
 
     logout: "logout",
 
-    live: "live",
-    dev: "dev",
     report_a_bug: "report a bug",
 
     layerswitcher: {
@@ -194,5 +192,10 @@ locale.en = {
     contributors: {
         list: "Viewing contributions by {users}",
         truncated_list: "Viewing contributions by {users} and {count} others"
+    },
+
+    source_switch: {
+        live: "live",
+        dev: "dev"
     }
 };

test/index.html

@@ -71,6 +71,7 @@
     <script src='../js/id/ui/flash.js'></script>
     <script src='../js/id/ui/confirm.js'></script>
     <script src='../js/id/ui/splash.js'></script>
+    <script src='../js/id/ui/source_switch.js'></script>
 
     <script src='../js/id/actions.js'></script>
     <script src="../js/id/actions/add_midpoint.js"></script>