mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
drag and drop not working and a feature...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
82fa9d290b
commit
7a065d7778
@ -37,6 +37,7 @@ require('features/ui-status')
|
||||
require('features/ui-ranges')
|
||||
require('features/ui-widgets')
|
||||
require('features/ui-slideshow')
|
||||
require('features/ui-drag-n-drop')
|
||||
require('features/external-editor')
|
||||
require('features/metadata')
|
||||
require('features/meta')
|
||||
|
||||
@ -108,6 +108,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
|
||||
'url-history',
|
||||
|
||||
'external-editor',
|
||||
'ui-drag-n-drop',
|
||||
|
||||
'ui-preview-filters',
|
||||
|
||||
|
||||
105
ui (gen4)/features/ui-drag-n-drop.js
Executable file
105
ui (gen4)/features/ui-drag-n-drop.js
Executable file
@ -0,0 +1,105 @@
|
||||
/**********************************************************************
|
||||
*
|
||||
*
|
||||
*
|
||||
**********************************************************************/
|
||||
((typeof define)[0]=='u'?function(f){module.exports=f(require)}:define)
|
||||
(function(require){ var module={} // make module AMD/node compatible...
|
||||
/*********************************************************************/
|
||||
|
||||
var actions = require('lib/actions')
|
||||
var features = require('lib/features')
|
||||
|
||||
var core = require('features/core')
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
var DragAndDrop =
|
||||
module.DragAndDrop = core.ImageGridFeatures.Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-drag-n-drop',
|
||||
depends: [
|
||||
'ui',
|
||||
],
|
||||
|
||||
handlers: [
|
||||
// XXX would be nice to load a directory tree as ribbons...
|
||||
// XXX HACK-ish...
|
||||
['start', function(){
|
||||
var that = this
|
||||
function handleDrop(evt){
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
|
||||
var files = event.dataTransfer.files
|
||||
var lst = {}
|
||||
var paths = []
|
||||
|
||||
// files is a FileList of File objects. List some properties.
|
||||
var output = []
|
||||
for (var i = 0, f; f = files[i]; i++) {
|
||||
// only images...
|
||||
if (!f.type.match('image.*')) {
|
||||
continue
|
||||
}
|
||||
|
||||
if(f.path){
|
||||
paths.push(f.path)
|
||||
|
||||
} else {
|
||||
// XXX get the metadata...
|
||||
lst[f.name] = {}
|
||||
|
||||
var reader = new FileReader()
|
||||
|
||||
reader.onload = (function(f){
|
||||
return function(e){
|
||||
// update the data and reload...
|
||||
var gid = lst[f.name].gid
|
||||
that.images[gid].path = e.target.result
|
||||
that.ribbons.updateImage(gid)
|
||||
} })(f)
|
||||
|
||||
reader.readAsDataURL(f)
|
||||
}
|
||||
}
|
||||
|
||||
if(paths.length > 0){
|
||||
that.loadURLs(paths)
|
||||
|
||||
} else {
|
||||
that.loadURLs(Object.keys(lst))
|
||||
|
||||
// add the generated stuff to the list -- this will help us id the
|
||||
// images when they are loaded later...
|
||||
that.images.forEach(function(gid, img){
|
||||
lst[img.path].gid = gid
|
||||
img.name = img.path
|
||||
})
|
||||
}
|
||||
}
|
||||
function handleDragOver(evt) {
|
||||
evt.stopPropagation()
|
||||
evt.preventDefault()
|
||||
// Explicitly show this is a copy...
|
||||
evt.dataTransfer.dropEffect = 'copy'
|
||||
}
|
||||
|
||||
// handle drop events...
|
||||
this.ribbons.viewer[0]
|
||||
.addEventListener('dragover', handleDragOver, false);
|
||||
this.ribbons.viewer[0]
|
||||
.addEventListener('drop', handleDrop, false)
|
||||
}]
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* vim:set ts=4 sw=4 : */ return module })
|
||||
@ -96,69 +96,6 @@ var viewer = require('imagegrid/viewer')
|
||||
/*********************************************************************/
|
||||
|
||||
|
||||
// XXX would be nice to load a directory tree as ribbons...
|
||||
// XXX get the real URLs from node/nw version...
|
||||
// XXX HACK-ish...
|
||||
function handleDrop(evt){
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
|
||||
var files = event.dataTransfer.files
|
||||
var lst = {}
|
||||
var paths = []
|
||||
|
||||
// files is a FileList of File objects. List some properties.
|
||||
var output = []
|
||||
for (var i = 0, f; f = files[i]; i++) {
|
||||
// only images...
|
||||
if (!f.type.match('image.*')) {
|
||||
continue
|
||||
}
|
||||
|
||||
if(f.path){
|
||||
paths.push(f.path)
|
||||
|
||||
} else {
|
||||
// XXX get the metadata...
|
||||
lst[f.name] = {}
|
||||
|
||||
var reader = new FileReader()
|
||||
|
||||
reader.onload = (function(f){
|
||||
return function(e){
|
||||
// update the data and reload...
|
||||
var gid = lst[f.name].gid
|
||||
ig.images[gid].path = e.target.result
|
||||
ig.ribbons.updateImage(gid)
|
||||
} })(f)
|
||||
|
||||
reader.readAsDataURL(f)
|
||||
}
|
||||
}
|
||||
|
||||
if(paths.length > 0){
|
||||
ig.loadURLs(paths)
|
||||
|
||||
} else {
|
||||
ig.loadURLs(Object.keys(lst))
|
||||
|
||||
// add the generated stuff to the list -- this will help us id the
|
||||
// images when they are loaded later...
|
||||
ig.images.forEach(function(gid, img){
|
||||
lst[img.path].gid = gid
|
||||
img.name = img.path
|
||||
})
|
||||
}
|
||||
}
|
||||
function handleDragOver(evt) {
|
||||
evt.stopPropagation()
|
||||
evt.preventDefault()
|
||||
// Explicitly show this is a copy...
|
||||
evt.dataTransfer.dropEffect = 'copy'
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
$(function(){
|
||||
@ -277,13 +214,6 @@ $(function(){
|
||||
}
|
||||
|
||||
|
||||
// XXX drop files...
|
||||
$('.viewer')[0]
|
||||
.addEventListener('dragover', handleDragOver, false);
|
||||
$('.viewer')[0]
|
||||
.addEventListener('drop', handleDrop, false)
|
||||
|
||||
|
||||
// setup the viewer...
|
||||
ig
|
||||
.load({ viewer: $('.viewer') })
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user