Put background settings into localstorage and dispatch change event

css/80_app.css

@@ -2553,6 +2553,8 @@ div.full-screen > button:hover {
     background-color: #ececec;
 }
 
+.layer-list li.active button,
+.layer-list li.switch button,
 .layer-list li.active,
 .layer-list li.switch {
     background: #e8ebff;
@@ -2564,10 +2566,7 @@ div.full-screen > button:hover {
     float: right;
 }
 
-[dir='rtl'] .list-item-gpx-browse svg {
-    transform: rotateY(180deg);
-}
-
+[dir='rtl'] .list-item-gpx-browse svg,
 [dir='rtl'] .list-item-mvt-browse svg {
     transform: rotateY(180deg);
 }

data/core.yaml

@@ -516,7 +516,9 @@ en:
     custom_background:
       tooltip: Edit custom background
       header: Custom Background Settings
-      instructions: "Enter a tile URL template. Valid tokens are:\n   - {zoom} or {z}, {x}, {y} for Z/X/Y tile scheme\n   - {-y} or {ty} for flipped TMS-style Y coordinates\n   - {u} for quadtile scheme\n   - {switch:a,b,c} for DNS server multiplexing\n\nExample:\n{example}"
+      instructions: "Enter a tile URL template. Valid tokens are:\n   {zoom} or {z}, {x}, {y} for Z/X/Y tile scheme\n   {-y} or {ty} for flipped TMS-style Y coordinates\n   {u} for quadtile scheme\n   {switch:a,b,c} for DNS server multiplexing\n\nExample:\n{example}"
+      template:
+        placeholder: Enter a url template
   restore:
     heading: You have unsaved changes
     description: "Do you wish to restore unsaved changes from a previous editing session?"

dist/locales/en.json

@@ -634,7 +634,10 @@
             "custom_background": {
                 "tooltip": "Edit custom background",
                 "header": "Custom Background Settings",
-                "instructions": "Enter a tile URL template. Valid tokens are:\n   - {zoom} or {z}, {x}, {y} for Z/X/Y tile scheme\n   - {-y} or {ty} for flipped TMS-style Y coordinates\n   - {u} for quadtile scheme\n   - {switch:a,b,c} for DNS server multiplexing\n\nExample:\n{example}"
+                "instructions": "Enter a tile URL template. Valid tokens are:\n   {zoom} or {z}, {x}, {y} for Z/X/Y tile scheme\n   {-y} or {ty} for flipped TMS-style Y coordinates\n   {u} for quadtile scheme\n   {switch:a,b,c} for DNS server multiplexing\n\nExample:\n{example}",
+                "template": {
+                    "placeholder": "Enter a url template"
+                }
             }
         },
         "restore": {

modules/ui/background.js

@@ -21,7 +21,6 @@ import { uiDisclosure } from './disclosure';
 import { uiHelp } from './help';
 import { uiMapData } from './map_data';
 import { uiMapInMap } from './map_in_map';
-import { uiModal } from './modal';
 import { uiSettingsCustomBackground } from './settings/custom_background';
 import { uiTooltipHtml } from './tooltipHtml';
 import { utilCallWhenIdle } from '../util';
@@ -43,6 +42,9 @@ export function uiBackground(context) {
     var backgroundDisplayOptions = uiBackgroundDisplayOptions(context);
     var backgroundOffset = uiBackgroundOffset(context);
 
+    var settingsCustomBackground = uiSettingsCustomBackground(context)
+        .on('change', customChanged);
+
 
     function setTooltips(selection) {
         selection.each(function(d, i, nodes) {
@@ -101,21 +103,22 @@ export function uiBackground(context) {
         document.activeElement.blur();
     }
 
-    function edit(a, template) {
-        if (template) {
-            context.storage('background-custom-template', template);
-            _customSource.template(template);
+
+    function customChanged(d) {
+        if (d && d.template) {
+            _customSource.template(d.template);
             chooseBackground(_customSource);
         } else {
-            _backgroundList.call(updateLayerSelections);
+            _customSource.template('');
+            chooseBackground(context.background().findSource('none'));
         }
     }
 
+
     function editCustom() {
         d3_event.preventDefault();
-
         context.container()
-            .call(uiSettingsCustomBackground(context));
+            .call(settingsCustomBackground);
     }
 
 
@@ -420,7 +423,6 @@ export function uiBackground(context) {
         uiBackground.hidePane = hidePane;
         uiBackground.togglePane = togglePane;
         uiBackground.setVisible = setVisible;
-        uiBackground.edit = edit;
     }
 
     return background;

modules/ui/settings/custom_background.js

@@ -1,3 +1,5 @@
+import _cloneDeep from 'lodash-es/cloneDeep';
+
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 
 import { t } from '../../util/locale';
@@ -8,8 +10,11 @@ import { utilNoAuto, utilRebind } from '../../util';
 export function uiSettingsCustomBackground(context) {
     var dispatch = d3_dispatch('change');
 
-
     function render(selection) {
+        var _origSettings = {
+            template: context.storage('background-custom-template')
+        };
+        var _currSettings = _cloneDeep(_origSettings);
         var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
         var modal = uiConfirm(selection).okButton();
 
@@ -30,7 +35,9 @@ export function uiSettingsCustomBackground(context) {
 
         textSection
             .append('textarea')
-            .call(utilNoAuto);
+            .attr('placeholder', t('settings.custom_background.template.placeholder'))
+            .call(utilNoAuto)
+            .property('value', _currSettings.template);
 
 
         // insert a cancel button, and adjust the button widths
@@ -57,16 +64,21 @@ export function uiSettingsCustomBackground(context) {
         }
 
 
+        // restore the original template
         function clickCancel() {
+            textSection.select('textarea').property('value', _origSettings.template);
+            context.storage('background-custom-template', _origSettings.template);
             this.blur();
             modal.close();
         }
 
-
+        // accept the current template
         function clickSave() {
+            _currSettings.template = textSection.select('textarea').property('value');
+            context.storage('background-custom-template', _currSettings.template);
             this.blur();
             modal.close();
-            dispatch.call('change');
+            dispatch.call('change', this, _currSettings);
         }
     }