Skip to content

Commit

Permalink
Add a toggle to enable side-by-side diff viewer
Browse files Browse the repository at this point in the history
Store the last toggled diff viewer state in the local storage. The way
diffs are viewed is mostly a user preference, but depending on the file
and type of changes, the option to quickly toggle it can come in handy.

Note that for multi-file submissions, a per-file toggle is included in
the tab, but on reload all tabs will have the state of the last toggled
switch.
  • Loading branch information
Kevinjil committed Dec 13, 2024
1 parent 7d7ed2e commit c7089fc
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 0 deletions.
15 changes: 15 additions & 0 deletions webapp/public/js/domjudge.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,21 @@ function applyEditorTheme(theme = undefined, isExternal = false)
});
}

function isDiffSideBySide()
{
let sideBySide = localStorage.getItem('domjudge_editor_side_by_side');
if (sideBySide === undefined) {
return true;
} else {
return sideBySide == 'true';
}
}

function setDiffSideBySide(value)
{
localStorage.setItem('domjudge_editor_side_by_side', value);
}

// Send a notification if notifications have been enabled.
// The options argument is passed to the Notification constructor,
// except that the following tags (if found) are interpreted and
Expand Down
16 changes: 16 additions & 0 deletions webapp/src/Twig/TwigExtension.php
Original file line number Diff line number Diff line change
Expand Up @@ -929,6 +929,10 @@ protected function parseSourceDiff(string $difftext): string
public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $oldFile): string
{
$editor = <<<HTML
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="__EDITOR__SBS">
<label class="form-check-label" for="__EDITOR__SBS">Use side-by-side diff viewer</label>
</div>
<div class="editor" id="__EDITOR__"></div>
<script>
$(function() {
Expand All @@ -943,6 +947,17 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
undefined,
monaco.Uri.parse("diff-new/%s")
);
const sideBySide = isDiffSideBySide()
sideBySideSwitch = $("#__EDITOR__SBS");
sideBySideSwitch.prop('checked', sideBySide);
sideBySideSwitch.change(function(e) {
setDiffSideBySide(e.target.checked);
diffEditor.updateOptions({
renderSideBySide: e.target.checked,
});
});
const diffEditor = monaco.editor.createDiffEditor(
document.getElementById("__EDITOR__"), {
scrollbar: {
Expand All @@ -952,6 +967,7 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
scrollBeyondLastLine: false,
automaticLayout: true,
readOnly: true,
renderSideBySide: sideBySide,
theme: getCurrentEditorTheme(),
});
diffEditor.setModel({
Expand Down

0 comments on commit c7089fc

Please sign in to comment.