formstrap 0.3.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8243dd5f8e2fdae1537ffab42b56734ebdfe53e054feb92c68a323954c0a63e0
-  data.tar.gz: 0c5a4a73c1d4c518c2ee71cf36f3ccc882ee106a825d94aef212a639ee0bcb94
+  metadata.gz: 2d52dd192e41d84f75bc6be46186bd8a5739ab34f72b8a03a7f57a2518024356
+  data.tar.gz: 21985d08ac6f4837e06385a0de891e0785366322f8504a537f22a89d397903aa
 SHA512:
-  metadata.gz: 6dbd8118d294ff8a863675299ce236cc3bd7f7a749b958b42cd22ac66465c3a5c751433edb93009a87b203d28995e2581b3f3600160d4f6a68e0b78110ab9fbe
-  data.tar.gz: 90ea13586df35f2db36e0b5f3139c6316ae5be21cf022355c665084a19e5d69663efe329f948bd6287b8deb8c4af76ac4b186a94b73aae5b73c8f6aded3659f9
+  metadata.gz: d4e86b30d1f485050c98c72ef426d3590624544e86675b41efe409382595d8f121878b437cf5fdb7ff8dc7aef71dd11c5f689b3bae73d805d1011f6c68cd965b
+  data.tar.gz: 1f04bdc357480984893120ef11166a2c62ade2e80ad793d49814a550f5e35099fd559ca05f57070ce51a166691a1c4c9a916fedd357b29f38c41b563e3c15601

data/app/assets/javascripts/formstrap/controllers/nested_preview_controller.js

@@ -18,6 +18,7 @@ export default class extends Controller {
     this.iframeTarget.addEventListener('load', () => {
       this.hideLoader()
       this.resizeIframe()
+      this.autoResizeIframe()
     })
 
     // Offcanvas closes
@@ -28,6 +29,22 @@ export default class extends Controller {
     })
   }
 
+  autoResizeIframe () {
+    // eslint-disable-next-line no-undef
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        this.resizeIframe()
+      })
+    })
+
+    // Target the body of the iframe for observing
+    const innerDoc = this.iframeTarget.contentWindow.document
+    observer.observe(innerDoc.body, {
+      childList: true, // Listen for additions/removals of child nodes
+      subtree: true // Listen for changes in the whole subtree
+    })
+  }
+
   showLoader () {
     this.loaderTarget.classList.remove('d-none')
   }
@@ -141,7 +158,7 @@ export default class extends Controller {
   scaleFactor () {
     const width = this.iframeWrapperTarget.getBoundingClientRect().width
     const viewportWidth = window.innerWidth
-    return (width / viewportWidth).toFixed(1)
+    return parseFloat((width / viewportWidth).toFixed(1))
   }
 
   // Replace the body of the iframe with the new content
@@ -153,11 +170,21 @@ export default class extends Controller {
   // Dynamically resize the iFrame to fit its content
   resizeIframe () {
     const scaleFactor = this.scaleFactor()
-    const iframeContentHeight = this.iframeTarget.contentWindow.document.body.scrollHeight
+    const iframeContentHeight = this.iFrameContentHeight()
     const iframeHeight = iframeContentHeight * scaleFactor
-    this.iframeTarget.style.height = iframeContentHeight + 'px'
+
+    this.iframeTarget.style.height = `${iframeContentHeight.toFixed()}px`
     this.iframeTarget.style.opacity = 1
-    this.iframeWrapperTarget.style.height = iframeHeight + 'px'
+    this.iframeWrapperTarget.style.height = `${iframeHeight.toFixed()}px`
+  }
+
+  iFrameContentHeight () {
+    const firstElement = this.iframeTarget.contentWindow.document.body.firstElementChild
+    const firstElementStyle = window.getComputedStyle(firstElement)
+
+    const height = firstElement.scrollHeight
+    const margins = parseInt(firstElementStyle.marginTop) + parseInt(firstElementStyle.marginBottom)
+    return height + margins
   }
 
   getAuthenticityToken () {

data/app/assets/javascripts/formstrap.js

@@ -11308,6 +11308,7 @@ var nested_preview_controller_default = class extends Controller {
     this.iframeTarget.addEventListener("load", () => {
       this.hideLoader();
       this.resizeIframe();
+      this.autoResizeIframe();
     });
     this.offcanvasTarget.addEventListener("hide.bs.offcanvas", (event) => {
       if (!this.update()) {
@@ -11315,6 +11316,18 @@ var nested_preview_controller_default = class extends Controller {
       }
     });
   }
+  autoResizeIframe() {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        this.resizeIframe();
+      });
+    });
+    const innerDoc = this.iframeTarget.contentWindow.document;
+    observer.observe(innerDoc.body, {
+      childList: true,
+      subtree: true
+    });
+  }
   showLoader() {
     this.loaderTarget.classList.remove("d-none");
   }
@@ -11396,7 +11409,7 @@ var nested_preview_controller_default = class extends Controller {
   scaleFactor() {
     const width = this.iframeWrapperTarget.getBoundingClientRect().width;
     const viewportWidth = window.innerWidth;
-    return (width / viewportWidth).toFixed(1);
+    return parseFloat((width / viewportWidth).toFixed(1));
   }
   updatePreview(html) {
     this.iframeTarget.contentWindow.document.body.innerHTML = html;
@@ -11404,11 +11417,18 @@ var nested_preview_controller_default = class extends Controller {
   }
   resizeIframe() {
     const scaleFactor = this.scaleFactor();
-    const iframeContentHeight = this.iframeTarget.contentWindow.document.body.scrollHeight;
+    const iframeContentHeight = this.iFrameContentHeight();
     const iframeHeight = iframeContentHeight * scaleFactor;
-    this.iframeTarget.style.height = iframeContentHeight + "px";
+    this.iframeTarget.style.height = `${iframeContentHeight.toFixed()}px`;
     this.iframeTarget.style.opacity = 1;
-    this.iframeWrapperTarget.style.height = iframeHeight + "px";
+    this.iframeWrapperTarget.style.height = `${iframeHeight.toFixed()}px`;
+  }
+  iFrameContentHeight() {
+    const firstElement = this.iframeTarget.contentWindow.document.body.firstElementChild;
+    const firstElementStyle = window.getComputedStyle(firstElement);
+    const height = firstElement.scrollHeight;
+    const margins = parseInt(firstElementStyle.marginTop) + parseInt(firstElementStyle.marginBottom);
+    return height + margins;
   }
   getAuthenticityToken() {
     const tokenTag = document.querySelector('meta[name="csrf-token"]');

data/app/views/formstrap/shared/_nested_preview.html.erb

@@ -2,7 +2,7 @@
   <!-- Preview placeholder -->
   <div class="nested-preview-iframe-wrapper position-relative" role="button" data-nested-preview-target="iframeWrapper" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-<%= form.options[:child_index] %>" aria-controls="offcanvasRight" data-turbo-cache="false">
     <iframe src="<%= url %>" class="pe-none" data-nested-preview-target="iframe"></iframe>
-    <div data-nested-preview-target="loader" class="nested-preview-loader terti">
+    <div data-nested-preview-target="loader" class="nested-preview-loader">
       <div class="spinner-grow text-secondary" role="status">
         <span class="visually-hidden">Loading...</span>
       </div>
@@ -18,7 +18,7 @@
     <div class="offcanvas-body">
 
       <div class="alert alert-danger d-none" data-nested-preview-target="error">
-        <% t(".error") %>
+        <%= t(".error") %>
       </div>
 
       <!-- Row content -->

data/lib/formstrap/version.rb

@@ -1,3 +1,3 @@
 module Formstrap
-  VERSION = "0.3.0"
+  VERSION = "0.3.1"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontierdotbe/formstrap",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Bootstrap-powered Form Helpers",
   "module": "app/assets/javascripts/formstrap.js",
   "main": "app/assets/javascripts/formstrap.js",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: formstrap
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-03-11 00:00:00.000000000 Z
+date: 2024-03-18 00:00:00.000000000 Z
 dependencies: []
 description: An extensive Bootstrap form library to power your Ruby On Rails application.
 email: