From eab7f3660b1eb7c615e37589133d3f874b02c56d Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sat, 11 Aug 2018 18:17:07 -0400 Subject: [PATCH] Put background settings into localstorage and dispatch change event --- css/80_app.css | 7 +++---- data/core.yaml | 4 +++- dist/locales/en.json | 5 ++++- modules/ui/background.js | 20 +++++++++++--------- modules/ui/settings/custom_background.js | 20 ++++++++++++++++---- 5 files changed, 37 insertions(+), 19 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 2a78bdee8..55bf424dc 100644 --- a/css/80_app.css +++ b/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); } diff --git a/data/core.yaml b/data/core.yaml index aa65817ca..62285567c 100644 --- a/data/core.yaml +++ b/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?" diff --git a/dist/locales/en.json b/dist/locales/en.json index 228732fc9..630d9fe07 100644 --- a/dist/locales/en.json +++ b/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": { diff --git a/modules/ui/background.js b/modules/ui/background.js index 513ba8cc0..3dbc1c454 100644 --- a/modules/ui/background.js +++ b/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; diff --git a/modules/ui/settings/custom_background.js b/modules/ui/settings/custom_background.js index bc94661fc..e69176053 100644 --- a/modules/ui/settings/custom_background.js +++ b/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); } }