lee/changedetection.io
1
0
Fork 0
mirror of https://github.com/dgtlmoon/changedetection.io.git synced 2026-05-01 07:10:34 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Adding keyboard nav

Browse Source
This commit is contained in:
dgtlmoon
2025-11-04 10:18:33 +01:00
parent cfa9c19309
commit b22ed7ed88
2 changed files with 76 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changedetectionio/blueprint/ui/templates/diff.html
+9 -2
View File
@@ -43,6 +43,13 @@
</select>
<button type="submit" class="pure-button pure-button-primary reset-margin">Go</button>
{% endif %}
{%- if versions|length >= 2 -%}
<div id="keyboard-nav">
<strong>Keyboard: </strong><a href="" class="pure-button pure-button-primary" id="btn-previous">
&larr; Previous</a> &nbsp; <a class="pure-button pure-button-primary" id="btn-next" href="">
&rarr; Next</a>
</div>
{%- endif -%}
</fieldset>
<fieldset>
<strong>Style</strong>
@@ -86,7 +93,7 @@
<div id="diff-ui">
<div class="tab-pane-inner" id="error-text">
<div class="snapshot-age error">{{watch_a.error_text_ctime|format_seconds_ago}} seconds ago</div>
<div class="snapshot-age error">{{watch_a.error_text_ctime|format_seconds_ago}} seconds ago.</div>
<pre>
{{ last_error_text }}
</pre>
@@ -107,7 +114,7 @@
<div{% if cell.class %} class="{{ cell.class }}"{% endif %}></div>
{%- endfor -%}
</div>
<div class="snapshot-age">{{ watch_a.snapshot_text_ctime|format_timestamp_timeago }}</div>
<div class="snapshot-age">{{ watch_a.snapshot_text_ctime|format_timestamp_timeago }} <a href="{{ url_for("ui.ui_views.preview_page", uuid=uuid) }}">Goto single snapshot</a></div>
<pre id="difference" style="border-left: 2px solid #ddd;">{{ content| diff_unescape_difference_spans }}</pre>
</div>
changedetectionio/static/js/diff-overview.js
+67
View File
@@ -1,3 +1,65 @@
function setupDiffNavigation() {
var $fromSelect = $('#diff-version');
var $toSelect = $('#current-version');
var $fromSelected = $fromSelect.find('option:selected');
var $toSelected = $toSelect.find('option:selected');
if ($fromSelected.length && $toSelected.length) {
// Find the previous pair (move both back one position)
var $prevFrom = $fromSelected.prev();
var $prevTo = $toSelected.prev();
// Find the next pair (move both forward one position)
var $nextFrom = $fromSelected.next();
var $nextTo = $toSelected.next();
// Build URL with current diff preferences
var currentParams = new URLSearchParams(window.location.search);
// Previous button: only show if both can move back
if ($prevFrom.length && $prevTo.length) {
currentParams.set('from_version', $prevFrom.val());
currentParams.set('to_version', $prevTo.val());
$('#btn-previous').attr('href', '?' + currentParams.toString());
} else {
$('#btn-previous').remove();
}
// Next button: only show if both can move forward
if ($nextFrom.length && $nextTo.length) {
currentParams.set('from_version', $nextFrom.val());
currentParams.set('to_version', $nextTo.val());
$('#btn-next').attr('href', '?' + currentParams.toString());
} else {
$('#btn-next').remove();
}
}
// Keyboard navigation
$(document).on('keydown', function (event) {
var $fromSelected = $fromSelect.find('option:selected');
var $toSelected = $toSelect.find('option:selected');
if ($fromSelected.length && $toSelected.length) {
if (event.key === 'ArrowLeft') {
var $prevFrom = $fromSelected.prev();
var $prevTo = $toSelected.prev();
if ($prevFrom.length && $prevTo.length) {
event.preventDefault();
window.location.href = $('#btn-previous').attr('href');
}
} else if (event.key === 'ArrowRight') {
var $nextFrom = $fromSelected.next();
var $nextTo = $toSelected.next();
if ($nextFrom.length && $nextTo.length) {
event.preventDefault();
window.location.href = $('#btn-next').attr('href');
}
}
}
});
}
$(document).ready(function () {
$('.needs-localtime').each(function () {
for (var option of this.options) {
@@ -9,6 +71,11 @@ $(document).ready(function () {
}
});
// Setup keyboard navigation for diff versions
if ($('#diff-version').length && $('#current-version').length) {
setupDiffNavigation();
}
// Load it when the #screenshot tab is in use, so we dont give a slow experience when waiting for the text diff to load
window.addEventListener('hashchange', function (e) {
toggle(location.hash);