Basic Multiselect

assets/css/modules/multiselect.css

@@ -0,0 +1,12 @@
+/**
+ * @name        multiselect.css
+ * @author      Tobias Reich
+ * @copyright   2014 by Tobias Reich
+ */
+
+#multiselect {
+	position: absolute;
+	background-color: RGBA(0, 94, 204, .4);
+	border: 1px solid RGBA(0, 94, 204, 1);
+	border-radius: 3px;
+}

assets/js/modules/init.js

@@ -11,13 +11,17 @@ $(document).ready(function(){
 
 	/* Notifications */
 	if (window.webkitNotifications) window.webkitNotifications.requestPermission();
-	
+
 	/* Disable ContextMenu */
 	$(document).bind("contextmenu", function(e) { e.preventDefault() });
 
 	/* Tooltips */
 	if (!mobileBrowser()) $(".tools").tipsy({gravity: 'n', fade: false, delayIn: 0, opacity: 1});
 
+	/* Multiselect */
+	$("#content").on("mousedown", multiselect.show);
+	$(document).on("mouseup", multiselect.close);
+
 	/* Header */
 	$("#hostedwith").on(event_name, function() { window.open(lychee.website,"_newtab") });
 	$("#button_signin").on(event_name, lychee.loginDialog);
@@ -41,9 +45,9 @@ $(document).ready(function(){
 
 	/* Search */
 	$("#search").on("keyup click", function() { search.find($(this).val()) });
-	
+
 	/* Clear Search */
-	$("#clearSearch").on(event_name, function () { 
+	$("#clearSearch").on(event_name, function () {
 	    $("#search").focus();
 	    search.reset();
 	});
@@ -106,7 +110,7 @@ $(document).ready(function(){
 			if (visible.photo()) photo.setTitle(photo.getID());
 			else album.setTitle(album.getID());
 		})
-    
+
 		/* Navigation */
 		.on("click", ".album", function() { lychee.goto($(this).attr("data-id")) })
 		.on("click", ".photo", function() { lychee.goto(album.getID() + "/" + $(this).attr("data-id")) })

assets/js/modules/multiselect.js

@@ -0,0 +1,110 @@
+/**
+ * @name		Multiselect Module
+ * @description	Select multiple albums or photos.
+ * @author		Tobias Reich
+ * @copyright	2014 by Tobias Reich
+ */
+
+multiselect = {
+
+	position: {
+	
+		top: null,
+		right: null,
+		bottom: null,
+		left: null
+		
+	},
+
+	show: function(e) {
+	
+		if ($('.album:hover, .photo:hover').length!=0) return false;
+		if (visible.multiselect()) $('#multiselect').remove();
+	
+		multiselect.position.top = e.pageY;
+		multiselect.position.right = -1 * (e.pageX - $(document).width());
+		multiselect.position.bottom = -1 * (multiselect.position.top - $(window).height());
+		multiselect.position.left = e.pageX;
+				
+		$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left));
+		$(document).on('mousemove', multiselect.resize);
+	
+	},
+	
+	resize: function(e) {
+		
+		var mouse_x = e.pageX,
+			mouse_y = e.pageY,
+			newHeight,
+			newWidth;
+			
+		if (multiselect.position.top===null||
+			multiselect.position.right===null||
+			multiselect.position.bottom===null||
+			multiselect.position.left===null) return false;
+			
+		if (mouse_y>=multiselect.position.top) {
+		
+			// Do not leave the screen
+			newHeight = e.pageY - multiselect.position.top;
+			if ((multiselect.position.top+newHeight)>=$(document).height())
+				newHeight -= (multiselect.position.top + newHeight) - $(document).height() + 2;
+		
+			$('#multiselect').css({
+				top: multiselect.position.top,
+				bottom: 'inherit',
+				height: newHeight
+			});
+					
+		} else {
+		
+			$('#multiselect').css({
+				top: 'inherit',
+				bottom: multiselect.position.bottom,
+				height: multiselect.position.top - e.pageY
+			});
+		
+		}
+		
+		if (mouse_x>=multiselect.position.left) {
+		
+			// Do not leave the screen
+			newWidth = e.pageX - multiselect.position.left;
+			if ((multiselect.position.left+newWidth)>=$(document).width())
+				newWidth -= (multiselect.position.left + newWidth) - $(document).width() + 2;
+		
+			$('#multiselect').css({
+				right: 'inherit',
+				left: multiselect.position.left,
+				width: newWidth
+			});
+		
+		} else {
+		
+			$('#multiselect').css({
+				right: multiselect.position.right,
+				left: 'inherit',
+				width: multiselect.position.left - e.pageX
+			});
+		
+		}
+			
+	},
+		
+	close: function() {
+	
+		$(document).off('mousemove');
+		
+		multiselect.position.top = null;
+		multiselect.position.right = null;
+		multiselect.position.bottom = null;
+		multiselect.position.left = null;
+		
+		lychee.animate('#multiselect', "fadeOut");
+		setTimeout(function() {
+			$('#multiselect').remove();
+		}, 300);
+	
+	}
+
+}

index.html

@@ -12,7 +12,7 @@
 		<!-- CSS -->
 		<link type="text/css" rel="stylesheet" href="assets/css/min/reset.css">
 
-		<!-- Development
+		<!-- Development -->
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/upload.css">
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/tooltip.css">
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/misc.css">
@@ -25,10 +25,11 @@
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/font.css">
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/contextmenu.css">
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/content.css">
-		<link type="text/css" rel="stylesheet" href="assets/css/modules/animations.css"> -->
+		<link type="text/css" rel="stylesheet" href="assets/css/modules/animations.css">
+		<link type="text/css" rel="stylesheet" href="assets/css/modules/multiselect.css">
 
-		<!-- Production -->
+		<!-- Production
-		<link type="text/css" rel="stylesheet" href="assets/css/min/main.css">
+		<link type="text/css" rel="stylesheet" href="assets/css/min/main.css"> -->
 
 		<link rel="shortcut icon" href="assets/img/favicon.ico">
 		<link rel="apple-touch-icon" href="assets/img/apple-touch-icon-iphone.png" sizes="120x120">
@@ -99,7 +100,7 @@
 	<!-- JS -->
 	<script defer type="text/javascript" src="assets/js/min/frameworks.js"></script>
 
-	<!-- Development
+	<!-- Development -->
 	<script defer type="text/javascript" src="assets/js/modules/init.js"></script>
 	<script defer type="text/javascript" src="assets/js/modules/lychee.js"></script>
 	<script defer type="text/javascript" src="assets/js/modules/build.js"></script>
@@ -114,10 +115,11 @@
 	<script defer type="text/javascript" src="assets/js/modules/visible.js"></script>
 	<script defer type="text/javascript" src="assets/js/modules/loadingBar.js"></script>
 	<script defer type="text/javascript" src="assets/js/modules/contextMenu.js"></script>
-	<script defer type="text/javascript" src="assets/js/modules/search.js"></script> -->
+	<script defer type="text/javascript" src="assets/js/modules/search.js"></script>
+	<script defer type="text/javascript" src="assets/js/modules/multiselect.js"></script>
 
-	<!-- Production -->
+	<!-- Production
-	<script defer type="text/javascript" src="assets/js/min/main.js"></script>
+	<script defer type="text/javascript" src="assets/js/min/main.js"></script> -->
 
 	</body>
 </html>