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;
}
/* dragging */
.gallery .images img.dragging {
/* dragged image... */
.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... */

120
grid-n-view.js
View File

@ -666,7 +666,7 @@ var Gallery = {
if(index == null){
this.clear() }
if(index == null
|| this.length > 0){
&& this.length == 0){
this.dom.querySelector('.images')
.append(...elems)
} else {
@ -772,7 +772,7 @@ var Gallery = {
var i = that.images.indexOf(evt.target)
if(i >= 0){
dragged = evt.target
dragged.classList.add('dragging') } })
dragged.classList.add('dragged') } })
var skip_dragover = false
// XXX do we .__update_grid_size() live (current) or after the
// drag is over???
@ -785,7 +785,8 @@ var Gallery = {
return }
var target = evt.target
var i = that.images.indexOf(target)
if(dragged && i >= 0){
if(dragged
&& i >= 0){
evt.offsetX < target.offsetWidth / 2 ?
target.after(dragged)
: target.before(dragged)
@ -840,67 +841,88 @@ var Gallery = {
|| next.offsetTop != target.offsetTop){
target.after(dragged)
that.updateMarkers() } } } })
var dragged_over
this.dom
.addEventListener('dragover', function(evt){
evt.preventDefault()
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...
// NOTE: if shift is pressed then this will add files to the
// loaded list, otherwise it will replace the list...
// XXX handle serilized data...
this.dom
.addEventListener('drop', function(evt){
evt.preventDefault()
evt.stopPropagation()
var files =
evt.dataTransfer.items ?
[...evt.dataTransfer.items]
.map(function(elem){
return elem.kind == 'file' ?
[elem.getAsFile()]
: [] })
.flat()
: [...evt.dataTransfer.files]
Promise.all(files
.map(function(file){
// XXX handle serilized data...
// XXX
// non-local drag...
if(!dragged){
var expand = (evt.shiftKey && dragged_over) ?
that.images.indexOf(dragged_over)
: undefined
// images...
if(file.type.match('image.*')){
// XXX TEST...
if(file.path){
return {
url: file.path,
filename: file.name,
}
} else {
return new Promise(function(resolve, reject){
var reader = new FileReader()
reader.onload = function(f){
resolve({
url: f.target.result,
filename: file.name,
// XXX any other metadata to include???
}) }
reader.readAsDataURL(file) }) } }
// other files...
return [] })
.flat())
.then(
function(images){
// no images...
if(images.length == 0){
return }
return that.load(images) },
function(err){
// XXX handle errors...
})
var files =
evt.dataTransfer.items ?
[...evt.dataTransfer.items]
.map(function(elem){
return elem.kind == 'file' ?
[elem.getAsFile()]
: [] })
.flat()
: [...evt.dataTransfer.files]
Promise.all(files
.map(function(file){
// XXX handle serilized data...
// XXX
// images...
if(file.type.match('image.*')){
// XXX TEST...
if(file.path){
return {
url: file.path,
filename: file.name,
}
} else {
return new Promise(function(resolve, reject){
var reader = new FileReader()
reader.onload = function(f){
resolve({
url: f.target.result,
filename: file.name,
// XXX any other metadata to include???
}) }
reader.readAsDataURL(file) }) } }
// other files...
return [] })
.flat())
.then(
function(images){
// no images...
if(images.length == 0){
return }
return that.load(images, expand) },
function(err){
// XXX handle errors...
}) }
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
// after we nned this...
dragged = undefined }, false)
dragged = undefined
dragged_over = undefined }, false)
// XXX
for(var img of this.images){