CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-22 16:19:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add custom data settings modal with file picker or vector tile url

Browse Source
This commit is contained in:
Bryan Housel
2018-08-17 17:26:12 -04:00
parent 4b446e9e78
commit 0ae4099ff6
7 changed files with 207 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/map_data.js
+50 -19
View File
@@ -12,6 +12,7 @@ import { modeBrowse } from '../modes';
import { uiBackground } from './background';
import { uiDisclosure } from './disclosure';
import { uiHelp } from './help';
import { uiSettingsCustomData } from './settings/custom_data';
import { uiTooltipHtml } from './tooltipHtml';
@@ -21,6 +22,9 @@ export function uiMapData(context) {
var layers = context.layers();
var fills = ['wireframe', 'partial', 'full'];
var settingsCustomData = uiSettingsCustomData(context)
.on('change', customChanged);
var _fillSelected = context.storage('area-fill') || 'partial';
var _shown = false;
var _dataLayerContainer = d3_select(null);
@@ -207,7 +211,7 @@ export function uiMapData(context) {
}
function drawDataItems(selection) {
function drawCustomDataItems(selection) {
var dataLayer = layers.layer('data');
var hasData = dataLayer && dataLayer.hasData();
var showsData = hasData && dataLayer.enabled();
@@ -231,7 +235,15 @@ export function uiMapData(context) {
liEnter
.append('button')
.attr('class', 'list-item-data-extent')
.call(tooltip()
.title(t('settings.custom_data.tooltip'))
.placement((textDirection === 'rtl') ? 'right' : 'left')
)
.on('click', editCustom)
.call(svgIcon('#iD-icon-more'));
liEnter
.append('button')
.call(tooltip()
.title(t('gpx.zoom'))
.placement((textDirection === 'rtl') ? 'right' : 'left')
@@ -243,22 +255,22 @@ export function uiMapData(context) {
})
.call(svgIcon('#iD-icon-search'));
liEnter
.append('button')
.attr('class', 'list-item-data-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() {
dataLayer.files(d3_event.target.files);
})
.node().click();
})
.call(svgIcon('#iD-icon-geolocate'));
// liEnter
// .append('button')
// .attr('class', 'list-item-data-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() {
// dataLayer.files(d3_event.target.files);
// })
// .node().click();
// })
// .call(svgIcon('#iD-icon-geolocate'));
var labelEnter = liEnter
.append('label')
@@ -290,6 +302,25 @@ export function uiMapData(context) {
}
function editCustom() {
d3_event.preventDefault();
context.container()
.call(settingsCustomData);
}
function customChanged(d) {
console.log('custom was changed');
// if (d && d.template) {
// _customSource.template(d.template);
// chooseBackground(_customSource);
// } else {
// _customSource.template('');
// chooseBackground(context.background().findSource('none'));
// }
}
function drawListItems(selection, data, type, name, change, active) {
var items = selection.selectAll('li')
.data(data);
@@ -381,7 +412,7 @@ export function uiMapData(context) {
_dataLayerContainer
.call(drawOsmItems)
.call(drawPhotoItems)
.call(drawDataItems);
.call(drawCustomDataItems);
_fillList
.call(drawListItems, fills, 'radio', 'area_fill', setFill, showsFill);
modules/ui/settings/custom_background.js
+5 -4
View File
@@ -19,7 +19,7 @@ export function uiSettingsCustomBackground(context) {
var modal = uiConfirm(selection).okButton();
modal
.classed('settings-custom-background', true);
.classed('settings-modal settings-custom-background', true);
modal.select('.modal-section.header')
.append('h3')
@@ -30,11 +30,12 @@ export function uiSettingsCustomBackground(context) {
textSection
.append('pre')
.attr('class', 'instructions')
.attr('class', 'instructions-template')
.text(t('settings.custom_background.instructions', { example: example }));
textSection
.append('textarea')
.attr('class', 'field-template')
.attr('placeholder', t('settings.custom_background.template.placeholder'))
.call(utilNoAuto)
.property('value', _currSettings.template);
@@ -66,7 +67,7 @@ export function uiSettingsCustomBackground(context) {
// restore the original template
function clickCancel() {
textSection.select('textarea').property('value', _origSettings.template);
textSection.select('.field-template').property('value', _origSettings.template);
context.storage('background-custom-template', _origSettings.template);
this.blur();
modal.close();
@@ -74,7 +75,7 @@ export function uiSettingsCustomBackground(context) {
// accept the current template
function clickSave() {
_currSettings.template = textSection.select('textarea').property('value');
_currSettings.template = textSection.select('.field-template').property('value');
context.storage('background-custom-template', _currSettings.template);
this.blur();
modal.close();
modules/ui/settings/custom_data.js
+113
View File
@@ -0,0 +1,113 @@
import _cloneDeep from 'lodash-es/cloneDeep';
import { dispatch as d3_dispatch } from 'd3-dispatch';
import { event as d3_event } from 'd3-selection';
import { t } from '../../util/locale';
import { uiConfirm } from '../confirm';
import { utilNoAuto, utilRebind } from '../../util';
export function uiSettingsCustomData(context) {
var dispatch = d3_dispatch('change');
function render(selection) {
var _origSettings = {
file: context.storage('settings-custom-data-file'),
template: context.storage('settings-custom-data-template')
};
var _currSettings = _cloneDeep(_origSettings);
// var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
var modal = uiConfirm(selection).okButton();
modal
.classed('settings-modal settings-custom-data', true);
modal.select('.modal-section.header')
.append('h3')
.text(t('settings.custom_data.header'));
var textSection = modal.select('.modal-section.message-text');
textSection
.append('pre')
.attr('class', 'instructions-file')
.text(t('settings.custom_data.file.instructions'));
textSection
.append('input')
.attr('class', 'field-file')
.attr('type', 'file')
.on('change', function() {
var files = d3_event.target.files;
if (files && files.length) {
_currSettings.file = files[0];
} else {
_currSettings.file = undefined;
}
});
textSection
.append('h4')
.text(t('settings.custom_data.or'));
textSection
.append('pre')
.attr('class', 'instructions-template')
.text(t('settings.custom_data.template.instructions'));
textSection
.append('textarea')
.attr('class', 'field-template')
.attr('placeholder', t('settings.custom_data.template.placeholder'))
.call(utilNoAuto)
.property('value', _currSettings.template);
// insert a cancel button, and adjust the button widths
var buttonSection = modal.select('.modal-section.buttons');
buttonSection
.insert('button', '.ok-button')
.attr('class', 'button col3 cancel-button secondary-action')
.text(t('confirm.cancel'));
buttonSection.select('.cancel-button')
.on('click.cancel', clickCancel);
buttonSection.select('.ok-button')
.classed('col3', true)
.classed('col4', false)
.attr('disabled', isSaveDisabled)
.on('click.save', clickSave);
function isSaveDisabled() {
return null;
}
// restore the original template
function clickCancel() {
textSection.select('.field-template').property('value', _origSettings.template);
context.storage('settings-custom-data-template', _origSettings.template);
context.storage('settings-custom-data-file', _origSettings.file);
this.blur();
modal.close();
}
// accept the current template
function clickSave() {
_currSettings.template = textSection.select('.field-template').property('value');
context.storage('settings-custom-data-template', _currSettings.template);
context.storage('settings-custom-data-file', _currSettings.file);
this.blur();
modal.close();
dispatch.call('change', this, _currSettings);
}
}
return utilRebind(render, dispatch, 'on');
}
modules/ui/settings/index.js
+1
View File
@@ -1 +1,2 @@
export { uiSettingsCustomBackground } from './custom_background';
export { uiSettingsCustomData } from './custom_data';