mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-18 14:45:12 +02:00
Use uiDisclosure for data pane subsections
This commit is contained in:
Bryan Housel
@@ -147,7 +147,7 @@ export function uiBackground(context) {
|
||||
}
|
||||
|
||||
|
||||
function drawList(layerList, type, change, filter) {
|
||||
function drawListItems(layerList, type, change, filter) {
|
||||
var sources = context.background()
|
||||
.sources(context.map().extent())
|
||||
.filter(filter);
|
||||
@@ -204,10 +204,10 @@ export function uiBackground(context) {
|
||||
|
||||
function update() {
|
||||
backgroundList
|
||||
.call(drawList, 'radio', clickSetSource, function(d) { return !d.isHidden() && !d.overlay; });
|
||||
.call(drawListItems, 'radio', clickSetSource, function(d) { return !d.isHidden() && !d.overlay; });
|
||||
|
||||
overlayList
|
||||
.call(drawList, 'checkbox', clickSetOverlay, function(d) { return !d.isHidden() && d.overlay; });
|
||||
.call(drawListItems, 'checkbox', clickSetOverlay, function(d) { return !d.isHidden() && d.overlay; });
|
||||
|
||||
selectLayer();
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ export function uiDisclosure(context, key, expandedDefault) {
|
||||
hideToggle = hideToggle.enter()
|
||||
.append('a')
|
||||
.attr('href', '#')
|
||||
.attr('class', 'hide-toggle')
|
||||
.attr('class', 'hide-toggle hide-toggle-' + key)
|
||||
.merge(hideToggle);
|
||||
|
||||
hideToggle
|
||||
@@ -29,11 +29,12 @@ export function uiDisclosure(context, key, expandedDefault) {
|
||||
.classed('expanded', _expanded);
|
||||
|
||||
|
||||
var wrap = selection.selectAll('div')
|
||||
var wrap = selection.selectAll('.disclosure-wrap')
|
||||
.data([0]);
|
||||
|
||||
wrap = wrap.enter()
|
||||
.append('div')
|
||||
.attr('class', 'disclosure-wrap disclosure-wrap-' + key)
|
||||
.merge(wrap);
|
||||
|
||||
wrap
|
||||
|
||||
+396
-387
@@ -5,380 +5,424 @@ import {
|
||||
|
||||
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
|
||||
|
||||
import { t, textDirection } from '../util/locale';
|
||||
import { svgIcon } from '../svg';
|
||||
import { uiTooltipHtml } from './tooltipHtml';
|
||||
import { t, textDirection } from '../util/locale';
|
||||
import { tooltip } from '../util/tooltip';
|
||||
import { uiDisclosure } from './disclosure';
|
||||
import { uiTooltipHtml } from './tooltipHtml';
|
||||
|
||||
|
||||
export function uiMapData(context) {
|
||||
var key = t('map_data.key'),
|
||||
features = context.features().keys(),
|
||||
layers = context.layers(),
|
||||
fills = ['wireframe', 'partial', 'full'],
|
||||
fillDefault = context.storage('area-fill') || 'partial',
|
||||
fillSelected = fillDefault;
|
||||
var key = t('map_data.key');
|
||||
var features = context.features().keys();
|
||||
var layers = context.layers();
|
||||
var fills = ['wireframe', 'partial', 'full'];
|
||||
|
||||
var _fillDefault = context.storage('area-fill') || 'partial';
|
||||
var _fillSelected = _fillDefault;
|
||||
var _shown = false;
|
||||
var _dataLayerContainer = d3_select(null);
|
||||
var _fillList = d3_select(null);
|
||||
var _featureList = d3_select(null);
|
||||
|
||||
|
||||
function map_data(selection) {
|
||||
|
||||
function showsFeature(d) {
|
||||
return context.features().enabled(d);
|
||||
function showsFeature(d) {
|
||||
return context.features().enabled(d);
|
||||
}
|
||||
|
||||
|
||||
function autoHiddenFeature(d) {
|
||||
return context.features().autoHidden(d);
|
||||
}
|
||||
|
||||
|
||||
function clickFeature(d) {
|
||||
context.features().toggle(d);
|
||||
update();
|
||||
}
|
||||
|
||||
|
||||
function showsFill(d) {
|
||||
return _fillSelected === d;
|
||||
}
|
||||
|
||||
|
||||
function setFill(d) {
|
||||
fills.forEach(function(opt) {
|
||||
context.surface().classed('fill-' + opt, Boolean(opt === d));
|
||||
});
|
||||
|
||||
_fillSelected = d;
|
||||
if (d !== 'wireframe') {
|
||||
_fillDefault = d;
|
||||
context.storage('area-fill', d);
|
||||
}
|
||||
update();
|
||||
}
|
||||
|
||||
|
||||
function autoHiddenFeature(d) {
|
||||
return context.features().autoHidden(d);
|
||||
function showsLayer(which) {
|
||||
var layer = layers.layer(which);
|
||||
if (layer) {
|
||||
return layer.enabled();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
function clickFeature(d) {
|
||||
context.features().toggle(d);
|
||||
function setLayer(which, enabled) {
|
||||
var layer = layers.layer(which);
|
||||
if (layer) {
|
||||
layer.enabled(enabled);
|
||||
update();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function showsFill(d) {
|
||||
return fillSelected === d;
|
||||
function toggleLayer(which) {
|
||||
setLayer(which, !showsLayer(which));
|
||||
}
|
||||
|
||||
|
||||
function drawPhotoItems(selection) {
|
||||
var photoKeys = ['mapillary-images', 'mapillary-signs', 'openstreetcam-images'];
|
||||
var photoLayers = layers.all().filter(function(obj) { return photoKeys.indexOf(obj.id) !== -1; });
|
||||
var data = photoLayers.filter(function(obj) { return obj.layer.supported(); });
|
||||
|
||||
function layerSupported(d) {
|
||||
return d.layer && d.layer.supported();
|
||||
}
|
||||
function layerEnabled(d) {
|
||||
return layerSupported(d) && d.layer.enabled();
|
||||
}
|
||||
|
||||
var ul = selection
|
||||
.selectAll('.layer-list-photos')
|
||||
.data([0]);
|
||||
|
||||
function setFill(d) {
|
||||
fills.forEach(function(opt) {
|
||||
context.surface().classed('fill-' + opt, Boolean(opt === d));
|
||||
ul = ul.enter()
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-list-photos')
|
||||
.merge(ul);
|
||||
|
||||
var li = ul.selectAll('.list-item-photos')
|
||||
.data(data);
|
||||
|
||||
li.exit()
|
||||
.remove();
|
||||
|
||||
var liEnter = li.enter()
|
||||
.append('li')
|
||||
.attr('class', function(d) { return 'list-item-photos list-item-' + d.id; });
|
||||
|
||||
var labelEnter = liEnter
|
||||
.append('label')
|
||||
.each(function(d) {
|
||||
d3_select(this)
|
||||
.call(tooltip()
|
||||
.title(t(d.id.replace('-', '_') + '.tooltip'))
|
||||
.placement('top')
|
||||
);
|
||||
});
|
||||
|
||||
fillSelected = d;
|
||||
if (d !== 'wireframe') {
|
||||
fillDefault = d;
|
||||
context.storage('area-fill', d);
|
||||
}
|
||||
update();
|
||||
}
|
||||
labelEnter
|
||||
.append('input')
|
||||
.attr('type', 'checkbox')
|
||||
.on('change', function(d) { toggleLayer(d.id); });
|
||||
|
||||
labelEnter
|
||||
.append('span')
|
||||
.text(function(d) { return t(d.id.replace('-', '_') + '.title'); });
|
||||
|
||||
|
||||
function showsLayer(which) {
|
||||
var layer = layers.layer(which);
|
||||
if (layer) {
|
||||
return layer.enabled();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
// Update
|
||||
li = li
|
||||
.merge(liEnter);
|
||||
|
||||
li
|
||||
.classed('active', layerEnabled)
|
||||
.selectAll('input')
|
||||
.property('checked', layerEnabled);
|
||||
}
|
||||
|
||||
|
||||
function setLayer(which, enabled) {
|
||||
var layer = layers.layer(which);
|
||||
if (layer) {
|
||||
layer.enabled(enabled);
|
||||
update();
|
||||
}
|
||||
}
|
||||
function drawOsmItem(selection) {
|
||||
var osm = layers.layer('osm'),
|
||||
showsOsm = osm.enabled();
|
||||
|
||||
var ul = selection
|
||||
.selectAll('.layer-list-osm')
|
||||
.data(osm ? [0] : []);
|
||||
|
||||
// Exit
|
||||
ul.exit()
|
||||
.remove();
|
||||
|
||||
// Enter
|
||||
var ulEnter = ul.enter()
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-list-osm');
|
||||
|
||||
var liEnter = ulEnter
|
||||
.append('li')
|
||||
.attr('class', 'list-item-osm');
|
||||
|
||||
var labelEnter = liEnter
|
||||
.append('label')
|
||||
.call(tooltip()
|
||||
.title(t('map_data.layers.osm.tooltip'))
|
||||
.placement('top')
|
||||
);
|
||||
|
||||
labelEnter
|
||||
.append('input')
|
||||
.attr('type', 'checkbox')
|
||||
.on('change', function() { toggleLayer('osm'); });
|
||||
|
||||
labelEnter
|
||||
.append('span')
|
||||
.text(t('map_data.layers.osm.title'));
|
||||
|
||||
// Update
|
||||
ul = ul
|
||||
.merge(ulEnter);
|
||||
|
||||
ul.selectAll('.list-item-osm')
|
||||
.classed('active', showsOsm)
|
||||
.selectAll('input')
|
||||
.property('checked', showsOsm);
|
||||
}
|
||||
|
||||
|
||||
function toggleLayer(which) {
|
||||
setLayer(which, !showsLayer(which));
|
||||
}
|
||||
function drawGpxItem(selection) {
|
||||
var gpx = layers.layer('gpx'),
|
||||
hasGpx = gpx && gpx.hasGpx(),
|
||||
showsGpx = hasGpx && gpx.enabled();
|
||||
|
||||
var ul = selection
|
||||
.selectAll('.layer-list-gpx')
|
||||
.data(gpx ? [0] : []);
|
||||
|
||||
function drawPhotoItems(selection) {
|
||||
var photoKeys = ['mapillary-images', 'mapillary-signs', 'openstreetcam-images'];
|
||||
var photoLayers = layers.all().filter(function(obj) { return photoKeys.indexOf(obj.id) !== -1; });
|
||||
var data = photoLayers.filter(function(obj) { return obj.layer.supported(); });
|
||||
// Exit
|
||||
ul.exit()
|
||||
.remove();
|
||||
|
||||
function layerSupported(d) {
|
||||
return d.layer && d.layer.supported();
|
||||
}
|
||||
function layerEnabled(d) {
|
||||
return layerSupported(d) && d.layer.enabled();
|
||||
}
|
||||
// Enter
|
||||
var ulEnter = ul.enter()
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-list-gpx');
|
||||
|
||||
var ul = selection
|
||||
.selectAll('.layer-list-photos')
|
||||
.data([0]);
|
||||
var liEnter = ulEnter
|
||||
.append('li')
|
||||
.attr('class', 'list-item-gpx');
|
||||
|
||||
ul = ul.enter()
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-list-photos')
|
||||
.merge(ul);
|
||||
liEnter
|
||||
.append('button')
|
||||
.attr('class', 'list-item-gpx-extent')
|
||||
.call(tooltip()
|
||||
.title(t('gpx.zoom'))
|
||||
.placement((textDirection === 'rtl') ? 'right' : 'left')
|
||||
)
|
||||
.on('click', function() {
|
||||
d3_event.preventDefault();
|
||||
d3_event.stopPropagation();
|
||||
gpx.fitZoom();
|
||||
})
|
||||
.call(svgIcon('#icon-search'));
|
||||
|
||||
var li = ul.selectAll('.list-item-photos')
|
||||
.data(data);
|
||||
|
||||
li.exit()
|
||||
.remove();
|
||||
|
||||
var liEnter = li.enter()
|
||||
.append('li')
|
||||
.attr('class', function(d) { return 'list-item-photos list-item-' + d.id; });
|
||||
|
||||
var labelEnter = liEnter
|
||||
.append('label')
|
||||
.each(function(d) {
|
||||
d3_select(this)
|
||||
.call(tooltip()
|
||||
.title(t(d.id.replace('-', '_') + '.tooltip'))
|
||||
.placement('top')
|
||||
);
|
||||
});
|
||||
|
||||
labelEnter
|
||||
.append('input')
|
||||
.attr('type', 'checkbox')
|
||||
.on('change', function(d) { toggleLayer(d.id); });
|
||||
|
||||
labelEnter
|
||||
.append('span')
|
||||
.text(function(d) { return t(d.id.replace('-', '_') + '.title'); });
|
||||
|
||||
|
||||
// Update
|
||||
li = li
|
||||
.merge(liEnter);
|
||||
|
||||
li
|
||||
.classed('active', layerEnabled)
|
||||
.selectAll('input')
|
||||
.property('checked', layerEnabled);
|
||||
}
|
||||
|
||||
|
||||
function drawOsmItem(selection) {
|
||||
var osm = layers.layer('osm'),
|
||||
showsOsm = osm.enabled();
|
||||
|
||||
var ul = selection
|
||||
.selectAll('.layer-list-osm')
|
||||
.data(osm ? [0] : []);
|
||||
|
||||
// Exit
|
||||
ul.exit()
|
||||
.remove();
|
||||
|
||||
// Enter
|
||||
var ulEnter = ul.enter()
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-list-osm');
|
||||
|
||||
var liEnter = ulEnter
|
||||
.append('li')
|
||||
.attr('class', 'list-item-osm');
|
||||
|
||||
var labelEnter = liEnter
|
||||
.append('label')
|
||||
.call(tooltip()
|
||||
.title(t('map_data.layers.osm.tooltip'))
|
||||
.placement('top')
|
||||
);
|
||||
|
||||
labelEnter
|
||||
.append('input')
|
||||
.attr('type', 'checkbox')
|
||||
.on('change', function() { toggleLayer('osm'); });
|
||||
|
||||
labelEnter
|
||||
.append('span')
|
||||
.text(t('map_data.layers.osm.title'));
|
||||
|
||||
// Update
|
||||
ul = ul
|
||||
.merge(ulEnter);
|
||||
|
||||
ul.selectAll('.list-item-osm')
|
||||
.classed('active', showsOsm)
|
||||
.selectAll('input')
|
||||
.property('checked', showsOsm);
|
||||
}
|
||||
|
||||
|
||||
function drawGpxItem(selection) {
|
||||
var gpx = layers.layer('gpx'),
|
||||
hasGpx = gpx && gpx.hasGpx(),
|
||||
showsGpx = hasGpx && gpx.enabled();
|
||||
|
||||
var ul = selection
|
||||
.selectAll('.layer-list-gpx')
|
||||
.data(gpx ? [0] : []);
|
||||
|
||||
// Exit
|
||||
ul.exit()
|
||||
.remove();
|
||||
|
||||
// Enter
|
||||
var ulEnter = ul.enter()
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-list-gpx');
|
||||
|
||||
var liEnter = ulEnter
|
||||
.append('li')
|
||||
.attr('class', 'list-item-gpx');
|
||||
|
||||
liEnter
|
||||
.append('button')
|
||||
.attr('class', 'list-item-gpx-extent')
|
||||
.call(tooltip()
|
||||
.title(t('gpx.zoom'))
|
||||
.placement((textDirection === 'rtl') ? 'right' : 'left'))
|
||||
.on('click', function() {
|
||||
d3_event.preventDefault();
|
||||
d3_event.stopPropagation();
|
||||
gpx.fitZoom();
|
||||
})
|
||||
.call(svgIcon('#icon-search'));
|
||||
|
||||
liEnter
|
||||
.append('button')
|
||||
.attr('class', 'list-item-gpx-browse')
|
||||
.call(tooltip()
|
||||
.title(t('gpx.browse'))
|
||||
.placement((textDirection === 'rtl') ? 'right' : 'left')
|
||||
)
|
||||
.on('click', function() {
|
||||
d3_select(document.createElement('input'))
|
||||
.attr('type', 'file')
|
||||
.on('change', function() {
|
||||
gpx.files(d3_event.target.files);
|
||||
})
|
||||
.node().click();
|
||||
})
|
||||
.call(svgIcon('#icon-geolocate'));
|
||||
|
||||
var labelEnter = liEnter
|
||||
.append('label')
|
||||
.call(tooltip()
|
||||
.title(t('gpx.drag_drop'))
|
||||
.placement('top')
|
||||
);
|
||||
|
||||
labelEnter
|
||||
.append('input')
|
||||
.attr('type', 'checkbox')
|
||||
.on('change', function() { toggleLayer('gpx'); });
|
||||
|
||||
labelEnter
|
||||
.append('span')
|
||||
.text(t('gpx.local_layer'));
|
||||
|
||||
// Update
|
||||
ul = ul
|
||||
.merge(ulEnter);
|
||||
|
||||
ul.selectAll('.list-item-gpx')
|
||||
.classed('active', showsGpx)
|
||||
.selectAll('label')
|
||||
.classed('deemphasize', !hasGpx)
|
||||
.selectAll('input')
|
||||
.property('disabled', !hasGpx)
|
||||
.property('checked', showsGpx);
|
||||
}
|
||||
|
||||
|
||||
function drawList(selection, data, type, name, change, active) {
|
||||
var items = selection.selectAll('li')
|
||||
.data(data);
|
||||
|
||||
// Exit
|
||||
items.exit()
|
||||
.remove();
|
||||
|
||||
// Enter
|
||||
var enter = items.enter()
|
||||
.append('li')
|
||||
.attr('class', 'layer')
|
||||
.call(tooltip()
|
||||
.html(true)
|
||||
.title(function(d) {
|
||||
var tip = t(name + '.' + d + '.tooltip'),
|
||||
key = (d === 'wireframe' ? t('area_fill.wireframe.key') : null);
|
||||
|
||||
if (name === 'feature' && autoHiddenFeature(d)) {
|
||||
var msg = showsLayer('osm') ? t('map_data.autohidden') : t('map_data.osmhidden');
|
||||
tip += '<div>' + msg + '</div>';
|
||||
}
|
||||
return uiTooltipHtml(tip, key);
|
||||
liEnter
|
||||
.append('button')
|
||||
.attr('class', 'list-item-gpx-browse')
|
||||
.call(tooltip()
|
||||
.title(t('gpx.browse'))
|
||||
.placement((textDirection === 'rtl') ? 'right' : 'left')
|
||||
)
|
||||
.on('click', function() {
|
||||
d3_select(document.createElement('input'))
|
||||
.attr('type', 'file')
|
||||
.on('change', function() {
|
||||
gpx.files(d3_event.target.files);
|
||||
})
|
||||
.placement('top')
|
||||
);
|
||||
.node().click();
|
||||
})
|
||||
.call(svgIcon('#icon-geolocate'));
|
||||
|
||||
var label = enter
|
||||
.append('label');
|
||||
var labelEnter = liEnter
|
||||
.append('label')
|
||||
.call(tooltip()
|
||||
.title(t('gpx.drag_drop'))
|
||||
.placement('top')
|
||||
);
|
||||
|
||||
label
|
||||
.append('input')
|
||||
.attr('type', type)
|
||||
.attr('name', name)
|
||||
.on('change', change);
|
||||
labelEnter
|
||||
.append('input')
|
||||
.attr('type', 'checkbox')
|
||||
.on('change', function() { toggleLayer('gpx'); });
|
||||
|
||||
label
|
||||
.append('span')
|
||||
.text(function(d) { return t(name + '.' + d + '.description'); });
|
||||
labelEnter
|
||||
.append('span')
|
||||
.text(t('gpx.local_layer'));
|
||||
|
||||
// Update
|
||||
items = items
|
||||
.merge(enter);
|
||||
// Update
|
||||
ul = ul
|
||||
.merge(ulEnter);
|
||||
|
||||
items
|
||||
.classed('active', active)
|
||||
.selectAll('input')
|
||||
.property('checked', active)
|
||||
.property('indeterminate', function(d) {
|
||||
return (name === 'feature' && autoHiddenFeature(d));
|
||||
});
|
||||
ul.selectAll('.list-item-gpx')
|
||||
.classed('active', showsGpx)
|
||||
.selectAll('label')
|
||||
.classed('deemphasize', !hasGpx)
|
||||
.selectAll('input')
|
||||
.property('disabled', !hasGpx)
|
||||
.property('checked', showsGpx);
|
||||
}
|
||||
|
||||
|
||||
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')
|
||||
.attr('class', 'layer')
|
||||
.call(tooltip()
|
||||
.html(true)
|
||||
.title(function(d) {
|
||||
var tip = t(name + '.' + d + '.tooltip'),
|
||||
key = (d === 'wireframe' ? t('area_fill.wireframe.key') : null);
|
||||
|
||||
if (name === 'feature' && autoHiddenFeature(d)) {
|
||||
var msg = showsLayer('osm') ? t('map_data.autohidden') : t('map_data.osmhidden');
|
||||
tip += '<div>' + msg + '</div>';
|
||||
}
|
||||
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', function(d) {
|
||||
return (name === 'feature' && autoHiddenFeature(d));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function renderDataLayers(selection) {
|
||||
var container = selection.selectAll('data-layer-container')
|
||||
.data([0]);
|
||||
|
||||
_dataLayerContainer = container.enter()
|
||||
.append('div')
|
||||
.attr('class', 'data-layer-container')
|
||||
.merge(container);
|
||||
}
|
||||
|
||||
|
||||
function renderFillList(selection) {
|
||||
var container = selection.selectAll('layer-fill-list')
|
||||
.data([0]);
|
||||
|
||||
_fillList = container.enter()
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-fill-list')
|
||||
.merge(container);
|
||||
}
|
||||
|
||||
|
||||
function renderFeatureList(selection) {
|
||||
var container = selection.selectAll('layer-feature-list')
|
||||
.data([0]);
|
||||
|
||||
_featureList = container.enter()
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-feature-list')
|
||||
.merge(container);
|
||||
}
|
||||
|
||||
|
||||
function update() {
|
||||
_dataLayerContainer
|
||||
.call(drawOsmItem)
|
||||
.call(drawPhotoItems)
|
||||
.call(drawGpxItem);
|
||||
|
||||
_fillList
|
||||
.call(drawListItems, fills, 'radio', 'area_fill', setFill, showsFill);
|
||||
|
||||
_featureList
|
||||
.call(drawListItems, features, 'checkbox', 'feature', clickFeature, showsFeature);
|
||||
}
|
||||
|
||||
|
||||
function toggleWireframe() {
|
||||
if (d3_event) {
|
||||
d3_event.preventDefault();
|
||||
d3_event.stopPropagation();
|
||||
}
|
||||
setFill((_fillSelected === 'wireframe' ? _fillDefault : 'wireframe'));
|
||||
context.map().pan([0,0]); // trigger a redraw
|
||||
}
|
||||
|
||||
|
||||
function update() {
|
||||
dataLayerContainer
|
||||
.call(drawOsmItem)
|
||||
.call(drawPhotoItems)
|
||||
.call(drawGpxItem);
|
||||
function mapData(selection) {
|
||||
|
||||
fillList
|
||||
.call(drawList, fills, 'radio', 'area_fill', setFill, showsFill);
|
||||
|
||||
featureList
|
||||
.call(drawList, features, 'checkbox', 'feature', clickFeature, showsFeature);
|
||||
}
|
||||
|
||||
|
||||
function hidePanel() {
|
||||
function hidePane() {
|
||||
setVisible(false);
|
||||
}
|
||||
|
||||
|
||||
function togglePanel() {
|
||||
function togglePane() {
|
||||
if (d3_event) d3_event.preventDefault();
|
||||
tooltipBehavior.hide(button);
|
||||
paneTooltip.hide(button);
|
||||
setVisible(!button.classed('active'));
|
||||
}
|
||||
|
||||
|
||||
function toggleWireframe() {
|
||||
if (d3_event) {
|
||||
d3_event.preventDefault();
|
||||
d3_event.stopPropagation();
|
||||
}
|
||||
setFill((fillSelected === 'wireframe' ? fillDefault : 'wireframe'));
|
||||
context.map().pan([0,0]); // trigger a redraw
|
||||
}
|
||||
|
||||
|
||||
function setVisible(show) {
|
||||
if (show !== shown) {
|
||||
if (show !== _shown) {
|
||||
button.classed('active', show);
|
||||
shown = show;
|
||||
_shown = show;
|
||||
|
||||
if (show) {
|
||||
update();
|
||||
|
||||
selection.on('mousedown.map_data-inside', function() {
|
||||
return d3_event.stopPropagation();
|
||||
});
|
||||
content.style('display', 'block')
|
||||
|
||||
pane
|
||||
.style('display', 'block')
|
||||
.style('right', '-300px')
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('right', '0px');
|
||||
|
||||
} else {
|
||||
content.style('display', 'block')
|
||||
pane
|
||||
.style('display', 'block')
|
||||
.style('right', '0px')
|
||||
.transition()
|
||||
.duration(200)
|
||||
@@ -386,113 +430,78 @@ export function uiMapData(context) {
|
||||
.on('end', function() {
|
||||
d3_select(this).style('display', 'none');
|
||||
});
|
||||
|
||||
selection.on('mousedown.map_data-inside', null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var content = selection
|
||||
.append('div')
|
||||
.attr('class', 'fillL map-overlay col3 content hide'),
|
||||
tooltipBehavior = tooltip()
|
||||
.placement((textDirection === 'rtl') ? 'right' : 'left')
|
||||
.html(true)
|
||||
.title(uiTooltipHtml(t('map_data.description'), key)),
|
||||
button = selection
|
||||
.append('button')
|
||||
.attr('tabindex', -1)
|
||||
.on('click', togglePanel)
|
||||
.call(svgIcon('#icon-data', 'light'))
|
||||
.call(tooltipBehavior),
|
||||
shown = false;
|
||||
var pane = selection
|
||||
.append('div')
|
||||
.attr('class', 'fillL map-overlay col3 content hide');
|
||||
|
||||
content
|
||||
.append('h4')
|
||||
var paneTooltip = tooltip()
|
||||
.placement((textDirection === 'rtl') ? 'right' : 'left')
|
||||
.html(true)
|
||||
.title(uiTooltipHtml(t('map_data.description'), key));
|
||||
|
||||
var button = selection
|
||||
.append('button')
|
||||
.attr('tabindex', -1)
|
||||
.on('click', togglePane)
|
||||
.call(svgIcon('#icon-data', 'light'))
|
||||
.call(paneTooltip);
|
||||
|
||||
|
||||
pane
|
||||
.append('h3')
|
||||
.text(t('map_data.title'));
|
||||
|
||||
|
||||
// data layers
|
||||
content
|
||||
.append('a')
|
||||
.text(t('map_data.data_layers'))
|
||||
.attr('href', '#')
|
||||
.classed('hide-toggle', true)
|
||||
.classed('expanded', true)
|
||||
.on('click', function() {
|
||||
var exp = d3_select(this).classed('expanded');
|
||||
dataLayerContainer.style('display', exp ? 'none' : 'block');
|
||||
d3_select(this).classed('expanded', !exp);
|
||||
d3_event.preventDefault();
|
||||
});
|
||||
|
||||
var dataLayerContainer = content
|
||||
pane
|
||||
.append('div')
|
||||
.attr('class', 'data-data-layers')
|
||||
.style('display', 'block');
|
||||
|
||||
.attr('class', 'map-data-data-layers')
|
||||
.call(uiDisclosure(context, 'data_layers', true)
|
||||
.title(t('map_data.data_layers'))
|
||||
.content(renderDataLayers)
|
||||
);
|
||||
|
||||
// area fills
|
||||
content
|
||||
.append('a')
|
||||
.text(t('map_data.fill_area'))
|
||||
.attr('href', '#')
|
||||
.classed('hide-toggle', true)
|
||||
.classed('expanded', false)
|
||||
.on('click', function() {
|
||||
var exp = d3_select(this).classed('expanded');
|
||||
fillContainer.style('display', exp ? 'none' : 'block');
|
||||
d3_select(this).classed('expanded', !exp);
|
||||
d3_event.preventDefault();
|
||||
});
|
||||
|
||||
var fillContainer = content
|
||||
pane
|
||||
.append('div')
|
||||
.attr('class', 'data-area-fills')
|
||||
.style('display', 'none');
|
||||
|
||||
var fillList = fillContainer
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-fill-list');
|
||||
|
||||
.attr('class', 'map-data-area-fills')
|
||||
.call(uiDisclosure(context, 'fill_area', false)
|
||||
.title(t('map_data.fill_area'))
|
||||
.content(renderFillList)
|
||||
);
|
||||
|
||||
// feature filters
|
||||
content
|
||||
.append('a')
|
||||
.text(t('map_data.map_features'))
|
||||
.attr('href', '#')
|
||||
.classed('hide-toggle', true)
|
||||
.classed('expanded', false)
|
||||
.on('click', function() {
|
||||
var exp = d3_select(this).classed('expanded');
|
||||
featureContainer.style('display', exp ? 'none' : 'block');
|
||||
d3_select(this).classed('expanded', !exp);
|
||||
d3_event.preventDefault();
|
||||
});
|
||||
|
||||
var featureContainer = content
|
||||
pane
|
||||
.append('div')
|
||||
.attr('class', 'data-feature-filters')
|
||||
.style('display', 'none');
|
||||
|
||||
var featureList = featureContainer
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-feature-list');
|
||||
.attr('class', 'map-data-feature-filters')
|
||||
.call(uiDisclosure(context, 'map_features', false)
|
||||
.title(t('map_data.map_features'))
|
||||
.content(renderFeatureList)
|
||||
);
|
||||
|
||||
|
||||
// add listeners
|
||||
context.features()
|
||||
.on('change.map_data-update', update);
|
||||
|
||||
setFill(fillDefault);
|
||||
update();
|
||||
setFill(_fillDefault);
|
||||
|
||||
var keybinding = d3_keybinding('features')
|
||||
.on(key, togglePanel)
|
||||
.on(key, togglePane)
|
||||
.on(t('area_fill.wireframe.key'), toggleWireframe)
|
||||
.on([t('background.key'), t('help.key')], hidePanel);
|
||||
.on([t('background.key'), t('help.key')], hidePane);
|
||||
|
||||
d3_select(document)
|
||||
.call(keybinding);
|
||||
}
|
||||
|
||||
return map_data;
|
||||
return mapData;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user