[PATCH v5 6/6] line-range-highlight: copy URL to clipboard UI

[andy at warmcat.com (Andy Green)]

Clicking on the line numbers to control the highlight
now causes a clipboard icon to appear to the left of
the line for 5s.

Clicking this will copy the highlight URL to the
clipboard, and cause the icon to grow, blur and
fade to acknowledge the click.

After 5s the clipboard icon will fade out... you can
still collect the URL from the browser URL bar.

Clicking on other line  number links will remove any
clipboard icon and create a new one with a new 5s
lifetime.

This is an entirely clientside implementation in
cgit.css and cgit.js only.  The clipboard symbol is
from unicode.

Tested on Linux Chrome 67 + Firefox 60.

Signed-off-by: Andy Green <andy at warmcat.com>
---
 cgit.css |   20 ++++++++++++++
 cgit.js  |   87 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 106 insertions(+), 1 deletion(-)

diff --git a/cgit.css b/cgit.css
index 13c0955..7c2bafe 100644
--- a/cgit.css
+++ b/cgit.css
@@ -377,6 +377,26 @@ div#cgit div.selected-lines {
 	transition: background-color 1.5s;
 }
 
+div#cgit div.selected-lines-popup {
+	position: absolute;
+	text-align: center;
+	font-size: 28px;
+	font-color: black;
+	left: 8px;
+	width: 32px;
+	height: 32px;
+	opacity: 0;
+	z-index: 2;
+	cursor: pointer;
+	filter: grayscale(100%);
+	background-color: rgba(255, 255, 255, 0.0);
+	transition: filter 1s, opacity 1.5s, font-size 1s;
+}
+
+div#cgit div.selected-lines-popup:hover {
+	filter: grayscale(0%);
+}
+
 div#cgit table.bin-blob {
 	margin-top: 0.5em;
 	border: solid 1px black;
diff --git a/cgit.js b/cgit.js
index ebc4e5b..cd7ea86 100644
--- a/cgit.js
+++ b/cgit.js
@@ -1,3 +1,7 @@
+var cgit_clipboard_popup_duration = 5000;
+
+var cgit_clipboard_popup, cgit_clipboard_popup_time;
+
 function cgit_collect_offsetTop(e1)
 {
 	var t = 0;
@@ -98,13 +102,94 @@ function cgit_line_range_highlight()
 	t.scrollIntoView(true);
 }
 
+function cgit_copy_clipboard(value)
+{
+	var inp = document.createElement("textarea");
+	var e = document.getElementById("linenumbers");
+
+	inp.type = "text";
+	inp.value = value;
+	/* hidden style stops it working for clipboard */
+	inp.setAttribute('readonly', '');
+	inp.style.position = "absolute";
+	inp.style.left = "-1000px";
+
+	e.appendChild(inp);
+
+	inp.select();
+
+	document.execCommand("copy");
+
+	inp.remove();
+}
+
+function cgit_line_popup_click(e) {
+	e.stopPropagation();
+	e.preventDefault();
+	cgit_copy_clipboard(window.location);
+	/* fade out, blur out, grow */
+	cgit_clipboard_popup.style.opacity = "0";
+	cgit_clipboard_popup.style.fontSize = "40px";
+	cgit_clipboard_popup.style.filter = "blur(2px)";
+}
+
+function cgit_line_popup_create(e)
+{
+	var e1 = e, etable, d = new Date;
+
+	if (cgit_clipboard_popup)
+		cgit_clipboard_popup.remove();
+
+	cgit_clipboard_popup = document.createElement("DIV");
+	cgit_clipboard_popup.className = "selected-lines-popup";
+
+	cgit_clipboard_popup.style.top = cgit_collect_offsetTop(e1) + "px";
+	cgit_clipboard_popup.innerHTML = "&#x1f4cb;";
+	/* event listener cannot override default browser #URL behaviour */
+	cgit_clipboard_popup.onclick = cgit_line_popup_click;
+
+	etable = cgit_find_parent_of_type(e, "table");
+	etable.insertBefore(cgit_clipboard_popup, etable.firstChild);
+	cgit_clipboard_popup_time = d.getTime();
+
+	setTimeout(function() {
+		cgit_clipboard_popup.style.opacity = "1";
+	}, 1);
+
+	setTimeout(function() {
+		var d = new Date;
+		if (!cgit_clipboard_popup)
+			return;
+		if (d.getTime() - cgit_clipboard_popup_time < cgit_clipboard_popup_duration)
+			return;
+		cgit_clipboard_popup.style.opacity = "0";
+		setTimeout(function() {
+			var d = new Date;
+			if (!cgit_clipboard_popup)
+				return;
+			if (d.getTime() - cgit_clipboard_popup_time < cgit_clipboard_popup_duration + 1000)
+				return;
+
+			cgit_clipboard_popup.remove();
+			cgit_clipboard_popup = null;
+		}, 1000);
+	}, cgit_clipboard_popup_duration);
+
+}
+
 function cgit_line_range_click(e) {
-	var t, m, n = window.location.href.length - window.location.hash.length;
+	var t, elem, m, n = window.location.href.length - window.location.hash.length;
 
 	/* disable passthru to stop needless scrolling by default browser #URL handler */
 	e.stopPropagation();
 	e.preventDefault();
 
+	elem = document.getElementById(e.target.id);
+	if (!elem)
+		return;
+
+	cgit_line_popup_create(elem);
+
 	if (!window.location.hash ||
 	    window.location.hash.indexOf("-") >= 0)
 		t = window.location.href.substring(0, n) +