[PATCH v4 6/6] line-range-highlight: copy URL to clipboard UI
Andy Green
andy at warmcat.com
Mon Jun 25 07:50:11 CEST 2018
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 | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--------
2 files changed, 142 insertions(+), 19 deletions(-)
diff --git a/cgit.css b/cgit.css
index 443e04c..51f8691 100644
--- a/cgit.css
+++ b/cgit.css
@@ -375,6 +375,26 @@ div#cgit div.selected-lines {
background-color: rgba(255, 255, 0, 0.2);
}
+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 b766111..96921b3 100644
--- a/cgit.js
+++ b/cgit.js
@@ -1,4 +1,28 @@
-var cgit_line_range_override;
+var cgit_clipboard_popup_duration = 5000;
+
+var cgit_line_range_override, cgit_clipboard_url,
+ cgit_clipboard_popup, cgit_clipboard_popup_time;
+
+function cgit_collect_offsetTop(e1)
+{
+ var t = 0;
+
+ while (e1) {
+ if (e1.offsetTop)
+ t += e1.offsetTop;
+ e1 = e1.offsetParent;
+ }
+
+ return t;
+}
+
+function cgit_find_parent_of_type(e, type)
+{
+ while (e.tagName.toLowerCase() != type)
+ e = e.parentNode;
+
+ return e;
+}
function cgit_line_range_highlight()
{
@@ -41,38 +65,27 @@ function cgit_line_range_highlight()
var lh, e1, etable, etr, de, n, hl, v;
- t = 0;
e1 = e = document.getElementById('n' + l1);
if (!e)
return;
- while (e1) {
- if (e1.offsetTop)
- t += e1.offsetTop;
- e1 = e1.offsetParent;
- }
-
de = document.createElement("DIV");
de.className = "selected-lines";
de.style.bottom = e.style.bottom;
- de.style.top = t + 'px';
+ de.style.top = cgit_collect_offsetTop(e1) + 'px';
de.id = "cgit_line_range";
de.l1 = l1;
de.l2 = l2;
/* we will tack the highlight div at the parent tr */
- etr = e;
- while (etr.tagName.toLowerCase() != "tr")
- etr = etr.parentNode;
+ etr = cgit_find_parent_of_type(e, "tr");
de.style.width = etr.offsetWidth + 'px';
/* the table is offset from the left, the highlight
* needs to follow it */
- etable = etr;
- while (etable.tagName.toLowerCase() != "table")
- etable = etable.parentNode;
+ etable = cgit_find_parent_of_type(etr, "table");
de.style.left = etable.offsetLeft + 'px';
de.style.height = ((l2 - l1 + 1) * e.offsetHeight) + 'px';
@@ -97,11 +110,97 @@ function cgit_line_range_highlight()
e.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(cgit_clipboard_url);
+ /* 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();
+
+ console.log(e.offsetHeight);
+
+ 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 = "📋";
+ /* 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 = e.target.id,
+ var t = e.target.id, elem,
n = window.location.href.length - window.location.hash.length;
+ if (!t)
+ return;
+
+ elem = document.getElementById(t);
+
+ if (!elem)
+ return;
+
cgit_line_range_override = null;
+ cgit_line_popup_create(elem);
/*
* We are called while window location update from the
@@ -111,18 +210,22 @@ function cgit_line_range_click(e) {
*/
if (!window.location.hash ||
- window.location.hash.indexOf("-") >= 0)
+ window.location.hash.indexOf("-") >= 0) {
+ cgit_clipboard_url = window.location.href.substring(0, n) +
+ '#n' + t.substring(1);
+
return;
+ }
if (parseInt(window.location.hash.substring(2)) <
parseInt(t.substring(1))) { /* forwards */
- cgit_line_range_override =
+ cgit_clipboard_url = cgit_line_range_override =
window.location + '-' + t.substring(1);
return;
}
- cgit_line_range_override =
+ cgit_clipboard_url = cgit_line_range_override =
window.location.href.substring(0, n) +
'#n' + t.substring(1) + '-' +
window.location.href.substring(n + 2);
More information about the CGit
mailing list