Skip to content

Commit 91933a9

Browse files
ollmollm
committed
New: Drag and Drop support
1 parent e6908c9 commit 91933a9

File tree

10 files changed

+349
-57
lines changed

10 files changed

+349
-57
lines changed

‎languages/ca.json

+3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
"remove": "Retirar"
2424
},
2525
"back": "Enrere",
26+
"open": "Obrir",
2627
"add": "Afegir",
28+
"addToLibrary": "Afegir a la biblioteca",
29+
"unsupportedFile": "L'arxiu no és compatible",
2730
"language": "Idioma",
2831
"settings": "Configuració",
2932
"theme": "Tema",

‎languages/en.json

+3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
"remove": "Remove"
2424
},
2525
"back": "Back",
26+
"open": "Open",
2627
"add": "Add",
28+
"addToLibrary": "Add to library",
29+
"unsupportedFile": "The file is not supported",
2730
"language": "Language",
2831
"settings": "Settings",
2932
"theme": "Theme",

‎languages/es.json

+3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
"remove": "Retirar"
2424
},
2525
"back": "Atrás",
26+
"open": "Abrir",
2627
"add": "Añadir",
28+
"addToLibrary": "Añadir a la biblioteca",
29+
"unsupportedFile": "El archivo no es compatible",
2730
"language": "Idioma",
2831
"settings": "Ajustes",
2932
"theme": "Tema",

‎scripts/app.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
2+
function event(selector, eventsNames, listener, options = false)
3+
{
4+
if(typeof selector == 'string')
5+
selector = document.querySelectorAll(selector);
6+
else if(selector === window || selector === document)
7+
selector = [selector];
8+
9+
eventsNames = eventsNames.split(' ');
10+
11+
for(let e = 0; e < eventsNames.length; e++)
12+
{
13+
let eventName = eventsNames[e].trim();
14+
15+
if(!app.empty(eventName))
16+
{
17+
for(let i = 0, len = selector.length; i < len; i++)
18+
{
19+
selector[i].addEventListener(eventName, listener, options);
20+
}
21+
}
22+
}
23+
}
24+
25+
function eventOff(selector, eventsNames, listener, options = false)
26+
{
27+
if(typeof selector == 'string')
28+
selector = document.querySelectorAll(selector);
29+
else if(selector === window || selector === document)
30+
selector = [selector];
31+
32+
eventsNames = eventsNames.split(' ');
33+
34+
for(let e = 0; e < eventsNames.length; e++)
35+
{
36+
let eventName = eventsNames[e].trim();
37+
38+
if(!app.empty(eventName))
39+
{
40+
for(let i = 0, len = selector.length; i < len; i++)
41+
{
42+
selector[i].removeEventListener(eventName, listener, options);
43+
}
44+
}
45+
}
46+
}
47+
48+
49+
function empty(mixedVar)
50+
{
51+
let undef, key, i, len, emptyValues = [undef, null, false, 0, '', '0'];
52+
53+
for(let i = 0, len = emptyValues.length; i < len; i++)
54+
{
55+
if(mixedVar === emptyValues[i])
56+
{
57+
return true
58+
}
59+
}
60+
61+
if(typeof mixedVar === 'undefined')
62+
{
63+
return true
64+
}
65+
66+
if(typeof mixedVar === 'object')
67+
{
68+
for(key in mixedVar)
69+
{
70+
if (mixedVar.hasOwnProperty(key))
71+
{
72+
return false
73+
}
74+
}
75+
76+
return true
77+
}
78+
79+
return false
80+
}
81+
82+
module.exports = {
83+
event: event,
84+
eventOff: eventOff,
85+
empty: empty,
86+
};

‎scripts/drag-and-drop.js

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
2+
var showDropZoneST = false;
3+
var dragAndDropStarted = false;
4+
var dragAndDropInDropZone = false;
5+
var dragAndDropFocus = false;
6+
7+
function showDropZone(event)
8+
{
9+
clearTimeout(hideDropZoneST);
10+
clearTimeout(showDropZoneST);
11+
12+
let dropZone = document.querySelector('.drop-zone');
13+
14+
if(!dragAndDropStarted)
15+
dropZone.innerHTML = template.load('drop.zone.html');
16+
17+
if(event.target.classList.contains('drop-zone') || event.target.classList.contains('drop-open') || event.target.classList.contains('drop-add'))
18+
{
19+
dragAndDropFocus = false;
20+
21+
dom.queryAll('.drop-zone > div').removeClass('focus');
22+
if(!event.target.classList.contains('drop-zone'))
23+
{
24+
dragAndDropFocus = event.target;
25+
event.target.classList.add('focus');
26+
}
27+
}
28+
29+
dropZone.classList.remove('hide');
30+
dropZone.classList.add('active');
31+
32+
dragAndDropStarted = true;
33+
dragAndDropInDropZone = true;
34+
35+
showDropZoneST = setTimeout(function(){
36+
37+
dragAndDropInDropZone = false;
38+
39+
}, 1);
40+
}
41+
42+
var hideDropZoneST = false;
43+
44+
function hideDropZone(event, force = false)
45+
{
46+
if(!force && (!dragAndDropStarted || dragAndDropInDropZone)) return;
47+
48+
clearTimeout(hideDropZoneST);
49+
50+
let dropZone = document.querySelector('.drop-zone');
51+
52+
dropZone.classList.add('hide');
53+
54+
hideDropZoneST = setTimeout(function(){
55+
56+
dropZone.classList.remove('hide', 'active');
57+
58+
}, 500);
59+
60+
dragAndDropStarted = false;
61+
62+
}
63+
64+
function checkDragPosition()
65+
{
66+
event.dataTransfer.dropEffect = 'link';
67+
event.preventDefault();
68+
}
69+
70+
function handleDrop(event)
71+
{
72+
if(dragAndDropFocus && event.dataTransfer.files && event.dataTransfer.files[0] && event.dataTransfer.files[0].path)
73+
{
74+
let type = dragAndDropFocus.dataset.type;
75+
76+
if(pathIsSupported(event.dataTransfer.files[0].path))
77+
{
78+
if(type == 'add')
79+
addComicsToLibrary([event.dataTransfer.files[0].path]);
80+
else
81+
openComic(event.dataTransfer.files[0].path);
82+
}
83+
else
84+
{
85+
alert(language.global.unsupportedFile);
86+
}
87+
}
88+
89+
dragAndDropFocus = false;
90+
91+
hideDropZone(event, true);
92+
}
93+
94+
function start()
95+
{
96+
app.event(window, 'dragenter', showDropZone);
97+
app.event(window, 'dragleave', hideDropZone);
98+
app.event(window, 'dragover', checkDragPosition);
99+
app.event(window, 'drop', handleDrop);
100+
101+
app.event(document, 'mouseenter', function(event){
102+
103+
if(dragAndDropStarted)
104+
hideDropZone(event, true);
105+
106+
});
107+
108+
}
109+
110+
module.exports = {
111+
start: start,
112+
};

0 commit comments

Comments
 (0)