Allow selection of multiple lines in the library browser

frontend/src/view.css

@@ -18,6 +18,10 @@ table.source-code {
 	white-space: pre;
 }
 
+table.source-code tr td {
+	padding: 0;
+}
+
 table.source-code tr:first-child td {
 	padding-top: 1em;
 }
@@ -48,5 +52,16 @@ table.source-code tr td:last-child {
 
 .hll {
 	background-color: #eef;
-	outline: 1px solid #dbdee3;
+}
+
+table.source-code tr.hll-first {
+	box-shadow: 0 -1px 0 #dbdee3;
+}
+
+table.source-code tr.hll-last {
+	box-shadow: 0 1px 0 #dbdee3;
+}
+
+table.source-code tr.hll-first.hll-last {
+	box-shadow: 0 -1px 0 #dbdee3, 0 1px 0 #dbdee3;
 }

frontend/src/view.js

@@ -22,27 +22,73 @@ function shareButtonClick() {
 	});
 }
 
-function selectLine(n) {
-	browser.state.line = n;
+function selectLines(n) {
+	var firstline = null;
+	browser.state.lines = n;
 
-	if (!isNaN(n)) {
-		var hll = document.getElementsByClassName('hll');
-		for (var i = 0; i < hll.length; i++)
-			hll[i].classList.remove('hll');
+	var hll = document.getElementsByClassName('hll');
+	while (hll.length > 0)
+		hll[0].classList.remove('hll', 'hll-first', 'hll-last');
 
-		var linespan = document.getElementById('line-' + browser.state.line);
+	if (!isNaN(n)) {
+		firstline = n;
+		var linespan = document.getElementById('line-' + n);
 		if (linespan != null)
-			linespan.classList.add('hll');
+			linespan.classList.add('hll', 'hll-first', 'hll-last');
+	} else if (typeof n == 'string') {
+		var match = n.match(/^(\d+)-(\d+)$/);
+		if (match != null) {
+			firstline = match[1];
+			var first = true;
+			for (var i = firstline; i < match[2]; i++) {
+				var linespan = document.getElementById('line-' + i);
+				if (linespan != null) {
+					linespan.classList.add('hll');
+					if (first) {
+						linespan.classList.add('hll-first');
+						first = false;
+					}
+				}
+			}
+			var linespan = document.getElementById('line-' + match[2]);
+			if (linespan != null)
+				linespan.classList.add('hll', 'hll-last');
+		}
 	}
 
 	browser.triggerChange(false);
+
+	return firstline;
+}
+
+function selectLinesByEvent(e, n) {
+	if (e.shiftKey) {
+		if (!isNaN(browser.state.lines)) {
+			if (browser.state.lines < n)
+				selectLines(browser.state.lines + '-' + n);
+			else
+				selectLines(n + '-' + browser.state.lines);
+			return;
+		} else if (typeof n == 'string') {
+			var match = n.match(/^(\d+)-(\d+)$/);
+			if (match != null) {
+				if (n < match[1])
+					selectLines(n + '-' + match[2]);
+				else
+					selectLines(match[1] + '-' + n);
+				return;
+			}
+		}
+	}
+
+	selectLines(n);
 }
 
 var tableLineNo = null;
 function tableHighlightCallback(span, cls, str) {
 	var html = '';
 	if (tableLineNo == null) {
-		html = '<tr id="line-1"><td onclick="selectLine(1);">1</td><td>';
+		html = '<tr id="line-1"><td onclick="selectLinesByEvent(event,1);">1</td><td>';
 		tableLineNo = 1;
 	}
 	var lines = str.split('\n');
@@ -51,7 +97,7 @@ function tableHighlightCallback(span, cls, str) {
 		html += highlightCallback(
 				'<span class="' + cls + '">' + escapeHTML(lines[i]) + '</span>',
 				cls, lines[i]) +
-			'</td></tr><tr id="line-' + tableLineNo + '"><td onclick="selectLine(' + tableLineNo + ');">'
+			'</td></tr><tr id="line-' + tableLineNo + '"><td onclick="selectLinesByEvent(event,' + tableLineNo + ');">'
 				+ tableLineNo + '</td><td>';
 	}
 	html += highlightCallback(
@@ -69,7 +115,7 @@ window.onload = function() {
 	browser = document.getElementsByClassName('browser')[0].browser({
 		newPath: function (path) {
 			this.state.mod = path.join('/');
-			this.state.line = null;
+			this.state.lines = null;
 			this.newState();
 		},
 		newHash: function (hash) {
@@ -77,16 +123,16 @@ window.onload = function() {
 			var update = this.state.mod != hashelems[0];
 			this.state.mod = hashelems[0];
 			this.state.icl = false;
-			this.state.line = null;
+			this.state.lines = null;
 			for (var i = 1; i < hashelems.length; i++) {
 				if (hashelems[i] == 'icl')
 					icl.checked = this.state.icl = true;
 				else if (hashelems[i].substring(0,5) == 'line=')
-					this.state.line = hashelems[i].substring(5);
+					this.state.lines = hashelems[i].substring(5);
 			}
 
-			if (this.state.line != null)
-				selectLine(this.state.line);
+			if (this.state.lines != null)
+				selectLines(this.state.lines);
 
 			browser.openPath(this.state.mod.split('/'));
 			browser.triggerChange(update);
@@ -95,8 +141,8 @@ window.onload = function() {
 			var hash = this.state.mod;
 			if (this.state.icl)
 				hash += ';icl';
-			if (this.state.line != null)
-				hash += ';line=' + this.state.line;
+			if (this.state.lines != null)
+				hash += ';line=' + this.state.lines;
 
 			browser.setHash(hash);
 		},
@@ -104,8 +150,8 @@ window.onload = function() {
 			var url = 'src.php?mod=' + this.state.mod;
 			if (this.state.icl)
 				url += '&icl';
-			if (this.state.line != null)
-				url += '&line=' + this.state.line;
+			if (this.state.lines != null)
+				url += '&line=' + this.state.lines;
 			return url;
 		},
 		viewer: viewer,
@@ -115,9 +161,10 @@ window.onload = function() {
 					highlightClean(text, tableHighlightCallback) +
 				'</table>';
 			viewer.scrollLeft = 0;
-			if (state.line != null) {
-				selectLine(state.line);
-				browser.scrollTo(document.getElementById('line-' + state.line));
+			if (state.lines != null) {
+				var firstline = selectLines(state.lines);
+				if (firstline != null)
+					browser.scrollTo(document.getElementById('line-' + firstline));
 			} else {
 				browser.scrollTo();
 			}
@@ -138,7 +185,7 @@ window.onload = function() {
 	browser.state.icl = icl.checked;
 	icl.onchange = function() {
 		browser.state.icl = this.checked;
-		browser.state.line = null;
+		browser.state.lines = null;
 		browser.triggerChange();
 	};