ASTDiff GUI: Fix minor problems

src/main/java/gui/webdiff/viewers/monaco/MonacoView.java

@@ -74,6 +74,8 @@ public void renderOn(HtmlCanvas html) throws IOException {
                     .macros().stylesheet(WebDiff.BOOTSTRAP_CSS_URL)
                     .macros().stylesheet("/dist/monaco.css")
                     .macros().javascript(WebDiff.JQUERY_JS_URL)
+                    .macros().javascript("https://code.jquery.com/ui/1.12.1/jquery-ui.min.js")
+//                    .macros().stylesheet(JQ_UI_CSS)
                     .macros().javascript(WebDiff.BOOTSTRAP_JS_URL)
                     .macros().javascript("/monaco/min/vs/loader.js")
                     .macros().javascript("/dist/monaco.js")

src/main/java/gui/webdiff/viewers/spv/AbstractSinglePageView.java

@@ -17,7 +17,6 @@
 public abstract class AbstractSinglePageView extends DirectoryDiffView implements Renderable {
     protected final String JQ_UI_CSS = "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css";
     protected final String JQ_UI_JS = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
-    protected final List<MonacoCore> cores = new ArrayList<>();
 
     public AbstractSinglePageView(DirComparator comparator) {
         super(comparator);
@@ -27,11 +26,8 @@ public AbstractSinglePageView(DirComparator comparator) {
     public void renderOn(HtmlCanvas html) {
         int n = comparator.getNumOfDiffs();
         try {
-            html
-                    .head();
                     makeHead(html);
-                    html._head()
-                    .render(DocType.HTML5)
+                    html.render(DocType.HTML5)
                     .html(lang("en"))
                     .body()
                     .div(class_("container-fluid"))
@@ -46,7 +42,6 @@ public void renderOn(HtmlCanvas html) {
             // Generate panels for /monaco-0 to /monaco-n
             for (int i = 0; i < n; i++) {
                 MonacoCore core = new MonacoCore(comparator.getASTDiff(i), i, comparator.isMoveDiff(i));
-                cores.add(core);
                 core.setShowFilenames(false);
                 html.div(class_("card"))
                         .div(class_("card-header").id("heading-" + i).style("padding-right: 0;"))

src/main/java/gui/webdiff/viewers/spv/SinglePageView.java

@@ -17,24 +17,22 @@ public SinglePageView(DirComparator comparator) {
     }
 
     protected void makeHead(HtmlCanvas html) throws IOException {
-        html.meta(charset("utf8"))
+        html.head().meta(charset("utf8"))
                 .meta(name("viewport").content("width=device-width, initial-scale=1.0"))
-                .macros().javascript("https://code.jquery.com/jquery-3.4.1.min.js")
-                .macros().javascript("https://code.jquery.com/ui/1.12.1/jquery-ui.min.js")
-                .macros().stylesheet(JQ_UI_CSS)
-                .macros().javascript("https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/loader.js")
-
                 .macros().stylesheet("/dist/single.css")
                 .macros().stylesheet("/dist/monaco.css")
-                .macros().javascript("/dist/monaco.js");
+                .macros().javascript("/dist/monaco.js")
+                .macros().javascript("/monaco/min/vs/loader.js")
+            ._head();
 
 
     }
     protected void makeEachDiff(HtmlCanvas html, int i, MonacoCore core) throws IOException {
         core.addDiffContainers(html);
     }
     protected HtmlCanvas addJSMacros(HtmlCanvas html) throws IOException {
-        return html.macros().javascript("/dist/single.js");
+        return html.
+                macros().javascript("/dist/single.js");
     }
 
 }

src/main/java/gui/webdiff/viewers/spv/SinglePageViewWithIFrame.java

@@ -15,10 +15,11 @@ public SinglePageViewWithIFrame(DirComparator comparator) {
         super(comparator);
     }
     protected void makeHead(HtmlCanvas html) throws IOException {
-        html.meta(charset("utf8"))
+        html.head().meta(charset("utf8"))
                 .meta(name("viewport").content("width=device-width, initial-scale=1.0"))
                 .macros().stylesheet("/dist/single.css")
-                .macros().stylesheet(JQ_UI_CSS);
+                .macros().stylesheet(JQ_UI_CSS)
+            ._head();
     }
     protected void makeEachDiff(HtmlCanvas html, int i, MonacoCore core) throws IOException {
         html
@@ -29,7 +30,6 @@ protected void makeEachDiff(HtmlCanvas html, int i, MonacoCore core) throws IOEx
     }
     protected HtmlCanvas addJSMacros(HtmlCanvas html) throws IOException {
         return html.
-                macros().javascript("/dist/worker.js").
                 macros().javascript("/dist/single.js")
                 .macros().javascript(JQ_UI_JS);
     }

src/main/resources/web/dist/monaco.js

@@ -1,23 +1,3 @@
-/*
- * This file is part of GumTree.
- *
- * GumTree is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * GumTree 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 Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with GumTree.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Copyright 2011-2015 Jean-Rémy Falleri <jr.falleri@gmail.com>
- * Copyright 2011-2015 Floréal Morandat <florealm@gmail.com>
- */
-
 function getEditorOptions(config, text) {
     return {
         value: text,
@@ -70,8 +50,11 @@ function getDecoration(range, pos, endPos) {
 }
 
 function monaco(config) {
-    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' }});
-    require(['vs/editor/editor.main'], function () {
+    require.config({paths: {'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs'}});
+    require(['vs/editor/editor.main'], initializeEditors);
+
+
+    function initializeEditors() {
         const left_container_id = config.lcid; /*'left-container';*/
         const right_container_id = config.rcid;/*'right-container';*/
         const leftContainer = document.getElementById(left_container_id);
@@ -149,8 +132,7 @@ function monaco(config) {
             leftEditor.getAction('editor.foldAll').run();
             rightEditor.getAction('editor.foldAll').run();
 
-            if (config.spv === true)
-            {
+            if (config.spv === true) {
                 const updateEditorsLayout = () => {
                     const leftHeight = leftEditor.getContentHeight();
                     const rightHeight = rightEditor.getContentHeight();
@@ -167,23 +149,17 @@ function monaco(config) {
 
                 leftEditor.onDidContentSizeChange(updateEditorsLayout);
                 rightEditor.onDidContentSizeChange(updateEditorsLayout);
-                // updateEditorsLayout(); // Initial adjustment
 
                 const accordion = document.getElementById('accordion');
-                if (accordion != null)
-                    parent_container= accordion;
-                else
-                    parent_container = document.body;
+                const parent_container = accordion ? accordion : document.body;
 
                 rightContainer.addEventListener('wheel', (e) => {
-                    e.preventDefault(); // Prevent the default scrolling behavior
-                    // Adjust the scroll position of the monacoPanel
+                    e.preventDefault();
                     parent_container.scrollTop += e.deltaY;
                     parent_container.scrollLeft += e.deltaX;
                 });
                 leftContainer.addEventListener('wheel', (e) => {
-                    e.preventDefault(); // Prevent the default scrolling behavior
-                    // Adjust the scroll position of the monacoPanel
+                    e.preventDefault();
                     parent_container.scrollTop += e.deltaY;
                     parent_container.scrollLeft += e.deltaX;
                 });
@@ -192,7 +168,7 @@ function monaco(config) {
             window.leftEditor = leftEditor;
             window.rightEditor = rightEditor;
         });
-    });
+    }
 }
 
 function getLinesToFold(config, model, margin = 5) {

src/main/resources/web/dist/single.css

@@ -11,4 +11,16 @@
 .edc{
     flex: 1;
     height: 100%;
-}
+}
+
+@keyframes shake {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(-10px); }
+    50% { transform: translateX(10px); }
+    75% { transform: translateX(-10px); }
+    100% { transform: translateX(0); }
+}
+
+.shake {
+    animation: shake 0.5s ease-in-out;
+}

src/main/resources/web/dist/single.js

@@ -1,6 +1,5 @@
 x = 1;
 $(document).ready(function() {
-    console.log("single loaded");
     // Select all elements with an ID that starts with 'diff_row_'
     $('[id^="diff_row_"]').each(function() {
         // Update the href attribute of each selected element
@@ -21,7 +20,7 @@ $(document).ready(function() {
             // Check if the target is already in view
             if (Math.abs($('#accordion').scrollTop() - scrollTo) < 1) {
                 // If it's already in view, shake it
-                $target.effect('shake', { direction: 'up', distance: 10, times: 3 }, 500);
+                shakeElement($('#' + targetId));
             } else {
                 // Scroll the accordion panel to the element with the corresponding heading ID
                 $('#accordion').animate({
@@ -35,31 +34,10 @@ $(document).ready(function() {
     });
 });
 
-document.addEventListener('DOMContentLoaded', () => {
-    const iframes = document.querySelectorAll('iframe');
-    const workers = [];
-
-    iframes.forEach((iframe, index) => {
-        const worker = new Worker('/path/to/worker.js');
-        workers.push(worker);
-        console.log("test" + index);
-        worker.onmessage = function (e) {
-            const data = e.data;
-            console.log(`Iframe ${data.index}: ${data.result}`);
-            // Post the processed data to the iframe if necessary
-            iframe.contentWindow.postMessage(data.result, '*');
-        };
-
-        worker.postMessage(index);
-    });
-});
-
-if (typeof $.fn.effect === 'undefined') {
-    console.error('jQuery UI effect method is not loaded.');
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    document.addEventListener('scroll', function(event) {
-        console.log('Scroll event detected!', event);
-    });
-});
+function shakeElement(element) {
+    $(element).addClass('shake');
+    // Remove the class after the animation ends
+    setTimeout(function() {
+        $(element).removeClass('shake');
+    }, 500); // Duration of the animation in milliseconds
+}