From af22c90a044511c624252bbdb64498217120b4af Mon Sep 17 00:00:00 2001
From: Costas Basdekis <costas.basdekis@gmail.com>
Date: Fri, 20 May 2022 14:25:26 +0100
Subject: [PATCH] Try to fix issue #21

Try multiple times to put it in the right place, since some times
it's moved to the end of the page
See https://github.com/costas-basdekis/MarlinGcodeDocumentation/issues/21
---
 .../static/js/marlingcodedocumentation.js     | 38 ++++++++++++++++---
 .../static/js/marlingcodedocumentation.min.js | 37 +++++++++++++++---
 2 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.js b/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.js
index 4149d73..3fb7b38 100644
--- a/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.js
+++ b/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.js
@@ -473,13 +473,36 @@ $(function() {
 
         self.gcodeParser = new GcodeParser();
 
+        // Try multiple times to put it in the right place, since some times
+        // it's moved to the end of the page
+        // See https://github.com/costas-basdekis/MarlinGcodeDocumentation/issues/21
+        let moveTemplateToPositionAttemptCount = 0;
         self.moveTemplateToPosition = () => {
+            if (moveTemplateToPositionAttemptCount >= 5) {
+                console.error(
+                    `Could not find anchor for Marlin GCode documentation ` +
+                    `- aborting after ` +
+                    `${moveTemplateToPositionAttemptCount} attempts`);
+                return;
+            }
+            moveTemplateToPositionAttemptCount += 1;
+            const $element = $("#terminal-marlin-gcode-documentation");
+            let $anchor;
             if (self.mySettings.documentation_position() === "above_settings") {
-                $("#terminal-marlin-gcode-documentation")
-                    .insertAfter("#terminal-sendpanel");
+                $anchor = $("#terminal-sendpanel");
+                $element.insertAfter($anchor);
             } else {
-                $("#term")
-                    .append($("#terminal-marlin-gcode-documentation"));
+                $anchor = $("#term");
+                $anchor.append($element);
+            }
+            if (!$anchor.length) {
+                console.warn(
+                    `Anchor for Marlin GCode documentation was not ` +
+                    `present, will try again in 1s - tried ` +
+                    `${moveTemplateToPositionAttemptCount} times`);
+                setTimeout(() => {
+                    self.moveTemplateToPosition();
+                }, 1000);
             }
 		};
 
@@ -578,7 +601,12 @@ $(function() {
             self.loadSettings();
             self.onDocumentationPositionChange = ko.computed(() => {
                 self.mySettings.documentation_position();
-                self.moveTemplateToPosition();
+                // Add a delay, since some times it's moved to the end of the
+                // page
+                // See https://github.com/costas-basdekis/MarlinGcodeDocumentation/issues/21
+                setTimeout(() => {
+                    self.moveTemplateToPosition();
+                }, 0);
             });
             self.onExplainSentCommandsChanged = ko.computed(() => {
                 $("#terminal-output").toggleClass(
diff --git a/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.min.js b/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.min.js
index 25ce790..19bbcfa 100644
--- a/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.min.js
+++ b/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.min.js
@@ -662,13 +662,35 @@ $(function () {
 
     self.settingsViewModel = _parameters[0];
     self.settingsViewModel.marlinGcodeDocumentation = self;
-    self.gcodeParser = new GcodeParser();
+    self.gcodeParser = new GcodeParser(); // Try multiple times to put it in the right place, since some times
+    // it's moved to the end of the page
+    // See https://github.com/costas-basdekis/MarlinGcodeDocumentation/issues/21
+
+    var moveTemplateToPositionAttemptCount = 0;
 
     self.moveTemplateToPosition = function () {
+      if (moveTemplateToPositionAttemptCount >= 5) {
+        console.error("Could not find anchor for Marlin GCode documentation " + "- aborting after " + "".concat(moveTemplateToPositionAttemptCount, " attempts"));
+        return;
+      }
+
+      moveTemplateToPositionAttemptCount += 1;
+      var $element = $("#terminal-marlin-gcode-documentation");
+      var $anchor;
+
       if (self.mySettings.documentation_position() === "above_settings") {
-        $("#terminal-marlin-gcode-documentation").insertAfter("#terminal-sendpanel");
+        $anchor = $("#terminal-sendpanel");
+        $element.insertAfter($anchor);
       } else {
-        $("#term").append($("#terminal-marlin-gcode-documentation"));
+        $anchor = $("#term");
+        $anchor.append($element);
+      }
+
+      if (!$anchor.length) {
+        console.warn("Anchor for Marlin GCode documentation was not " + "present, will try again in 1s - tried " + "".concat(moveTemplateToPositionAttemptCount, " times"));
+        setTimeout(function () {
+          self.moveTemplateToPosition();
+        }, 1000);
       }
     }; // Since the terminal VM is bound on `value`, we would only get an
     // update on blur, not after the user types. With this, we get it when
@@ -770,8 +792,13 @@ $(function () {
     self.onBeforeBinding = function () {
       self.loadSettings();
       self.onDocumentationPositionChange = ko.computed(function () {
-        self.mySettings.documentation_position();
-        self.moveTemplateToPosition();
+        self.mySettings.documentation_position(); // Add a delay, since some times it's moved to the end of the
+        // page
+        // See https://github.com/costas-basdekis/MarlinGcodeDocumentation/issues/21
+
+        setTimeout(function () {
+          self.moveTemplateToPosition();
+        }, 0);
       });
       self.onExplainSentCommandsChanged = ko.computed(function () {
         $("#terminal-output").toggleClass("explain-sent-commands", self.mySettings.explain_sent_commands());