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

more work on dragging...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-08-11 13:21:01 +03:00
parent 3598df046c
commit 08a71c6244
2 changed files with 66 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,6 +109,12 @@ body {
cursor: pointer;
}
/* dragging */
.gallery .images img.dragging {
}
.gallery .images:has(.dragging) img:not(.dragging) {
}
/* selection marker... */
.gallery .images img.current {
z-index: 10;

65
grid-n-view.js
View File

@ -17,6 +17,7 @@
// This compansates for any resize rounding errors in patchFlexRows(..).
var PATCH_MARGIN = 2
var DRAG_DEAD_ZONE = 0.2
var patchFlexRows =
function(elems,
@ -607,6 +608,8 @@ var Gallery = {
return this },
update: function(){
this.__update_grid_size()
// XXX should this update markers???
//this.updateMarkers()
this.lightbox.shown
&& this.lightbox.update()
this.details.shown
@ -759,16 +762,66 @@ var Gallery = {
.addEventListener('dragstart', function(evt){
var i = that.images.indexOf(evt.target)
if(i >= 0){
dragged = evt.target } })
dragged = evt.target
dragged.classList.add('dragging') } })
// NOTE: this prevents jumping back and forth if moving image
// causes a resize that causes the image to move again...
var skip_dragover = false
this.dom
.addEventListener('dragenter', function(evt){
var i = that.images.indexOf(evt.target)
if(skip_dragover){
return }
var target = evt.target
var i = that.images.indexOf(target)
if(dragged && i >= 0){
var target = evt.target
evt.offsetX < evt.target.offsetWidth / 2 ?
evt.offsetX < target.offsetWidth / 2 ?
target.after(dragged)
: target.before(dragged)
that.updateMarkers() } })
// skip a dragover event if triggered by (right
// after) resize...
skip_dragover = true
setTimeout(function(){
skip_dragover = false }, 20)
that
.__update_grid_size()
.updateMarkers()
dragged.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
}) } })
// check if we just went out of the edge image...
// NOTE: this handles a special case:
// when a narrow image is at the edge and the adjacent image
// is wide. dragging the narrow image over the wide places
// it at the other side ow the wide image but the cursor is
// now over the wide image so to drag back we either need
// to exit it and drag over again (not intuitive) or simply
// drag over the oppoiste edge of the wide image (dragleave handler)
// XXX should we do all the dragging here???
this.dom
.addEventListener('dragleave', function(evt){
if(skip_dragover){
return }
var target = evt.target
var images = that.images
var i = images.indexOf(target)
if(dragged !== target
&& i >= 0){
var prev = images[i-1]
var next = images[i+1]
// left edge...
if(evt.offsetX <= 0){
if(prev == null
|| prev.offsetTop != target.offsetTop){
target.before(dragged)
that.updateMarkers() }
// right edge...
} else {
if(next == null
|| next.offsetTop != target.offsetTop){
console.log('RIGHT', target, dragged)
target.after(dragged)
that.updateMarkers() } } } })
this.dom
.addEventListener('dragover', function(evt){
evt.preventDefault()
@ -817,6 +870,8 @@ var Gallery = {
function(err){
// XXX handle errors...
})
dragged
&& dragged.classList.remove('dragging')
// XXX if this is used in the promise, move to the point
// after we nned this...
dragged = undefined }, false)