import _ from 'lodash'; import { FeatureList } from './feature_list'; import { Inspector } from './inspector'; 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(FeatureList(context)); selection.call(Notice(context)); var inspectorWrap = selection.append('div') .attr('class', 'inspector-hidden inspector-wrap fr'); function hover(id) { if (!current && context.hasEntity(id)) { featureListWrap.classed('inspector-hidden', true); inspectorWrap.classed('inspector-hidden', false) .classed('inspector-hover', true); if (inspector.entityID() !== id || inspector.state() !== 'hover') { inspector .state('hover') .entityID(id); inspectorWrap.call(inspector); } } else if (!current) { featureListWrap.classed('inspector-hidden', false); inspectorWrap.classed('inspector-hidden', true); inspector.state('hide'); } } sidebar.hover = _.throttle(hover, 200); sidebar.select = function(id, newFeature) { if (!current && id) { featureListWrap.classed('inspector-hidden', true); inspectorWrap.classed('inspector-hidden', false) .classed('inspector-hover', false); if (inspector.entityID() !== id || inspector.state() !== 'select') { inspector .state('select') .entityID(id) .newFeature(newFeature); inspectorWrap.call(inspector); } } else if (!current) { featureListWrap.classed('inspector-hidden', false); inspectorWrap.classed('inspector-hidden', true); inspector.state('hide'); } }; sidebar.show = function(component) { featureListWrap.classed('inspector-hidden', true); inspectorWrap.classed('inspector-hidden', true); if (current) current.remove(); current = selection.append('div') .attr('class', 'sidebar-component') .call(component); }; sidebar.hide = function() { featureListWrap.classed('inspector-hidden', false); inspectorWrap.classed('inspector-hidden', true); if (current) current.remove(); current = null; }; } sidebar.hover = function() {}; sidebar.hover.cancel = function() {}; sidebar.select = function() {}; sidebar.show = function() {}; sidebar.hide = function() {}; return sidebar; }