Merge pull request #9122 from marmelab/fix-newsletter-script-loading-master

[Website] Fix newsletter script loading in doc pages - backport to  `master`

Author: fzaninotto

docs/_layouts/default.html

@@ -164,7 +164,6 @@
 
             var AUTOHIDE = Boolean(0);
         </script>
-        <script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>
 
         <script async defer src="https://unpkg.com/[email protected]/lib/typescript.js"></script>
         <script async defer src="https://unpkg.com/[email protected]/standalone.js"></script>

docs/documentation.html

@@ -296,16 +296,6 @@ <h2>Recipes</h2>
             });
         </script>
 
-        <!-- Newsletter form -->
-        <script>
-            window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code';
-            window.LOCALE = 'en';
-            window.GENERIC_INVALID_MESSAGE = window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
-            window.REQUIRED_ERROR_MESSAGE = "This field is required.";
-
-            var AUTOHIDE = Boolean(0);
-        </script>
-
         <!--
         React-admin protects your privacy!
         We use our own self-hosted tracking solution to collect some raw metrics,
@@ -319,6 +309,16 @@ <h2>Recipes</h2>
             src="https://analytics.marmelab.com/umami.js"
         ></script>
 
+        <!-- Newsletter form -->
+        <script>
+            window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code';
+            window.LOCALE = 'en';
+            window.GENERIC_INVALID_MESSAGE = window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
+            window.REQUIRED_ERROR_MESSAGE = "This field is required.";
+
+            var AUTOHIDE = Boolean(0);
+        </script>
+
         <script async defer src="https://unpkg.com/[email protected]/lib/typescript.js"></script>
         <script async defer src="https://unpkg.com/[email protected]/standalone.js"></script>
         <script async defer src="https://unpkg.com/[email protected]/parser-babel.js"></script>

docs/js/ra-doc-exec.js

@@ -274,6 +274,19 @@ function toggleDockBlocks(status) {
     }
 }
 
+function loadNewsletterScript() {
+    /* Load the script only of the form is in the DOM */
+    if (document.querySelector('#sib-form') != null) {
+        const script = document.createElement('script');
+        script.src = 'https://sibforms.com/forms/end-form/build/main.js';
+        script.type = 'text/javascript';
+        script.id = 'newsletter_script';
+        document.head.appendChild(script);
+    } else {
+        document.getElementById('newsletter_script')?.remove();
+    }
+}
+
 // Replace full page reloads by a fill of the content area
 // so that the side navigation keeps its state
 // use a global event listener to also catch links inside the content area
@@ -307,7 +320,8 @@ document.addEventListener('click', event => {
     fetch(href)
         .then(res => res.text())
         .then(replaceContent)
-        .then(buildJSCodeBlocksFromTS);
+        .then(buildJSCodeBlocksFromTS)
+        .then(loadNewsletterScript);
     // change the URL
     window.history.pushState(null, null, href);
     changeSelectedMenu();
@@ -327,7 +341,8 @@ window.addEventListener('popstate', () => {
         fetch(window.location.pathname)
             .then(res => res.text())
             .then(replaceContent)
-            .then(buildJSCodeBlocksFromTS);
+            .then(buildJSCodeBlocksFromTS)
+            .then(loadNewsletterScript);
     }
     changeSelectedMenu();
 });
@@ -343,4 +358,5 @@ window.addEventListener('DOMContentLoaded', () => {
 
     navigationFitScroll();
     buildJSCodeBlocksFromTS();
+    loadNewsletterScript();
 });