add moveBefore support

bigskysoftware · Aug 23, 2024 · b4048eb · b4048eb
1 parent 27fc37c
commit b4048eb
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 3 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -1460,15 +1460,39 @@ var htmx = (function() {
     return oobValue
   }
 
+  function restorePreservedElements(){
+    let pantry = find("#--htmx-preserve-pantry--");
+    if (pantry) {
+      for (const preservedElt of pantry.children) {
+        let existingElement = find("#" + preservedElt.id);
+        // @ts-ignore - use proposed moveBefore feature
+        existingElement.parentNode.moveBefore(preservedElt, existingElement);
+        existingElement.remove();
+      }
+      pantry.remove();
+    }
+  }
+
   /**
    * @param {DocumentFragment} fragment
    */
   function handlePreservedElements(fragment) {
     forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
       const id = getAttributeValue(preservedElt, 'id')
-      const oldElt = getDocument().getElementById(id)
-      if (oldElt != null) {
-        preservedElt.parentNode.replaceChild(oldElt, preservedElt)
+      const existingElement = getDocument().getElementById(id)
+      if (existingElement != null) {
+        if (preservedElt.moveBefore) { // if the moveBefore API exists, use it
+          // get or create a storage spot for stuff
+          let pantry = find("#--htmx-preserve-pantry--");
+          if (pantry == null) {
+            getDocument().body.insertAdjacentHTML("afterend", "<div id='--htmx-preserve-pantry--'></div>")
+            pantry = find("#--htmx-preserve-pantry--");
+          }
+          // @ts-ignore - use proposed moveBefore feature
+          pantry.moveBefore(existingElement, null);
+        } else {
+          preservedElt.parentNode.replaceChild(existingElement, preservedElt)
+        }
       }
     })
   }
@@ -1871,6 +1895,7 @@ var htmx = (function() {
       }
       handlePreservedElements(fragment)
       swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
+      restorePreservedElements();
     }
 
     // apply saved focus and selection information to swapped content
@@ -3153,7 +3178,9 @@ var htmx = (function() {
         const settleInfo = makeSettleInfo(historyElement)
         handleTitle(fragment.title)
 
+        handlePreservedElements(fragment);
         swapInnerHTML(historyElement, content, settleInfo)
+        restorePreservedElements();
         settleImmediately(settleInfo.tasks)
         currentPathForHistory = path
         triggerEvent(getDocument().body, 'htmx:historyRestore', { path, cacheMiss: true, serverResponse: this.response })
@@ -3176,7 +3203,9 @@ var htmx = (function() {
       const historyElement = getHistoryElement()
       const settleInfo = makeSettleInfo(historyElement)
       handleTitle(fragment.title)
+      handlePreservedElements(fragment);
       swapInnerHTML(historyElement, fragment, settleInfo)
+      restorePreservedElements();
       settleImmediately(settleInfo.tasks)
       getWindow().setTimeout(function() {
         window.scrollTo(0, cached.scroll)

diff --git a/test/manual/index.html b/test/manual/index.html
@@ -18,6 +18,8 @@ <h2>Functionality</h2>
     <li><a href="poll-clears-on-reinit-test.html">Polling Cancels On Reprocessing</a></li>
     <li><a href="cache-buster">Cache Busting Test</a></li>
     <li><a href="body-swap">Body Swap Test</a></li>
+    <li><a href="keep-indicators">Keep Indicators Test</a></li>
+    <li><a href="move-before">Move Before Test</a></li>
     <li>Scroll Tests
         <ul>
             <li><a href="scroll-test-eventHandler.html">Scroll Event Handler</a></li>

diff --git a/test/manual/move-before/index.html b/test/manual/move-before/index.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+    <script type="application/javascript" src="../../../src/htmx.js"></script>
+</head>
+<body>
+<main>
+    <button hx-get="video1.html"
+            hx-target="#video-container">
+        Load Video Layout 1
+    </button>
+    <button hx-get="video2.html"
+            hx-push-url="true"
+            hx-target="#video-container">
+        Load Video Layout 2
+    </button>
+    &dot;&dot;
+    <hr/>
+    <div id="video-container">
+        ---
+    </div>
+</main>
+</body>
+</html>
diff --git a/test/manual/move-before/video1.html b/test/manual/move-before/video1.html
@@ -0,0 +1,8 @@
+<h1>The Best Song On The Internet</h1>
+
+<iframe id="rick-roll" width="600" height="300" hx-preserve="true"
+        src="https://www.youtube.com/embed/eBGIQ7ZuuiU" title="Rick Roll" frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+
+</iframe>
diff --git a/test/manual/move-before/video2.html b/test/manual/move-before/video2.html
@@ -0,0 +1,38 @@
+<h1>The Best Song On The Internet</h1>
+
+<section id="summary">
+    <h2>The Song</h2>
+    <p>
+        "Never Gonna Give You Up" is a song by English singer Rick Astley, released on 27 July 1987. Written and
+        produced by Stock Aitken Waterman, it was released by RCA Records as the first single from Astley's debut studio
+        album, Whenever You Need Somebody (1987). The song became a worldwide hit, initially in the United Kingdom in
+        1987, where it stayed at the top of the chart for five weeks and was the best-selling single of that year. It
+        eventually topped charts in 25 different countries, including the United States and West Germany,[7] and winning
+        Best British Single at the 1988 Brit Awards. The song is widely regarded as Astley's most popular, as well as
+        his signature song, and it is often played at the end of his live concerts.
+    </p>
+</section>
+
+<section id="the-video">
+    <h2>The Video</h2>
+    <div style="margin: auto;text-align: center">
+        <iframe id="rick-roll" width="600" height="300" hx-preserve="true"
+                src="https://www.youtube.com/embed/eBGIQ7ZuuiU" title="Rick Roll" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+
+        </iframe>
+    </div>
+</section>
+
+<section id="artist">
+    <h2>The Artist</h2>
+    <p>
+        Richard Paul Astley (born 6 February 1966) is an English singer. He gained fame through his association with the
+        production trio Stock Aitken Waterman, releasing the 1987 album Whenever You Need Somebody, which sold 15
+        million copies worldwide. His debut single "Never Gonna Give You Up" was a No. 1 hit in 25 countries, winning
+        the 1988 Brit Award for Best British Single.[1][2] His 1988 single "Together Forever" became his second song to
+        top the US Billboard Hot 100 and was one of his eight songs to reach the Top 10 on the UK Singles Chart. The
+        title track, "Whenever You Need Somebody", was also a No. 1 hit.
+    </p>
+</section>