Fix SVG positioning when we are scrolled.

[remoteglot] / www / js / remoteglot.js

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index 687b48426b20b9fc0f557a984ffe1dbede583e83..61c390f32db4e2573e04ecb4237bfdb2f47a3722 100644 (file)
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -104,7 +104,7 @@ var highlight_from = undefined;
 var highlight_to = undefined;
 
 /** The HTML object of the move currently being highlighted (in red).
- * @type {?jQuery}
+ * @type {?Element}
  * @private */
 var highlighted_move = null;
 
@@ -510,15 +510,13 @@ var position_arrow = function(arrow) {
        var arrow_size = arrow.arrow_size * zoom_factor;
 
        var square_width = document.querySelector(".square-a8").getBoundingClientRect().width;
-       var pos, from_y, to_y, from_x, to_x;
+       var from_y, to_y, from_x, to_x;
        if (board.orientation() === 'black') {
-               pos = document.querySelector(".square-h1").getBoundingClientRect();  // FIXME: margin?
                from_y = (arrow.from_row + 0.5)*square_width;
                to_y = (arrow.to_row + 0.5)*square_width;
                from_x = (7 - arrow.from_col + 0.5)*square_width;
                to_x = (7 - arrow.to_col + 0.5)*square_width;
        } else {
-               pos = document.querySelector(".square-a8").getBoundingClientRect();  // FIXME: margin?
                from_y = (7 - arrow.from_row + 0.5)*square_width;
                to_y = (7 - arrow.to_row + 0.5)*square_width;
                from_x = (arrow.from_col + 0.5)*square_width;
@@ -572,10 +570,10 @@ var position_arrow = function(arrow) {
        head.setAttribute("fill", arrow.fg_color);
        svg.appendChild(head);
 
-       svg.style.top = pos.top;
-       svg.style.left = pos.left;
+       svg.style.top = '2px';  /* Border for .board-b72b1. */
+       svg.style.left = '2px';
        svg.style.pointerEvents = 'none';
-       document.body.appendChild(svg);
+       document.getElementById('board').appendChild(svg);
        arrow.svg = svg;
 }
 
@@ -809,9 +807,9 @@ var update_history = function() {
        } else if (truncate_display_history) {
                document.getElementById("history").innerHTML = print_pv(0, null, 8, true);
        } else {
-               document.getElementById("history").html(
+               document.getElementById("history").innerHTML =
                        '(<a class="move" href="javascript:collapse_history(true)">collapse</a>) ' +
-                       print_pv(0, null));
+                       print_pv(0, null);
        }
 }
 
@@ -1676,7 +1674,7 @@ var show_line = function(line_num, move_num) {
                update_board();
                return;
        } else {
-               current_display_line = jQuery.extend({}, display_lines[line_num]);  // Shallow clone.
+               current_display_line = {...display_lines[line_num]};  // Shallow clone.
                current_display_move = move_num + current_display_line.start_display_move_num;
        }
        current_display_line_is_history = (line_num == 0);