Skip to content

Commit cf397a7

Browse files
dan-fdan-f
committed
Pull out drag and drop components into module
1 parent d225fd7 commit cf397a7

3 files changed

Lines changed: 114 additions & 130 deletions

File tree

‎src/widgets/dragAndDrop.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
module.exports = {
2+
makeDropTarget: makeDropTarget,
3+
makeDraggable: makeDraggable
4+
}
5+
6+
function makeDropTarget (ele, droppedURIHandler, droppedFileHandler) {
7+
8+
var dragoverListener = function (e) {
9+
e.preventDefault() // Neeed else drop does not work [sic]
10+
e.dataTransfer.dropEffect = 'copy'
11+
}
12+
13+
var dragenterListener = function (e) {
14+
console.log('dragenter event dropEffect: ' + e.dataTransfer.dropEffect)
15+
this.style.backgroundColor = '#ccc'
16+
e.dataTransfer.dropEffect = 'link'
17+
console.log('dragenter event dropEffect 2: ' + e.dataTransfer.dropEffect)
18+
}
19+
var dragleaveListener = function (e) {
20+
console.log('dragleave event dropEffect: ' + e.dataTransfer.dropEffect)
21+
this.style.backgroundColor = 'white'
22+
}
23+
24+
var dropListener = function (e) {
25+
if (e.preventDefault) e.preventDefault() // stops the browser from redirecting off to the text.
26+
console.log('Drop event. dropEffect: ' + e.dataTransfer.dropEffect)
27+
console.log('Drop event. types: ' + (e.dataTransfer.types ? e.dataTransfer.types.join(', ') : 'NOPE'))
28+
29+
var uris = null
30+
var text
31+
var thisEle = this
32+
if (e.dataTransfer.types) {
33+
for (var t = 0; t < e.dataTransfer.types.length; t++) {
34+
var type = e.dataTransfer.types[t]
35+
if (type === 'text/uri-list') {
36+
uris = e.dataTransfer.getData(type).split('\n') // @ ignore those starting with #
37+
console.log('Dropped text/uri-list: ' + uris)
38+
} else if (type === 'text/plain') {
39+
text = e.dataTransfer.getData(type)
40+
} else if (type === 'Files' && droppedFileHandler) {
41+
var files = e.dataTransfer.files; // FileList object.
42+
// files is a FileList of File objects. List some properties.
43+
// https://www.html5rocks.com/en/tutorials/file/dndfiles/
44+
for (var i = 0, f; f = files[i]; i++) {
45+
console.log("Filename: " + f.name + ", type: " + (f.type || 'n/a') +
46+
" size: " + f.size + ' bytes, last modified: ' +
47+
(f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a')
48+
);
49+
}
50+
droppedFileHandler(files)
51+
}
52+
}
53+
if (uris === null && text && text.slice(0, 4) === 'http') {
54+
uris = text
55+
console.log("Waring: Poor man's drop: using text for URI") // chrome disables text/uri-list??
56+
}
57+
} else {
58+
// ... however, if we're IE, we don't have the .types property, so we'll just get the Text value
59+
uris = [ e.dataTransfer.getData('Text') ]
60+
console.log('WARNING non-standard drop event: ' + uris[0])
61+
}
62+
console.log('Dropped URI list (2): ' + uris)
63+
if (uris) {
64+
droppedURIHandler(uris)
65+
}
66+
return false
67+
} // dropListener
68+
69+
var addTargetListeners = function(ele){
70+
if (!ele){
71+
console.log("@@@ addTargetListeners: ele " + ele)
72+
}
73+
ele.addEventListener('dragover', dragoverListener)
74+
ele.addEventListener('dragenter', dragenterListener)
75+
ele.addEventListener('dragleave', dragleaveListener)
76+
ele.addEventListener('drop', dropListener)
77+
}
78+
addTargetListeners(ele, droppedURIHandler)
79+
} // listen for dropped URIs
80+
81+
82+
// Make an HTML element draggable as a URI-identified thing
83+
//
84+
// Possibly later set the drag image too?
85+
//
86+
function makeDraggable (tr, obj) {
87+
88+
tr.setAttribute('draggable', 'true') // Stop the image being dragged instead - just the TR
89+
90+
tr.addEventListener('dragstart', function (e) {
91+
tr.style.fontWeight = 'bold'
92+
e.dataTransfer.setData('text/uri-list', obj.uri)
93+
e.dataTransfer.setData('text/plain', obj.uri)
94+
e.dataTransfer.setData('text/html', tr.outerHTML)
95+
console.log('Dragstart: ' + tr + ' -> ' + obj + 'de: ' + e.dataTransfer.dropEffect)
96+
}, false)
97+
98+
tr.addEventListener('drag', function (e) {
99+
e.preventDefault()
100+
e.stopPropagation()
101+
// console.log('Drag: dropEffect: ' + e.dataTransfer.dropEffect)
102+
}, false)
103+
104+
tr.addEventListener('dragend', function (e) {
105+
tr.style.fontWeight = 'normal'
106+
console.log('Dragend dropeffect: ' + e.dataTransfer.dropEffect)
107+
console.log('Dragend: ' + tr + ' -> ' + obj)
108+
}, false)
109+
}

‎src/widgets/index.js‎

Lines changed: 2 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ var widgets = module.exports = Object.assign(
2222
{},
2323
{
2424
PeoplePicker: require('./peoplePicker').default
25-
}
25+
},
26+
require('./dragAndDrop')
2627
)
2728

2829
var UI = {
@@ -297,115 +298,6 @@ UI.widgets.askName = function (dom, kb, container, predicate, klass) {
297298
}
298299

299300

300-
///////////////////////////////////////////////////// DRAG AND drop
301-
302-
303-
304-
UI.widgets.makeDropTarget = function(ele, droppedURIHandler, droppedFileHandler){
305-
306-
var dragoverListener = function (e) {
307-
e.preventDefault() // Neeed else drop does not work [sic]
308-
e.dataTransfer.dropEffect = 'copy'
309-
}
310-
311-
var dragenterListener = function (e) {
312-
console.log('dragenter event dropEffect: ' + e.dataTransfer.dropEffect)
313-
this.style.backgroundColor = '#ccc'
314-
e.dataTransfer.dropEffect = 'link'
315-
console.log('dragenter event dropEffect 2: ' + e.dataTransfer.dropEffect)
316-
}
317-
var dragleaveListener = function (e) {
318-
console.log('dragleave event dropEffect: ' + e.dataTransfer.dropEffect)
319-
this.style.backgroundColor = 'white'
320-
}
321-
322-
var dropListener = function (e) {
323-
if (e.preventDefault) e.preventDefault() // stops the browser from redirecting off to the text.
324-
console.log('Drop event. dropEffect: ' + e.dataTransfer.dropEffect)
325-
console.log('Drop event. types: ' + (e.dataTransfer.types ? e.dataTransfer.types.join(', ') : 'NOPE'))
326-
327-
var uris = null
328-
var text
329-
var thisEle = this
330-
if (e.dataTransfer.types) {
331-
for (var t = 0; t < e.dataTransfer.types.length; t++) {
332-
var type = e.dataTransfer.types[t]
333-
if (type === 'text/uri-list') {
334-
uris = e.dataTransfer.getData(type).split('\n') // @ ignore those starting with #
335-
console.log('Dropped text/uri-list: ' + uris)
336-
} else if (type === 'text/plain') {
337-
text = e.dataTransfer.getData(type)
338-
} else if (type === 'Files' && droppedFileHandler) {
339-
var files = e.dataTransfer.files; // FileList object.
340-
// files is a FileList of File objects. List some properties.
341-
// https://www.html5rocks.com/en/tutorials/file/dndfiles/
342-
for (var i = 0, f; f = files[i]; i++) {
343-
console.log("Filename: " + f.name + ", type: " + (f.type || 'n/a') +
344-
" size: " + f.size + ' bytes, last modified: ' +
345-
(f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a')
346-
);
347-
}
348-
droppedFileHandler(files)
349-
}
350-
}
351-
if (uris === null && text && text.slice(0, 4) === 'http') {
352-
uris = text
353-
console.log("Waring: Poor man's drop: using text for URI") // chrome disables text/uri-list??
354-
}
355-
} else {
356-
// ... however, if we're IE, we don't have the .types property, so we'll just get the Text value
357-
uris = [ e.dataTransfer.getData('Text') ]
358-
console.log('WARNING non-standard drop event: ' + uris[0])
359-
}
360-
console.log('Dropped URI list (2): ' + uris)
361-
if (uris) {
362-
droppedURIHandler(uris)
363-
}
364-
return false
365-
} // dropListener
366-
367-
var addTargetListeners = function(ele){
368-
if (!ele){
369-
console.log("@@@ addTargetListeners: ele " + ele)
370-
}
371-
ele.addEventListener('dragover', dragoverListener)
372-
ele.addEventListener('dragenter', dragenterListener)
373-
ele.addEventListener('dragleave', dragleaveListener)
374-
ele.addEventListener('drop', dropListener)
375-
}
376-
addTargetListeners(ele, droppedURIHandler)
377-
} // listen for dropped URIs
378-
379-
380-
// Make an HTML element draggable as a URI-identified thing
381-
//
382-
// Possibly later set the drag image too?
383-
//
384-
UI.widgets.makeDraggable = function(tr, obj){
385-
386-
tr.setAttribute('draggable', 'true') // Stop the image being dragged instead - just the TR
387-
388-
tr.addEventListener('dragstart', function (e) {
389-
tr.style.fontWeight = 'bold'
390-
e.dataTransfer.setData('text/uri-list', obj.uri)
391-
e.dataTransfer.setData('text/plain', obj.uri)
392-
e.dataTransfer.setData('text/html', tr.outerHTML)
393-
console.log('Dragstart: ' + tr + ' -> ' + obj + 'de: ' + e.dataTransfer.dropEffect)
394-
}, false)
395-
396-
tr.addEventListener('drag', function (e) {
397-
e.preventDefault()
398-
e.stopPropagation()
399-
// console.log('Drag: dropEffect: ' + e.dataTransfer.dropEffect)
400-
}, false)
401-
402-
tr.addEventListener('dragend', function (e) {
403-
tr.style.fontWeight = 'normal'
404-
console.log('Dragend dropeffect: ' + e.dataTransfer.dropEffect)
405-
console.log('Dragend: ' + tr + ' -> ' + obj)
406-
}, false)
407-
}
408-
409301
//////////////////////////////////////////////////////////////////
410302

411303
// A little link icon

‎src/widgets/peoplePicker.js‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
*/
1111
import escape from 'escape-html'
1212

13+
import { makeDropTarget } from './dragAndDrop'
1314
import { iconBase } from '../iconBase'
1415
import ns from '../ns'
1516
import kb from '../store'
@@ -35,26 +36,8 @@ export default class PeoplePicker {
3536
dropContainer.style.minHeight = '200px'
3637
dropContainer.style.outline = '1px solid black'
3738

38-
dropContainer.addEventListener('dragOver', event => {
39-
// This is required to allow a drop; the 'default' handling of a drop is
40-
// to prevent it
41-
event.preventDefault()
42-
// One thing to do is to check the type of the thing being dragged
43-
// and only prevent default if it's the type of thing we want to allow
44-
// being dropped
45-
console.log('drag over!')
46-
console.log(event)
47-
})
48-
49-
dropContainer.addEventListener('dragEnter', event => {
50-
event.preventDefault()
51-
console.log('drag enter!')
52-
console.log(event)
53-
})
54-
55-
dropContainer.addEventListener('drop', event => {
56-
console.log('dropped!')
57-
console.log(event)
39+
makeDropTarget(dropContainer, uris => {
40+
console.log('uris:', uris)
5841
})
5942

6043
const peopleUl = document.createElement('ul')

0 commit comments

Comments
 (0)