jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add affordance to drag-n-drop file onto the map

Browse source
This commit is contained in:
Yohan Boniface 2023-10-13 17:02:08 +02:00
parent b5bf1396f3
commit eda14bd742
2 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
umap/static/umap/base.css
View file

@ -813,6 +813,25 @@ input:invalid {
} }
/* *********** */
/* Various */
/* *********** */
.umap-dragover:before {
content: ' ';
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="arcs">%3Cpath d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/>%3C/svg>');
background-repeat: no-repeat;
background-position: center;
background-color: #323e56;
z-index: 401;
display: block;
position: absolute;
width: 100vw;
height: 100vh;
opacity: 0.5;
}
/* *********** */ /* *********** */
/* Mobile */ /* Mobile */
/* *********** */ /* *********** */

22
umap/static/umap/js/umap.controls.js
View file

@ -317,26 +317,27 @@ L.U.DropControl = L.Class.extend({
initialize: function (map) { initialize: function (map) {
this.map = map this.map = map
this.dropbox = map._container this.dropzone = map._container
}, },
enable: function () { enable: function () {
L.DomEvent.on(this.dropbox, "dragenter", this.dragenter, this) L.DomEvent.on(this.dropzone, "dragenter", this.dragenter, this)
L.DomEvent.on(this.dropbox, "dragover", this.dragover, this) L.DomEvent.on(this.dropzone, "dragover", this.dragover, this)
L.DomEvent.on(this.dropbox, "drop", this.drop, this) L.DomEvent.on(this.dropzone, "drop", this.drop, this)
L.DomEvent.on(this.dropbox, "dragleave", this.dragleave, this) L.DomEvent.on(this.dropzone, "dragleave", this.dragleave, this)
}, },
disable: function () { disable: function () {
L.DomEvent.off(this.dropbox, "dragenter", this.dragenter, this) L.DomEvent.off(this.dropzone, "dragenter", this.dragenter, this)
L.DomEvent.off(this.dropbox, "dragover", this.dragover, this) L.DomEvent.off(this.dropzone, "dragover", this.dragover, this)
L.DomEvent.off(this.dropbox, "drop", this.drop, this) L.DomEvent.off(this.dropzone, "drop", this.drop, this)
L.DomEvent.off(this.dropbox, "dragleave", this.dragleave, this) L.DomEvent.off(this.dropzone, "dragleave", this.dragleave, this)
}, },
dragenter: function (e) { dragenter: function (e) {
L.DomEvent.stop(e) L.DomEvent.stop(e)
this.map.scrollWheelZoom.disable() this.map.scrollWheelZoom.disable()
this.dropzone.classList.add('umap-dragover')
}, },
dragover: function (e) { dragover: function (e) {
@ -344,8 +345,8 @@ L.U.DropControl = L.Class.extend({
}, },
drop: function (e) { drop: function (e) {
this.dropzone.classList.remove('umap-dragover')
L.DomEvent.stop(e) L.DomEvent.stop(e)
this.map.scrollWheelZoom.enable()
for (let i = 0, file; (file = e.dataTransfer.files[i]); i++) { for (let i = 0, file; (file = e.dataTransfer.files[i]); i++) {
this.map.processFileToImport(file) this.map.processFileToImport(file)
} }
@ -354,6 +355,7 @@ L.U.DropControl = L.Class.extend({
dragleave: function () { dragleave: function () {
this.map.scrollWheelZoom.enable() this.map.scrollWheelZoom.enable()
this.dropzone.classList.remove('umap-dragover')
} }
}) })