New: Drag and Drop support

languages/ca.json

@@ -23,7 +23,10 @@
 			"remove": "Retirar"
 		},
 		"back": "Enrere",
+		"open": "Obrir",
 		"add": "Afegir",
+		"addToLibrary": "Afegir a la biblioteca",
+		"unsupportedFile": "L'arxiu no és compatible",
 		"language": "Idioma",
 		"settings": "Configuració",
 		"theme": "Tema",

languages/en.json

@@ -23,7 +23,10 @@
 			"remove": "Remove"
 		},
 		"back": "Back",
+		"open": "Open",
 		"add": "Add",
+		"addToLibrary": "Add to library",
+		"unsupportedFile": "The file is not supported",
 		"language": "Language",
 		"settings": "Settings",
 		"theme": "Theme",

languages/es.json

@@ -23,7 +23,10 @@
 			"remove": "Retirar"
 		},
 		"back": "Atrás",
+		"open": "Abrir",
 		"add": "Añadir",
+		"addToLibrary": "Añadir a la biblioteca",
+		"unsupportedFile": "El archivo no es compatible",
 		"language": "Idioma",
 		"settings": "Ajustes",
 		"theme": "Tema",

scripts/app.js

@@ -0,0 +1,86 @@
+
+function event(selector, eventsNames, listener, options = false)
+{
+	if(typeof selector == 'string')
+		selector = document.querySelectorAll(selector);
+	else if(selector === window || selector === document)
+		selector = [selector];
+
+	eventsNames = eventsNames.split(' ');
+
+	for(let e = 0; e < eventsNames.length; e++)
+	{
+		let eventName = eventsNames[e].trim();
+
+		if(!app.empty(eventName))
+		{
+			for(let i = 0, len = selector.length; i < len; i++)
+			{
+				selector[i].addEventListener(eventName, listener, options);
+			}
+		}
+	}
+}
+
+function eventOff(selector, eventsNames, listener, options = false)
+{
+	if(typeof selector == 'string')
+		selector = document.querySelectorAll(selector);
+	else if(selector === window || selector === document)
+		selector = [selector];
+
+	eventsNames = eventsNames.split(' ');
+
+	for(let e = 0; e < eventsNames.length; e++)
+	{
+		let eventName = eventsNames[e].trim();
+
+		if(!app.empty(eventName))
+		{
+			for(let i = 0, len = selector.length; i < len; i++)
+			{
+				selector[i].removeEventListener(eventName, listener, options);
+			}
+		}
+	}
+}
+
+
+function empty(mixedVar)
+{
+	let undef, key, i, len, emptyValues = [undef, null, false, 0, '', '0'];
+
+	for(let i = 0, len = emptyValues.length; i < len; i++)
+	{
+		if(mixedVar === emptyValues[i])
+		{
+			return true
+		}
+	}
+
+	if(typeof mixedVar === 'undefined')
+	{
+		return true
+	}
+
+	if(typeof mixedVar === 'object')
+	{
+		for(key in mixedVar)
+		{
+			if (mixedVar.hasOwnProperty(key))
+			{
+				return false
+			}
+		}
+
+		return true
+	}
+
+	return false
+}
+
+module.exports = {
+	event: event,
+	eventOff: eventOff,
+	empty: empty,
+};

scripts/drag-and-drop.js

@@ -0,0 +1,112 @@
+
+var showDropZoneST = false;
+var dragAndDropStarted = false;
+var dragAndDropInDropZone = false;
+var dragAndDropFocus = false;
+
+function showDropZone(event)
+{
+	clearTimeout(hideDropZoneST);
+	clearTimeout(showDropZoneST);
+
+	let dropZone = document.querySelector('.drop-zone');
+
+	if(!dragAndDropStarted)
+		dropZone.innerHTML = template.load('drop.zone.html');
+
+	if(event.target.classList.contains('drop-zone') || event.target.classList.contains('drop-open') || event.target.classList.contains('drop-add'))
+	{
+		dragAndDropFocus = false;
+
+		dom.queryAll('.drop-zone > div').removeClass('focus');
+		if(!event.target.classList.contains('drop-zone'))
+		{
+			dragAndDropFocus = event.target;
+			event.target.classList.add('focus');
+		}
+	}
+
+	dropZone.classList.remove('hide');
+	dropZone.classList.add('active');
+
+	dragAndDropStarted = true;
+	dragAndDropInDropZone = true;
+
+	showDropZoneST = setTimeout(function(){
+
+		dragAndDropInDropZone = false;
+
+	}, 1);
+}
+
+var hideDropZoneST = false;
+
+function hideDropZone(event, force = false)
+{
+	if(!force && (!dragAndDropStarted || dragAndDropInDropZone)) return;
+
+	clearTimeout(hideDropZoneST);
+
+	let dropZone = document.querySelector('.drop-zone');
+
+	dropZone.classList.add('hide');
+
+	hideDropZoneST = setTimeout(function(){
+
+		dropZone.classList.remove('hide', 'active');
+
+	}, 500);
+
+	dragAndDropStarted = false;
+
+}
+
+function checkDragPosition()
+{
+	event.dataTransfer.dropEffect = 'link';
+	event.preventDefault();
+}
+
+function handleDrop(event)
+{
+	if(dragAndDropFocus && event.dataTransfer.files && event.dataTransfer.files[0] && event.dataTransfer.files[0].path)
+	{
+		let type = dragAndDropFocus.dataset.type;
+
+		if(pathIsSupported(event.dataTransfer.files[0].path))
+		{
+			if(type == 'add')
+				addComicsToLibrary([event.dataTransfer.files[0].path]);
+			else
+				openComic(event.dataTransfer.files[0].path);
+		}
+		else
+		{
+			alert(language.global.unsupportedFile);
+		}
+	}
+
+	dragAndDropFocus = false;
+
+	hideDropZone(event, true);
+}
+
+function start()
+{
+	app.event(window, 'dragenter', showDropZone);
+	app.event(window, 'dragleave', hideDropZone);
+	app.event(window, 'dragover', checkDragPosition);
+	app.event(window, 'drop', handleDrop);
+
+	app.event(document, 'mouseenter', function(event){
+
+		if(dragAndDropStarted)
+			hideDropZone(event, true);
+
+	});
+
+}
+
+module.exports = {
+	start: start,
+};