[18.0][FIX] sign_oca: Fix window resize navigator issues

Author: kobros-tech

sign_oca/static/src/components/sign_oca_pdf_common/sign_oca_pdf_common.esm.js

@@ -103,6 +103,28 @@ export default class SignOcaPdfCommon extends Component {
         $(this.iframe.el.contentDocument.getElementById("viewer")).addClass(
             "sign_oca_ready"
         );
+
+        // Is essential to make sure the navigator will never duplicate
+        const target = $(
+            this.iframe.el.contentDocument.getElementById("viewerContainer")
+        );
+        const navigator = $(
+            this.iframe.el.contentDocument.getElementsByClassName(
+                "o_sign_sign_item_navigator"
+            )
+        );
+        const navLine = $(
+            this.iframe.el.contentDocument.getElementsByClassName(
+                "o_sign_sign_item_navline"
+            )
+        );
+        if (navLine.length === 0) {
+            target.append($("<div class='o_sign_sign_item_navline'/>"));
+        }
+        if (navigator.length === 0) {
+            target.append($("<div class='o_sign_sign_item_navigator'/>"));
+        }
+
         this.iframeLoaded.resolve();
     }
     postIframeField(item) {

sign_oca/static/src/components/sign_oca_pdf_portal/sign_oca_navigator.esm.js

@@ -22,14 +22,15 @@ export function startSignItemNavigator(parent, target, env) {
         started: false,
         isScrolling: false,
     };
+    const navigator = parent.iframe.el.contentDocument.getElementsByClassName(
+        "o_sign_sign_item_navigator"
+    )[0];
+    const navLine = parent.iframe.el.contentDocument.getElementsByClassName(
+        "o_sign_sign_item_navline"
+    )[0];
     const checkSignItemsCompletion = parent.checkSignItemsCompletion();
     let signItemsToComplete = checkSignItemsCompletion;
 
-    const navigator = document.createElement("div");
-    navigator.classList.add("o_sign_sign_item_navigator");
-    const navLine = document.createElement("div");
-    navLine.classList.add("o_sign_sign_item_navline");
-
     function _scrollToSignItemPromise(item) {
         return new Promise((resolve) => {
             if (env.isSmall) {
@@ -106,6 +107,8 @@ export function startSignItemNavigator(parent, target, env) {
     }
 
     function scrollToSignItem({el: item}) {
+        setTip(_t("Next"));
+
         _scrollToSignItemPromise(item).then(() => {
             // Define input to deal with input fields if present
             const input = item.querySelector("input");
@@ -130,12 +133,14 @@ export function startSignItemNavigator(parent, target, env) {
                 }
             }
             // Field can be signature div or anything else
-            else if (item.dataset.field) {
-                const clickableElement =
-                    item.firstChild && item.querySelector("div")
-                        ? item.firstChild
-                        : item;
-                clickableElement.click();
+            else if (
+                item.dataset.field &&
+                item.firstChild &&
+                item.querySelector("div")
+            ) {
+                setTip(_t("Click on item to ✒️"));
+                item.dispatchEvent(new Event("focus_signature"));
+                item.focus();
             } else {
                 item.focus();
             }
@@ -159,8 +164,6 @@ export function startSignItemNavigator(parent, target, env) {
         }
     }
 
-    target.append(navigator);
-    navigator.before(navLine);
     navigator.addEventListener("click", () => {
         if (checkSignItemsCompletion.length > 0) {
             goToNextSignItem();
@@ -176,6 +179,13 @@ export function startSignItemNavigator(parent, target, env) {
         navLine.style.display = force ? "" : "none";
     }
 
+    // If the window is resized this function asks user to fill all fields again
+    const watch_navigator = () => {
+        signItemsToComplete = parent.checkSignItemsCompletion();
+        setTip(_t("Click to start"));
+    };
+    window.addEventListener("resize", watch_navigator);
+
     return {
         setTip,
         goToNextSignItem,

sign_oca/static/src/components/sign_oca_pdf_portal/sign_oca_pdf_portal.esm.js

@@ -61,11 +61,6 @@ export class SignOcaPdfPortal extends SignOcaPdf {
     navigate() {
         const target = this.iframe.el.contentDocument.getElementById("viewerContainer");
         this.navigator = startSignItemNavigator(this, target, this.env);
-        target.addEventListener("scroll", () => {
-            if (!this.navigator.state.isScrolling && this.navigator.state.started) {
-                this.navigator.setTip(_t("next"));
-            }
-        });
     }
 }
 SignOcaPdfPortal.template = "sign_oca.SignOcaPdfPortal";