From mboxrd@z Thu Jan 1 00:00:00 1970 From: andy at warmcat.com (Andy Green) Date: Fri, 29 Jun 2018 09:40:44 +0800 Subject: [PATCH v6 6/7] line-range-highlight: burger menu and popup menu In-Reply-To: <153023597876.27756.7476186508120329174.stgit@mail.warmcat.com> References: <153023597876.27756.7476186508120329174.stgit@mail.warmcat.com> Message-ID: <153023644478.27756.16650094961912982381.stgit@mail.warmcat.com> Clicking on the line numbers to control the highlight, or visiting a #URL link, causes a burger menu to appear on the left of either the top of the range or the bottom if that was last clicked. Clicking this brings up a popup menu with Copy Lines (implemented in next patch) Copy Link (copies complete #URL to clipboard) View / Remove Blame (changes to view to have or not have blame) Clicking outside the popup menu clears it, but the burger menu is sticky. This is an entirely clientside implementation in cgit.css and cgit.js only. If JS disabled at server or at client, it cannot provide this functionality and operates with one-line browser URLs as before. Tested on Linux Chrome 67 + Firefox 60. Signed-off-by: Andy Green --- cgit.css | 71 +++++++++++++++++++++ cgit.js | 206 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 264 insertions(+), 13 deletions(-) diff --git a/cgit.css b/cgit.css index 45ba615..093e0ce 100644 --- a/cgit.css +++ b/cgit.css @@ -382,7 +382,76 @@ div#cgit div.selected-lines { pointer-events: none; z-index: 1; background-color: rgba(255, 255, 0, 0); - transition: background-color 1.5s; + transition: background-color 0.5s; +} + +div#cgit div.selected-line-link-highlight { + background-color: yellow; +} + +div#cgit div.selected-lines-popup { + position: absolute; + text-align: center; + font-size: 6px; + font-color: black; + left: 6px; + width: 24px; + height: 12px; + opacity: 0; + z-index: 2; + padding-top: 4px; + padding-bottom: 0px; + cursor: pointer; + filter: grayscale(100%); + border: 1px solid gray; + border-radius: 3px; + background-color: rgba(255, 255, 255, 0.0); + transition: opacity 0.5s; +} + +div#cgit div.selected-lines-popup:before { + content: "\26AB\26AB\26AB"; +} + +div#cgit div.popup-menu { + display: inline-block; + position: relative; + text-align: left; + font-size: 12px; + color: black; + left: 8px; + opacity: 0; + z-index: 3; + margin: 3px; + padding: 3px; + cursor: pointer; + border: 1px solid gray; + border-radius: 3px; + background-color: white; + white-space: nowrap; + box-shadow: 0px 5px 15px gray; + transition: opacity 0.3s; +} + +div#cgit div.popup-menu ul { + list-style-type: none; + left: 0; + margin: 3px; + padding: 3px; +} + +div#cgit div.popup-menu li { + margin: 3px; + padding: 3px; + font-size: 14px; +} + +div#cgit div.popup-menu li:active { + margin: 3px; + padding: 3px; + font-size: 14px; + background-color: blue; + color: white; } div#cgit table.bin-blob { diff --git a/cgit.js b/cgit.js index 015dd76..7fae9aa 100644 --- a/cgit.js +++ b/cgit.js @@ -8,6 +8,8 @@ (function () { +var burger, menu_popup; + function collect_offsetTop(e1) { var t = 0; @@ -29,7 +31,15 @@ function find_parent_of_type(e, type) return e; } -function line_range_highlight() +/* + * This creates an absolute div as a child of the content table. + * It's horizontally and vertically aligned and sized according + * to the #URL information like #n123-456 + * + * If the highlight div already exists, it's removed and remade. + */ + +function line_range_highlight(do_burger) { var h = window.location.hash, l1 = 0, l2 = 0, e, t; @@ -39,7 +49,8 @@ function line_range_highlight() while (l1 <= e.l2) { var e1; e1 = document.getElementById('n' + l1++); - e1.style.backgroundColor = null; + e1.classList.remove( + 'selected-line-link-highlight'); } e.remove(); @@ -63,6 +74,9 @@ function line_range_highlight() if (!e) return; + if (do_burger) + burger_create(e); + de = document.createElement("DIV"); de.className = "selected-lines"; @@ -77,10 +91,8 @@ function line_range_highlight() de.style.width = etr.offsetWidth + 'px'; - /* the table is offset from the left, the highlight - * needs to follow it */ + /* the table is offset from the left, the highlight needs to follow it */ etable = find_parent_of_type(etr, "table"); - de.style.left = etable.offsetLeft + 'px'; de.style.height = ((l2 - l1 + 1) * e.offsetHeight) + 'px'; @@ -92,7 +104,8 @@ function line_range_highlight() n = l1; while (n <= l2) - document.getElementById('n' + n++).style.backgroundColor = "yellow"; + document.getElementById('n' + n++).classList.add( + 'selected-line-link-highlight'); hl = (window.innerHeight / (e.offsetHeight + 1)); v = (l1 + ((l2 - l1) / 2)) - (hl / 2); @@ -108,15 +121,184 @@ function line_range_highlight() t.scrollIntoView(true); } +function 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(); +} + +/* + * An element in the popup menu was clicked, perform the appropriate action + */ +function mi_click(e) { + var u, n; + + e.stopPropagation(); + e.preventDefault(); + + switch (e.target.id) { + case "mi-c-line": + /* implemented in next patch */ + break; + case "mi-c-link": + copy_clipboard(window.location.href); + break; + case "mi-c-blame": + u = window.location.href; + t = u.indexOf("/tree/"); + if (t) + window.location = u.substring(0, t) + "/blame/" + + u.substring(t + 6); + break; + case "mi-c-tree": + u = window.location.href; + t = u.indexOf("/blame/"); + if (t) + window.location = u.substring(0, t) + "/tree/" + + u.substring(t + 7); + break; + } + + if (!menu_popup) + return; + + menu_popup.remove(); + menu_popup = null; +} + +/* We got a click on the (***) burger menu */ + +function burger_click(e) { + var e1 = e, etable, d = new Date, s = "", n, is_blame, + ar = new Array("mi-c-line", "mi-c-link", "mi-c-blame", "mi-c-tree"), + an = new Array("Copy Lines", "Copy Link", + "View Blame", /* 2: shown in /tree/ */ + "Remove Blame" /* 3: shown in /blame/ */); + + e.preventDefault(); + + if (menu_popup) { + menu_popup.remove(); + menu_popup = null; + + return; + } + + /* + * Create the popup menu + */ + + is_blame = !!document.getElementsByClassName("hashes").length; + + menu_popup = document.createElement("DIV"); + menu_popup.className = "popup-menu"; + menu_popup.style.top = collect_offsetTop(e1) + e.offsetHeight + "px"; + + s = "