Unlimited nested structure field with inline data - An impossible task to solve?

Kirby 2 Questions 🤔
1

I’ve been thinking about the idea of a more advanced structure field with unlimited nesting and inline data. The more I think about it, the more I feel that it’s an impossible task to solve.

Let’s say I would try to build a new advanced structure field as a plugin…

Nesting

If I implemented unlimited nesting I would get all kinds of problems, especially with the dom.

<div class="field">
  <div class="field">
    <div class="field">
    </div>
  </div>
</div>

Javascript and css

First of all, nested fields in the dom could possibly mess up jQuery dom nodes. Then css could be messed up as well. It could probably be solved in a good way for built in fields, but my guess is that many of the plugin fields will stop working.

Inline content

Now a modal is used to separate the structure field from the page form. To use inline content will create new problems.

Generate subfields with javascript?

One problem is that it needs to generate the data to a hidden field, probably rely on javascript. If something goes wrong many subfields in the structure field will not be saved.

Validation

Another problem is form validation. If we generate everything with javascript to a hidden field, how could it take validation into account? Maybe a custom javascript validation is required. That would require more work.

It seems like this solution is less reliable than a modal.

Summery

To have everything in a single form, including nesting does not seems to be as reliable as a modal. Some possible problems could be:

  • jQuery dom nodes
  • Css
  • Form validation
  • Javascript data generation
  • Plugin fields compability

Do you think it’s possible to make an awesome structure field with nesting and inline data?

  • Yes, tell us your thoughts
  • No

0 voters

Show results
2

No replys?

I think I have a solution in mind. I think every problem I listed can be solved with iframes.

Nesting - Solved with iframes

If we use iframes to show the fields, similar to how the modal work, the fields will not interfere with its parent because an iframe is isolated from everything else.

The nested element display output can still be added as nested, but not the iframes/fields.

It will also solve the javascript and css problems.

Inline content - Solved with iframes

Just like the modals work today, an iframe can be used to submit form data in an own environment that will then be pushed out when added.

It will also solve the validation problem.

Issues with an iframe

  • It can’t auto resize when the content changes. It needs to be done with javascript.
  • It’s a bit hard to work with javascript and css from outside the iframe to control the inside.
  • It’s hard to handle events from the outside of an iframe.

All of these are possible to solve with some settimeout check, even if it’s a bit hacky.

I’ve started testing

I’ve done some early tests, but because I don’t know if I want to do it, I’ve stopped.