From mboxrd@z Thu Jan 1 00:00:00 1970 From: andy at warmcat.com (Andy Green) Date: Mon, 25 Jun 2018 13:50:11 +0800 Subject: [PATCH v4 6/6] line-range-highlight: copy URL to clipboard UI In-Reply-To: <152990555757.7905.14197867245146259317.stgit@mail.warmcat.com> References: <152990555757.7905.14197867245146259317.stgit@mail.warmcat.com> Message-ID: <152990581190.7905.5920428278223646064.stgit@mail.warmcat.com> 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 --- 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);