From 40705815affc99f86d4415b81cd0d8373333f081 Mon Sep 17 00:00:00 2001
From: Marco Dickert <marco@misterunknown.de>
Date: Thu, 16 Feb 2017 16:20:05 +0100
Subject: [PATCH] multiselect: add ability to select rows with ctrl+click

---
 ifm.php       | 5 +++--
 src/ifm.js    | 8 ++++++--
 src/style.css | 1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ifm.php b/ifm.php
index 2a48a0f..5aad42c 100644
--- a/ifm.php
+++ b/ifm.php
@@ -289,6 +289,7 @@ div#content { width: 100%; height: 350px; }
 input[name=newperms] { width: 7em; }
 
 #filetable tr th.buttons { min-width: 95px; }
+#filetable tr.clickable-row.active td { background-color: lightblue; }
 
 #navbar { max-width: 100%; }
 
@@ -483,7 +484,7 @@ function IFM() {
 	this.rebuildFileTable = function( data ) {
 		var newRows = $(document.createElement('tbody'));
 		for(i=0;i<data.length;i++) {
-			var newrow = "<tr>";
+			var newrow = '<tr class="clickable-row">';
 			var multisel = '';
 			if(self.config.multiselect == 1) {
 				multisel = '<input type="checkbox" ';
@@ -562,12 +563,12 @@ function IFM() {
 		if(self.config.multiselect == 1) {
 			$("input[name=multisel]").on("change", function(){ ifm.handleMultiSelect(); });
 		}
-		// todo: bootstrap-fancybox for images
 		$('a[data-toggle="tooltip"]').tooltip({
 			animated: 'fade',
 			placement: 'right',
 			html: true
 		});
+		$('.clickable-row').click(function(event) { if( event.ctrlKey ) $(this).toggleClass('active'); });
 	};
 
 	this.changeDirectory = function( newdir, options={ absolute: false, pushState: true } ) {
diff --git a/src/ifm.js b/src/ifm.js
index 6e72d8d..5a00222 100644
--- a/src/ifm.js
+++ b/src/ifm.js
@@ -56,7 +56,7 @@ function IFM() {
 	this.rebuildFileTable = function( data ) {
 		var newRows = $(document.createElement('tbody'));
 		for(i=0;i<data.length;i++) {
-			var newrow = "<tr>";
+			var newrow = '<tr class="clickable-row">';
 			var multisel = '';
 			if(self.config.multiselect == 1) {
 				multisel = '<input type="checkbox" ';
@@ -135,12 +135,16 @@ function IFM() {
 		if(self.config.multiselect == 1) {
 			$("input[name=multisel]").on("change", function(){ ifm.handleMultiSelect(); });
 		}
-		// todo: bootstrap-fancybox for images
 		$('a[data-toggle="tooltip"]').tooltip({
 			animated: 'fade',
 			placement: 'right',
 			html: true
 		});
+		$('.clickable-row').click(function(event) {
+			if( event.ctrlKey ) {
+				$(this).toggleClass('active');
+			}
+		});
 	};
 
 	this.changeDirectory = function( newdir, options={ absolute: false, pushState: true } ) {
diff --git a/src/style.css b/src/style.css
index 5f70ffd..3d09bef 100644
--- a/src/style.css
+++ b/src/style.css
@@ -25,6 +25,7 @@ div#content { width: 100%; height: 350px; }
 input[name=newperms] { width: 7em; }
 
 #filetable tr th.buttons { min-width: 95px; }
+#filetable tr.clickable-row.active td { background-color: lightblue; }
 
 #navbar { max-width: 100%; }