Reorganize toolbar code

css/80_app.css

@@ -463,6 +463,7 @@ button[disabled].action:hover {
     margin-top: 1px;
     margin-bottom: 2px;
     font-size: 11px;
+    white-space: nowrap;
 }
 #bar .toolbar-item:not(.spacer) {
     margin: 0 5px 0 5px;

data/core.yaml

@@ -36,6 +36,7 @@ en:
       filter_tooltip: points
     add_note:
       title: Note
+      label: Add Note
       description: "Spotted an issue? Let other mappers know."
       tail: Click on the map to add a note.
       key: N

dist/locales/en.json

@@ -43,6 +43,7 @@
             },
             "add_note": {
                 "title": "Note",
+                "label": "Add Note",
                 "description": "Spotted an issue? Let other mappers know.",
                 "tail": "Click on the map to add a note.",
                 "key": "N"

modules/ui/index.js

@@ -42,7 +42,6 @@ export { uiLoading } from './loading';
 export { uiMapData } from './map_data';
 export { uiMapInMap } from './map_in_map';
 export { uiModal } from './modal';
-export { uiModes } from './modes';
 export { uiNotice } from './notice';
 export { uiNoteComments } from './note_comments';
 export { uiNoteEditor } from './note_editor';
@@ -57,7 +56,6 @@ export { uiRawMemberEditor } from './raw_member_editor';
 export { uiRawMembershipEditor } from './raw_membership_editor';
 export { uiRawTagEditor } from './raw_tag_editor';
 export { uiRestore } from './restore';
-export { uiSave } from './save';
 export { uiScale } from './scale';
 export { uiSelectionList } from './selection_list';
 export { uiSidebar } from './sidebar';
@@ -69,8 +67,7 @@ export { uiSuccess } from './success';
 export { uiTagReference } from './tag_reference';
 export { uiToggle } from './toggle';
 export { uiTooltipHtml } from './tooltipHtml';
-export { uiUndoRedo } from './undo_redo';
 export { uiVersion } from './version';
 export { uiViewOnOSM } from './view_on_osm';
 export { uiViewOnKeepRight } from './view_on_keepRight';
-export { uiZoom } from './zoom';
+export { uiZoom } from './zoom';

modules/ui/tools/add_recent.js

@@ -4,14 +4,19 @@ import _uniqWith from 'lodash-es/uniqWith';
 import { drag as d3_drag } from 'd3-drag';
 import { event as d3_event, select as d3_select } from 'd3-selection';
 
-import { modeAddArea, modeAddLine, modeAddPoint, modeBrowse } from '../modes';
-import { t, textDirection } from '../util/locale';
-import { tooltip } from '../util/tooltip';
-import { uiPresetIcon } from './preset_icon';
-import { uiTooltipHtml } from './tooltipHtml';
+import { modeAddArea, modeAddLine, modeAddPoint, modeBrowse } from '../../modes';
+import { t, textDirection } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
+import { uiPresetIcon } from '../preset_icon';
+import { uiTooltipHtml } from '../tooltipHtml';
 
 
-export function uiModes(context) {
+export function uiToolAddRecent(context) {
+
+    var tool = {
+        id: 'modes',
+        label: t('toolbar.recent')
+    };
 
     function enabled() {
         return osmEditable();
@@ -38,7 +43,7 @@ export function uiModes(context) {
     }
 
 
-    return function(selection) {
+    tool.render = function(selection) {
         context
             .on('enter.editor', function(entered) {
                 selection.selectAll('button.add-button')
@@ -313,4 +318,6 @@ export function uiModes(context) {
             context.ui().checkOverflow('#bar', true);
         }
     };
+
+    return tool;
 }

modules/ui/tools/index.js

@@ -0,0 +1,6 @@
+export * from './add_recent';
+export * from './notes';
+export * from './save';
+export * from './search_add';
+export * from './sidebar_toggle';
+export * from './undo_redo';

modules/ui/tools/notes.js

@@ -5,13 +5,19 @@ import { select as d3_select } from 'd3-selection';
 import {
     modeAddNote,
     modeBrowse
-} from '../modes';
+} from '../../modes';
 
-import { svgIcon } from '../svg';
-import { tooltip } from '../util/tooltip';
-import { uiTooltipHtml } from './tooltipHtml';
+import { t } from '../../util/locale';
+import { svgIcon } from '../../svg';
+import { tooltip } from '../../util/tooltip';
+import { uiTooltipHtml } from '../tooltipHtml';
 
-export function uiNotes(context) {
+export function uiToolNotes(context) {
+
+    var tool = {
+        id: 'notes',
+        label: t('modes.add_note.label')
+    };
 
     var mode = modeAddNote(context);
 
@@ -39,7 +45,7 @@ export function uiNotes(context) {
         }
     });
 
-    return function(selection) {
+    tool.render = function(selection) {
 
         context
             .on('enter.editor.notes', function(entered) {
@@ -109,11 +115,6 @@ export function uiNotes(context) {
                         .call(svgIcon(d.icon || '#iD-icon-' + d.button));
                 });
 
-            buttonsEnter
-                .append('span')
-                .attr('class', 'label')
-                .text(function(mode) { return mode.title; });
-
             // if we are adding/removing the buttons, check if toolbar has overflowed
             if (buttons.enter().size() || buttons.exit().size()) {
                 context.ui().checkOverflow('#bar', true);
@@ -125,4 +126,6 @@ export function uiNotes(context) {
                 .classed('disabled', function(d) { return !enabled(d); });
         }
     };
+
+    return tool;
 }

modules/ui/tools/save.js

@@ -1,21 +1,27 @@
 import { interpolateRgb as d3_interpolateRgb } from 'd3-interpolate';
 import { event as d3_event } from 'd3-selection';
 
-import { t } from '../util/locale';
-import { modeSave } from '../modes';
-import { svgIcon } from '../svg';
-import { uiCmd } from './cmd';
-import { uiTooltipHtml } from './tooltipHtml';
-import { tooltip } from '../util/tooltip';
+import { t } from '../../util/locale';
+import { modeSave } from '../../modes';
+import { svgIcon } from '../../svg';
+import { uiCmd } from '../cmd';
+import { uiTooltipHtml } from '../tooltipHtml';
+import { tooltip } from '../../util/tooltip';
 
 
-export function uiSave(context) {
+export function uiToolSave(context) {
+
+    var tool = {
+        id: 'save',
+        label: t('save.title')
+    };
+
     var history = context.history();
     var key = uiCmd('⌘S');
     var _numChanges = 0;
 
 
-    return function(selection) {
+    tool.render = function(selection) {
 
 
         function isSaving() {
@@ -109,4 +115,6 @@ export function uiSave(context) {
                 }
             });
     };
+
+    return tool;
 }

modules/ui/tools/search_add.js

@@ -7,18 +7,24 @@ import {
     selectAll as d3_selectAll
 } from 'd3-selection';
 
-import { modeAddArea, modeAddLine, modeAddPoint } from '../modes';
-import { t, textDirection } from '../util/locale';
-import { svgIcon } from '../svg/index';
-import { tooltip } from '../util/tooltip';
-import { uiTagReference } from './tag_reference';
-import { uiTooltipHtml } from './tooltipHtml';
-import { uiPresetFavoriteButton } from './preset_favorite_button';
-import { uiPresetIcon } from './preset_icon';
-import { utilKeybinding, utilNoAuto, utilRebind } from '../util';
+import { modeAddArea, modeAddLine, modeAddPoint } from '../../modes';
+import { t, textDirection } from '../../util/locale';
+import { svgIcon } from '../../svg/index';
+import { tooltip } from '../../util/tooltip';
+import { uiTagReference } from '../tag_reference';
+import { uiTooltipHtml } from '../tooltipHtml';
+import { uiPresetFavoriteButton } from '../preset_favorite_button';
+import { uiPresetIcon } from '../preset_icon';
+import { utilKeybinding, utilNoAuto, utilRebind } from '../../util';
 
 
-export function uiSearchAdd(context) {
+export function uiToolSearchAdd(context) {
+
+    var tool = {
+        id: 'search_add',
+        label: t('inspector.search')
+    };
+
     var dispatch = d3_dispatch('choose');
     var presets;
     var searchWrap = d3_select(null),
@@ -59,7 +65,7 @@ export function uiSearchAdd(context) {
     }
 
 
-    function searchAdd(selection) {
+    tool.render = function(selection) {
         updateShownGeometry(allowedGeometry.slice());   // shallow copy
 
         var key = t('modes.add_feature.key');
@@ -175,7 +181,7 @@ export function uiSearchAdd(context) {
         updateEnabledState();
 
         updateResultsList();
-    }
+    };
 
     function osmEditable() {
         var mode = context.mode();
@@ -635,5 +641,5 @@ export function uiSearchAdd(context) {
         return item;
     }
 
-    return utilRebind(searchAdd, dispatch, 'on');
+    return utilRebind(tool, dispatch, 'on');
 }

modules/ui/tools/sidebar_toggle.js

@@ -0,0 +1,31 @@
+
+import { t, textDirection } from '../../util/locale';
+import { svgIcon } from '../../svg';
+import { uiTooltipHtml } from '../tooltipHtml';
+import { tooltip } from '../../util/tooltip';
+
+export function uiToolSidebarToggle(context) {
+
+    var tool = {
+        id: 'sidebar_toggle',
+        label: t('toolbar.inspect')
+    };
+
+    tool.render = function(selection) {
+        selection
+            .append('button')
+            .attr('class', 'bar-button')
+            .attr('tabindex', -1)
+            .on('click', function() {
+                context.ui().sidebar.toggle();
+            })
+            .call(tooltip()
+                .placement('bottom')
+                .html(true)
+                .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key')))
+            )
+            .call(svgIcon('#iD-icon-sidebar-' + (textDirection === 'rtl' ? 'right' : 'left')));
+    };
+
+    return tool;
+}

modules/ui/tools/undo_redo.js

@@ -5,14 +5,20 @@ import {
     select as d3_select
 } from 'd3-selection';
 
-import { t, textDirection } from '../util/locale';
-import { svgIcon } from '../svg';
-import { uiCmd } from './cmd';
-import { uiTooltipHtml } from './tooltipHtml';
-import { tooltip } from '../util/tooltip';
+import { t, textDirection } from '../../util/locale';
+import { svgIcon } from '../../svg';
+import { uiCmd } from '../cmd';
+import { uiTooltipHtml } from '../tooltipHtml';
+import { tooltip } from '../../util/tooltip';
 
 
-export function uiUndoRedo(context) {
+export function uiToolUndoRedo(context) {
+
+    var tool = {
+        id: 'undo_redo',
+        label: t('toolbar.undo_redo')
+    };
+
     var commands = [{
         id: 'undo',
         cmd: uiCmd('⌘Z'),
@@ -32,7 +38,7 @@ export function uiUndoRedo(context) {
     }
 
 
-    return function(selection) {
+    tool.render = function(selection) {
         var tooltipBehavior = tooltip()
             .placement('bottom')
             .html(true)
@@ -93,4 +99,6 @@ export function uiUndoRedo(context) {
                 });
         }
     };
+
+    return tool;
 }

modules/ui/top_toolbar.js

@@ -4,52 +4,17 @@ import {
 } from 'd3-selection';
 
 import _debounce from 'lodash-es/debounce';
-
-import { svgIcon } from '../svg';
-import { t, textDirection } from '../util/locale';
-import { tooltip } from '../util/tooltip';
-
-import { uiModes } from './modes';
-import { uiNotes } from './notes';
-import { uiSave } from './save';
-import { uiSearchAdd } from './search_add';
-import { uiTooltipHtml } from './tooltipHtml';
-import { uiUndoRedo } from './undo_redo';
+import { uiToolAddRecent, uiToolNotes, uiToolSave, uiToolSearchAdd, uiToolSidebarToggle, uiToolUndoRedo } from './tools';
 
 
 export function uiTopToolbar(context) {
 
-    var searchAdd = uiSearchAdd(context),
-        modes = uiModes(context),
-        notes = uiNotes(context),
-        undoRedo = uiUndoRedo(context),
-        save = uiSave(context);
-
-    var sidebarToggle = function(selection) {
-
-        selection
-            .append('button')
-            .attr('class', 'bar-button')
-            .attr('tabindex', -1)
-            .on('click', function() {
-                context.ui().sidebar.toggle();
-            })
-            .call(tooltip()
-                .placement('bottom')
-                .html(true)
-                .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key')))
-            )
-            .call(svgIcon('#iD-icon-sidebar-' + (textDirection === 'rtl' ? 'right' : 'left')));
-    };
-
-    var itemContentByID = {
-        sidebar_toggle: sidebarToggle,
-        search_add: searchAdd,
-        modes: modes,
-        notes: notes,
-        undo_redo: undoRedo,
-        save: save
-    };
+    var sidebarToggle = uiToolSidebarToggle(context),
+        searchAdd = uiToolSearchAdd(context),
+        addRecent = uiToolAddRecent(context),
+        notes = uiToolNotes(context),
+        undoRedo = uiToolUndoRedo(context),
+        save = uiToolSave(context);
 
     function notesEnabled() {
         var noteLayer = context.layers().layer('notes');
@@ -66,23 +31,23 @@ export function uiTopToolbar(context) {
 
         function update() {
 
-            var toolbarItemIDs = [
-                'sidebar_toggle',
+            var tools = [
+                sidebarToggle,
                 'spacer',
-                'search_add',
-                'modes',
+                searchAdd,
+                addRecent,
                 'spacer'
             ];
 
             if (notesEnabled()) {
-                toolbarItemIDs = toolbarItemIDs.concat(['notes', 'spacer']);
+                tools = tools.concat([notes, 'spacer']);
             }
 
-            toolbarItemIDs = toolbarItemIDs.concat(['undo_redo', 'save']);
+            tools = tools.concat([undoRedo, save]);
 
             var toolbarItems = bar.selectAll('.toolbar-item')
-                .data(toolbarItemIDs, function(d) {
-                    return d;
+                .data(tools, function(d) {
+                    return d.id || d;
                 });
 
             toolbarItems.exit()
@@ -92,7 +57,7 @@ export function uiTopToolbar(context) {
                 .enter()
                 .append('div')
                 .attr('class', function(d) {
-                    return 'toolbar-item ' + d.replace('_', '-');
+                    return 'toolbar-item ' + (d.id || d).replace('_', '-');
                 });
 
             var actionableItems = itemsEnter.filter(function(d) { return d !== 'spacer'; });
@@ -101,25 +66,14 @@ export function uiTopToolbar(context) {
                 .append('div')
                 .attr('class', 'item-content')
                 .each(function(d) {
-                    d3_select(this).call(itemContentByID[d], bar);
+                    d3_select(this).call(d.render, bar);
                 });
 
             actionableItems
                 .append('div')
                 .attr('class', 'item-label')
                 .text(function(d) {
-                    switch (d) {
-                    case 'sidebar_toggle':
-                        return t('toolbar.inspect');
-                    case 'save':
-                        return t('save.title');
-                    case 'search_add':
-                        return t('inspector.search');
-                    case 'modes':
-                        return t('toolbar.recent');
-                    default:
-                        return t('toolbar.' + d);
-                    }
+                    return d.label;
                 });
         }