plop

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 || {};

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) {
 

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';

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');
+}