para 0.12.2 → 0.12.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5f4c1a9a889b3800d615452bda318bac05fc3d49b88c612af3cd2a714cb3fe8
-  data.tar.gz: a665a5affd7b2a3938baf185c41221eed335b42be7dabf8ff1d17145212dfecb
+  metadata.gz: 9a6fa08f8df1085f17f1f988dc1059f8442179e0d11e1fea66cfb6f1206f3c0a
+  data.tar.gz: 53e0d26aa54c3402b3bb1ab78283a23802f151cf60cc139a354c177f103d6824
 SHA512:
-  metadata.gz: 7a71ed497361f0b442965a7331159d9c2c2dfd7f745674f8698f446e1a6651f3bdfacd96f314f2e00d657ba13390f55ca317221aca45284d6770419bd820be79
-  data.tar.gz: 6e1bb4347edeacd0f067dc401e77ce72926ed9ae9d4e61326799376d3ca7063db196a275c58b79d96c29e21ba5004d56f8cdbb976c98dfac22f91522b352955a
+  metadata.gz: 22fd8dca678dd2d10589dcf7ebd06098ae3c8901f0b00643fedbf698ee3772ec74eb1ef74df4acf930cf99028ca8b8423408922d2450434f222b68e64bd927b9
+  data.tar.gz: b7be03740c3004f80ece9fb7b3662e4fcbaec530603af948c6d805e68cb09bfce3e15231b7e39a6203eeb68244807797fa80c2d032d94928aef0f4690d48bb4e

data/app/javascripts/para/controllers/index.js

@@ -8,3 +8,6 @@ application.register("para-admin-flash-message", ParaAdminFlashMessageController
 
 import SelectizeFieldController from "./selectize_field_controller";
 application.register("selectize-field", SelectizeFieldController);
+
+import NestedManyInputController from "./nested_many_input_controller";
+application.register("nested-many-input", NestedManyInputController);

data/app/javascripts/para/{inputs/nested_many.js → controllers/nested_many_input_controller.js}

@@ -1,52 +1,70 @@
-Para.NestedManyField = class NestedManyField {
-  constructor($field1) {
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  connect() {
     this.stoppingPropagation = this.stoppingPropagation.bind(this);
     this.afterInsertField = this.afterInsertField.bind(this);
     this.beforeRemoveField = this.beforeRemoveField.bind(this);
-    // When a sub field is removed, update every sub field position
+    this.handleOrderingUpdated = this.handleOrderingUpdated.bind(this);
     this.afterRemoveField = this.afterRemoveField.bind(this);
     this.collapseShown = this.collapseShown.bind(this);
-    this.$field = $field1;
+
+    this.$field = $(this.element);
     this.$fieldsList = this.$field.find('.fields-list');
-    this.initializeOrderable();
+    this.initializeSortable();
     this.initializeCocoon();
     this.$field.on('shown.bs.collapse', this.stoppingPropagation(this.collapseShown));
   }
 
-  initializeOrderable() {
-    this.orderable = this.$field.hasClass('orderable');
-    if (!this.orderable) {
-      return;
-    }
+  initializeSortable() {
+    this.isSortable = this.$field.hasClass('orderable');
+
+    if (!this.isSortable) return;
+
     return this.$fieldsList.sortable({
       handle: '.order-anchor',
       animation: 150,
-      onUpdate: $.proxy(this.handleOrderingUpdated, this)
+      onUpdate: this.handleOrderingUpdated
     });
   }
 
   handleOrderingUpdated() {
     var formFields;
     formFields = [];
+
     return this.$fieldsList.find('.form-fields:visible').each(function(_i, el) {
-      var $el, $parent, isNestedField, j, len;
+      let $parent, isNestedField, j, len;
+
       for (j = 0, len = formFields.length; j < len; j++) {
         $parent = formFields[j];
         isNestedField = $parent.find(el).length;
       }
+
       if (isNestedField) {
         return;
       }
-      $el = $(el);
+
+      const $el = $(el);
       $el.find('.resource-position-field:eq(0)').val(formFields.length);
       return formFields.push($el);
     });
   }
 
   initializeCocoon() {
-    this.$fieldsList.on('cocoon:after-insert', this.stoppingPropagation(this.afterInsertField));
-    this.$fieldsList.on('cocoon:before-remove', this.stoppingPropagation(this.beforeRemoveField));
-    return this.$fieldsList.on('cocoon:after-remove', this.stoppingPropagation(this.afterRemoveField));
+    this.$fieldsList.on(
+      'cocoon:after-insert', 
+      this.stoppingPropagation(this.afterInsertField)
+    );
+
+    this.$fieldsList.on(
+      'cocoon:before-remove', 
+      this.stoppingPropagation(this.beforeRemoveField)
+    );
+
+    return this.$fieldsList.on(
+      'cocoon:after-remove', 
+      this.stoppingPropagation(this.afterRemoveField)
+    );
   }
 
   stoppingPropagation(callback) {
@@ -61,9 +79,9 @@ Para.NestedManyField = class NestedManyField {
     if (($collapsible = $element.find('[data-open-on-insert="true"]')).length) {
       this.openInsertedField($collapsible);
     }
-    if (this.orderable) {
+    if (this.isSortable) {
       this.$fieldsList.sortable('destroy');
-      this.initializeOrderable();
+      this.initializeSortable();
       this.handleOrderingUpdated();
     }
     return $element.simpleForm();
@@ -90,22 +108,24 @@ Para.NestedManyField = class NestedManyField {
   }
 
   collapseShown(e) {
-    var $target;
-    $target = $(e.target);
-    if ($target.is("[data-rendered]") || $target.data("rendered")) {
-      return this.initializeCollapseContent($target);
+    const { target } = e;
+
+    if (target.dataset.isRendered) {
+      return this.initializeCollapseContent(target);
     } else {
-      this.loadCollapseContent($target);
-      return this.scrollToTarget($target);
+      this.loadCollapseContent(target);
+      return this.scrollToTarget(target);
     }
   }
 
-  initializeCollapseContent($target) {
-    this.scrollToTarget($target);
-    return this.focusFirstField($target);
+  initializeCollapseContent(target) {
+    this.scrollToTarget(target);
+    return this.focusFirstVisibleInputInside(target);
   }
 
-  scrollToTarget($target) {
+  scrollToTarget(target) {
+    const $target = $(target);
+
     var $affixNavTabs, $field, scrollOffset;
     $field = this.$field.find(`[data-toggle='collapse'][href='#${$target.attr('id')}']`);
     scrollOffset = -($('[data-header]').outerHeight() + 30);
@@ -117,35 +137,32 @@ Para.NestedManyField = class NestedManyField {
     });
   }
 
-  focusFirstField($target) {
-    return $target.find('input, textarea, select').eq('0').focus();
+  focusFirstVisibleInputInside(target) {
+    setTimeout(() => {
+      target.querySelector('input:not([type="hidden"]), textarea, select')?.focus();
+    }, 100);
   }
 
-  loadCollapseContent($target) {
-    var data, targetUrl;
-    targetUrl = $target.data("render-path");
-    if (!targetUrl) {
-      return;
-    }
-    data = {
-      "id": $target.data("id"),
-      "object_name": $target.data("object-name"),
-      "model_name": $target.data("model-name")
+  loadCollapseContent(target) {
+    const $target = $(target);
+    const targetUrl = target.dataset.renderPath;
+
+    if (!targetUrl) return;
+
+    const data = {
+      id: target.dataset.id,
+      object_name: target.dataset.objectName,
+      model_name: target.dataset.modelName
     };
-    return $.get(targetUrl, data).then((resp) => {
-      var $content;
-      $content = $(resp);
-      $target.find("[data-nested-form-container]:eq(0)").html($content);
+
+    $.get(targetUrl, data).then((resp) => {
+      const $content = $(resp);
+      $target.find('[data-nested-form-container]:eq(0)').html($content);
       $content.simpleForm();
-      this.focusFirstField($target);
-      return $target.data("rendered", true);
+
+      this.focusFirstVisibleInputInside(target);
+      
+      target.dataset.isRendered = true;
     });
   }
-
 };
-
-$.simpleForm.onDomReady(function($document) {
-  return $document.find('.nested-many-field').each(function(i, el) {
-    return new Para.NestedManyField($(el));
-  });
-});

data/app/javascripts/para/index.js

@@ -14,9 +14,7 @@ import "./vendor/jquery.sortable";
 
 import "./application";
 
-import "./inputs/material-input";
 import "./inputs/multi-select-input";
-import "./inputs/nested_many";
 
 import "./admin/async-progress";
 import "./admin/filters-form";

data/app/views/para/inputs/_nested_many.html.haml

@@ -1,4 +1,4 @@
-.nested-many-field{ class: [('orderable' if orderable), ('nested-many-field-inset' if inset)] }
+.nested-many-field{ class: [('orderable' if orderable), ('nested-many-field-inset' if inset)], data: { controller: "nested-many-input" } }
   .fields-list{ id: dom_identifier }
     = form.simple_fields_for attribute_name, resources, nested_attribute_name: attribute_name, orderable: orderable, track_attribute_mappings: render_partial do |nested_form|
       = render partial: find_partial_for(model, 'nested_many/container', partial_dir: 'inputs'), locals: { form: nested_form, model: nested_form.object.class, subclass: subclass, allow_destroy_if: allow_destroy_if, nested_locals: nested_locals, inset: inset, uncollapsed: uncollapsed, render_partial: render_partial, remote_partial_params: remote_partial_params }

data/app/views/para/inputs/nested_many/_container.html.haml

@@ -11,7 +11,7 @@
 
     = form.remove_association_button(allow_destroy_if: allow_destroy_if)
 
-  .panel-collapse.form-inputs.collapse{ id: form.nested_resource_dom_id, class: ('in' if uncollapsed && form.object.persisted?), data: { rendered: render_partial, render_path: @component.path(**remote_partial_params), id: form.object.id, :"object-name" => form.object_name, :"model-name" => model.name } }
+  .panel-collapse.form-inputs.collapse{ id: form.nested_resource_dom_id, class: ('in' if uncollapsed && form.object.persisted?), data: { is_rendered: (render_partial && "true"), render_path: @component.path(**remote_partial_params), id: form.object.id, :"object-name" => form.object_name, :"model-name" => model.name } }
     .panel-body{ data: { :"nested-form-container" => true } }
       - if render_partial
         = render partial: find_partial_for(model, form.nested_fields_partial_name), locals: { form: form }.merge(nested_locals)

data/lib/para/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Para
-  VERSION = '0.12.2'
+  VERSION = '0.12.4'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: para
 version: !ruby/object:Gem::Version
-  version: 0.12.2
+  version: 0.12.4
 platform: ruby
 authors:
 - Valentin Ballestrino
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-26 00:00:00.000000000 Z
+date: 2024-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: active_decorator
@@ -479,13 +479,12 @@ files:
 - app/javascripts/para/application.js
 - app/javascripts/para/controllers/application.js
 - app/javascripts/para/controllers/index.js
+- app/javascripts/para/controllers/nested_many_input_controller.js
 - app/javascripts/para/controllers/para_admin_flash_message_controller.js
 - app/javascripts/para/controllers/para_admin_modal_controller.js
 - app/javascripts/para/controllers/selectize_field_controller.js
 - app/javascripts/para/index.js
-- app/javascripts/para/inputs/material-input.js
 - app/javascripts/para/inputs/multi-select-input.js
-- app/javascripts/para/inputs/nested_many.js
 - app/javascripts/para/lib/fetch.js
 - app/javascripts/para/plugins-includes.js.erb
 - app/javascripts/para/simple_form_extension/colorpicker.js
@@ -793,7 +792,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.8
+rubygems_version: 3.5.17
 signing_key:
 specification_version: 4
 summary: Rails admin engine

data/app/javascripts/para/inputs/material-input.js

@@ -1,7 +0,0 @@
-$(document).on('page:change turbo:load turbo:frame-load', function() {
-  return $('body').on('focusin focusout', 'input, select, textarea', function(e) {
-    var focused;
-    focused = e.type === 'focusin';
-    return $(e.target).closest('.form-group').toggleClass('focused', focused);
-  });
-});