New dialog for upload, removed unused code

src/scripts/build.coffee

@@ -152,11 +152,8 @@ build.no_content = (typ) ->
 build.uploadModal = (title, files) ->
 
 	html =	"""
-			<div class='upload_overlay fadeIn'>
+			<h1>#{ title }</h1>
-				<div class='upload_message center'>
+			<div class='rows'>
-					<h1>#{ title }</h1>
-					<a class='close icon-remove-sign'></a>
-					<div class='rows'>
 			"""
 
 	i		= 0
@@ -185,8 +182,6 @@ build.uploadModal = (title, files) ->
 		i++
 
 	html +=	"""
-					</div>
-				</div>
 			</div>
 			"""
 

src/scripts/init.js

@@ -163,7 +163,6 @@ $(document).ready(function() {
 
 		/* Upload */
 		.on('change', '#upload_files',				function() { basicModal.close(); upload.start.local(this.files) })
-		.on(eventName, '.upload_message a.close',	upload.close)
 		.on('dragover',								function(e) { e.preventDefault(); }, false)
 		.on('drop', function(e) {
 

src/scripts/lychee.js

@@ -88,7 +88,6 @@ lychee.api = function(params, callback) {
 			if (typeof data==='string'&&
 				data.substring(0, 7)==='Error: ') {
 					lychee.error(data.substring(7, data.length), params, data);
-					upload.close(true);
 					return false;
 			}
 
@@ -110,7 +109,6 @@ lychee.api = function(params, callback) {
 		error: function(jqXHR, textStatus, errorThrown) {
 
 			lychee.error('Server error or API not found.', params, errorThrown);
-			upload.close(true);
 
 		}
 	});

src/scripts/upload.js

@@ -7,11 +7,17 @@ upload = {}
 
 upload.show = function(title, files, callback) {
 
-	upload.close(true);
+	basicModal.show({
-
+		body: build.uploadModal(title, files),
-	$('body').append(build.uploadModal(title, files));
+		buttons: {
-
+			action: {
-	if (callback!==null&&callback!==undefined) callback();
+				title: 'Close',
+				class: 'hidden',
+				fn: basicModal.close
+			}
+		},
+		callback
+	});
 
 }
 
@@ -53,13 +59,13 @@ upload.start = {
 						if (error===false) {
 
 							// Success
-							upload.close();
+							basicModal.close();
 							upload.notify('Upload complete');
 
 						} else {
 
 							// Error
-							$('.upload_message a.close').show();
+							$('.basicModal #basicModal__action.hidden').show();
 							upload.notify('Upload complete', 'Failed to upload one or more photos.');
 
 						}
@@ -118,21 +124,21 @@ upload.start = {
 					if (xhr.status===200&&xhr.responseText==='1') {
 
 						// Success
-						$('.upload_message .rows .row:nth-child(' + (file.num+1) + ') .status')
+						$('.basicModal .rows .row:nth-child(' + (file.num+1) + ') .status')
 							.html('Finished')
 							.addClass('success');
 
 					} else {
 
 						// Error
-						$('.upload_message .rows .row:nth-child(' + (file.num+1) + ') .status')
+						$('.basicModal .rows .row:nth-child(' + (file.num+1) + ') .status')
 							.html('Error')
 							.addClass('error');
 
 						if (xhr.responseText.substr(0, 6)==='Error:') errorText = xhr.responseText.substr(6) + ' Please take a look at the console of your browser for further details.';
 						else errorText = 'Server returned an unknown response. Please take a look at the console of your browser for further details.';
 
-						$('.upload_message .rows .row:nth-child(' + (file.num+1) + ') p.notice')
+						$('.basicModal .rows .row:nth-child(' + (file.num+1) + ') p.notice')
 							.html(errorText)
 							.show();
 
@@ -168,7 +174,7 @@ upload.start = {
 
 						// Set progress when progress has changed
 						if (progress>pre_progress) {
-							$('.upload_message .rows .row:nth-child(' + (file.num+1) + ') .status').html(progress + '%');
+							$('.basicModal .rows .row:nth-child(' + (file.num+1) + ') .status').html(progress + '%');
 							pre_progress = progress;
 						}
 
@@ -177,10 +183,10 @@ upload.start = {
 							// Scroll to the uploading file
 							var scrollPos = 0;
 							if ((file.num+1)>4) scrollPos = (file.num + 1 - 4) * 40
-							$('.upload_message .rows').scrollTop(scrollPos);
+							$('.basicModal .rows').scrollTop(scrollPos);
 
 							// Set status to processing
-							$('.upload_message .rows .row:nth-child(' + (file.num+1) + ') .status').html('Processing');
+							$('.basicModal .rows .row:nth-child(' + (file.num+1) + ') .status').html('Processing');
 
 							// Upload next file
 							if (file.next!==null) process(files, file.next);
@@ -219,10 +225,12 @@ upload.start = {
 
 		window.onbeforeunload = function() { return 'Lychee is currently uploading!'; };
 
-		upload.show('Uploading', files);
+		upload.show('Uploading', files, function() {
 
-		// Upload first file
+			// Upload first file
-		process(files, files[0]);
+			process(files, files[0]);
+
+		});
 
 	},
 
@@ -235,14 +243,13 @@ upload.start = {
 
 		action = function(data) {
 
-			var params,
+			var extension,
-				extension,
 				files = [];
 
-			basicModal.close();
-
 			if (data.link&&data.link.length>3) {
 
+				basicModal.close();
+
 				extension = data.link.split('.').pop();
 				if (extension!=='jpeg'&&extension!=='jpg'&&extension!=='png'&&extension!=='gif'&&extension!=='webp') {
 					loadingBar.show('error', 'The file format of this link is not supported.');
@@ -255,30 +262,34 @@ upload.start = {
 				}
 
 				upload.show('Importing URL', files, function() {
-					$('.upload_message .rows .row .status').html('Importing');
-				});
 
-				params = 'importUrl&url=' + escape(encodeURI(data.link)) + '&albumID=' + albumID;
+					var params;
-				lychee.api(params, function(data) {
 
-					upload.close();
+					$('.basicModal .rows .row .status').html('Importing');
-					upload.notify('Import complete');
 
-					albums.refresh();
+					params = 'importUrl&url=' + escape(encodeURI(data.link)) + '&albumID=' + albumID;
+					lychee.api(params, function(data) {
 
-					if (album.getID()===false) lychee.goto('0');
+						basicModal.close();
-					else album.load(albumID);
+						upload.notify('Import complete');
 
-					if (data!==true) lychee.error(null, params, data);
+						albums.refresh();
+
+						if (album.getID()===false) lychee.goto('0');
+						else album.load(albumID);
+
+						if (data!==true) lychee.error(null, params, data);
+
+					});
 
 				});
 
-			} else loadingBar.show('error', 'Link to short or too long. Please try another one!');
+			} else basicModal.error('link');
 
 		}
 
 		basicModal.show({
-			body: "<p>Please enter the direct link to a photo to import it: <input class='text' data-name='link' type='text' placeholder='http://' value='http://'></p>",
+			body: "<p>Please enter the direct link to a photo to import it: <input class='text' data-name='link' type='text' placeholder='http://' value=''></p>",
 			buttons: {
 				action: {
 					title: 'Import',
@@ -302,10 +313,7 @@ upload.start = {
 
 		action = function(data) {
 
-			var params,
+			var files = [];
-				files = [];
-
-			basicModal.close();
 
 			files[0] = {
 				name:		data.path,
@@ -313,27 +321,31 @@ upload.start = {
 			};
 
 			upload.show('Importing from server', files, function() {
-				$('.upload_message .rows .row .status').html('Importing');
-			});
 
-			params = 'importServer&albumID=' + albumID + '&path=' + escape(encodeURI(data.path));
+				var params;
-			lychee.api(params, function(data) {
 
-				upload.close();
+				$('.basicModal .rows .row .status').html('Importing');
-				upload.notify('Import complete');
 
-				albums.refresh();
+				params = 'importServer&albumID=' + albumID + '&path=' + escape(encodeURI(data.path));
+				lychee.api(params, function(data) {
 
-				if (data==='Notice: Import only contains albums!') {
+					basicModal.close();
-					if (visible.albums()) lychee.load();
+					upload.notify('Import complete');
-					else lychee.goto('');
-				}
-				else if (album.getID()===false) lychee.goto('0');
-				else album.load(albumID);
 
-				if (data==='Notice: Import only contains albums!') return true;
+					albums.refresh();
-				else if (data==='Warning: Folder empty!') lychee.error('Folder empty. No photos imported!', params, data);
+
-				else if (data!==true) lychee.error(null, params, data);
+					if (data==='Notice: Import only contains albums!') {
+						if (visible.albums()) lychee.load();
+						else lychee.goto('');
+					}
+					else if (album.getID()===false) lychee.goto('0');
+					else album.load(albumID);
+
+					if (data==='Notice: Import only contains albums!') return true;
+					else if (data==='Warning: Folder empty!') lychee.error('Folder empty. No photos imported!', params, data);
+					else if (data!==true) lychee.error(null, params, data);
+
+				});
 
 			});
 
@@ -358,65 +370,60 @@ upload.start = {
 	dropbox: function() {
 
 		var albumID = album.getID(),
-			params,
+			links = '',
-			links = '';
+			success;
 
 		if (albumID===false) albumID = 0;
 
+		success = function(files) {
+
+			for (var i = 0; i < files.length; i++) {
+
+				links += files[i].link + ',';
+
+				files[i] = {
+					name:		files[i].link,
+					supported:	true
+				};
+
+			}
+
+			// Remove last comma
+			links = links.substr(0, links.length-1);
+
+			upload.show('Importing from Dropbox', files, function() {
+
+				var params;
+
+				$('.basicModal .rows .row .status').html('Importing');
+
+				params = 'importUrl&url=' + escape(links) + '&albumID=' + albumID;
+				lychee.api(params, function(data) {
+
+					basicModal.close();
+					upload.notify('Import complete');
+
+					albums.refresh();
+
+					if (album.getID()===false) lychee.goto('0');
+					else album.load(albumID);
+
+					if (data!==true) lychee.error(null, params, data);
+
+				});
+
+			});
+
+		}
+
 		lychee.loadDropbox(function() {
 			Dropbox.choose({
 				linkType: 'direct',
 				multiselect: true,
-				success: function(files) {
+				success
-
-					for (var i = 0; i < files.length; i++) {
-
-						links += files[i].link + ',';
-
-						files[i] = {
-							name:		files[i].link,
-							supported:	true
-						};
-
-					}
-
-					// Remove last comma
-					links = links.substr(0, links.length-1);
-
-					upload.show('Importing from Dropbox', files, function() {
-						$('.upload_message .rows .row .status').html('Importing');
-					});
-
-					params = 'importUrl&url=' + escape(links) + '&albumID=' + albumID;
-					lychee.api(params, function(data) {
-
-						upload.close();
-						upload.notify('Import complete');
-
-						albums.refresh();
-
-						if (album.getID()===false) lychee.goto('0');
-						else album.load(albumID);
-
-						if (data!==true) lychee.error(null, params, data);
-
-					});
-
-				}
 			});
 		});
 
 	}
 
-}
-
-upload.close = function(force) {
-
-	if (force===true) {
-		$('.upload_overlay').remove();
-	} else {
-		$('.upload_overlay').removeClass('fadeIn').css('opacity', 0);
-		setTimeout(function() { $('.upload_overlay').remove() }, 300);
-	}
-
 }

src/styles/_mediaquery.scss

@@ -8,13 +8,11 @@
 		margin: 0 20% !important;
 		width: 40% !important;
 	}
+
 	#title.view {
 		margin: 0 20% !important;
 		width: 60% !important;
 	}
-	#title span {
-		display: none !important;
-	}
 
 }
 @media only screen and (max-width: 640px) {
@@ -22,19 +20,12 @@
 	#title {
 		display: none !important;
 	}
+
 	#title.view {
 		display: block !important;
 		width: 70% !important;
 		margin: 0 20% 0 10% !important;
 	}
-	#button_move {
-		display: none !important;
-	}
-
-	.center {
-		top: 0 !important;
-		left: 0 !important;
-	}
 
 	.album, .photo {
 		margin: 40px 0 0 50px !important;
@@ -44,21 +35,4 @@
 		display: none !important;
 	}
 
-	.message {
-		position: fixed !important;
-		width: 100% !important;
-		height: 100% !important;
-		margin: 1px 0 0 0 !important;
-		border-radius: 0 !important;
-
-		/* Animation */
-		animation: moveUp .3s !important;
-	}
-
-	.upload_message {
-		margin-top: 0 !important;
-		margin-left: 0 !important;
-		width: 100% !important;
-	}
-
 }

src/styles/_message.scss

@@ -9,7 +9,6 @@
 .basicModal {
 
 	background: linear-gradient(to bottom, #444, #333);
-
 	border: 1px solid black(.7);
 	border-bottom: 1px solid black(.8);
 	box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
@@ -66,6 +65,8 @@
 
 		&#basicModal__action.red { color: $colorRed; }
 
+		&.hidden { display: none; }
+
 	}
 
 	/* Inputs ------------------------------------------------*/
@@ -179,4 +180,80 @@
 		span a { color: #888; }
 	}
 
+	/* Title ------------------------------------------------*/
+	h1 {
+		float: left;
+		width: 100%;
+		padding: 12px 0;
+		color: #fff;
+		font-size: 16px;
+		font-weight: bold;
+		text-shadow: $shadow;
+		text-align: center;
+	}
+
+	/* Rows ------------------------------------------------*/
+	.rows {
+		margin: 0 8px 8px;
+		width: calc(100% - 16px);
+		height: 300px;
+		background-color: black(.4);
+		overflow: hidden;
+		overflow-y: scroll;
+		border-radius: 3px;
+		box-shadow: inset 0 0 3px black(.4);
+	}
+
+	/* Row ------------------------------------------------*/
+	.rows .row {
+		float: left;
+		padding: 8px 0;
+		width: 100%;
+		background-color: white(.02);
+
+		&:nth-child(2n) { background-color: white(0); }
+
+		a.name {
+			float: left;
+			padding: 5px 10px;
+			width: calc(70% - 20px);
+			color: #fff;
+			font-size: 14px;
+			white-space: nowrap;
+			overflow: hidden;
+		}
+
+		a.status {
+			float: left;
+			padding: 5px 10px;
+			width: calc(30% - 20px);
+			color: white(.5);
+			font-size: 14px;
+			text-align: right;
+
+			animation-name: pulse;
+			animation-duration: 2s;
+			animation-timing-function: ease-in-out;
+			animation-iteration-count: infinite;
+
+			&.error,
+			&.success { animation: none; }
+
+			&.error { color: rgb(213, 24, 24); }
+
+			&.success { color: rgb(42, 213, 0); }
+		}
+
+		p.notice {
+			display: none;
+			float: left;
+			padding: 2px 10px 5px;
+			width: calc(100% - 20px);
+			color: white(.5);
+			font-size: 12px;
+			overflow: hidden;
+			line-height: 16px;
+		}
+	}
+
 }

src/styles/_upload.scss

@@ -1,125 +0,0 @@
-/**
- * @copyright   2014 by Tobias Reich
- */
-
-#upload {
-	display: none;
-}
-
-.upload_overlay {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	background-color: black(.85);
-	z-index: 1000;
-}
-
-.upload_message {
-
-	position: absolute;
-	display: inline-block;
-	width: 450px;
-	margin-left: -225px;
-	margin-top: -170px;
-	background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
-	border-radius: 5px;
-	box-shadow: 0 0 5px #000, inset 0 1px 0 white(.08);
-	animation-name: moveUp;
-	animation-duration: .3s;
-	animation-timing-function: $timingBounce;
-
-	/* Header ------------------------------------------------*/
-	h1 {
-		float: left;
-		width: 100%;
-		padding: 12px 0;
-		color: #fff;
-		font-size: 16px;
-		font-weight: bold;
-		text-shadow: 0px -1px 0px black(.3);
-		text-align: center;
-	}
-
-	.close {
-		display: none;
-		position: absolute;
-		top: 0;
-		right: 0;
-		padding: 11px 14px 6px 7px;
-		color: #aaa;
-		font-size: 20px;
-		text-shadow: 0px -1px 0px black(.3);
-		cursor: pointer;
-
-		&:hover { color: #fff; }
-	}
-
-	/* Rows ------------------------------------------------*/
-	.rows {
-		float: left;
-		margin: 3px 8px 8px 8px;
-		width: calc(100% - 16px);
-		height: 300px;
-		background-color: black(.5);
-		overflow: hidden;
-		overflow-y: scroll;
-		border-radius: 3px;
-		box-shadow: inset 0 0 3px black(.8);
-	}
-
-	/* Row ------------------------------------------------*/
-	.rows .row {
-		float: left;
-		display: inline-block;
-		padding: 8px 0;
-		width: 100%;
-		background-color: white(.02);
-
-		&:nth-child(2n) { background-color: white(0); }
-
-		a.name {
-			float: left;
-			padding: 5px 10px;
-			width: calc(70% - 20px);
-			color: #fff;
-			font-size: 14px;
-			white-space: nowrap;
-			overflow: hidden;
-		}
-
-		a.status {
-			float: left;
-			padding: 5px 10px;
-			width: calc(30% - 20px);
-			color: white(.5);
-			font-size: 14px;
-			text-align: right;
-
-			animation-name: pulse;
-			animation-duration: 2s;
-			animation-timing-function: ease-in-out;
-			animation-iteration-count: infinite;
-
-			&.error,
-			&.success { animation: none; }
-
-			&.error { color: rgb(213, 24, 24); }
-
-			&.success { color: rgb(42, 213, 0); }
-		}
-
-		p.notice {
-			display: none;
-			float: left;
-			padding: 2px 10px 5px;
-			width: calc(100% - 20px);
-			color: white(.5);
-			font-size: 12px;
-			overflow: hidden;
-			line-height: 16px;
-		}
-	}
-
-}

src/styles/main.scss

@@ -31,12 +31,6 @@ body {
 	}
 }
 
-.center {
-	position: absolute;
-	left: 50%;
-	top: 50%;
-}
-
 input {
 	-webkit-user-select: text !important;
 	-moz-user-select: text !important;
@@ -58,5 +52,4 @@ input {
 @import 'loading';
 @import 'message';
 @import 'multiselect';
-@import 'upload';
 @import 'mediaquery';