olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better drag indication + several minor fixes and issues documented...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-08-30 02:49:03 +03:00
parent 4e7018efd6
commit 3e8ce38d1f
2 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/grid-n-view.css
View File

@ -228,8 +228,15 @@ button:active {
}
/* image dragged over... */
.gallery.dragged-over .images img {
filter: saturate(0) brightness(0.4);
}
.gallery .images img.dragged-over {
filter: saturate(0);
z-index: calc(var(--base-layer) + 1);
box-shadow:
calc(var(--gallery-current-image-border) * -1) 0px 0px 0px rgba(0,0,0,0.8),
/* XXX this does not work... */
inset var(--gallery-current-image-border) 0px 0px 0px rgba(0,0,0,0.8);
}
/* image marked for removal... */

48
grid-n-view.js
View File

@ -1124,6 +1124,7 @@ var Gallery = {
// drag/drop: sort...
var dragged
var dragged_over
this.dom
.addEventListener('dragstart', function(evt){
var i = that.images.indexOf(evt.target)
@ -1139,6 +1140,8 @@ var Gallery = {
var skip_dragover = false
this.dom
.addEventListener('dragenter', function(evt){
evt.preventDefault()
evt.stopPropagation()
// NOTE: this prevents jumping back and forth if moving
// image causes a resize that causes the image to
// move again...
@ -1182,6 +1185,13 @@ var Gallery = {
// the image below...
this.dom
.addEventListener('dragleave', function(evt){
// cleanup on drag out...
// XXX this does not work sometimes...
if(evt.target === that.dom){
that.dom.classList.remove('dragged-over')
dragged_over
&& dragged_over.classList.remove('dragged-over') }
// check edge...
if(!dragged
|| skip_dragover){
return }
@ -1206,7 +1216,6 @@ var Gallery = {
|| next.offsetTop != target.offsetTop){
target.after(dragged)
that.updateMarkers() } } } })
var dragged_over
this.dom
.addEventListener('dragover', function(evt){
evt.preventDefault()
@ -1216,10 +1225,19 @@ var Gallery = {
var i = that.images.indexOf(target)
if(!dragged
&& i >= 0){
dragged_over
&& dragged_over.classList.remove('dragged-over')
dragged_over = target
dragged_over.classList.add('dragged-over') } }, false)
// XXX BUG: canceling drag leaves the classes in place...
// ...handling dragend does not help...
// indicate replacing all...
if(!evt.shiftKey){
that.dom.classList.add('dragged-over')
target.classList.remove('dragged-over')
// indicate insertion...
} else {
that.dom.classList.remove('dragged-over')
dragged_over
&& dragged_over.classList.remove('dragged-over')
dragged_over = target
dragged_over.classList.add('dragged-over') } } }, false)
// drag/drop: files...
// NOTE: if shift is pressed then this will add files to the
// loaded list, otherwise it will replace the list...
@ -1287,10 +1305,30 @@ var Gallery = {
&& dragged.classList.remove('dragged')
dragged_over
&& dragged_over.classList.remove('dragged-over')
that.dom.classList.remove('dragged-over')
// XXX if this is used in the promise, move to the point
// after we nned this...
dragged = undefined
dragged_over = undefined }, false)
// drag/drom: cleanup...
// XXX BUG: this does not handle the situation when drag was cancelled
// but while the browser was not focused leaving the class
// on the element...
// to reproduce:
// - start drag of files
// - drag over the gallery
// - press esc to cancel drag
// ...this will leave the dragged-over classes in place...
var cleanupAfterDrag = function(evt){
console.log('11111')
that.dom.classList.remove('dragged-over')
dragged_over
&& dragged_over.classList.remove('dragged-over') }
//this.dom.addEventListener('dragend', cleanupAfterDrag)
// XXX HACK-ish...
document.body.addEventListener('dragenter', cleanupAfterDrag)
// XXX HACK...
this.dom.addEventListener('mouseover', cleanupAfterDrag)
// XXX
for(var img of this.images){