Move map features and map style options to their own pane section objects (re: #7368)

Handle area fill and change highlighting logic in the rendererMap object and issue change events

modules/ui/sections/map_features.js

@@ -0,0 +1,127 @@
+import { t } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
+import { uiSection } from '../section';
+import { uiTooltipHtml } from '../tooltipHtml';
+
+export function uiSectionMapFeatures(context) {
+
+    var _features = context.features().keys();
+
+    var section = uiSection('map-features', context)
+        .title(t('map_data.map_features'))
+        .expandedByDefault(false);
+
+    section.renderDisclosureContent = function(selection) {
+
+        var container = selection.selectAll('.layer-feature-list-container')
+            .data([0]);
+
+        var containerEnter = container.enter()
+            .append('div')
+            .attr('class', 'layer-feature-list-container');
+
+        containerEnter
+            .append('ul')
+            .attr('class', 'layer-list layer-feature-list');
+
+        var footer = containerEnter
+            .append('div')
+            .attr('class', 'feature-list-links section-footer');
+
+        footer
+            .append('a')
+            .attr('class', 'feature-list-link')
+            .attr('href', '#')
+            .text(t('issues.enable_all'))
+            .on('click', function() {
+                context.features().enableAll();
+            });
+
+        footer
+            .append('a')
+            .attr('class', 'feature-list-link')
+            .attr('href', '#')
+            .text(t('issues.disable_all'))
+            .on('click', function() {
+                context.features().disableAll();
+            });
+
+        // Update
+        container = container
+            .merge(containerEnter);
+
+        container.selectAll('.layer-feature-list')
+            .call(drawListItems, _features, 'checkbox', 'feature', clickFeature, showsFeature);
+    };
+
+    function drawListItems(selection, data, type, name, change, active) {
+        var items = selection.selectAll('li')
+            .data(data);
+
+        // Exit
+        items.exit()
+            .remove();
+
+        // Enter
+        var enter = items.enter()
+            .append('li')
+            .call(tooltip()
+                .html(true)
+                .title(function(d) {
+                    var tip = t(name + '.' + d + '.tooltip');
+                    if (autoHiddenFeature(d)) {
+                        var msg = showsLayer('osm') ? t('map_data.autohidden') : t('map_data.osmhidden');
+                        tip += '<div>' + msg + '</div>';
+                    }
+                    return uiTooltipHtml(tip);
+                })
+                .placement('top')
+            );
+
+        var label = enter
+            .append('label');
+
+        label
+            .append('input')
+            .attr('type', type)
+            .attr('name', name)
+            .on('change', change);
+
+        label
+            .append('span')
+            .text(function(d) { return t(name + '.' + d + '.description'); });
+
+        // Update
+        items = items
+            .merge(enter);
+
+        items
+            .classed('active', active)
+            .selectAll('input')
+            .property('checked', active)
+            .property('indeterminate', autoHiddenFeature);
+    }
+
+    function autoHiddenFeature(d) {
+        return context.features().autoHidden(d);
+    }
+
+    function showsFeature(d) {
+        return context.features().enabled(d);
+    }
+
+    function clickFeature(d) {
+        context.features().toggle(d);
+    }
+
+    function showsLayer(id) {
+        var layer = context.layers().layer(id);
+        return layer && layer.enabled();
+    }
+
+    // add listeners
+    context.features()
+        .on('change.map_features', section.rerenderContent);
+
+    return section;
+}

modules/ui/sections/map_style_options.js

@@ -0,0 +1,101 @@
+import {
+    event as d3_event
+} from 'd3-selection';
+
+import { t } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
+import { uiSection } from '../section';
+import { uiTooltipHtml } from '../tooltipHtml';
+
+export function uiSectionMapStyleOptions(context) {
+
+    var section = uiSection('fill-area', context)
+        .title(t('map_data.style_options'))
+        .expandedByDefault(false);
+
+    section.renderDisclosureContent = function(selection) {
+        var container = selection.selectAll('.layer-fill-list')
+            .data([0]);
+
+        container.enter()
+            .append('ul')
+            .attr('class', 'layer-list layer-fill-list')
+            .merge(container)
+            .call(drawListItems, context.map().areaFillOptions, 'radio', 'area_fill', setFill, isActiveFill);
+
+        var container2 = selection.selectAll('.layer-visual-diff-list')
+            .data([0]);
+
+        container2.enter()
+            .append('ul')
+            .attr('class', 'layer-list layer-visual-diff-list')
+            .merge(container2)
+            .call(drawListItems, ['highlight_edits'], 'checkbox', 'visual_diff', toggleHighlightEdited, function() {
+                return context.surface().classed('highlight-edited');
+            });
+    };
+
+    function drawListItems(selection, data, type, name, change, active) {
+        var items = selection.selectAll('li')
+            .data(data);
+
+        // Exit
+        items.exit()
+            .remove();
+
+        // Enter
+        var enter = items.enter()
+            .append('li')
+            .call(tooltip()
+                .html(true)
+                .title(function(d) {
+                    var tip = t(name + '.' + d + '.tooltip');
+                    var key = (d === 'wireframe' ? t('area_fill.wireframe.key') : null);
+                    if (d === 'highlight_edits') key = t('map_data.highlight_edits.key');
+                    return uiTooltipHtml(tip, key);
+                })
+                .placement('top')
+            );
+
+        var label = enter
+            .append('label');
+
+        label
+            .append('input')
+            .attr('type', type)
+            .attr('name', name)
+            .on('change', change);
+
+        label
+            .append('span')
+            .text(function(d) { return t(name + '.' + d + '.description'); });
+
+        // Update
+        items = items
+            .merge(enter);
+
+        items
+            .classed('active', active)
+            .selectAll('input')
+            .property('checked', active)
+            .property('indeterminate', false);
+    }
+
+    function isActiveFill(d) {
+        return context.map().activeAreaFill() === d;
+    }
+
+    function toggleHighlightEdited() {
+        d3_event.preventDefault();
+        context.map().toggleHighlightEdited();
+    }
+
+    function setFill(d) {
+        context.map().activeAreaFill(d);
+    }
+
+    context.map()
+        .on('changeHighlighting.ui_style, changeAreaFill.ui_style', section.rerenderContent);
+
+    return section;
+}