Custom background

css/80_app.css

@@ -4602,3 +4602,24 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     width: 100px;
     color: #7092ff;
 }
+
+.button-ok {
+    background-color: #6f92ff; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 15px;
+    text-align: center;
+    font-size: 16px;
+    
+}
+.button-ok:focus {
+    background-color: #c1d0ff;
+}
+.button-cancel {
+    background-color: #cccccc; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 15px;
+    text-align: center;
+    font-size: 16px;
+}

modules/ui/background.js

@@ -17,10 +17,12 @@ import { svgIcon } from '../svg';
 import { uiBackgroundDisplayOptions } from './background_display_options';
 import { uiBackgroundOffset } from './background_offset';
 import { uiCmd } from './cmd';
+import { uiCustom } from './custom';
 import { uiDisclosure } from './disclosure';
 import { uiHelp } from './help';
 import { uiMapData } from './map_data';
 import { uiMapInMap } from './map_in_map';
+import { uiModal } from './modal';
 import { uiTooltipHtml } from './tooltipHtml';
 import { utilCallWhenIdle } from '../util';
 import { tooltip } from '../util/tooltip';
@@ -102,8 +104,8 @@ export function uiBackground(context) {
 
     function editCustom() {
         d3_event.preventDefault();
-        var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
-        var template = window.prompt(
+        //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
         );
@@ -114,7 +116,9 @@ export function uiBackground(context) {
             chooseBackground(_customSource);
         } else {
             _backgroundList.call(updateLayerSelections);
-        }
+        }*/
+        context.container()
+            .call(uiCustom(context));
     }
 
 

modules/ui/custom.js

@@ -0,0 +1,81 @@
+import { t } from '../util/locale';
+import { uiIntro } from './intro';
+import { uiModal } from './modal';
+
+
+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);
+
+        modalSelection.select('.modal')
+            .attr('class', 'modal-splash modal col6');
+
+        var introModal = modalSelection.select('.content')
+            .append('div')
+            .attr('class', 'fillL');
+
+        introModal
+            .append('div')
+            .attr('class','modal-section cf')
+            .append('h3').text(t('background.custom_heading'));
+
+        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('textarea');
+
+
+        /*var textAreaWrap = introModal
+            .append('div')
+            .attr('class', 'modal-section');
+
+        var urlArea = textAreaWrap
+            .append('textarea');*/
+
+        var buttonWrap = introModal
+            .append('div')
+            .attr('class', 'modal-section');
+
+
+        var startEditing = buttonWrap
+            .append('button')
+            .attr('class', 'button-cancel')
+            .on('click', modalSelection.close);
+
+        startEditing
+            .append('div')
+            .text('Cancel');
+
+        var walkthrough = buttonWrap
+            .append('button')
+            .attr('class', 'button-ok')
+            .on('click', function() {
+                context.container().call(uiIntro(context));
+                modalSelection.close();
+            });
+
+        walkthrough
+            .append('div')
+            .text('OK');
+
+
+        modalSelection.select('button.close')
+            .attr('class','hide');
+
+
+    };
+}

modules/ui/index.js

@@ -11,6 +11,7 @@ export { uiCommitChanges } from './commit_changes';
 export { uiCommitWarnings } from './commit_warnings';
 export { uiConfirm } from './confirm';
 export { uiConflicts } from './conflicts';
+export { uiCustom } from './custom';
 export { uiContributors } from './contributors';
 export { uiCurtain } from './curtain';
 export { uiDisclosure } from './disclosure';