From 1572835a484d9d8e5fdb05a288660701042e0fe8 Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Mon, 7 Aug 2023 11:52:33 +0200 Subject: [PATCH] move local photos to "Photo Overlays" section --- modules/ui/sections/data_layers.js | 88 ----------------- modules/ui/sections/photo_overlays.js | 97 ++++++++++++++++++- .../{local_photos_data.js => local_photos.js} | 2 +- 3 files changed, 93 insertions(+), 94 deletions(-) rename modules/ui/settings/{local_photos_data.js => local_photos.js} (98%) diff --git a/modules/ui/sections/data_layers.js b/modules/ui/sections/data_layers.js index cf3fee20f..41afb19f9 100644 --- a/modules/ui/sections/data_layers.js +++ b/modules/ui/sections/data_layers.js @@ -12,16 +12,12 @@ 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); - // refers to `modules/svg/layers.js` -> function drawLayers(selection) {...} var layers = context.layers(); @@ -40,7 +36,6 @@ export function uiSectionDataLayers(context) { .call(drawOsmItems) .call(drawQAItems) .call(drawCustomDataItems) - .call(drawLocalPhotos) .call(drawVectorItems) // Beta - Detroit mapping challenge .call(drawPanelItems); } @@ -377,76 +372,6 @@ export function uiSectionDataLayers(context) { .classed('disabled', !hasData); } - function drawLocalPhotos(selection) { - var dataLayer = layers.layer('local-photos'); - - var ul = selection - .selectAll('.layer-list-local-photos') - .data(dataLayer ? [0] : []); - - // Exit - ul.exit() - .remove(); - - // Enter - var ulEnter = ul.enter() - .append('ul') - .attr('class', 'layer-list layer-list-local-photos'); - - var localPhotosEnter = ulEnter - .append('li') - .attr('class', 'list-item-local-photos'); - - var localPhotosLabelEnter = localPhotosEnter - .append('label'); - // TODO: Add tooltip - - // TODO - // localPhotosLabelEnter - // .append('input') - // .attr('type', 'checkbox') - // .on('change', function() { toggleLayer('local-photos'); }); - - localPhotosLabelEnter - .append('span') - .text('Local Photos'); - - localPhotosEnter - .append('button') - .attr('class', 'open-data-options') - .call(uiTooltip() - .title(t.html('settings.custom_data.tooltip')) - .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - ) - .on('click', function(d3_event) { - d3_event.preventDefault(); - editLocalPhotos(); - }) - .call(svgIcon('#iD-icon-more')); - - localPhotosEnter - .append('button') - .attr('class', 'zoom-to-data') - .call(uiTooltip() - .title(t.html('map_data.layers.custom.zoom')) - .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - ) - .on('click', function(d3_event) { - if (d3_select(this).classed('disabled')) return; - - d3_event.preventDefault(); - d3_event.stopPropagation(); - //TODO - dataLayer.fitZoom(); - }) - .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); - - // Update - ul = ul - .merge(ulEnter); - - } - function editCustom() { context.container() .call(settingsCustomData); @@ -462,19 +387,6 @@ export function uiSectionDataLayers(context) { } } - function editLocalPhotos() { - context.container() - .call(settingsLocalPhotosData); - } - - function localPhotosChanged(d) { - var localPhotosLayer = layers.layer('local-photos'); - - if (d && d.fileList) { - localPhotosLayer.fileList(d.fileList); - } - } - function drawPanelItems(selection) { var panelsListEnter = selection.selectAll('.md-extras-list') diff --git a/modules/ui/sections/photo_overlays.js b/modules/ui/sections/photo_overlays.js index b9a9b5876..99f8abc96 100644 --- a/modules/ui/sections/photo_overlays.js +++ b/modules/ui/sections/photo_overlays.js @@ -1,15 +1,18 @@ import _debounce from 'lodash-es/debounce'; -import { - select as d3_select -} from 'd3-selection'; +import { select as d3_select } from 'd3-selection'; -import { t } from '../../core/localizer'; +import { localizer, t } from '../../core/localizer'; import { uiTooltip } from '../tooltip'; import { uiSection } from '../section'; import { utilGetSetValue, utilNoAuto } from '../../util'; +import { uiSettingsLocalPhotos } from '../settings/local_photos'; +import { svgIcon } from '../../svg'; export function uiSectionPhotoOverlays(context) { + var settingsLocalPhotos = uiSettingsLocalPhotos(context) + .on('change', localPhotosChanged); + var layers = context.layers(); var section = uiSection('photo-overlays', context) @@ -28,7 +31,8 @@ export function uiSectionPhotoOverlays(context) { .call(drawPhotoItems) .call(drawPhotoTypeItems) .call(drawDateFilter) - .call(drawUsernameFilter); + .call(drawUsernameFilter) + .call(drawLocalPhotos); } function drawPhotoItems(selection) { @@ -335,6 +339,89 @@ export function uiSectionPhotoOverlays(context) { } } + function drawLocalPhotos(selection) { + var dataLayer = layers.layer('local-photos'); + + var ul = selection + .selectAll('.layer-list-local-photos') + .data(dataLayer ? [0] : []); + + // Exit + ul.exit() + .remove(); + + // Enter + var ulEnter = ul.enter() + .append('ul') + .attr('class', 'layer-list layer-list-local-photos'); + + var localPhotosEnter = ulEnter + .append('li') + .attr('class', 'list-item-local-photos'); + + var localPhotosLabelEnter = localPhotosEnter + .append('label'); + // TODO: Add tooltip + + // TODO + // localPhotosLabelEnter + // .append('input') + // .attr('type', 'checkbox') + // .on('change', function() { toggleLayer('local-photos'); }); + + localPhotosLabelEnter + .append('span') + .text('Local Photos'); + + localPhotosEnter + .append('button') + .attr('class', 'open-data-options') + .call(uiTooltip() + .title(t.html('settings.custom_data.tooltip')) + .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + ) + .on('click', function(d3_event) { + d3_event.preventDefault(); + editLocalPhotos(); + }) + .call(svgIcon('#iD-icon-more')); + + localPhotosEnter + .append('button') + .attr('class', 'zoom-to-data') + .call(uiTooltip() + .title(t.html('map_data.layers.custom.zoom')) + .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + ) + .on('click', function(d3_event) { + if (d3_select(this).classed('disabled')) return; + + d3_event.preventDefault(); + d3_event.stopPropagation(); + //TODO + dataLayer.fitZoom(); + }) + .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); + + // Update + ul = ul + .merge(ulEnter); + + } + + function editLocalPhotos() { + context.container() + .call(settingsLocalPhotos); + } + + function localPhotosChanged(d) { + var localPhotosLayer = layers.layer('local-photos'); + + if (d && d.fileList) { + localPhotosLayer.fileList(d.fileList); + } + } + context.layers().on('change.uiSectionPhotoOverlays', section.reRender); context.photos().on('change.uiSectionPhotoOverlays', section.reRender); diff --git a/modules/ui/settings/local_photos_data.js b/modules/ui/settings/local_photos.js similarity index 98% rename from modules/ui/settings/local_photos_data.js rename to modules/ui/settings/local_photos.js index 766c2d781..423cb5558 100644 --- a/modules/ui/settings/local_photos_data.js +++ b/modules/ui/settings/local_photos.js @@ -6,7 +6,7 @@ import { uiConfirm } from '../confirm'; import { utilRebind } from '../../util'; -export function uiSettingsLocalPhotosData (context) { +export function uiSettingsLocalPhotos(context) { var dispatch = d3_dispatch('change'); function render(selection) {