Improved UI for custom background.

modules/ui/background.js

@@ -90,6 +90,7 @@ export function uiBackground(context) {
     function chooseBackground(d) {
         if (d.id === 'custom' && !d.template()) {
             return editCustom();
+
         }
 
         d3_event.preventDefault();
@@ -101,22 +102,19 @@ export function uiBackground(context) {
         document.activeElement.blur();
     }
 
-
-    function editCustom() {
-        d3_event.preventDefault();
-        //var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
-        /*var template = window.prompt(
-            t('background.custom_prompt', { example: example }),
-            _customSource.template() || example
-        );
-
+    function edit(a, template) {
         if (template) {
             context.storage('background-custom-template', template);
             _customSource.template(template);
             chooseBackground(_customSource);
         } else {
             _backgroundList.call(updateLayerSelections);
-        }*/
+        }
+    }
+
+    function editCustom() {
+        d3_event.preventDefault();
+
         context.container()
             .call(uiCustom(context));
     }
@@ -423,6 +421,7 @@ export function uiBackground(context) {
         uiBackground.hidePane = hidePane;
         uiBackground.togglePane = togglePane;
         uiBackground.setVisible = setVisible;
+        uiBackground.edit = edit;
     }
 
     return background;

modules/ui/custom.js

@@ -1,5 +1,5 @@
 import { t } from '../util/locale';
-import { uiIntro } from './intro';
+import { uiBackground } from './background';
 import { uiModal } from './modal';
 
 
@@ -7,11 +7,6 @@ export function uiCustom(context) {
 
     return function(selection) {
 
-        /*if (context.storage('sawCustom'))
-             return;
-
-        context.storage('sawCustom', true);*/
-
         var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
         var modalSelection = uiModal(selection);
 
@@ -30,12 +25,7 @@ export function uiCustom(context) {
         introModal
             .append('div')
             .attr('class','modal-section')
-            .append('p').text(t('background.custom_prompt'))
-            /*.append('p').text(t('background.custom_token1'))
-            .append('p').text(t('background.custom_token2'))
-            .append('p').text(t('background.custom_token3'))
-            .append('p').text(t('background.custom_token4'))
-            .append('p').text(t('background.custom_example', { example: example }))*/
+            .append('p').text(t('background.custom_prompt', { example: example }))
             .append('textarea');
 
 
@@ -51,24 +41,25 @@ export function uiCustom(context) {
             .attr('class', 'modal-section');
 
 
-        var startEditing = buttonWrap
+        var cancelButton = buttonWrap
             .append('button')
             .attr('class', 'button-cancel')
             .on('click', modalSelection.close);
 
-        startEditing
+        cancelButton
             .append('div')
             .text('Cancel');
 
-        var walkthrough = buttonWrap
+        var okButton = buttonWrap
             .append('button')
             .attr('class', 'button-ok')
             .on('click', function() {
-                context.container().call(uiIntro(context));
+                var template = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
+                context.container().call(uiBackground.edit, template);
                 modalSelection.close();
             });
 
-        walkthrough
+        okButton
             .append('div')
             .text('OK');