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

now can add to current list by dragging...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-08-11 17:33:35 +03:00
parent 9d91940be0
commit e061166600
2 changed files with 79 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,10 +109,15 @@ body {
cursor: pointer; cursor: pointer;
} }
/* dragging */ /* dragged image... */
.gallery .images img.dragging { .gallery .images img.dragged {
} }
.gallery .images:has(.dragging) img:not(.dragging) { .gallery .images:has(.dragged) img:not(.dragged) {
}
/* image dragged over... */
.gallery .images img.dragged-over {
filter: saturate(0);
} }
/* selection marker... */ /* selection marker... */

38
grid-n-view.js
View File

@ -666,7 +666,7 @@ var Gallery = {
if(index == null){ if(index == null){
this.clear() } this.clear() }
if(index == null if(index == null
|| this.length > 0){ && this.length == 0){
this.dom.querySelector('.images') this.dom.querySelector('.images')
.append(...elems) .append(...elems)
} else { } else {
@ -772,7 +772,7 @@ var Gallery = {
var i = that.images.indexOf(evt.target) var i = that.images.indexOf(evt.target)
if(i >= 0){ if(i >= 0){
dragged = evt.target dragged = evt.target
dragged.classList.add('dragging') } }) dragged.classList.add('dragged') } })
var skip_dragover = false var skip_dragover = false
// XXX do we .__update_grid_size() live (current) or after the // XXX do we .__update_grid_size() live (current) or after the
// drag is over??? // drag is over???
@ -785,7 +785,8 @@ var Gallery = {
return } return }
var target = evt.target var target = evt.target
var i = that.images.indexOf(target) var i = that.images.indexOf(target)
if(dragged && i >= 0){ if(dragged
&& i >= 0){
evt.offsetX < target.offsetWidth / 2 ? evt.offsetX < target.offsetWidth / 2 ?
target.after(dragged) target.after(dragged)
: target.before(dragged) : target.before(dragged)
@ -840,17 +841,35 @@ var Gallery = {
|| next.offsetTop != target.offsetTop){ || next.offsetTop != target.offsetTop){
target.after(dragged) target.after(dragged)
that.updateMarkers() } } } }) that.updateMarkers() } } } })
var dragged_over
this.dom this.dom
.addEventListener('dragover', function(evt){ .addEventListener('dragover', function(evt){
evt.preventDefault() evt.preventDefault()
evt.stopPropagation() evt.stopPropagation()
evt.dataTransfer.dropEffect = 'copy' }, false) evt.dataTransfer.dropEffect = 'copy'
var target = evt.target
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)
// drag/drop: files... // drag/drop: files...
// NOTE: if shift is pressed then this will add files to the
// loaded list, otherwise it will replace the list...
// XXX handle serilized data... // XXX handle serilized data...
this.dom this.dom
.addEventListener('drop', function(evt){ .addEventListener('drop', function(evt){
evt.preventDefault() evt.preventDefault()
evt.stopPropagation() evt.stopPropagation()
// non-local drag...
if(!dragged){
var expand = (evt.shiftKey && dragged_over) ?
that.images.indexOf(dragged_over)
: undefined
var files = var files =
evt.dataTransfer.items ? evt.dataTransfer.items ?
[...evt.dataTransfer.items] [...evt.dataTransfer.items]
@ -892,15 +911,18 @@ var Gallery = {
// no images... // no images...
if(images.length == 0){ if(images.length == 0){
return } return }
return that.load(images) }, return that.load(images, expand) },
function(err){ function(err){
// XXX handle errors... // XXX handle errors...
}) }) }
dragged dragged
&& dragged.classList.remove('dragging') && dragged.classList.remove('dragged')
dragged_over
&& dragged_over.classList.remove('dragged-over')
// XXX if this is used in the promise, move to the point // XXX if this is used in the promise, move to the point
// after we nned this... // after we nned this...
dragged = undefined }, false) dragged = undefined
dragged_over = undefined }, false)
// XXX // XXX
for(var img of this.images){ for(var img of this.images){