refactor ui into ES6 modules for #3118

2026-02-27 07:53:40 +00:00 · 2016-06-17 15:51:49 +05:30
parent 6a4adb476c
commit 447532900b
51 changed files with 250 additions and 270 deletions
--- a/53
+++ b/53
@@ -54,6 +54,7 @@ MODULE_TARGETS = \
 	js/lib/id/services.js \
 	js/lib/id/ui/intro.js \
 	js/lib/id/svg.js \
+	js/lib/id/ui.js \
 	js/lib/id/util.js \
 	js/lib/id/validations.js

@@ -101,6 +102,10 @@ js/lib/id/ui/intro.js: $(shell find modules/ui/intro -type f)
 	@rm -f $@
 	node_modules/.bin/rollup -f umd -n iD.ui.intro modules/ui/intro/index.js --no-strict -o $@

+js/lib/id/ui.js: $(shell find modules/ui -type f)
+	@rm -f $@
+	node_modules/.bin/rollup -f umd -n iD.ui modules/ui/index.js --no-strict -o $@
+
 js/lib/id/util.js: $(shell find modules/util -type f)
 	@rm -f $@
 	node_modules/.bin/rollup -f umd -n iD.util modules/util/index.js --no-strict -o $@
@@ -133,54 +138,6 @@ dist/iD.js: \
 	js/id/id.js \
 	$(MODULE_TARGETS) \
 	js/id/ui.js \
-	js/id/ui/account.js \
-	js/id/ui/attribution.js \
-	js/id/ui/background.js \
-	js/id/ui/cmd.js \
-	js/id/ui/commit.js \
-	js/id/ui/confirm.js \
-	js/id/ui/conflicts.js \
-	js/id/ui/contributors.js \
-	js/id/ui/disclosure.js \
-	js/id/ui/entity_editor.js \
-	js/id/ui/feature_info.js \
-	js/id/ui/feature_list.js \
-	js/id/ui/flash.js \
-	js/id/ui/full_screen.js \
-	js/id/ui/geolocate.js \
-	js/id/ui/help.js \
-	js/id/ui/info.js \
-	js/id/ui/inspector.js \
-	js/id/ui/intro.js \
-	js/id/ui/lasso.js \
-	js/id/ui/loading.js \
-	js/id/ui/map_data.js \
-	js/id/ui/map_in_map.js \
-	js/id/ui/modal.js \
-	js/id/ui/modes.js \
-	js/id/ui/notice.js \
-	js/id/ui/preset_icon.js \
-	js/id/ui/preset.js \
-	js/id/ui/preset_list.js \
-	js/id/ui/radial_menu.js \
-	js/id/ui/raw_member_editor.js \
-	js/id/ui/raw_membership_editor.js \
-	js/id/ui/raw_tag_editor.js \
-	js/id/ui/restore.js \
-	js/id/ui/save.js \
-	js/id/ui/scale.js \
-	js/id/ui/selection_list.js \
-	js/id/ui/sidebar.js \
-	js/id/ui/source_switch.js \
-	js/id/ui/spinner.js \
-	js/id/ui/splash.js \
-	js/id/ui/status.js \
-	js/id/ui/success.js \
-	js/id/ui/tag_reference.js \
-	js/id/ui/toggle.js \
-	js/id/ui/undo_redo.js \
-	js/id/ui/view_on_osm.js \
-	js/id/ui/zoom.js \
 	js/id/ui/preset/access.js \
 	js/id/ui/preset/address.js \
 	js/id/ui/preset/check.js \
--- a/index.html
+++ b/index.html
@@ -44,61 +44,12 @@
        <script src='js/lib/id/renderer.js'></script>
        <script src='js/lib/id/services.js'></script>
        <script src='js/lib/id/svg.js'></script>
+        <script src='js/lib/id/ui.js'></script>
        <script src='js/lib/id/util.js'></script>
        <script src='js/lib/id/validations.js'></script>

        <script src='data/data_dev.js'></script>

-        <script src='js/id/ui.js'></script>
-        <script src='js/id/ui/intro.js'></script>
-        <script src='js/id/ui/info.js'></script>
-        <script src='js/id/ui/attribution.js'></script>
-        <script src='js/id/ui/radial_menu.js'></script>
-        <script src='js/id/ui/inspector.js'></script>
-        <script src='js/id/ui/modal.js'></script>
-        <script src='js/id/ui/cmd.js'></script>
-        <script src='js/id/ui/confirm.js'></script>
-        <script src='js/id/ui/conflicts.js'></script>
-        <script src='js/id/ui/commit.js'></script>
-        <script src='js/id/ui/success.js'></script>
-        <script src='js/id/ui/loading.js'></script>
-        <script src='js/id/ui/account.js'></script>
-        <script src='js/id/ui/background.js'></script>
-        <script src='js/id/ui/map_data.js'></script>
-        <script src='js/id/ui/map_in_map.js'></script>
-        <script src='js/id/ui/modes.js'></script>
-        <script src='js/id/ui/contributors.js'></script>
-        <script src='js/id/ui/help.js'></script>
-        <script src='js/id/ui/geolocate.js'></script>
-        <script src='js/id/ui/notice.js'></script>
-        <script src='js/id/ui/flash.js'></script>
-        <script src='js/id/ui/feature_info.js'></script>
-        <script src='js/id/ui/save.js'></script>
-        <script src='js/id/ui/full_screen.js'></script>
-        <script src='js/id/ui/scale.js'></script>
-        <script src='js/id/ui/splash.js'></script>
-        <script src='js/id/ui/spinner.js'></script>
-        <script src='js/id/ui/restore.js'></script>
-        <script src='js/id/ui/tag_reference.js'></script>
-        <script src='js/id/ui/preset.js'></script>
-        <script src='js/id/ui/preset_icon.js'></script>
-        <script src='js/id/ui/lasso.js'></script>
-        <script src='js/id/ui/source_switch.js'></script>
-        <script src='js/id/ui/status.js'></script>
-        <script src='js/id/ui/toggle.js'></script>
-        <script src='js/id/ui/undo_redo.js'></script>
-        <script src='js/id/ui/view_on_osm.js'></script>
-        <script src='js/id/ui/zoom.js'></script>
-        <script src='js/id/ui/raw_tag_editor.js'></script>
-        <script src='js/id/ui/raw_member_editor.js'></script>
-        <script src='js/id/ui/raw_membership_editor.js'></script>
-        <script src='js/id/ui/feature_list.js'></script>
-        <script src='js/id/ui/selection_list.js'></script>
-        <script src='js/id/ui/preset_list.js'></script>
-        <script src='js/id/ui/entity_editor.js'></script>
-        <script src='js/id/ui/disclosure.js'></script>
-        <script src='js/id/ui/sidebar.js'></script>
-
        <script src='js/id/ui/preset/access.js'></script>
        <script src='js/id/ui/preset/address.js'></script>
        <script src='js/id/ui/preset/check.js'></script>
--- a/modules/ui/account.js
+++ b/modules/ui/account.js
@@ -1,4 +1,4 @@
-iD.ui.Account = function(context) {
+export function Account(context) {
    var connection = context.connection();

    function update(selection) {
@@ -63,4 +63,4 @@ iD.ui.Account = function(context) {
        connection.on('auth.account', function() { update(selection); });
        update(selection);
    };
-};
+}
--- a/modules/ui/attribution.js
+++ b/modules/ui/attribution.js
@@ -1,4 +1,4 @@
-iD.ui.Attribution = function(context) {
+export function Attribution(context) {
    var selection;

    function attribution(data, klass) {
@@ -77,4 +77,4 @@ iD.ui.Attribution = function(context) {

        update();
    };
-};
+}
--- a/modules/ui/background.js
+++ b/modules/ui/background.js
@@ -1,4 +1,7 @@
-iD.ui.Background = function(context) {
+import { cmd } from './cmd';
+import { MapInMap } from './map_in_map';
+
+export function Background(context) {
    var key = 'B',
        opacities = [1, 0.75, 0.5, 0.25],
        directions = [
@@ -405,7 +408,7 @@ iD.ui.Background = function(context) {
            .append('input')
            .attr('type', 'checkbox')
            .on('change', function() {
-                iD.ui.MapInMap.toggle();
+                MapInMap.toggle();
                d3.event.preventDefault();
            });

@@ -477,7 +480,7 @@ iD.ui.Background = function(context) {

        var keybinding = d3.keybinding('background')
            .on(key, toggle)
-            .on(iD.ui.cmd('⌘B'), quickSwitch)
+            .on(cmd('⌘B'), quickSwitch)
            .on('F', hide)
            .on('H', hide);

@@ -489,4 +492,4 @@ iD.ui.Background = function(context) {
    }

    return background;
-};
+}
--- a/modules/ui/cmd.js
+++ b/modules/ui/cmd.js
@@ -1,6 +1,6 @@
 // Translate a MacOS key command into the appropriate Windows/Linux equivalent.
 // For example, ⌘Z -> Ctrl+Z
-iD.ui.cmd = function(code) {
+export function cmd(code) {
    if (iD.detect().os === 'mac') {
        return code;
    }
@@ -27,4 +27,4 @@ iD.ui.cmd = function(code) {
    }

    return result;
-};
+}
--- a/modules/ui/commit.js
+++ b/modules/ui/commit.js
@@ -1,4 +1,4 @@
-iD.ui.Commit = function(context) {
+export function Commit(context) {
    var dispatch = d3.dispatch('cancel', 'save');

    function commit(selection) {
@@ -275,4 +275,4 @@ iD.ui.Commit = function(context) {
    }

    return d3.rebind(commit, dispatch, 'on');
-};
+}
--- a/modules/ui/confirm.js
+++ b/modules/ui/confirm.js
@@ -1,5 +1,7 @@
-iD.ui.confirm = function(selection) {
-    var modal = iD.ui.modal(selection);
+import { modal as modalModule } from './modal';
+
+export function confirm(selection) {
+    var modal = modalModule(selection);

    modal.select('.modal')
        .classed('modal-alert', true);
@@ -28,4 +30,4 @@ iD.ui.confirm = function(selection) {
    };

    return modal;
-};
+}
--- a/modules/ui/conflicts.js
+++ b/modules/ui/conflicts.js
@@ -1,4 +1,4 @@
-iD.ui.Conflicts = function(context) {
+export function Conflicts(context) {
    var dispatch = d3.dispatch('download', 'cancel', 'save'),
        list;

@@ -247,4 +247,4 @@ iD.ui.Conflicts = function(context) {
    };

    return d3.rebind(conflicts, dispatch, 'on');
-};
+}
--- a/modules/ui/contributors.js
+++ b/modules/ui/contributors.js
@@ -1,4 +1,4 @@
-iD.ui.Contributors = function(context) {
+export function Contributors(context) {
    var debouncedUpdate = _.debounce(function() { update(); }, 1000),
        limit = 4,
        hidden = false,
@@ -69,4 +69,4 @@ iD.ui.Contributors = function(context) {
        context.connection().on('loaded.contributors', debouncedUpdate);
        context.map().on('move.contributors', debouncedUpdate);
    };
-};
+}
--- a/modules/ui/disclosure.js
+++ b/modules/ui/disclosure.js
@@ -1,4 +1,6 @@
-iD.ui.Disclosure = function() {
+import { Toggle } from './toggle';
+
+export function Disclosure() {
    var dispatch = d3.dispatch('toggled'),
        title,
        expanded = false,
@@ -27,7 +29,7 @@ iD.ui.Disclosure = function() {
        function toggle() {
            expanded = !expanded;
            $link.classed('expanded', expanded);
-            $body.call(iD.ui.Toggle(expanded));
+            $body.call(Toggle(expanded));
            dispatch.toggled(expanded);
        }
    };
@@ -51,4 +53,4 @@ iD.ui.Disclosure = function() {
    };

    return d3.rebind(disclosure, dispatch, 'on');
-};
+}
--- a/modules/ui/entity_editor.js
+++ b/modules/ui/entity_editor.js
@@ -1,4 +1,11 @@
-iD.ui.EntityEditor = function(context) {
+import { preset as presetModule } from './preset';
+import { PresetIcon } from './preset_icon';
+import { RawTagEditor } from './raw_tag_editor';
+import { RawMemberEditor } from './raw_member_editor';
+import { RawMembershipEditor } from './raw_membership_editor';
+import { TagReference } from './tag_reference';
+
+export function EntityEditor(context) {
    var dispatch = d3.dispatch('choose'),
        state = 'select',
        coalesceChanges = false,
@@ -8,9 +15,9 @@ iD.ui.EntityEditor = function(context) {
        preset,
        reference;

-    var presetEditor = iD.ui.preset(context)
+    var presetEditor = presetModule(context)
        .on('change', changeTags);
-    var rawTagEditor = iD.ui.RawTagEditor(context)
+    var rawTagEditor = RawTagEditor(context)
        .on('change', changeTags);

    function entityEditor(selection) {
@@ -88,7 +95,7 @@ iD.ui.EntityEditor = function(context) {

        // Update
        $body.select('.preset-list-item button')
-            .call(iD.ui.PresetIcon()
+            .call(PresetIcon()
                .geometry(context.geometry(id))
                .preset(preset));

@@ -112,7 +119,7 @@ iD.ui.EntityEditor = function(context) {
        if (entity.type === 'relation') {
            $body.select('.raw-member-editor')
                .style('display', 'block')
-                .call(iD.ui.RawMemberEditor(context)
+                .call(RawMemberEditor(context)
                    .entityID(id));
        } else {
            $body.select('.raw-member-editor')
@@ -120,7 +127,7 @@ iD.ui.EntityEditor = function(context) {
        }

        $body.select('.raw-membership-editor')
-            .call(iD.ui.RawMembershipEditor(context)
+            .call(RawMembershipEditor(context)
                .entityID(id));

        function historyChanged() {
@@ -226,11 +233,11 @@ iD.ui.EntityEditor = function(context) {
        if (!arguments.length) return preset;
        if (_ !== preset) {
            preset = _;
-            reference = iD.ui.TagReference(preset.reference(context.geometry(id)), context)
+            reference = TagReference(preset.reference(context.geometry(id)), context)
                .showing(false);
        }
        return entityEditor;
    };

    return d3.rebind(entityEditor, dispatch, 'on');
-};
+}
--- a/modules/ui/feature_info.js
+++ b/modules/ui/feature_info.js
@@ -1,4 +1,4 @@
-iD.ui.FeatureInfo = function(context) {
+export function FeatureInfo(context) {
    function update(selection) {
        var features = context.features(),
            stats = features.stats(),
@@ -43,4 +43,4 @@ iD.ui.FeatureInfo = function(context) {
            update(selection);
        });
    };
-};
+}
--- a/modules/ui/feature_list.js
+++ b/modules/ui/feature_list.js
@@ -1,4 +1,4 @@
-iD.ui.FeatureList = function(context) {
+export function FeatureList(context) {
    var geocodeResults;

    function featureList(selection) {
@@ -253,4 +253,4 @@ iD.ui.FeatureList = function(context) {
    }

    return featureList;
-};
+}
--- a/modules/ui/flash.js
+++ b/modules/ui/flash.js
@@ -1,5 +1,7 @@
-iD.ui.flash = function(selection) {
-    var modal = iD.ui.modal(selection);
+import { modal as modalModule } from './modal';
+
+export function flash(selection) {
+    var modal = modalModule(selection);

    modal.select('.modal').classed('modal-flash', true);

@@ -16,4 +18,4 @@ iD.ui.flash = function(selection) {
    }, 1500);

    return modal;
-};
+}
--- a/modules/ui/full_screen.js
+++ b/modules/ui/full_screen.js
@@ -1,4 +1,6 @@
-iD.ui.FullScreen = function(context) {
+import { cmd } from './cmd';
+
+export function FullScreen(context) {
    var element = context.container().node(),
        keybinding = d3.keybinding('full-screen');
        // button;
@@ -65,9 +67,9 @@ iD.ui.FullScreen = function(context) {

        keybinding
            .on('f11', fullScreen)
-            .on(iD.ui.cmd('⌘⇧F'), fullScreen);
+            .on(cmd('⌘⇧F'), fullScreen);

        d3.select(document)
            .call(keybinding);
    };
-};
+}
--- a/modules/ui/geolocate.js
+++ b/modules/ui/geolocate.js
@@ -1,6 +1,8 @@
-iD.ui.Geolocate = function(context) {
+import { Loading } from './loading';
+
+export function Geolocate(context) {
    var geoOptions = { enableHighAccuracy: false, timeout: 6000 /* 6sec */ },
-        locating = iD.ui.Loading(context).message(t('geolocate.locating')).blocking(true),
+        locating = Loading(context).message(t('geolocate.locating')).blocking(true),
        timeoutId;

    function click() {
@@ -43,4 +45,4 @@ iD.ui.Geolocate = function(context) {
            .call(bootstrap.tooltip()
                .placement('left'));
    };
-};
+}
--- a/modules/ui/help.js
+++ b/modules/ui/help.js
@@ -1,4 +1,6 @@
-iD.ui.Help = function(context) {
+import { intro } from './intro';
+
+export function Help(context) {
    var key = 'H';

    var docKeys = [
@@ -90,7 +92,7 @@ iD.ui.Help = function(context) {
        }

        function clickWalkthrough() {
-            d3.select(document.body).call(iD.ui.intro(context));
+            d3.select(document.body).call(intro(context));
            setVisible(false);
        }

@@ -153,4 +155,4 @@ iD.ui.Help = function(context) {
    }

    return help;
-};
+}
--- a/modules/ui/index.js
+++ b/modules/ui/index.js
@@ -0,0 +1,48 @@
+export { Account } from './account';
+export { Attribution } from './attribution';
+export { Background } from './background';
+export { cmd } from './cmd';
+export { Commit } from './commit';
+export { confirm } from './confirm';
+export { Conflicts } from './conflicts';
+export { Contributors } from './contributors';
+export { Disclosure } from './disclosure';
+export { EntityEditor } from './entity_editor';
+export { FeatureInfo } from './feature_info';
+export { FeatureList } from './feature_list';
+export { flash } from './flash';
+export { FullScreen } from './full_screen';
+export { Geolocate } from './geolocate';
+export { Help } from './help';
+export { Info } from './info';
+export { Inspector } from './inspector';
+export { intro } from './intro';
+export { Lasso } from './lasso';
+export { Loading } from './loading';
+export { MapData } from './map_data';
+export { MapInMap } from './map_in_map';
+export { modal } from './modal';
+export { Modes } from './modes';
+export { Notice } from './notice';
+export { preset } from './preset';
+export { PresetIcon } from './preset_icon';
+export { PresetList } from './preset_list';
+export { RadialMenu } from './radial_menu';
+export { RawMemberEditor } from './raw_member_editor';
+export { RawMembershipEditor } from './raw_membership_editor';
+export { RawTagEditor } from './raw_tag_editor';
+export { Restore } from './restore';
+export { Save } from './save';
+export { Scale } from './scale';
+export { SelectionList } from './selection_list';
+export { Sidebar } from './sidebar';
+export { SourceSwitch } from './source_switch';
+export { Spinner } from './spinner';
+export { Splash } from './splash';
+export { Status } from './status';
+export { Success } from './success';
+export { TagReference } from './tag_reference';
+export { Toggle } from './toggle';
+export { UndoRedo } from './undo_redo';
+export { ViewOnOSM } from './view_on_osm';
+export { Zoom } from './zoom';
--- a/modules/ui/info.js
+++ b/modules/ui/info.js
@@ -1,5 +1,7 @@
-iD.ui.Info = function(context) {
-    var key = iD.ui.cmd('⌘I'),
+import { cmd } from './cmd';
+
+export function Info(context) {
+    var key = cmd('⌘I'),
        imperial = (iD.detect().locale.toLowerCase() === 'en-us'),
        hidden = true;

@@ -228,4 +230,4 @@ iD.ui.Info = function(context) {
    }

    return info;
-};
+}
--- a/modules/ui/inspector.js
+++ b/modules/ui/inspector.js
@@ -1,6 +1,10 @@
-iD.ui.Inspector = function(context) {
-    var presetList = iD.ui.PresetList(context),
-        entityEditor = iD.ui.EntityEditor(context),
+import { PresetList } from './preset_list';
+import { EntityEditor } from './entity_editor';
+import { ViewOnOSM } from './view_on_osm';
+
+export function Inspector(context) {
+    var presetList = PresetList(context),
+        entityEditor = EntityEditor(context),
        state = 'select',
        entityID,
        newFeature = false;
@@ -52,7 +56,7 @@ iD.ui.Inspector = function(context) {
            .attr('class', 'footer');

        selection.select('.footer')
-            .call(iD.ui.ViewOnOSM(context)
+            .call(ViewOnOSM(context)
                .entityID(entityID));

        function showList(preset) {
@@ -93,4 +97,4 @@ iD.ui.Inspector = function(context) {
    };

    return inspector;
-};
+}
--- a/modules/ui/intro.js
+++ b/modules/ui/intro.js
@@ -1,4 +1,4 @@
-iD.ui.intro = function(context) {
+export function intro(context) {
    var step;

    function intro(selection) {
@@ -153,37 +153,4 @@ iD.ui.intro = function(context) {

    }
    return intro;
-};
-
-iD.ui.intro.pointBox = function(point, context) {
-    var rect = context.surfaceRect();
-    point = context.projection(point);
-    return {
-        left: point[0] + rect.left - 30,
-        top: point[1] + rect.top - 50,
-        width: 60,
-        height: 70
-    };
-};
-
-iD.ui.intro.pad = function(box, padding, context) {
-    if (box instanceof Array) {
-        var rect = context.surfaceRect();
-        box = context.projection(box);
-        box = {
-            left: box[0] + rect.left,
-            top: box[1] + rect.top
-        };
-    }
-    return {
-        left: box.left - padding,
-        top: box.top - padding,
-        width: (box.width || 0) + 2 * padding,
-        height: (box.width || 0) + 2 * padding
-    };
-};
-
-iD.ui.intro.icon = function(name, svgklass) {
-    return '<svg class="icon ' + (svgklass || '') + '">' +
-        '<use xlink:href="' + name + '"></use></svg>';
-};
+}
--- a/modules/ui/lasso.js
+++ b/modules/ui/lasso.js
@@ -1,4 +1,6 @@
-iD.ui.Lasso = function(context) {
+import { Toggle } from './toggle';
+
+export function Lasso(context) {
    var group, polygon;

    lasso.coordinates = [];
@@ -13,7 +15,7 @@ iD.ui.Lasso = function(context) {
        polygon = group.append('path')
            .attr('class', 'lasso-path');

-        group.call(iD.ui.Toggle(true));
+        group.call(Toggle(true));

    }

@@ -39,7 +41,7 @@ iD.ui.Lasso = function(context) {

    lasso.close = function() {
        if (group) {
-            group.call(iD.ui.Toggle(false, function() {
+            group.call(Toggle(false, function() {
                d3.select(this).remove();
            }));
        }
@@ -47,4 +49,4 @@ iD.ui.Lasso = function(context) {
    };

    return lasso;
-};
+}
--- a/modules/ui/loading.js
+++ b/modules/ui/loading.js
@@ -1,10 +1,12 @@
-iD.ui.Loading = function(context) {
+import { modal as modalModule } from './modal';
+
+export function Loading(context) {
    var message = '',
        blocking = false,
        modal;

    var loading = function(selection) {
-        modal = iD.ui.modal(selection, blocking);
+        modal = modalModule(selection, blocking);

        var loadertext = modal.select('.content')
            .classed('loading-modal', true)
@@ -41,4 +43,4 @@ iD.ui.Loading = function(context) {
    };

    return loading;
-};
+}
--- a/modules/ui/map_data.js
+++ b/modules/ui/map_data.js
@@ -1,4 +1,4 @@
-iD.ui.MapData = function(context) {
+export function MapData(context) {
    var key = 'F',
        features = context.features().keys(),
        layers = context.layers(),
@@ -431,4 +431,4 @@ iD.ui.MapData = function(context) {
    }

    return map_data;
-};
+}
--- a/modules/ui/map_in_map.js
+++ b/modules/ui/map_in_map.js
@@ -1,4 +1,4 @@
-iD.ui.MapInMap = function(context) {
+export function MapInMap(context) {
    var key = '/';

    function map_in_map(selection) {
@@ -268,7 +268,7 @@ iD.ui.MapInMap = function(context) {
            }
        }

-        iD.ui.MapInMap.toggle = toggle;
+        MapInMap.toggle = toggle;

        var wrap = selection.selectAll('.map-in-map')
            .data([0]);
@@ -297,4 +297,4 @@ iD.ui.MapInMap = function(context) {
    }

    return map_in_map;
-};
+}
--- a/modules/ui/modal.js
+++ b/modules/ui/modal.js
@@ -1,4 +1,4 @@
-iD.ui.modal = function(selection, blocking) {
+export function modal(selection, blocking) {
    var keybinding = d3.keybinding('modal');
    var previous = selection.select('div.modal');
    var animate = previous.empty();
@@ -60,4 +60,4 @@ iD.ui.modal = function(selection, blocking) {
    }

    return shaded;
-};
+}
--- a/modules/ui/modes.js
+++ b/modules/ui/modes.js
@@ -1,4 +1,4 @@
-iD.ui.Modes = function(context) {
+export function Modes(context) {
    var modes = [
        iD.modes.AddPoint(context),
        iD.modes.AddLine(context),
@@ -68,4 +68,4 @@ iD.ui.Modes = function(context) {
            buttons.property('disabled', !editable());
        }
    };
-};
+}
--- a/modules/ui/notice.js
+++ b/modules/ui/notice.js
@@ -1,4 +1,4 @@
-iD.ui.Notice = function(context) {
+export function Notice(context) {
    return function(selection) {
        var div = selection.append('div')
            .attr('class', 'notice');
@@ -22,4 +22,4 @@ iD.ui.Notice = function(context) {

        disableTooHigh();
    };
-};
+}
--- a/modules/ui/preset.js
+++ b/modules/ui/preset.js
@@ -1,4 +1,4 @@
-iD.ui.preset = function(context) {
+export function preset(context) {
    var event = d3.dispatch('change'),
        state,
        fields,
@@ -266,4 +266,4 @@ iD.ui.preset = function(context) {
    };

    return d3.rebind(presets, event, 'on');
-};
+}
--- a/modules/ui/preset_icon.js
+++ b/modules/ui/preset_icon.js
@@ -1,4 +1,4 @@
-iD.ui.PresetIcon = function() {
+export function PresetIcon() {
    var preset, geometry;

    function presetIcon(selection) {
@@ -79,4 +79,4 @@ iD.ui.PresetIcon = function() {
    };

    return presetIcon;
-};
+}
--- a/modules/ui/preset_list.js
+++ b/modules/ui/preset_list.js
@@ -1,4 +1,7 @@
-iD.ui.PresetList = function(context) {
+import { PresetIcon } from './preset_icon';
+import { TagReference } from './tag_reference';
+
+export function PresetList(context) {
    var event = d3.dispatch('choose'),
        id,
        currentPreset,
@@ -134,7 +137,7 @@ iD.ui.PresetList = function(context) {
            wrap.append('button')
                .attr('class', 'preset-list-button')
                .classed('expanded', false)
-                .call(iD.ui.PresetIcon()
+                .call(PresetIcon()
                    .geometry(context.geometry(id))
                    .preset(preset))
                .on('click', function() {
@@ -195,7 +198,7 @@ iD.ui.PresetList = function(context) {

            wrap.append('button')
                .attr('class', 'preset-list-button')
-                .call(iD.ui.PresetIcon()
+                .call(PresetIcon()
                    .geometry(context.geometry(id))
                    .preset(preset))
                .on('click', item.choose)
@@ -223,7 +226,7 @@ iD.ui.PresetList = function(context) {
        };

        item.preset = preset;
-        item.reference = iD.ui.TagReference(preset.reference(context.geometry(id)), context);
+        item.reference = TagReference(preset.reference(context.geometry(id)), context);

        return item;
    }
@@ -248,4 +251,4 @@ iD.ui.PresetList = function(context) {
    };

    return d3.rebind(presetList, event, 'on');
-};
+}
--- a/modules/ui/radial_menu.js
+++ b/modules/ui/radial_menu.js
@@ -1,4 +1,4 @@
-iD.ui.RadialMenu = function(context, operations) {
+export function RadialMenu(context, operations) {
    var menu,
        center = [0, 0],
        tooltip;
@@ -130,4 +130,4 @@ iD.ui.RadialMenu = function(context, operations) {
    };

    return radialMenu;
-};
+}
--- a/modules/ui/raw_member_editor.js
+++ b/modules/ui/raw_member_editor.js
@@ -1,4 +1,6 @@
-iD.ui.RawMemberEditor = function(context) {
+import { Disclosure } from './disclosure';
+
+export function RawMemberEditor(context) {
    var id;

    function selectMember(d) {
@@ -39,7 +41,7 @@ iD.ui.RawMemberEditor = function(context) {
            });
        });

-        selection.call(iD.ui.Disclosure()
+        selection.call(Disclosure()
            .title(t('inspector.all_members') + ' (' + memberships.length + ')')
            .expanded(true)
            .on('toggled', toggled)
@@ -117,4 +119,4 @@ iD.ui.RawMemberEditor = function(context) {
    };

    return rawMemberEditor;
-};
+}
--- a/modules/ui/raw_membership_editor.js
+++ b/modules/ui/raw_membership_editor.js
@@ -1,4 +1,6 @@
-iD.ui.RawMembershipEditor = function(context) {
+import { Disclosure } from './disclosure';
+
+export function RawMembershipEditor(context) {
    var id, showBlank;

    function selectRelation(d) {
@@ -97,7 +99,7 @@ iD.ui.RawMembershipEditor = function(context) {
            });
        });

-        selection.call(iD.ui.Disclosure()
+        selection.call(Disclosure()
            .title(t('inspector.all_relations') + ' (' + memberships.length + ')')
            .expanded(true)
            .on('toggled', toggled)
@@ -214,4 +216,4 @@ iD.ui.RawMembershipEditor = function(context) {
    };

    return rawMembershipEditor;
-};
+}
--- a/modules/ui/raw_tag_editor.js
+++ b/modules/ui/raw_tag_editor.js
@@ -1,4 +1,7 @@
-iD.ui.RawTagEditor = function(context) {
+import { Disclosure } from './disclosure';
+import { TagReference } from './tag_reference';
+
+export function RawTagEditor(context) {
    var event = d3.dispatch('change'),
        showBlank = false,
        state,
@@ -9,7 +12,7 @@ iD.ui.RawTagEditor = function(context) {
    function rawTagEditor(selection) {
        var count = Object.keys(tags).filter(function(d) { return d; }).length;

-        selection.call(iD.ui.Disclosure()
+        selection.call(Disclosure()
            .title(t('inspector.all_tags') + ' (' + count + ')')
            .expanded(context.storage('raw_tag_editor.expanded') === 'true' || preset.isFallback())
            .on('toggled', toggled)
@@ -86,9 +89,9 @@ iD.ui.RawTagEditor = function(context) {
            var isRelation = (context.entity(id).type === 'relation'),
                reference;
            if (isRelation && tag.key === 'type')
-                reference = iD.ui.TagReference({rtype: tag.value}, context);
+                reference = TagReference({rtype: tag.value}, context);
            else
-                reference = iD.ui.TagReference({key: tag.key, value: tag.value}, context);
+                reference = TagReference({key: tag.key, value: tag.value}, context);

            if (state === 'hover') {
                reference.showing(false);
@@ -248,4 +251,4 @@ iD.ui.RawTagEditor = function(context) {
    };

    return d3.rebind(rawTagEditor, event, 'on');
-};
+}
--- a/modules/ui/restore.js
+++ b/modules/ui/restore.js
@@ -1,9 +1,11 @@
-iD.ui.Restore = function(context) {
+import { modal as modalModule } from './modal';
+
+export function Restore(context) {
    return function(selection) {
        if (!context.history().lock() || !context.history().restorableChanges())
            return;

-        var modal = iD.ui.modal(selection, true);
+        var modal = modalModule(selection, true);

        modal.select('.modal')
            .attr('class', 'modal fillL col6');
@@ -43,4 +45,4 @@ iD.ui.Restore = function(context) {

        restore.node().focus();
    };
-};
+}
--- a/modules/ui/save.js
+++ b/modules/ui/save.js
@@ -1,6 +1,8 @@
-iD.ui.Save = function(context) {
+import { cmd } from './cmd';
+
+export function Save(context) {
    var history = context.history(),
-        key = iD.ui.cmd('⌘S');
+        key = cmd('⌘S');


    function saving() {
@@ -82,4 +84,4 @@ iD.ui.Save = function(context) {
            if (saving()) button.call(tooltip.hide);
        });
    };
-};
+}
--- a/modules/ui/scale.js
+++ b/modules/ui/scale.js
@@ -1,4 +1,4 @@
-iD.ui.Scale = function(context) {
+export function Scale(context) {
    var projection = context.projection,
        imperial = (iD.detect().locale.toLowerCase() === 'en-us'),
        maxLength = 180,
@@ -86,4 +86,4 @@ iD.ui.Scale = function(context) {
            update(selection);
        });
    };
-};
+}
--- a/modules/ui/selection_list.js
+++ b/modules/ui/selection_list.js
@@ -1,4 +1,4 @@
-iD.ui.SelectionList = function(context, selectedIDs) {
+export function SelectionList(context, selectedIDs) {

    function selectEntity(entity) {
        context.enter(iD.modes.Select(context, [entity.id]).suppressMenu(true));
@@ -67,4 +67,4 @@ iD.ui.SelectionList = function(context, selectedIDs) {

    return selectionList;

-};
+}
--- a/modules/ui/sidebar.js
+++ b/modules/ui/sidebar.js
@@ -1,13 +1,17 @@
-iD.ui.Sidebar = function(context) {
-    var inspector = iD.ui.Inspector(context),
+import { Inspector } from './inspector';
+import { FeatureList } from './feature_list';
+import { Notice } from './notice';
+
+export function Sidebar(context) {
+    var inspector = Inspector(context),
        current;

    function sidebar(selection) {
        var featureListWrap = selection.append('div')
            .attr('class', 'feature-list-pane')
-            .call(iD.ui.FeatureList(context));
+            .call(FeatureList(context));

-        selection.call(iD.ui.Notice(context));
+        selection.call(Notice(context));

        var inspectorWrap = selection.append('div')
            .attr('class', 'inspector-hidden inspector-wrap fr');
@@ -79,4 +83,4 @@ iD.ui.Sidebar = function(context) {
    sidebar.hide = function() {};

    return sidebar;
-};
+}
--- a/modules/ui/source_switch.js
+++ b/modules/ui/source_switch.js
@@ -1,4 +1,4 @@
-iD.ui.SourceSwitch = function(context) {
+export function SourceSwitch(context) {
    var keys;

    function click() {
@@ -37,4 +37,4 @@ iD.ui.SourceSwitch = function(context) {
    };

    return sourceSwitch;
-};
+}
--- a/modules/ui/spinner.js
+++ b/modules/ui/spinner.js
@@ -1,4 +1,4 @@
-iD.ui.Spinner = function(context) {
+export function Spinner(context) {
    var connection = context.connection();

    return function(selection) {
@@ -16,4 +16,4 @@ iD.ui.Spinner = function(context) {
                .style('opacity', 0);
        });
    };
-};
+}
--- a/modules/ui/splash.js
+++ b/modules/ui/splash.js
@@ -1,11 +1,14 @@
-iD.ui.Splash = function(context) {
+import { modal as modalModule } from './modal';
+import { intro } from './intro';
+
+export function Splash(context) {
    return function(selection) {
        if (context.storage('sawSplash'))
             return;

        context.storage('sawSplash', true);

-        var modal = iD.ui.modal(selection);
+        var modal = modalModule(selection);

        modal.select('.modal')
            .attr('class', 'modal-splash modal col6');
@@ -33,7 +36,7 @@ iD.ui.Splash = function(context) {
            .attr('class', 'col6 walkthrough')
            .text(t('splash.walkthrough'))
            .on('click', function() {
-                d3.select(document.body).call(iD.ui.intro(context));
+                d3.select(document.body).call(intro(context));
                modal.close();
            });

@@ -45,4 +48,4 @@ iD.ui.Splash = function(context) {
        modal.select('button.close').attr('class','hide');

    };
-};
+}
--- a/modules/ui/status.js
+++ b/modules/ui/status.js
@@ -1,4 +1,4 @@
-iD.ui.Status = function(context) {
+export function Status(context) {
    var connection = context.connection(),
        errCount = 0;

@@ -32,4 +32,4 @@ iD.ui.Status = function(context) {
        window.setInterval(update, 90000);
        update(selection);
    };
-};
+}
--- a/modules/ui/success.js
+++ b/modules/ui/success.js
@@ -1,4 +1,4 @@
-iD.ui.Success = function(context) {
+export function Success(context) {
    var dispatch = d3.dispatch('cancel'),
        changeset;

@@ -66,4 +66,4 @@ iD.ui.Success = function(context) {
    };

    return d3.rebind(success, dispatch, 'on');
-};
+}
--- a/modules/ui/tag_reference.js
+++ b/modules/ui/tag_reference.js
@@ -1,4 +1,4 @@
-iD.ui.TagReference = function(tag, context) {
+export function TagReference(tag, context) {
    var tagReference = {},
        button,
        body,
@@ -146,4 +146,4 @@ iD.ui.TagReference = function(tag, context) {
    };

    return tagReference;
-};
+}
--- a/modules/ui/toggle.js
+++ b/modules/ui/toggle.js
@@ -2,7 +2,7 @@
 // hide class, which sets display=none, and a d3 transition for opacity.
 // this will cause blinking when called repeatedly, so check that the
 // value actually changes between calls.
-iD.ui.Toggle = function(show, callback) {
+export function Toggle(show, callback) {
    return function(selection) {
        selection
            .style('opacity', show ? 0 : 1)
@@ -16,4 +16,4 @@ iD.ui.Toggle = function(show, callback) {
                if (callback) callback.apply(this);
            });
    };
-};
+}
--- a/modules/ui/undo_redo.js
+++ b/modules/ui/undo_redo.js
@@ -1,12 +1,14 @@
-iD.ui.UndoRedo = function(context) {
+import { cmd } from './cmd';
+
+export function UndoRedo(context) {
    var commands = [{
        id: 'undo',
-        cmd: iD.ui.cmd('⌘Z'),
+        cmd: cmd('⌘Z'),
        action: function() { if (!(context.inIntro() || saving())) context.undo(); },
        annotation: function() { return context.history().undoAnnotation(); }
    }, {
        id: 'redo',
-        cmd: iD.ui.cmd('⌘⇧Z'),
+        cmd: cmd('⌘⇧Z'),
        action: function() {if (!(context.inIntro() || saving())) context.redo(); },
        annotation: function() { return context.history().redoAnnotation(); }
    }];
@@ -62,4 +64,4 @@ iD.ui.UndoRedo = function(context) {
                });
        }
    };
-};
+}
--- a/modules/ui/view_on_osm.js
+++ b/modules/ui/view_on_osm.js
@@ -1,4 +1,4 @@
-iD.ui.ViewOnOSM = function(context) {
+export function ViewOnOSM(context) {
    var id;

    function viewOnOSM(selection) {
@@ -28,4 +28,4 @@ iD.ui.ViewOnOSM = function(context) {
    };

    return viewOnOSM;
-};
+}
--- a/modules/ui/zoom.js
+++ b/modules/ui/zoom.js
@@ -1,4 +1,6 @@
-iD.ui.Zoom = function(context) {
+import { cmd } from './cmd';
+
+export function Zoom(context) {
    var zooms = [{
        id: 'zoom-in',
        icon: 'plus',
@@ -58,17 +60,17 @@ iD.ui.Zoom = function(context) {
        _.each(['=','ffequals','plus','ffplus'], function(key) {
            keybinding.on(key, zoomIn);
            keybinding.on('⇧' + key, zoomIn);
-            keybinding.on(iD.ui.cmd('⌘' + key), zoomInFurther);
-            keybinding.on(iD.ui.cmd('⌘⇧' + key), zoomInFurther);
+            keybinding.on(cmd('⌘' + key), zoomInFurther);
+            keybinding.on(cmd('⌘⇧' + key), zoomInFurther);
        });
        _.each(['-','ffminus','_','dash'], function(key) {
            keybinding.on(key, zoomOut);
            keybinding.on('⇧' + key, zoomOut);
-            keybinding.on(iD.ui.cmd('⌘' + key), zoomOutFurther);
-            keybinding.on(iD.ui.cmd('⌘⇧' + key), zoomOutFurther);
+            keybinding.on(cmd('⌘' + key), zoomOutFurther);
+            keybinding.on(cmd('⌘⇧' + key), zoomOutFurther);
        });

        d3.select(document)
            .call(keybinding);
    };
-};
+}