Merge branch 'multiselect' of https://github.com/hrniels/Lychee into hrniels-multiselect

src/scripts/contextMenu.js

@@ -142,7 +142,7 @@ contextMenu.album = function(albumID, e) {
 		{ title: build.iconic('trash') + 'Delete', fn: () => album.delete([ albumID ]) }
 	]
 
-	$('.album[data-id="' + albumID + '"]').addClass('active')
+	multiselect.select('.album[data-id="' + albumID + '"]')
 
 	basicContext.show(items, e.originalEvent, contextMenu.close)
 
@@ -272,7 +272,7 @@ contextMenu.photo = function(photoID, e) {
 		{ title: build.iconic('trash') + 'Delete', fn: () => photo.delete([ photoID ]) }
 	]
 
-	$('.photo[data-id="' + photoID + '"]').addClass('active')
+	multiselect.select('.photo[data-id="' + photoID + '"]')
 
 	basicContext.show(items, e.originalEvent, contextMenu.close)
 
@@ -284,7 +284,7 @@ contextMenu.photoMulti = function(photoIDs, e) {
 	let photocount = photoIDs.length - subcount
 
 	if (subcount && photocount) {
-		$('.photo.active, .album.active').removeClass('active')
+		multiselect.deselect('.photo.active, .album.active')
 		multiselect.close()
 		lychee.error('Please select either albums or photos!')
 		return
@@ -435,7 +435,7 @@ contextMenu.close = function() {
 
 	basicContext.close()
 
-	$('.photo.active, .album.active').removeClass('active')
+	multiselect.deselect('.photo.active, .album.active')
 	if (visible.multiselect()) multiselect.close()
 
 }

src/scripts/init.js

@@ -96,12 +96,12 @@ $(document).ready(function() {
 	$(document)
 
 		// Navigation
-		.on('click', '.album', function() { lychee.goto($(this).attr('data-id')) })
-		.on('click', '.photo', function() { lychee.goto(album.getID() + '/' + $(this).attr('data-id')) })
+		.on('click', '.album', function(e) { multiselect.albumClick(e, $(this)) })
+		.on('click', '.photo', function(e) { multiselect.photoClick(e, $(this)) })
 
 		// Context Menu
-		.on('contextmenu', '.photo', function(e) { contextMenu.photo(photo.getID(), e) })
-		.on('contextmenu', '.album', function(e) { contextMenu.album(album.getID(), e) })
+		.on('contextmenu', '.photo', function(e) { multiselect.photoContextMenu(e, $(this)) })
+		.on('contextmenu', '.album', function(e) { multiselect.albumContextMenu(e, $(this)) })
 
 		// Upload
 		.on('change', '#upload_files', function() { basicModal.close(); upload.start.local(this.files) })

src/scripts/multiselect.js

@@ -3,7 +3,11 @@
  * @copyright   2015 by Tobias Reich
  */
 
-multiselect = {}
+multiselect = {
+
+	ids    : []
+
+}
 
 multiselect.position = {
 
@@ -22,6 +26,77 @@ multiselect.bind = function() {
 
 }
 
+multiselect.toggleItem = function(object, id) {
+
+	if (album.isSmartID(id)) return
+
+	let pos = $.inArray(id, multiselect.ids)
+	if (pos!=-1) {
+		multiselect.ids.splice(pos, 1)
+		multiselect.deselect(object)
+	}
+	else {
+		multiselect.ids.push(id)
+		multiselect.select(object)
+	}
+
+}
+
+multiselect.albumClick = function(e, albumObj) {
+
+	let id = albumObj.attr('data-id')
+
+	if (e.ctrlKey) multiselect.toggleItem(albumObj, id)
+	else           lychee.goto(id)
+
+}
+
+multiselect.photoClick = function(e, photoObj) {
+
+	let id = photoObj.attr('data-id')
+
+	if (e.ctrlKey) multiselect.toggleItem(photoObj, id)
+	else           lychee.goto(album.getID() + '/' + id)
+
+}
+
+multiselect.albumContextMenu = function(e, albumObj) {
+
+	let id = albumObj.attr('data-id')
+
+	if ($.inArray(id, multiselect.ids)!=-1) {
+		contextMenu.albumMulti(multiselect.ids, e)
+		multiselect.ids = []
+	}
+	else {
+		multiselect.clearSelection()
+		contextMenu.album(album.getID(), e)
+	}
+
+}
+
+multiselect.photoContextMenu = function(e, photoObj) {
+
+	let id = photoObj.attr('data-id')
+
+	if ($.inArray(id, multiselect.ids)!=-1) {
+		contextMenu.photoMulti(multiselect.ids, e)
+		multiselect.ids = []
+	}
+	else {
+		multiselect.clearSelection()
+		contextMenu.photo(photo.getID(), e)
+	}
+
+}
+
+multiselect.clearSelection = function() {
+
+	multiselect.deselect('.photo.active, .album.active')
+	multiselect.ids = []
+
+}
+
 multiselect.show = function(e) {
 
 	if (lychee.publicMode)                          return false
@@ -30,6 +105,8 @@ multiselect.show = function(e) {
 	if (visible.search())                           return false
 	if (visible.multiselect())                      $('#multiselect').remove()
 
+	multiselect.clearSelection()
+
 	sidebar.setSelectable(false)
 
 	multiselect.position.top    = e.pageY
@@ -202,7 +279,7 @@ multiselect.getSelection = function(e) {
 			if (id!=null && id!==0 && album.isSmartID(id)===false) {
 
 				ids.push(id)
-				$(this).addClass('active')
+				multiselect.select(this)
 
 			}
 
@@ -216,8 +293,26 @@ multiselect.getSelection = function(e) {
 
 }
 
+multiselect.select = function(id) {
+
+	let el = $(id)
+	el.addClass('selected')
+	el.addClass('active')
+
+}
+
+multiselect.deselect = function(id) {
+
+	let el = $(id)
+	el.removeClass('selected')
+	el.removeClass('active')
+
+}
+
 multiselect.close = function() {
 
+	multiselect.clearSelection()
+
 	sidebar.setSelectable(true)
 
 	multiselect.stopResize()

src/styles/_content.scss

@@ -72,6 +72,10 @@
 			transition: none;
 			border-color: darken($colorBlue, 15%);
 		}
+
+		&.selected img {
+			outline: 1px solid $colorBlue;
+		}
 	}
 
 	// Album -------------------------------------------------------------- //