Bug#761103: debsources: highlight #Lxxx lines by default
On Fri, Nov 07, 2014 at 06:24:58PM +0100, Stefano Zacchiroli wrote:
> You can find attached a version of your patch that includes the
> copyright header (and fixes some whitespace issues that make Git
> cry :-))
Now with an attachment.
--
Stefano Zacchiroli . . . . . . . zack@upsilon.cc . . . . o . . . o . o
Maître de conférences . . . . . http://upsilon.cc/zack . . . o . . . o o
Former Debian Project Leader . . @zack on identi.ca . . o o o . . . o .
« the first rule of tautology club is the first rule of tautology club »
>From eaa36cc8aa2ba936932ec4b2f99ba1b9fef41982 Mon Sep 17 00:00:00 2001
From: Jason Pleau <jason@jpleau.ca>
Date: Sat, 1 Nov 2014 10:44:24 -0400
Subject: [PATCH] web app: automatically highlight #Lxx lines
Add automatic line numbers from #Lxx location.hash
It supports #L50 and #L50-L150 (The latter will highlight from line 50 to line
150).
It also changes the hash if we click on a line, and if we click on a second
line holding the SHIFT key, it will highlight the whole range, and update the
hash as well.
Closes: #761103
Signed-off-by: Stefano Zacchiroli <zack@upsilon.cc>
---
debsources/app/static/javascript/debsources.js | 137 +++++++++++++++++++++
debsources/app/templates/source_file.html | 1 +
debsources/app/templates/source_file_code.inc.html | 7 +-
3 files changed, 140 insertions(+), 5 deletions(-)
create mode 100644 debsources/app/static/javascript/debsources.js
diff --git a/debsources/app/static/javascript/debsources.js b/debsources/app/static/javascript/debsources.js
new file mode 100644
index 0000000..2a382bb
--- /dev/null
+++ b/debsources/app/static/javascript/debsources.js
@@ -0,0 +1,137 @@
+/* Copyright (C) 2014 Jason Pleau <jason@jpleau.ca>
+ *
+ * This file is part of Debsources.
+ *
+ * Debsources is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, either version 3 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/*
+ * Highlight line numbers according to data received in the anchor
+ *
+ * Example: file.cpp#L50-L275 will highlight lines 50 to 275.
+ *
+ * There's also support to select one line or a range of lines (by clicking on
+ * a line or shift-clicking on a range of lines). The URL will be updated with
+ * the selection.
+ *
+ */
+
+(function() {
+ function highlight_lines(start, end) {
+ // First, remove the highlight class from elements that might already have it
+ var elements = document.querySelectorAll("span.highlight");
+ for (i = 0; i < elements.length; ++i) {
+ var element = elements[i];
+ element.className = element.className.replace(/\bhighlight\b/, '');
+ }
+
+ // Then, add the highlight class to elements that contain the lines we want to highlight
+ for (i = start; i <= end; ++i) {
+ var element = document.getElementById("line" + i);
+ element.className = element.className + " highlight ";
+ }
+ }
+
+ var hash_changed = function(event, scroll) {
+
+ event = typeof event !== 'undefined' ? event: null;
+ scroll = typeof scroll !== 'undefined' ? scroll: false;
+
+ // Will match strings like #L15 and #L15-L20
+ var regex = /#L(\d+)(-L(\d+))*$/;
+
+ var match = regex.exec(window.location.hash);
+ if (match != null) {
+ var first_line = second_line = null;
+ first_line = parseInt(match[1]);
+
+ if (typeof match[3] !== 'undefined' && match[3].length > 0) {
+ second_line = parseInt(match[3]);
+ } else {
+ second_line = first_line;
+ }
+
+ // If we get something like #L20-L15, just swap the two line numbers so the loop will work
+ if (second_line < first_line) {
+ var tmp = first_line;
+ first_line = second_line;
+ second_line = tmp;
+ }
+
+ highlight_lines(first_line, second_line);
+
+ if (scroll) {
+ window.scroll(0, document.getElementById("L"+first_line).offsetTop);
+ }
+ }
+ }
+
+
+ function change_hash_without_scroll(element, hash) {
+ // This is necessary because when changing window.location.hash, the window will
+ // scroll to the element's id if it matches the hash
+ var id = element.id;
+ element.id = id+'-tmpNoScroll';
+ window.location.hash = hash;
+ element.id = id;
+ }
+
+ var last_clicked;
+ var line_click_handler = function(event) {
+ if (event.preventDefault) {
+ event.preventDefault();
+ } else {
+ event.returnValue = false;
+ }
+
+ var callerElement = event.target || event.srcElement;
+
+ if (!event.shiftKey || !last_clicked) {
+ last_clicked = callerElement;
+ change_hash_without_scroll(callerElement, "L" + callerElement.getAttribute('data-line'));
+ } else {
+ var first_line = parseInt(last_clicked.getAttribute('data-line'));
+ var second_line = parseInt(callerElement.getAttribute('data-line'));
+
+ if (second_line < first_line) {
+ var tmp = first_line;
+ first_line = second_line;
+ second_line = tmp;
+ }
+
+ change_hash_without_scroll(callerElement, "L" + first_line + "-L" + second_line);
+ }
+ };
+
+ var window_load_sourcecode = function(event) {
+ var line_numbers = document.querySelectorAll("#sourceslinenumbers a");
+ for (i = 0; i < line_numbers.length; ++i) {
+ var line_number_element = line_numbers[i];
+ if (line_number_element.addEventListener) {
+ line_number_element.addEventListener('click', line_click_handler, false);
+ } else {
+ line_number_element.attachEvent('onclick', line_click_handler);
+ }
+ }
+ hash_changed(null, true);
+ };
+
+ if (window.addEventListener) {
+ window.addEventListener('load', window_load_sourcecode, false);
+ } else {
+ window.attachEvent('onload', window_load_sourcecode);
+ }
+
+ window.onhashchange = hash_changed;
+})();
diff --git a/debsources/app/templates/source_file.html b/debsources/app/templates/source_file.html
index 9e7af5c..3e098a5 100644
--- a/debsources/app/templates/source_file.html
+++ b/debsources/app/templates/source_file.html
@@ -11,6 +11,7 @@
<link rel="stylesheet"
href="{{ config.HIGHLIGHT_JS_FOLDER }}/styles/{{ config.HIGHLIGHT_STYLE }}.css">
<script src="{{ config.HIGHLIGHT_JS_FOLDER }}/highlight.min.js"></script>
+ <script src="{{ url_for('static', filename='javascript/debsources.js') }}"></script>
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/source_file.css') }}" />
diff --git a/debsources/app/templates/source_file_code.inc.html b/debsources/app/templates/source_file_code.inc.html
index 9ea5a88..472ac6b 100644
--- a/debsources/app/templates/source_file_code.inc.html
+++ b/debsources/app/templates/source_file_code.inc.html
@@ -19,17 +19,14 @@
<tr>
<td>
<pre id="sourceslinenumbers">{% for i in range(1, nlines+1) -%}
- <a id="L{{ i }}" href="#L{{ i }}">{{ i }}</a><br />
+ <a id="L{{ i }}" href="#L{{ i }}" data-line="{{ i }}">{{ i }}</a><br />
{%- endfor %}</pre>
</td>
<td>
<pre><code id="sourcecode" class="{% if file_language -%}
{{ file_language }}{% else %}no-highlight
{%- endif %}">{% for (line, highlight) in code -%}
- {% if highlight -%}
- <span class="highlight">{{ line }}</span>{% else -%}
- {{ line }}
- {%- endif %}
+ <span id="line{{ loop.index }}" class="codeline {% if highlight -%} highlight {%- endif %}">{{ line }}</span>
{%- endfor %}</code></pre>
</td>
{% if msg -%}
--
2.1.1
Reply to: