{"schema":"libjg2-1", "vpath":"/git/", "avatar":"/git/avatar/", "alang":"", "gen_ut":1745906798, "reponame":"cgit", "desc":"CGI gitweb", "owner": { "name": "Andy Green", "email": "andy@warmcat.com", "md5": "c50933ca2aa61e0fe2c43d46bb6b59cb" },"url":"https://warmcat.com/repo/cgit", "f":3, "items": [ {"schema":"libjg2-1", "cid":"d4951ba1af85104d0104f6bd56b8ae11", "commit": {"type":"commit", "time": 1530589970, "time_ofs": 480, "oid_tree": { "oid": "e27f28663c8839527212e9d9efe9e583fc0e0865", "alias": []}, "oid":{ "oid": "7a28114fbc36d2a4f2397bca9f30103d89c1655c", "alias": []}, "msg": "cgit.js: line range highlight: introduce javascript", "sig_commit": { "git_time": { "time": 1530589970, "offset": 480 }, "name": "Andy Green", "email": "andy@warmcat.com", "md5": "c50933ca2aa61e0fe2c43d46bb6b59cb" }, "sig_author": { "git_time": { "time": 1529571396, "offset": 480 }, "name": "Andy Green", "email": "andy@warmcat.com", "md5": "c50933ca2aa61e0fe2c43d46bb6b59cb" }}, "body": "cgit.js: line range highlight: introduce javascript\n\nThis adds a small css class, and a clientside js function plus\nevent registrations in cgit.js, to interpret the # part of the\nURL on the client, and apply a highlight to filtered source.\n\nUnlike blame highlight boxes which use generated divs, this\napplies a computed absolutely-positioned, transparent div highlight\nover the affected line(s) on the client side.\n\nThe # part of the URL is defined to not be passed to the server,\nso the highlight can't be rendered on the server side.\nHowever this has the advantage that the line range highlight\ncan operate on /blame/ urls trivially, since it doesn't\nconflict with blame's generated div scheme.\n\npointer-events: none is used on the highlight overlay div to\nallow the user to cut-and-paste in the highlit region and\nclick on links underneath normally.\n\nThe JS supports highlighting single lines as before like #n123\nand also ranges of lines like #n123-135.\n\nBecause the browser can no longer automatically scroll to the\nelement in the second case, the JS also takes care of extracting\nthe range start element and scrolling to it dynamically.\n\nTested on Linux Firefox 60 + Linux Chrome 67\n\nSigned-off-by: Andy Green \u003candy@warmcat.com\u003e" , "diff": "diff --git a/cgit.css b/cgit.css\nindex cf369ed..8a3dfe3 100644\n--- a/cgit.css\n+++ b/cgit.css\n@@ -331,6 +331,7 @@ div#cgit table.ssdiff td.lineno a {\n \tcolor: gray;\n \ttext-align: right;\n \ttext-decoration: none;\n+\ttransition: background-color 0.5s;\n }\n \n div#cgit table.blob td.linenumbers a:hover,\n@@ -371,6 +372,18 @@ div#cgit table.blame td.lines \u003e div \u003e pre {\n \ttop: 0;\n }\n \n+div#cgit div.selected-lines {\n+\tposition: absolute;\n+\tpointer-events: none;\n+\tz-index: 1;\n+\tbackground-color: rgba(255, 255, 0, 0);\n+\ttransition: background-color 0.5s;\n+}\n+\n+div#cgit a.selected-line-link-highlight {\n+\tbackground-color: yellow;\n+}\n+\n div#cgit table.bin-blob {\n \tmargin-top: 0.5em;\n \tborder: solid 1px black;\ndiff --git a/cgit.js b/cgit.js\nindex e69de29..7c034e3 100644\n--- a/cgit.js\n+++ b/cgit.js\n@@ -0,0 +1,92 @@\n+/* cgit.css: javacript functions for cgit\n+ *\n+ * Copyright (C) 2006-2018 cgit Development Team \u003ccgit@lists.zx2c4.com\u003e\n+ *\n+ * Licensed under GNU General Public License v2\n+ * (see COPYING for full license text)\n+ */\n+\n+(function () {\n+\n+function collect_offsetTop(e1)\n+{\n+\tvar t \u003d 0;\n+\n+\twhile (e1) {\n+\t\tif (e1.offsetTop)\n+\t\t\tt +\u003d e1.offsetTop;\n+\t\te1 \u003d e1.offsetParent;\n+\t}\n+\n+\treturn t;\n+}\n+\n+function find_parent_of_type(e, type)\n+{\n+\twhile (e.tagName.toLowerCase() !\u003d type)\n+\t\te \u003d e.parentNode;\n+\n+\treturn e;\n+}\n+\n+function line_range_highlight()\n+{\n+\tvar h \u003d window.location.hash, l1 \u003d 0, l2 \u003d 0, e, t;\n+\n+\tl1 \u003d parseInt(h.substring(2));\n+\tif (!l1)\n+\t\treturn;\n+\n+\tt \u003d h.indexOf(\u0022-\u0022);\n+\tl2 \u003d l1;\n+\tif (t \u003e\u003d 1)\n+\t\tl2 \u003d parseInt(h.substring(t + 1));\n+\n+\tif (l2 \u003c l1)\n+\t\tl2 \u003d l1;\n+\n+\tvar lh, etable, etr, de, n;\n+\n+\te \u003d document.getElementById('n' + l1);\n+\tif (!e)\n+\t\treturn;\n+\n+\tde \u003d document.createElement(\u0022DIV\u0022);\n+\n+\tde.className \u003d \u0022selected-lines\u0022;\n+\tde.style.bottom \u003d e.style.bottom;\n+\tde.style.top \u003d collect_offsetTop(e) + 'px';\n+\tde.l1 \u003d l1;\n+\tde.l2 \u003d l2;\n+\n+\t/* we will tack the highlight div at the parent tr */\n+\tetr \u003d find_parent_of_type(e, \u0022tr\u0022);\n+\n+\tde.style.width \u003d etr.offsetWidth + 'px';\n+\n+\t/* the table is offset from the left, the highlight\n+\t * needs to follow it */\n+\tetable \u003d find_parent_of_type(etr, \u0022table\u0022);\n+\n+\tde.style.left \u003d etable.offsetLeft + 'px';\n+\tde.style.height \u003d ((l2 - l1 + 1) * e.offsetHeight) + 'px';\n+\n+\tetr.insertBefore(de, etr.firstChild);\n+\n+\tsetTimeout(function() {\n+\t\tde.style.backgroundColor \u003d \u0022rgba(255, 255, 0, 0.2)\u0022;\n+\t}, 1);\n+\n+\tn \u003d l1;\n+\twhile (n \u003c\u003d l2)\n+\t\tdocument.getElementById('n' + n++).style.backgroundColor \u003d \u0022yellow\u0022;\n+\n+\te.scrollIntoView(true);\n+}\n+\n+/* we have to use load, because header images can push the layout vertically */\n+window.addEventListener(\u0022load\u0022, function() {\n+\tline_range_highlight();\n+}, false);\n+\n+})();\n","s":{"c":1745906798,"u": 1468}} ],"g": 3252,"chitpc": 0,"ehitpc": 0,"indexed":0 , "ab": 0, "si": 0, "db":0, "di":0, "sat":0, "lfc": "0000"}