From 202c73c35a74d6a72c287f225378a17237a2e897 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 24 Jul 2023 17:49:46 +0200 Subject: [PATCH 01/10] Add logo in edit header cf #609 --- umap/static/umap/img/logo_small.svg | 14 ++++++++++++++ umap/static/umap/js/umap.js | 10 +++++----- umap/static/umap/map.css | 16 +++++++++++++++- 3 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 umap/static/umap/img/logo_small.svg diff --git a/umap/static/umap/img/logo_small.svg b/umap/static/umap/img/logo_small.svg new file mode 100644 index 00000000..40d44b7e --- /dev/null +++ b/umap/static/umap/img/logo_small.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index f9926541..61856aa8 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -1810,19 +1810,19 @@ L.U.Map.include({ 'umap-main-edit-toolbox with-transition dark', this._controlContainer ), - title = L.DomUtil.add('h3', '', container, `${L._('Editing')} `), - name = L.DomUtil.create('a', 'umap-click-to-edit', title), + logo = L.DomUtil.add('a', 'logo', container), + name = L.DomUtil.add('a', 'umap-click-to-edit', container, this.getDisplayName()), setName = function () { name.textContent = this.getDisplayName() } + logo.href = '/' if (this.options.user) { - const userLabel = L.DomUtil.add('a', 'umap-user', title, this.options.user.name) + const userLabel = L.DomUtil.add('a', 'umap-user', container, this.options.user.name) userLabel.href = this.options.user.url } - L.bind(setName, this)() + this.help.button(container, 'edit') L.DomEvent.on(name, 'click', this.edit, this) this.on('postsync', L.bind(setName, this)) - this.help.button(name, 'edit') const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container) save.href = '#' save.title = `${L._('Save current edits')} (Ctrl+S)` diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index ef430474..8e9f6ff2 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -436,6 +436,7 @@ ul.photon-autocomplete { .umap-click-to-edit { color: #4a90d9; font-weight: bold; + cursor: pointer; } .umap-click-to-edit:after { content: "\00a0"; @@ -471,7 +472,20 @@ ul.photon-autocomplete { border-bottom: 1px solid #222; z-index: 1000; opacity: 0.98; - color: #efefef; + color: #fff; +} +.umap-main-edit-toolbox .logo { + background-image: url('./img/logo_small.svg'); + background-position: 10px center; + background-repeat: no-repeat; + width: 60px; + display: inline-block; + height: 100%; + vertical-align: middle; +} +.umap-main-edit-toolbox a { + color: #fff; + font-size: 1.2em; } .umap-edit-enabled .umap-main-edit-toolbox { top: 0; From a74439ac471f745e48d5bef1de2ec829067b75d8 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 24 Jul 2023 19:17:05 +0200 Subject: [PATCH 02/10] Remove click-to-edit --- umap/static/umap/js/umap.js | 3 ++- umap/static/umap/map.css | 32 ++++++++++++-------------------- 2 files changed, 14 insertions(+), 21 deletions(-) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index 61856aa8..c59b0e3c 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -1811,10 +1811,11 @@ L.U.Map.include({ this._controlContainer ), logo = L.DomUtil.add('a', 'logo', container), - name = L.DomUtil.add('a', 'umap-click-to-edit', container, this.getDisplayName()), + name = L.DomUtil.add('a', 'map-name', container, this.getDisplayName()), setName = function () { name.textContent = this.getDisplayName() } + name.href = '#' logo.href = '/' if (this.options.user) { const userLabel = L.DomUtil.add('a', 'umap-user', container, this.options.user.name) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 8e9f6ff2..9c44b146 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -433,26 +433,8 @@ ul.photon-autocomplete { .umap-is-dirty a.leaflet-control-edit-disable { display: none; } -.umap-click-to-edit { - color: #4a90d9; - font-weight: bold; - cursor: pointer; -} -.umap-click-to-edit:after { - content: "\00a0"; - background-repeat: no-repeat; - background-position: center center; - cursor: pointer; - width: 26px; - height: 100%; - display: inline-block; - background-position: -46px -41px; -} -.umap-click-to-edit:hover:after { - background-image: url('./img/16.svg'); -} -.dark .umap-click-to-edit:hover:after { - background-image: url('./img/16-white.svg'); +.umap-click-to-edit:hover { + text-decoration: underline; } .umap-caption-bar { display: none; @@ -487,6 +469,16 @@ ul.photon-autocomplete { color: #fff; font-size: 1.2em; } +.umap-main-edit-toolbox .map-name { + display: inline-block; + max-width: 200px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; + margin-right: 5px; + font-weight: bold; +} .umap-edit-enabled .umap-main-edit-toolbox { top: 0; } From 4e606d81bcd6f198d1ce600ef536c31272d135b4 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 25 Jul 2023 09:02:08 +0200 Subject: [PATCH 03/10] Add share_status in edit toolbar --- umap/static/umap/js/umap.js | 28 +++++++++++++++++-------- umap/static/umap/js/umap.permissions.js | 5 +++++ umap/static/umap/map.css | 3 +++ 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index c59b0e3c..baa532ff 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -67,13 +67,11 @@ L.U.Map.include({ initialize: function (el, geojson) { // Locale name (pt_PT, en_US…) // To be used for Django localization - if (geojson.properties.locale) - L.setLocale(geojson.properties.locale) + if (geojson.properties.locale) L.setLocale(geojson.properties.locale) // Language code (pt-pt, en-us…) // To be used in javascript APIs - if (geojson.properties.lang) - L.lang = geojson.properties.lang + if (geojson.properties.lang) L.lang = geojson.properties.lang // Don't let default autocreation of controls const zoomControl = @@ -91,7 +89,7 @@ L.U.Map.include({ this.ui = new L.U.UI(this._container) this.xhr = new L.U.Xhr(this.ui) - this.xhr.on('dataloading', (e) => this.fire('dataloading', e)) + this.xhr.on('dataloading', (e) => this.fire('dataloading', e)) this.xhr.on('dataload', (e) => this.fire('dataload', e)) this.initLoader() @@ -1811,19 +1809,31 @@ L.U.Map.include({ this._controlContainer ), logo = L.DomUtil.add('a', 'logo', container), - name = L.DomUtil.add('a', 'map-name', container, this.getDisplayName()), - setName = function () { + name = L.DomUtil.create('a', 'map-name', container), + share_status = L.DomUtil.create('a', 'share-status', container), + update = () => { name.textContent = this.getDisplayName() + share_status.textContent = L._('Visibility: {status}', { + status: this.permissions.getShareStatusDisplay(), + }) } + update() name.href = '#' + share_status.href = '#' logo.href = '/' if (this.options.user) { - const userLabel = L.DomUtil.add('a', 'umap-user', container, this.options.user.name) + const userLabel = L.DomUtil.add( + 'a', + 'umap-user', + container, + this.options.user.name + ) userLabel.href = this.options.user.url } this.help.button(container, 'edit') L.DomEvent.on(name, 'click', this.edit, this) - this.on('postsync', L.bind(setName, this)) + L.DomEvent.on(share_status, 'click', this.permissions.edit, this.permissions) + this.on('postsync', L.bind(update, this)) const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container) save.href = '#' save.title = `${L._('Save current edits')} (Ctrl+S)` diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js index 612faea4..0454855d 100644 --- a/umap/static/umap/js/umap.permissions.js +++ b/umap/static/umap/js/umap.permissions.js @@ -160,6 +160,7 @@ L.U.MapPermissions = L.Class.extend({ this.commit() this.isDirty = false this.map.continueSaving() + this.map.fire('postsync') }, }) }, @@ -194,4 +195,8 @@ L.U.MapPermissions = L.Class.extend({ commit: function () { L.Util.extend(this.map.options.permissions, this.options) }, + + getShareStatusDisplay: function () { + return Object.fromEntries(this.map.options.share_statuses)[this.options.share_status] + } }) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 9c44b146..fdd6d45f 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -479,6 +479,9 @@ ul.photon-autocomplete { margin-right: 5px; font-weight: bold; } +.umap-main-edit-toolbox .share-status { + margin: 0 5px; +} .umap-edit-enabled .umap-main-edit-toolbox { top: 0; } From b48b4ce2d33f14a56f9aa07504a24854331dcf2c Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 25 Jul 2023 09:04:50 +0200 Subject: [PATCH 04/10] Add underline on hover on edit toolbar links --- umap/static/umap/map.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index fdd6d45f..2e01988c 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -433,9 +433,6 @@ ul.photon-autocomplete { .umap-is-dirty a.leaflet-control-edit-disable { display: none; } -.umap-click-to-edit:hover { - text-decoration: underline; -} .umap-caption-bar { display: none; } @@ -469,6 +466,9 @@ ul.photon-autocomplete { color: #fff; font-size: 1.2em; } +.umap-main-edit-toolbox a:hover { + text-decoration: underline; +} .umap-main-edit-toolbox .map-name { display: inline-block; max-width: 200px; From 7287d4a528f70d8f542368fc412f1658102a1f9e Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 25 Jul 2023 09:59:35 +0200 Subject: [PATCH 05/10] Change "my maps" link label in edit toolbar --- umap/static/umap/js/umap.js | 2 +- umap/static/umap/map.css | 15 ++++----------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index baa532ff..04233625 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -1826,7 +1826,7 @@ L.U.Map.include({ 'a', 'umap-user', container, - this.options.user.name + L._(`My maps ({username})`, {username: this.options.user.name}) ) userLabel.href = this.options.user.url } diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 2e01988c..8630becd 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -465,6 +465,7 @@ ul.photon-autocomplete { .umap-main-edit-toolbox a { color: #fff; font-size: 1.2em; + vertical-align: middle; } .umap-main-edit-toolbox a:hover { text-decoration: underline; @@ -475,12 +476,11 @@ ul.photon-autocomplete { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - vertical-align: middle; margin-right: 5px; font-weight: bold; } .umap-main-edit-toolbox .share-status { - margin: 0 5px; + margin: 0 20px; } .umap-edit-enabled .umap-main-edit-toolbox { top: 0; @@ -492,15 +492,8 @@ ul.photon-autocomplete { .umap-main-edit-toolbox h3 { display: inline; } -.umap-main-edit-toolbox .umap-user:before { - content: '|'; - color: #fff; - padding-right: 10px; - background-image: url('./img/16-white.svg'); - background-repeat: no-repeat; - display: inline-block; - background-position: -40px -115px; - width: 20px; +.umap-main-edit-toolbox .umap-user { + margin-right: 20px; } .umap-edit-enabled .leaflet-top { top: 48px; From 10b1e0bb0af049c285dab9042f6576acfb1313f0 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 25 Jul 2023 10:43:35 +0200 Subject: [PATCH 06/10] Add icons to cancel and save buttons --- umap/static/umap/img/16-white.svg | 13 +++++++++++-- umap/static/umap/img/source/16-white.svg | 16 ++++++++++++---- umap/static/umap/js/umap.js | 4 ++-- umap/static/umap/map.css | 16 ++++++++++++++-- 4 files changed, 39 insertions(+), 10 deletions(-) diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg index c1417e5b..8cf99581 100644 --- a/umap/static/umap/img/16-white.svg +++ b/umap/static/umap/img/16-white.svg @@ -1,4 +1,9 @@ + + + + + @@ -31,7 +36,6 @@ -   @@ -130,7 +134,6 @@ - @@ -138,5 +141,11 @@ + + + + + + diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg index 82cb9904..1daaa9ea 100644 --- a/umap/static/umap/img/source/16-white.svg +++ b/umap/static/umap/img/source/16-white.svg @@ -2,8 +2,12 @@ - - + + + + + + @@ -49,7 +53,6 @@ -   @@ -151,7 +154,6 @@ - @@ -159,5 +161,11 @@ + + + + + + diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index 04233625..c9659080 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -1840,12 +1840,12 @@ L.U.Map.include({ save.textContent = L._('Save') const cancel = L.DomUtil.create( 'a', - 'leaflet-control-edit-cancel button', + 'leaflet-control-edit-cancel', container ) cancel.href = '#' cancel.title = L._('Cancel edits') - cancel.textContent = L._('Cancel') + cancel.textContent = `${L._('Cancel all')} (Ctrl+Z)` const disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container) disable.href = '#' disable.title = disable.textContent = L._('Disable editing') diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 8630becd..c9358610 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -407,8 +407,20 @@ ul.photon-autocomplete { padding: 0 10px; min-width: 100px; } -.leaflet-container a.leaflet-control-edit-cancel { - background-color: #C60F13; +.leaflet-container a.leaflet-control-edit-save:before, +.leaflet-container a.leaflet-control-edit-cancel:before { + display: inline-block; + width: 24px; + height: 24px; + margin-left: 5px; + background-position: -50px -122px; + background-repeat: no-repeat; + background-image: url('./img/16-white.svg'); + vertical-align: middle; + content: ' '; +} +.leaflet-container a.leaflet-control-edit-save:before { + background-position: -4px -25px; } .leaflet-container a.leaflet-control-edit-save { opacity: 0.5; From ccac42d25a8708a21100852cf36501dfbd1ed019 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 25 Jul 2023 11:19:00 +0200 Subject: [PATCH 07/10] Full text edit button --- umap/static/umap/js/umap.controls.js | 3 ++- umap/static/umap/map.css | 20 ++++++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 0c1bc9c1..8b666d3c 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -316,11 +316,12 @@ L.U.EditControl = L.Control.extend({ onAdd: function (map) { const container = L.DomUtil.create( 'div', - 'leaflet-control-edit-enable umap-control' + 'leaflet-control-edit-enable', ), edit = L.DomUtil.create('a', '', container) edit.href = '#' edit.title = `${L._('Enable editing')} (Ctrl+E)` + edit.textContent = L._('Edit') L.DomEvent.addListener(edit, 'click', L.DomEvent.stop).addListener( edit, diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index c9358610..3126794c 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -116,9 +116,26 @@ a.umap-control-less { height: 23px; line-height: 23px; } +.leaflet-control-edit-enable a:before { + content: ' '; + width: 24px; + height: 24px; + display: inline-block; + vertical-align: middle; + background-image: url('./img/16-white.svg'); + background-position: -52px -49px; +} + .leaflet-control-edit-enable a { - background-position: 0 0; + width: initial; + padding: 0 20px; background-color: #353c3e; + color: #fff; + background-image: none; + border-radius: 20px; + height: 36px; + line-height: 36px; + display: block; } .leaflet-control-toolbar .leaflet-toolbar-icon.dark:hover, .leaflet-control-edit-enable a:hover { @@ -203,7 +220,6 @@ ul.photon-autocomplete { background-image: url('./img/24.svg'); background-size: auto auto; } -.leaflet-control-edit-enable a, .leaflet-control-toolbar li .leaflet-toolbar-icon.dark { background-image: url('./img/24-white.svg'); } From 701f2704f6b26d265044508ef03ca681d713a53a Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 25 Jul 2023 11:43:59 +0200 Subject: [PATCH 08/10] Pool man responsive edit toolbar --- umap/static/umap/map.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 3126794c..870cac8a 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -1472,8 +1472,27 @@ a.add-datalayer:hover, /* Mobile */ /* ****** */ +@media all and (max-width: 980px) { + + .leaflet-container a.leaflet-control-edit-save, + .leaflet-container a.leaflet-control-edit-cancel { + text-indent: calc(100% - 20px); + width: 35px; + min-width: initial; + } + + .umap-main-edit-toolbox .umap-help-button, + .umap-main-edit-toolbox .share-status { + display: none; + } + +} @media all and (max-width: 480px) { + .umap-main-edit-toolbox .map-name { + max-width: 100px; + } + .leaflet-control-layers-expanded label { display: inline-block; margin-right: 10px; From bd48bfc617f2ea21424b70ea47be61aed5aaa9e4 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 25 Jul 2023 11:47:30 +0200 Subject: [PATCH 09/10] Align edit toolbar icon with vertical icons --- umap/static/umap/map.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 870cac8a..3f85c1e0 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -472,7 +472,7 @@ ul.photon-autocomplete { right: 0; height: 46px; background-color: #323737; - padding: 5px; + padding: 5px 10px; text-align: left; line-height: 36px; cursor: auto; @@ -483,7 +483,7 @@ ul.photon-autocomplete { } .umap-main-edit-toolbox .logo { background-image: url('./img/logo_small.svg'); - background-position: 10px center; + background-position: 0 center; background-repeat: no-repeat; width: 60px; display: inline-block; From d449564250f8365bf7df068ad5f0237e93cf474b Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 25 Jul 2023 17:50:28 +0200 Subject: [PATCH 10/10] Move Map.renderEditToolbar to controls, for consistency --- umap/static/umap/js/umap.controls.js | 75 ++++++++++++++++++++++++++-- umap/static/umap/js/umap.js | 75 +--------------------------- 2 files changed, 72 insertions(+), 78 deletions(-) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 8b666d3c..b0d093c6 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -314,10 +314,7 @@ L.U.EditControl = L.Control.extend({ }, onAdd: function (map) { - const container = L.DomUtil.create( - 'div', - 'leaflet-control-edit-enable', - ), + const container = L.DomUtil.create('div', 'leaflet-control-edit-enable'), edit = L.DomUtil.create('a', '', container) edit.href = '#' edit.title = `${L._('Enable editing')} (Ctrl+E)` @@ -1053,6 +1050,76 @@ L.U.Map.include({ }, }, + renderEditToolbar: function () { + const container = L.DomUtil.create( + 'div', + 'umap-main-edit-toolbox with-transition dark', + this._controlContainer + ), + logo = L.DomUtil.add('a', 'logo', container), + name = L.DomUtil.create('a', 'map-name', container), + share_status = L.DomUtil.create('a', 'share-status', container), + update = () => { + name.textContent = this.getDisplayName() + share_status.textContent = L._('Visibility: {status}', { + status: this.permissions.getShareStatusDisplay(), + }) + } + update() + name.href = '#' + share_status.href = '#' + logo.href = '/' + if (this.options.user) { + const userLabel = L.DomUtil.add( + 'a', + 'umap-user', + container, + L._(`My maps ({username})`, { username: this.options.user.name }) + ) + userLabel.href = this.options.user.url + } + this.help.button(container, 'edit') + L.DomEvent.on(name, 'click', this.edit, this) + L.DomEvent.on(share_status, 'click', this.permissions.edit, this.permissions) + this.on('postsync', L.bind(update, this)) + const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container) + save.href = '#' + save.title = `${L._('Save current edits')} (Ctrl+S)` + save.textContent = L._('Save') + const cancel = L.DomUtil.create('a', 'leaflet-control-edit-cancel', container) + cancel.href = '#' + cancel.title = `${L._('Cancel edits')} (Ctrl+Z)` + cancel.textContent = L._('Cancel all') + const disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container) + disable.href = '#' + disable.textContent = L._('Disable editing') + disable.title = `${disable.textContent} (Ctrl+E)` + + L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener( + disable, + 'click', + function (e) { + this.disableEdit(e) + this.ui.closePanel() + }, + this + ) + + L.DomEvent.addListener(save, 'click', L.DomEvent.stop).addListener( + save, + 'click', + this.save, + this + ) + + L.DomEvent.addListener(cancel, 'click', L.DomEvent.stop).addListener( + cancel, + 'click', + this.askForReset, + this + ) + }, + renderShareBox: function () { const container = L.DomUtil.create('div', 'umap-share') const embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map')) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index c9659080..b8b4bb0d 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -245,7 +245,7 @@ L.U.Map.include({ }, this ) - this.initEditBar() + this.renderEditToolbar() } this.initShortcuts() this.onceDatalayersLoaded(function () { @@ -1802,79 +1802,6 @@ L.U.Map.include({ }) }, - initEditBar: function () { - const container = L.DomUtil.create( - 'div', - 'umap-main-edit-toolbox with-transition dark', - this._controlContainer - ), - logo = L.DomUtil.add('a', 'logo', container), - name = L.DomUtil.create('a', 'map-name', container), - share_status = L.DomUtil.create('a', 'share-status', container), - update = () => { - name.textContent = this.getDisplayName() - share_status.textContent = L._('Visibility: {status}', { - status: this.permissions.getShareStatusDisplay(), - }) - } - update() - name.href = '#' - share_status.href = '#' - logo.href = '/' - if (this.options.user) { - const userLabel = L.DomUtil.add( - 'a', - 'umap-user', - container, - L._(`My maps ({username})`, {username: this.options.user.name}) - ) - userLabel.href = this.options.user.url - } - this.help.button(container, 'edit') - L.DomEvent.on(name, 'click', this.edit, this) - L.DomEvent.on(share_status, 'click', this.permissions.edit, this.permissions) - this.on('postsync', L.bind(update, this)) - const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container) - save.href = '#' - save.title = `${L._('Save current edits')} (Ctrl+S)` - save.textContent = L._('Save') - const cancel = L.DomUtil.create( - 'a', - 'leaflet-control-edit-cancel', - container - ) - cancel.href = '#' - cancel.title = L._('Cancel edits') - cancel.textContent = `${L._('Cancel all')} (Ctrl+Z)` - const disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container) - disable.href = '#' - disable.title = disable.textContent = L._('Disable editing') - - L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener( - disable, - 'click', - function (e) { - this.disableEdit(e) - this.ui.closePanel() - }, - this - ) - - L.DomEvent.addListener(save, 'click', L.DomEvent.stop).addListener( - save, - 'click', - this.save, - this - ) - - L.DomEvent.addListener(cancel, 'click', L.DomEvent.stop).addListener( - cancel, - 'click', - this.askForReset, - this - ) - }, - askForReset: function (e) { if (!confirm(L._('Are you sure you want to cancel your changes?'))) return this.reset()