formstrap 0.3.0 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8243dd5f8e2fdae1537ffab42b56734ebdfe53e054feb92c68a323954c0a63e0
-  data.tar.gz: 0c5a4a73c1d4c518c2ee71cf36f3ccc882ee106a825d94aef212a639ee0bcb94
+  metadata.gz: 98d133e0c15d72418662dbe8a98e296a3c701bc97aa9bec3620fa3f0a346ffec
+  data.tar.gz: f50c6dc41f0809c54e6522e14a718b0a6842a419fc3068928a64e156df771408
 SHA512:
-  metadata.gz: 6dbd8118d294ff8a863675299ce236cc3bd7f7a749b958b42cd22ac66465c3a5c751433edb93009a87b203d28995e2581b3f3600160d4f6a68e0b78110ab9fbe
-  data.tar.gz: 90ea13586df35f2db36e0b5f3139c6316ae5be21cf022355c665084a19e5d69663efe329f948bd6287b8deb8c4af76ac4b186a94b73aae5b73c8f6aded3659f9
+  metadata.gz: f540f4053664dc2095dd165f5e4d6c2c5a7257a7fe810bed486834b3477d5c0888ca4ee9bfc5f0e9ac8685d86e0f97039e5bde5795013a1e80350246580a35d3
+  data.tar.gz: 7318bdcee8bb2ac4a84a079374fb15b8385e1032186e8ce14cbe00b449b7d33e2f012b887ad5fa35773eebf9ad718a58c5cacb43188300dc59f27486804882b0

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

@@ -114,11 +114,11 @@ export default class extends Controller {
   }
 
   minActiveItems () {
-    return parseInt(this.element.dataset.min, 10) || 0
+    return parseInt(this.validationInputTarget.dataset.min, 10) || 0
   }
 
   maxActiveItems () {
-    return parseInt(this.element.dataset.max, 10) || Infinity
+    return parseInt(this.validationInputTarget.dataset.max, 10) || Infinity
   }
 
   resetPositions () {
@@ -131,13 +131,7 @@ export default class extends Controller {
   }
 
   addNewItems (items) {
-    const itemTargetIds = this.itemTargets.map((i) => { return parseInt(i.querySelectorAll('input')[1].value) })
     items.forEach((item) => {
-      if (itemTargetIds.includes(item.blobId)) {
-        // Do not add this item (as it is already present)
-        return
-      }
-
       this.addItem(item)
     })
   }
@@ -211,7 +205,7 @@ export default class extends Controller {
     const returnedBlobIds = elements.map((e) => { return e.blobId })
 
     items.forEach((item) => {
-      const blobId = parseInt(item.querySelectorAll('input')[1].value)
+      const blobId = parseInt(item.querySelectorAll('input')[1].value, 10)
       if (returnedBlobIds.includes(blobId)) {
         // Do not delete this one
         return
@@ -237,7 +231,7 @@ export default class extends Controller {
 
   itemByBlobId (blobId) {
     return this.itemTargets.find((item) => {
-      return item.querySelector('input[name*=\'blob_id\']').value === blobId
+      return parseInt(item.querySelector('input[name*=\'blob_id\']').value, 10) === blobId
     })
   }
 
@@ -249,7 +243,7 @@ export default class extends Controller {
 
   activeIds () {
     return this.activeItems().map((item) => {
-      return item.querySelector('input[name$=\'[blob_id]\']').value
+      return parseInt(item.querySelector('input[name$=\'[blob_id]\']').value, 10)
     })
   }
 }

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

@@ -1,3 +1,4 @@
+/* global XMLHttpRequest, MutationObserver */
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
@@ -18,6 +19,7 @@ export default class extends Controller {
     this.iframeTarget.addEventListener('load', () => {
       this.hideLoader()
       this.resizeIframe()
+      this.autoResizeIframe()
     })
 
     // Offcanvas closes
@@ -28,6 +30,21 @@ export default class extends Controller {
     })
   }
 
+  autoResizeIframe () {
+    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')
   }
@@ -60,7 +77,6 @@ export default class extends Controller {
 
   requestPreview () {
     // Create an AJAX request
-    // eslint-disable-next-line no-undef
     const xhr = new XMLHttpRequest()
     xhr.open('POST', this.urlValue, true)
 
@@ -92,7 +108,7 @@ export default class extends Controller {
   validateFields () {
     let allValid = true
     const fields = this.fieldsTarget
-    const formElements = fields.querySelectorAll('input[name], select[name], textarea[name]')
+    const formElements = fields.querySelectorAll('input:not([type="hidden"]), select[name], textarea[name]')
     formElements.forEach(function (element) {
       const isValid = element.reportValidity()
       if (!isValid) {
@@ -141,7 +157,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 +169,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/controllers/repeater_controller.js

@@ -110,6 +110,7 @@ export default class extends Controller {
   replaceIdsWithTimestamps (template) {
     const pattern = 'rrrrrrrrr'
     const replacement = new Date().getTime().toString()
+    const regex = new RegExp(pattern, 'g')
 
     // Replace ids
     template.querySelectorAll(`input[id*="${pattern}"], select[id*="${pattern}"], textarea[id*="${pattern}"], button[id*="${pattern}"]`).forEach((node) => {
@@ -117,6 +118,11 @@ export default class extends Controller {
       node.setAttribute('id', idValue.replace(pattern, replacement))
     })
 
+    // Search and replace pattern in templates
+    template.querySelectorAll('template').forEach((node) => {
+      node.innerHTML = node.innerHTML.replace(regex, replacement)
+    })
+
     // Replace labels
     template.querySelectorAll(`label[for*="${pattern}"]`).forEach((node) => {
       const forValue = node.getAttribute('for')

data/app/assets/javascripts/formstrap.js

@@ -11035,10 +11035,10 @@ var media_controller_default = class extends Controller {
     }
   }
   minActiveItems() {
-    return parseInt(this.element.dataset.min, 10) || 0;
+    return parseInt(this.validationInputTarget.dataset.min, 10) || 0;
   }
   maxActiveItems() {
-    return parseInt(this.element.dataset.max, 10) || Infinity;
+    return parseInt(this.validationInputTarget.dataset.max, 10) || Infinity;
   }
   resetPositions() {
     this.activeItems().forEach((item, index2) => {
@@ -11049,13 +11049,7 @@ var media_controller_default = class extends Controller {
     });
   }
   addNewItems(items) {
-    const itemTargetIds = this.itemTargets.map((i) => {
-      return parseInt(i.querySelectorAll("input")[1].value);
-    });
     items.forEach((item) => {
-      if (itemTargetIds.includes(item.blobId)) {
-        return;
-      }
       this.addItem(item);
     });
   }
@@ -11112,7 +11106,7 @@ var media_controller_default = class extends Controller {
       return e.blobId;
     });
     items.forEach((item) => {
-      const blobId = parseInt(item.querySelectorAll("input")[1].value);
+      const blobId = parseInt(item.querySelectorAll("input")[1].value, 10);
       if (returnedBlobIds.includes(blobId)) {
         return;
       }
@@ -11128,7 +11122,7 @@ var media_controller_default = class extends Controller {
   }
   itemByBlobId(blobId) {
     return this.itemTargets.find((item) => {
-      return item.querySelector("input[name*='blob_id']").value === blobId;
+      return parseInt(item.querySelector("input[name*='blob_id']").value, 10) === blobId;
     });
   }
   activeItems() {
@@ -11138,7 +11132,7 @@ var media_controller_default = class extends Controller {
   }
   activeIds() {
     return this.activeItems().map((item) => {
-      return item.querySelector("input[name$='[blob_id]']").value;
+      return parseInt(item.querySelector("input[name$='[blob_id]']").value, 10);
     });
   }
 };
@@ -11308,6 +11302,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 +11310,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");
   }
@@ -11361,7 +11368,7 @@ var nested_preview_controller_default = class extends Controller {
   validateFields() {
     let allValid = true;
     const fields = this.fieldsTarget;
-    const formElements = fields.querySelectorAll("input[name], select[name], textarea[name]");
+    const formElements = fields.querySelectorAll('input:not([type="hidden"]), select[name], textarea[name]');
     formElements.forEach(function(element) {
       const isValid = element.reportValidity();
       if (!isValid) {
@@ -11396,7 +11403,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 +11411,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"]');
@@ -13199,10 +13213,14 @@ var repeater_controller_default = class extends Controller {
   replaceIdsWithTimestamps(template) {
     const pattern = "rrrrrrrrr";
     const replacement = new Date().getTime().toString();
+    const regex = new RegExp(pattern, "g");
     template.querySelectorAll(`input[id*="${pattern}"], select[id*="${pattern}"], textarea[id*="${pattern}"], button[id*="${pattern}"]`).forEach((node) => {
       const idValue = node.getAttribute("id");
       node.setAttribute("id", idValue.replace(pattern, replacement));
     });
+    template.querySelectorAll("template").forEach((node) => {
+      node.innerHTML = node.innerHTML.replace(regex, replacement);
+    });
     template.querySelectorAll(`label[for*="${pattern}"]`).forEach((node) => {
       const forValue = node.getAttribute("for");
       node.setAttribute("for", forValue.replace(pattern, replacement));

data/app/helpers/application_helper.rb

@@ -1,14 +1,14 @@
 class ApplicationHelper
   def show_svg(attachment, options = {})
-    return if !attachment.content_type.include?('svg')
+    return if !attachment.content_type.include?("svg")
 
     attachment.open do |file|
       content = file.read
       doc = Nokogiri::HTML::DocumentFragment.parse content
-      svg = doc.at_css 'svg'
+      svg = doc.at_css "svg"
 
       # for security
-      doc.search('script').each do |src|
+      doc.search("script").each do |src|
         src.remove
       end
 
@@ -17,4 +17,4 @@ class ApplicationHelper
       doc.to_html.html_safe
     end
   end
-end
+end

data/app/models/formstrap/media_view.rb

@@ -19,8 +19,6 @@ module Formstrap
         data: {
           controller: "media",
           name: name,
-          min: min,
-          max: max,
           sort: sort,
           accept: accept,
           required: required.nil? ? 0 : required
@@ -31,7 +29,7 @@ module Formstrap
     def item_options
       options = {
         sort: sort,
-        url: modal_url,
+        url: modal_url
       }
 
       # Don't pass width or height if it was not defined
@@ -108,10 +106,10 @@ module Formstrap
     end
 
     def min
-      if @required
-        (@min.to_i < 1) ? 1 : @min.to_i
+      if @min.to_i < 1
+        @required ? 1 : 0
       else
-        (@min.to_i < 1) ? 0 : @min.to_i
+        @min.to_i
       end
     end
 
@@ -124,7 +122,14 @@ module Formstrap
     end
 
     def modal_url
-      formstrap_media_path(name: name, ids: blob_ids, min: min, max: max, mimetype: accept, exclude_models: exclude_models)
+      formstrap_media_path(
+        name: name,
+        ids: blob_ids,
+        min: min,
+        max: max,
+        mimetype: accept,
+        exclude_models: exclude_models
+      )
     end
 
     def edit_modal_url(attachment)

data/app/models/formstrap/thumbnail_view.rb

@@ -92,10 +92,10 @@ module Formstrap
       blob.open do |file|
         content = file.read
         doc = Nokogiri::HTML::DocumentFragment.parse content
-        svg = doc.at_css 'svg'
+        svg = doc.at_css "svg"
 
         # for security
-        doc.search('script').each do |src|
+        doc.search("script").each do |src|
           src.remove
         end
 

data/app/views/formstrap/media/_validation.html.erb

@@ -5,6 +5,8 @@
   class: "formstrap-media-validation",
   data: {
     "media-target": "validationInput",
+    "min": min,
+    "max": max,
     "min-message": t(".min", count: min),
     "max-message": t(".max", count: max),
   } %>

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/form_builder.rb

@@ -15,7 +15,7 @@ module Formstrap
       default_options = {
         data: {
           controller: "preview",
-          "preview-url-value":  options[:url]
+          "preview-url-value": options[:url]
         },
         type: nil
       }

data/lib/formstrap/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontierdotbe/formstrap",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "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.2
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-03-11 00:00:00.000000000 Z
+date: 2024-03-20 00:00:00.000000000 Z
 dependencies: []
 description: An extensive Bootstrap form library to power your Ruby On Rails application.
 email: