From 16280638b5a6bfaa941a1bee18d57e79dea8e65c Mon Sep 17 00:00:00 2001 From: mukesh Date: Wed, 29 Jun 2022 18:51:33 +0200 Subject: [PATCH] plop --- modules/svg/data.js | 7 +- modules/ui/sections/data_layers.js | 20 +++- modules/ui/settings/custom_data.js | 2 +- modules/ui/settings/local_photos_data.js | 126 +++++++++++++++++++++++ 4 files changed, 151 insertions(+), 4 deletions(-) create mode 100644 modules/ui/settings/local_photos_data.js diff --git a/modules/svg/data.js b/modules/svg/data.js index a88e4b0ff..40a89f34e 100644 --- a/modules/svg/data.js +++ b/modules/svg/data.js @@ -304,7 +304,7 @@ export function svgData(projection, context, dispatch) { function getExtension(fileName) { if (!fileName) return; - var re = /\.(gpx|kml|(geo)?json)$/i; + var re = /\.(gpx|kml|(geo)?json|png)$/i; var match = fileName.toLowerCase().match(re); return match && match.length && match[0]; } @@ -353,6 +353,11 @@ export function svgData(projection, context, dispatch) { stringifyGeojsonProperties(gj); } break; + case '.png': + // xx = JSON.parse(data); + console.log('Hello world!'); + console.log(data); + break; } gj = gj || {}; diff --git a/modules/ui/sections/data_layers.js b/modules/ui/sections/data_layers.js index ad8cb0e4f..211004731 100644 --- a/modules/ui/sections/data_layers.js +++ b/modules/ui/sections/data_layers.js @@ -12,12 +12,16 @@ import { modeBrowse } from '../../modes/browse'; import { uiCmd } from '../cmd'; import { uiSection } from '../section'; import { uiSettingsCustomData } from '../settings/custom_data'; +import { uiSettingsLocalPhotosData } from '../settings/local_photos_data'; export function uiSectionDataLayers(context) { var settingsCustomData = uiSettingsCustomData(context) .on('change', customChanged); + var settingsLocalPhotosData = uiSettingsLocalPhotosData(context) + .on('change', localPhotosChanged); + var layers = context.layers(); var section = uiSection('data-layers', context) @@ -362,7 +366,7 @@ export function uiSectionDataLayers(context) { .attr('class', 'list-item-local-photos'); var localPhotosLabelEnter = localPhotosEnter - .append('label') + .append('label'); // TODO: Add tooltip localPhotosLabelEnter @@ -383,7 +387,7 @@ export function uiSectionDataLayers(context) { ) .on('click', function(d3_event) { d3_event.preventDefault(); - editCustom(); + editLocalPhotos(); }) .call(svgIcon('#iD-icon-more')); @@ -424,6 +428,11 @@ export function uiSectionDataLayers(context) { .call(settingsCustomData); } + function editLocalPhotos() { + context.container() + .call(settingsLocalPhotosData); + } + function customChanged(d) { var dataLayer = layers.layer('data'); @@ -434,6 +443,13 @@ export function uiSectionDataLayers(context) { } } + function localPhotosChanged(d) { + var dataLayer = layers.layer('data'); + + if (d && d.fileList) { + dataLayer.fileList(d.fileList); + } + } function drawPanelItems(selection) { diff --git a/modules/ui/settings/custom_data.js b/modules/ui/settings/custom_data.js index 29a1d83d2..2ad991fc4 100644 --- a/modules/ui/settings/custom_data.js +++ b/modules/ui/settings/custom_data.js @@ -19,7 +19,7 @@ export function uiSettingsCustomData(context) { }; var _currSettings = { fileList: (dataLayer && dataLayer.fileList()) || null, - url: prefs('settings-custom-data-url') + // url: prefs('settings-custom-data-url') }; // var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; diff --git a/modules/ui/settings/local_photos_data.js b/modules/ui/settings/local_photos_data.js new file mode 100644 index 000000000..11b87945a --- /dev/null +++ b/modules/ui/settings/local_photos_data.js @@ -0,0 +1,126 @@ +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { prefs } from '../../core/preferences'; +import { t } from '../../core/localizer'; +import { uiConfirm } from '../confirm'; +import { utilNoAuto, utilRebind } from '../../util'; + + +export function uiSettingsLocalPhotosData (context) { + var dispatch = d3_dispatch('change'); + + function render(selection) { + var dataLayer = context.layers().layer('data'); + + // keep separate copies of original and current settings + var _origSettings = { + fileList: (dataLayer && dataLayer.fileList()) || null, + url: prefs('settings-custom-data-url') + }; + var _currSettings = { + fileList: (dataLayer && dataLayer.fileList()) || null, + url: prefs('settings-custom-data-url') + }; + + // 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') + .call(t.append('settings.custom_data.header')); + + + var textSection = modal.select('.modal-section.message-text'); + + //TODO: Add translation + textSection + .append('pre') + .text('Choose local photos. Supported types are: .jpg, .jpeg, .png'); + // .attr('class', 'instructions-file') + // .call(t.append('settings.custom_data.file.instructions')); + + textSection + .append('input') + .attr('class', 'field-file') + .attr('type', 'file') + // .attr('accept', '.gpx,.kml,.geojson,.json,application/gpx+xml,application/vnd.google-earth.kml+xml,application/geo+json,application/json') + .property('files', _currSettings.fileList) + .on('change', function(d3_event) { + var files = d3_event.target.files; + console.log(files); + if (files && files.length) { + // _currSettings.url = ''; + // textSection.select('.field-url').property('value', ''); + _currSettings.fileList = files; + } else { + _currSettings.fileList = null; + } + }); + + // textSection + // .append('h4') + // .call(t.append('settings.custom_data.or')); + + // textSection + // .append('pre') + // .attr('class', 'instructions-url') + // .call(t.append('settings.custom_data.url.instructions')); + + // textSection + // .append('textarea') + // .attr('class', 'field-url') + // .attr('placeholder', t('settings.custom_data.url.placeholder')) + // .call(utilNoAuto) + // .property('value', _currSettings.url); + + + // insert a cancel button + var buttonSection = modal.select('.modal-section.buttons'); + + buttonSection + .insert('button', '.ok-button') + .attr('class', 'button cancel-button secondary-action') + .call(t.append('confirm.cancel')); + + + buttonSection.select('.cancel-button') + .on('click.cancel', clickCancel); + + buttonSection.select('.ok-button') + .attr('disabled', isSaveDisabled) + .on('click.save', clickSave); + + + function isSaveDisabled() { + return null; + } + + + // restore the original url + function clickCancel() { + textSection.select('.field-url').property('value', _origSettings.url); + prefs('settings-custom-data-url', _origSettings.url); + this.blur(); + modal.close(); + } + + // accept the current url + function clickSave() { + // _currSettings.url = textSection.select('.field-url').property('value').trim(); + + // one or the other but not both + // if (_currSettings.url) { _currSettings.fileList = null; } + if (_currSettings.fileList) { _currSettings.url = ''; } + + // prefs('settings-custom-data-url', _currSettings.url); + this.blur(); + modal.close(); + dispatch.call('change', this, _currSettings); + } + } + + return utilRebind(render, dispatch, 'on'); +}