Files
iD/modules/ui/top_toolbar.js
T
Quincy Morgan 523a467836 2.x: Make toolbar horizontally scrollable when it overflows (re: #6755, re: 7545f67063b5e7007ef2d8367e3181e59c04a487)
Generalize tooltip into popover control
Use the same popover control for tooltip as the preset browser and tools list popovers
Smartly position the preset browser popover and menu bar tooltips to stay fully onscreen
Position most tooltips closer to their controls
Fix small gap that could appear between a tooltip and its arrow
Allow wider toolbar tooltips
2019-12-16 13:30:07 -05:00

115 lines
3.3 KiB
JavaScript

import {
event as d3_event,
select as d3_select
} from 'd3-selection';
import _debounce from 'lodash-es/debounce';
import { /*uiToolAddFavorite, uiToolAddRecent, uiToolSearchAdd, */ uiToolOldDrawModes, uiToolNotes, uiToolSave, uiToolSidebarToggle, uiToolUndoRedo } from './tools';
export function uiTopToolbar(context) {
var sidebarToggle = uiToolSidebarToggle(context),
modes = uiToolOldDrawModes(context),
//searchAdd = uiToolSearchAdd(context),
//addFavorite = uiToolAddFavorite(context),
//addRecent = uiToolAddRecent(context),
notes = uiToolNotes(context),
undoRedo = uiToolUndoRedo(context),
save = uiToolSave(context);
function notesEnabled() {
var noteLayer = context.layers().layer('notes');
return noteLayer && noteLayer.enabled();
}
function topToolbar(bar) {
bar.on('wheel.topToolbar', function() {
if (!d3_event.deltaX) {
// translate vertical scrolling into horizontal scrolling in case
// the user doesn't have an input device that can scroll horizontally
bar.node().scrollLeft += d3_event.deltaY;
}
});
var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true });
context.layers()
.on('change.topToolbar', debouncedUpdate);
context.presets()
.on('favoritePreset.topToolbar', update)
.on('recentsChange.topToolbar', update);
update();
function update() {
var tools = [
sidebarToggle,
'spacer',
modes
// searchAdd
];
/*
if (context.presets().getFavorites().length > 0) {
tools.push(addFavorite);
}
if (addRecent.shouldShow()) {
tools.push(addRecent);
}*/
tools.push('spacer');
if (notesEnabled()) {
tools = tools.concat([notes, 'spacer']);
}
tools = tools.concat([undoRedo, save]);
var toolbarItems = bar.selectAll('.toolbar-item')
.data(tools, function(d) {
return d.id || d;
});
toolbarItems.exit()
.each(function(d) {
if (d.uninstall) {
d.uninstall();
}
})
.remove();
var itemsEnter = toolbarItems
.enter()
.append('div')
.attr('class', function(d) {
var classes = 'toolbar-item ' + (d.id || d).replace('_', '-');
if (d.klass) classes += ' ' + d.klass;
return classes;
});
var actionableItems = itemsEnter.filter(function(d) { return d !== 'spacer'; });
actionableItems
.append('div')
.attr('class', 'item-content')
.each(function(d) {
d3_select(this).call(d.render, bar);
});
actionableItems
.append('div')
.attr('class', 'item-label')
.text(function(d) {
return d.label;
});
}
}
return topToolbar;
}