formstrap 0.4.0 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4dc719e94a4901d00b1b1cfce0d9c6a36653ec1bf706b56d689092db97b278d
-  data.tar.gz: 902aab69bbe1517164fd888d55a4a881522a4e313cbe77b2596486711912ca1c
+  metadata.gz: ee49a6e7a9f068d3403b4ebfd46c19cf07b6c293e8893f1e561e8ae20ed0af77
+  data.tar.gz: f85517d919e6c9360ac31c7f1aa7b8f2ff3705ea31a2a6a76f0b72ae82f58c30
 SHA512:
-  metadata.gz: 2691612aa8b8a8362495627b48cd7008e88f510a7b285242e8413111599a685fd05bcc6babd241f7d4b98456e4d31b465e1be0b4549672a2e320c1a4ac3650d7
-  data.tar.gz: 707a301d754f4bb13280c008994b6971b4844698206b6d1a7bd3537c794c5d2e90c76d50dc9351956661be43831dc1c8d64fd31fe177f1ad47e6eb5b450b387e
+  metadata.gz: ab80f8fd25603f0c9ce6f5ea6c92dc025b62f7b932f0b0e7bd7867bd4432845f902a6f5f7ba6492a6455ae9f3eb93fe411497a9dc2cf346538e3a610a05fd253
+  data.tar.gz: a5db302d1730c5f0cb801ddf248d24a0c5111ec0f8ae6d7aaa24d5a36c0e50913f1939a71df275c47429016162b59e47024a4be0e186e23b661c3393321cb9e4

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

@@ -1,23 +1,22 @@
+/* global crypto */
 import { Controller } from '@hotwired/stimulus'
 import Sortable from 'sortablejs'
 
 export default class extends Controller {
+  static get values () {
+    return {
+      name: String
+    }
+  }
+
   static get targets () {
     return ['item', 'template', 'thumbnails', 'modalButton', 'placeholder', 'count', 'editButton', 'validationInput']
   }
 
   connect () {
-    document.addEventListener('mediaSelectionSubmitted', (event) => {
-      if (event.detail.name === this.element.dataset.name) {
-        this.selectItems(event.detail.items)
-      }
-    })
-
-    // Init sorting
-    if (this.hasSorting()) {
-      this.initSortable()
-    }
-
+    this.randomizeName()
+    this.listenForMediaSelection()
+    this.initializeSorting()
     this.validate()
   }
 
@@ -47,6 +46,34 @@ export default class extends Controller {
   }
 
   // Methods
+  randomizeName () {
+    this.nameValue = crypto.randomUUID().substring(0, 8)
+    this.updateModalButtonUrls()
+  }
+
+  updateModalButtonUrls () {
+    this.modalButtonTargets.forEach((button) => {
+      const url = new URL(button.getAttribute('href'))
+      url.searchParams.set('name', this.nameValue)
+      button.setAttribute('href', url.toString())
+    })
+  }
+
+  listenForMediaSelection () {
+    document.addEventListener('mediaSelectionSubmitted', (event) => {
+      if (event.detail.name === this.nameValue) {
+        this.selectItems(event.detail.items)
+        this.updateModalButtonUrls()
+      }
+    })
+  }
+
+  initializeSorting () {
+    if (this.hasSorting()) {
+      this.initSortable()
+    }
+  }
+
   initSortable () {
     Sortable.create(this.thumbnailsTarget, {
       handle: '.media-drag-sort-handle',
@@ -170,9 +197,8 @@ export default class extends Controller {
 
   createItem (item) {
     // Copy template
-    const template = this.templateTarget
-    const html = this.randomizeIds(template)
-    this.thumbnailsTarget.insertAdjacentHTML('beforeend', html)
+    const templateHtml = this.templateTarget.innerHTML
+    this.thumbnailsTarget.insertAdjacentHTML('beforeend', templateHtml)
 
     // Set new values
     const newItem = this.itemTargets.pop()
@@ -191,12 +217,6 @@ export default class extends Controller {
     oldThumbnail.parentNode.replaceChild(newThumbnail, oldThumbnail)
   }
 
-  randomizeIds (template) {
-    const regex = new RegExp(template.dataset.templateIdRegex, 'g')
-    const randomNumber = Math.floor(100000000 + Math.random() * 900000000)
-    return template.innerHTML.replace(regex, randomNumber)
-  }
-
   removeAllDeselectedItems (items) {
     this.removeDeselectedItems(items, this.itemTargets)
   }

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

@@ -126,7 +126,8 @@ export default class extends Controller {
     const formData = new FormData()
 
     // Replace all occurrences of "page[blocks_attributes][0]" with "block"
-    const regex = /\w+\[([^\]]+)s_attributes]\[\d+]/g
+    // Replace all occurrences of "form[fields_attributes][random]" with "field"
+    const regex = /\w+\[([^\]]+)s_attributes]\[[^\]]+]/g
     const formElements = fields.querySelectorAll('input[name]:not([name$="[id]"]), select[name]:not([name$="[id]"]), textarea[name]:not([name$="[id]"]), button[name]:not([name$="[id]"])')
     formElements.forEach((element) => {
       const currentName = element.getAttribute('name')

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

@@ -1,3 +1,4 @@
+/* global crypto */
 import { Controller } from '@hotwired/stimulus'
 import Sortable from 'sortablejs'
 
@@ -23,7 +24,6 @@ export default class extends Controller {
         this.resetPositions()
       }
     })
-
     this.toggleEmpty()
   }
 
@@ -38,8 +38,7 @@ export default class extends Controller {
   }
 
   updatePopupButtonIndices (index) {
-    const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`)
-    const buttons = popup.querySelectorAll('[data-popup-target="button"]')
+    const buttons = document.querySelectorAll(`[data-popup-target="button"][data-popup-id="repeater-buttons-${this.idValue}"]`)
     buttons.forEach((button) => {
       button.dataset.rowIndex = index
     })
@@ -53,7 +52,7 @@ export default class extends Controller {
 
     // Prepare html from template
     let template = this.getTemplate(templateName).content.cloneNode(true)
-    template = this.replaceIdsWithTimestamps(template)
+    template = this.randomizeIds(template)
 
     // Fallback to last row if no index is set
     if (rowIndex) {
@@ -107,44 +106,24 @@ export default class extends Controller {
     })[0]
   }
 
-  replaceIdsWithTimestamps (template) {
-    const pattern = 'rrrrrrrrr'
-    const replacement = new Date().getTime().toString()
+  randomizeIds (template) {
+    const randomNumber = crypto.randomUUID().substring(0, 8)
+    const pattern = `_${this.idValue}_`
     const regex = new RegExp(pattern, 'g')
 
-    // Replace ids
-    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))
-    })
-
-    // 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')
-      node.setAttribute('for', forValue.replace(pattern, replacement))
-    })
-
-    // Replace names
-    template.querySelectorAll(`input[name*="${pattern}"], select[name*="${pattern}"], textarea[name*="${pattern}"], button[name*="${pattern}"]`).forEach((node) => {
-      const nameValue = node.getAttribute('name')
-      node.setAttribute('name', nameValue.replace(pattern, replacement))
-    })
-
-    // Replace offcanvas targets
-    template.querySelectorAll(`div[data-bs-target="#offcanvas-${pattern}"]`).forEach((node) => {
-      const targetValue = node.getAttribute('data-bs-target')
-      node.setAttribute('data-bs-target', targetValue.replace(pattern, replacement))
-    })
+    // Loop through each node in the template
+    template.querySelectorAll('*').forEach(node => {
+      // Replace attribute values
+      for (const attribute of node.attributes) {
+        if (attribute.value.includes(pattern)) {
+          attribute.value = attribute.value.replace(pattern, randomNumber)
+        }
+      }
 
-    // Replace offcanvas ids
-    template.querySelectorAll(`.offcanvas[id="offcanvas-${pattern}"]`).forEach((node) => {
-      const idValue = node.getAttribute('id')
-      node.setAttribute('id', idValue.replace(pattern, replacement))
+      // Replace template content
+      if (node.nodeName === 'TEMPLATE' && node.innerHTML.includes(pattern)) {
+        node.innerHTML = node.innerHTML.replace(regex, randomNumber)
+      }
     })
 
     return template

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

@@ -4,7 +4,7 @@ import I18n from '../config/i18n'
 
 export default class extends Controller {
   connect () {
-    if (this.element.hasAttribute('multiple')) {
+    if (this.element.hasAttribute('multiple') || this.element.dataset.tomSelect === 'true') {
       this.initTomSelect()
     }
   }

data/app/assets/javascripts/formstrap.js

@@ -11076,18 +11076,18 @@ var sortable_esm_default = Sortable;
 
 // app/assets/javascripts/formstrap/controllers/media_controller.js
 var media_controller_default = class extends Controller {
+  static get values() {
+    return {
+      name: String
+    };
+  }
   static get targets() {
     return ["item", "template", "thumbnails", "modalButton", "placeholder", "count", "editButton", "validationInput"];
   }
   connect() {
-    document.addEventListener("mediaSelectionSubmitted", (event) => {
-      if (event.detail.name === this.element.dataset.name) {
-        this.selectItems(event.detail.items);
-      }
-    });
-    if (this.hasSorting()) {
-      this.initSortable();
-    }
+    this.randomizeName();
+    this.listenForMediaSelection();
+    this.initializeSorting();
     this.validate();
   }
   destroy(event) {
@@ -11106,6 +11106,30 @@ var media_controller_default = class extends Controller {
       button.setAttribute("href", url.toString());
     });
   }
+  randomizeName() {
+    this.nameValue = crypto.randomUUID().substring(0, 8);
+    this.updateModalButtonUrls();
+  }
+  updateModalButtonUrls() {
+    this.modalButtonTargets.forEach((button) => {
+      const url = new URL(button.getAttribute("href"));
+      url.searchParams.set("name", this.nameValue);
+      button.setAttribute("href", url.toString());
+    });
+  }
+  listenForMediaSelection() {
+    document.addEventListener("mediaSelectionSubmitted", (event) => {
+      if (event.detail.name === this.nameValue) {
+        this.selectItems(event.detail.items);
+        this.updateModalButtonUrls();
+      }
+    });
+  }
+  initializeSorting() {
+    if (this.hasSorting()) {
+      this.initSortable();
+    }
+  }
   initSortable() {
     sortable_esm_default.create(this.thumbnailsTarget, {
       handle: ".media-drag-sort-handle",
@@ -11197,9 +11221,8 @@ var media_controller_default = class extends Controller {
     item.classList.remove("d-none");
   }
   createItem(item) {
-    const template = this.templateTarget;
-    const html = this.randomizeIds(template);
-    this.thumbnailsTarget.insertAdjacentHTML("beforeend", html);
+    const templateHtml = this.templateTarget.innerHTML;
+    this.thumbnailsTarget.insertAdjacentHTML("beforeend", templateHtml);
     const newItem = this.itemTargets.pop();
     newItem.querySelector('input[name*="[blob_id]"]').value = item.blobId;
     newItem.querySelector('input[name*="[_destroy]"]').value = false;
@@ -11211,11 +11234,6 @@ var media_controller_default = class extends Controller {
     const newThumbnail = item.thumbnail.cloneNode(true);
     oldThumbnail.parentNode.replaceChild(newThumbnail, oldThumbnail);
   }
-  randomizeIds(template) {
-    const regex = new RegExp(template.dataset.templateIdRegex, "g");
-    const randomNumber = Math.floor(1e8 + Math.random() * 9e8);
-    return template.innerHTML.replace(regex, randomNumber);
-  }
   removeAllDeselectedItems(items) {
     this.removeDeselectedItems(items, this.itemTargets);
   }
@@ -11498,7 +11516,7 @@ var nested_preview_controller_default = class extends Controller {
   buildFormData() {
     const fields = this.fieldsTarget;
     const formData = new FormData();
-    const regex = /\w+\[([^\]]+)s_attributes]\[\d+]/g;
+    const regex = /\w+\[([^\]]+)s_attributes]\[[^\]]+]/g;
     const formElements = fields.querySelectorAll('input[name]:not([name$="[id]"]), select[name]:not([name$="[id]"]), textarea[name]:not([name$="[id]"]), button[name]:not([name$="[id]"])');
     formElements.forEach((element) => {
       const currentName = element.getAttribute("name");
@@ -13276,8 +13294,7 @@ var repeater_controller_default = class extends Controller {
     return this.rowTargets.includes(row);
   }
   updatePopupButtonIndices(index2) {
-    const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`);
-    const buttons = popup.querySelectorAll('[data-popup-target="button"]');
+    const buttons = document.querySelectorAll(`[data-popup-target="button"][data-popup-id="repeater-buttons-${this.idValue}"]`);
     buttons.forEach((button) => {
       button.dataset.rowIndex = index2;
     });
@@ -13288,7 +13305,7 @@ var repeater_controller_default = class extends Controller {
     const templateName = button.dataset.templateName;
     const rowIndex = button.dataset.rowIndex;
     let template = this.getTemplate(templateName).content.cloneNode(true);
-    template = this.replaceIdsWithTimestamps(template);
+    template = this.randomizeIds(template);
     if (rowIndex) {
       const row = this.rowTargets[rowIndex];
       this.listTarget.insertBefore(template, row.nextSibling);
@@ -13324,32 +13341,19 @@ var repeater_controller_default = class extends Controller {
       return template.dataset.templateName === name;
     })[0];
   }
-  replaceIdsWithTimestamps(template) {
-    const pattern = "rrrrrrrrr";
-    const replacement = new Date().getTime().toString();
+  randomizeIds(template) {
+    const randomNumber = crypto.randomUUID().substring(0, 8);
+    const pattern = `_${this.idValue}_`;
     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));
-    });
-    template.querySelectorAll(`input[name*="${pattern}"], select[name*="${pattern}"], textarea[name*="${pattern}"], button[name*="${pattern}"]`).forEach((node) => {
-      const nameValue = node.getAttribute("name");
-      node.setAttribute("name", nameValue.replace(pattern, replacement));
-    });
-    template.querySelectorAll(`div[data-bs-target="#offcanvas-${pattern}"]`).forEach((node) => {
-      const targetValue = node.getAttribute("data-bs-target");
-      node.setAttribute("data-bs-target", targetValue.replace(pattern, replacement));
-    });
-    template.querySelectorAll(`.offcanvas[id="offcanvas-${pattern}"]`).forEach((node) => {
-      const idValue = node.getAttribute("id");
-      node.setAttribute("id", idValue.replace(pattern, replacement));
+    template.querySelectorAll("*").forEach((node) => {
+      for (const attribute of node.attributes) {
+        if (attribute.value.includes(pattern)) {
+          attribute.value = attribute.value.replace(pattern, randomNumber);
+        }
+      }
+      if (node.nodeName === "TEMPLATE" && node.innerHTML.includes(pattern)) {
+        node.innerHTML = node.innerHTML.replace(regex, randomNumber);
+      }
     });
     return template;
   }
@@ -13388,7 +13392,7 @@ var repeater_controller_default = class extends Controller {
 var import_tom_select = __toESM(require_tom_select_complete());
 var select_controller_default = class extends Controller {
   connect() {
-    if (this.element.hasAttribute("multiple")) {
+    if (this.element.hasAttribute("multiple") || this.element.dataset.tomSelect === "true") {
       this.initTomSelect();
     }
   }

data/app/assets/stylesheets/formstrap/vendor/overrides/redactor.scss

@@ -15,7 +15,6 @@
 }
 
 .rx-container {
-  overflow: hidden;
   padding: 0 !important;
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);

data/app/assets/stylesheets/formstrap.css

@@ -1299,7 +1299,6 @@ span.flatpickr-weekday {
   --bs-input-focus-color: var(--bs-body-color);
 }
 .rx-container {
-  overflow: hidden;
   padding: 0 !important;
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);

data/app/models/formstrap/media_view.rb

@@ -18,7 +18,6 @@ module Formstrap
         class: ["mb-3", ("form-floating" if float)],
         data: {
           controller: "media",
-          name: name,
           sort: sort,
           accept: accept,
           required: required.nil? ? 0 : required
@@ -122,7 +121,7 @@ module Formstrap
     end
 
     def modal_url
-      formstrap_media_path(
+      formstrap_media_url(
         name: name,
         ids: blob_ids,
         min: min,

data/app/models/formstrap/redactor_view.rb

@@ -28,8 +28,6 @@ module Formstrap
         theme: "light",
         # Popup when highlighting text
         context: false,
-        # Top toolbar
-        toolbar: true,
         popups: {
           # Options in addbar popup (press + button)
           addbar: %w[format bold italic deleted list table link embed],

data/app/models/formstrap/wysiwyg_view.rb

@@ -11,13 +11,16 @@ module Formstrap
     end
 
     def default_options
-      {
+      options = {
         redactor: {
           context: !toolbar,
           extrabar: toolbar,
-          toolbar: toolbar
         }
       }
+
+      options[:redactor][:toolbar] = false if @toolbar == false
+
+      options
     end
   end
 end

data/app/views/formstrap/_repeater.html.erb

@@ -106,8 +106,9 @@
       class="btn btn-sm btn-outline-secondary"
       data-repeater-target="addButton"
       data-popup-target="button"
-      data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+      data-popup-id="repeater-buttons-<%= repeater_id %>"
       data-popup-pass-thru="<%= pass_thru %>"
+      data-row-index=""
       data-action="click->repeater#resetButtonIndices click->popup#open"
     >
       <%= bootstrap_icon("plus") %>
@@ -121,7 +122,7 @@
           <div
             class="btn btn-sm btn-outline-secondary"
             data-popup-target="button"
-            data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+            data-popup-id="repeater-buttons-<%= repeater_id %>"
             data-action="click->repeater#addRow click->popup#close"
             data-row-index=""
             data-template-name="<%= name %>"
@@ -135,7 +136,7 @@
     <!-- Templates -->
     <% template_names.each do |template_name| %>
       <template data-repeater-target="template" data-template-name="<%= template_name %>">
-        <%= form.fields_for attribute, association_object, child_index: "rrrrrrrrr" do |ff| %>
+        <%= form.fields_for attribute, association_object, child_index: "_#{repeater_id}_" do |ff| %>
           <%= render "formstrap/repeater/row", row_options.merge(form: ff, pass_thru: pass_thru, repeater_id: repeater_id, index: nil, template_name: template_name) do %>
             <%= yield(ff, template_name) %>
           <% end %>

data/app/views/formstrap/repeater/_row.html.erb

@@ -41,7 +41,7 @@
     title="<%= t(".add") %>"
     data-repeater-target="addButton"
     data-popup-target="button"
-    data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+    data-popup-id="repeater-buttons-<%= repeater_id %>"
     data-popup-pass-thru="<%= pass_thru %>"
     data-action="click->repeater#resetButtonIndices click->popup#open"
   >

data/lib/formstrap/version.rb

@@ -1,3 +1,3 @@
 module Formstrap
-  VERSION = "0.4.0"
+  VERSION = "0.4.2"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontierdotbe/formstrap",
-  "version": "0.3.4",
+  "version": "0.4.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.4.0
+  version: 0.4.2
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-05-09 00:00:00.000000000 Z
+date: 2024-06-27 00:00:00.000000000 Z
 dependencies: []
 description: An extensive Bootstrap form library to power your Ruby On Rails application.
 email: