adi_matrix – Multi-article update tabs

phiw13 · 2025-02-12 08:28:16

Adi admin panel layout updated
Hive: dev.l-c-n.com/txp-4.9/adi_matrix_admin_hive.html
Sandspace: dev.l-c-n.com/txp-4.9/adi_matrix_admin.html

With theme Hive, the [type=text] input fields are a little out of alignment on my MBA. That’s is relatively easy to fix by adding the size=32 attribute/value pair. Then the stylesheet provides some constrains.

On the matrix panel, I’ve added a rule to constrain the width of the input and select fields
Hive: dev.l-c-n.com/txp-4.9/adi_matrix_hive.html
Sandspace: dev.l-c-n.com/txp-4.9/adi_matrix1.html

Bloke · 2025-02-12 08:44:04

Oooh they’re both brilliant. When I next get a chance, I’ll transpose your html into the plugin. Thank you so much for all your hard work on this.

giz · 2025-02-12 16:52:11

phiw13 wrote #339051:

Related: Is there some benefit in restricting the width of the input fields ([type=text], select), like setting some width or max-width? at present the only constrain is the max-width set in the admin theme.

Currently input and textareas are a headache to layout due to their size/row/cols attributes — a classic example being <input name="Title" type="text" id="title" size="64" maxlength="255">. In this instance, the size is too large to fit on a small screen, and requires css overrides to wrangle its width. The issue crops up with textareas in a variety of layout contexts.

Can we omit these attributes for generic fields, and leave the size of the field up to the css? Date, time etc. excepting…

Omitting the attributes will allow the browser to work out its own best fit unless overridden by css, so its an easy win.

Now now… That is quite a bit opinionated :-).

It doesn’t affect anything unless required by the window width; I plan on trialling this by only targeting tables with a parent of .txp-listtables.

phiw13 · 2025-02-13 00:46:06

giz wrote #339055:

Can we omit these attributes for generic fields, and leave the size of the field up to the css? Date, time etc. excepting…

I don’t really have a problem with removing the size attribute, it might be a good idea, for those textfields that use the size=32 value, to add a class though. Personally I don’t care if the attribute is there or not, the form controls need some sizing from within the stylesheet anyway.

The size attribute does not really apply to date, time, number, range, color types (it is “valid” because size is a global attribute but it does nothing).

Omitting the attributes will allow the browser to work out its own best fit unless overridden by css, so it’s an easy win.

The browser will render most of the fields with their default size (at default font-size a textarea or input type=text will render at ~160px width , unless specified by CSS.

Bloke · 2025-02-13 19:35:35

phiw13 wrote #339053:

Adi admin panel layout updated

I’m looking at this in more depth and there’s a bit of disconnect between how your demo renders and the actual thing works. The main issue is that I went with the path of least resistance, so it cheats and leaves the markup almost exactly as it was with all the matrices rendered on the page in a big list. The select list then simply shows/hides one at a time via JS. The upshot is that having the Save and Delete buttons at the bottom doesn’t work as seamlessly as it might appear.

The Save button saves everything – all matrices, hidden or not – so that will work no matter where it is on the page, as long as the form is targeted with a corresponding form attribute. The delete feature currently uses dLink() which is a handy shortcut for deleting this item but it’s not suited for being able to submit a link that then has to fetch additional parameters to know which thing to delete. It expects everything all bundled up in the atomic delete process (which is arguably how it should be). So we need a delete button per row.

To make it work like you have in your demo, the page needs converting to a more conventional “edit one at a time” view, like we have on our various edit panels in core. Then, with only one item selected via an id param in the URL, the save only saves the current one and the delete only deletes the current one. Simple.

That does have a few ramifications. If you simply switch the select list, you’ll lose anything you haven’t explicitly saved. Options to get round this are to somehow mark the panel as ‘dirty’ if you’ve changed anything and warn at that point, or make the select always throw an “are you sure” warning before switching, which could get tiring very quickly.

I’m not a fan of either approach and do like the simplicity of what is effectively Save All.

It might be possible to utilise <tfoot> to put the Save button there and have it show up all the time, so the select list only alters <tbody> to show the current item and hide the others. Or just chuck the button under the form and target the table/form to make it submit properly. Effectively, that’s what it does now, albeit the button is at the top. But we would need to use the same idea as now with a small ‘x’ or ‘delete’ function inside each row.

Is your mockup able to support that? And is it feasible with core markup/CSS, or does that require another custom rule?

Alternatively, is there a better way to handle the matrix admin panel? I don’t mind changing it to suit the best workflow, and if edit-only-one-at-a-time is the best way, then so be it. Guess it’s no different to editing a Form/Page/Style in core and then clicking another item from the sidebar without saving your progress: you lose what you’ve done, and no warning is emmitted. Hmmm…

phiw13 · 2025-02-14 01:46:09

1/ Putting back that little dlink() delete link as it existed before shouldn’t be a problem layout wise. – as first item of adi_matrix_row, which is the container for one matrix. Then that is repeated for all invisible matrixes set up boxes.

2/ for the Save button…

It might be possible to utilise <tfoot> to put the Save button there and have it show up all the time, so the select list only alters <tbody> to show the current item and hide the others. Or just chuck the button under the form and target the table/form to make it submit properly.

As there is no <table />, there is no <tfoot />, so that won’t work. Moving the Save button block under the form, preserving my mockup layout isn’t a problem. Visually nothing will change unless I miss something.

It adds just a couple of lines of css to allow the positioning of the button.

Mockup updated for Sandspace: dev.l-c-n.com/txp-4.9/adi_matrix_admin.html. There shouln’t be a problem for theme Hive rendering. I’ve added a border at the top of the matrix container to keep the delete widget visually connected to the matrix block.

The alternative as you say is a Pages panel model: the Save button, a “new” button (both inside a .txp-save-zone sticky panel), below a list of available matrix. And then replace the <textarea> with the matrix block as is now (enable flex-wrap to allow one column to drop to a second row if needed).

The current mockup works fine, 3column row, on a small iPad in portrait mode.

phiw13 · 2025-02-14 01:59:52

By the way, with PHP 8.4: when you edit nd Save on the Home > Matrix_name panel, some warning:

Multiple times (per date/time field ?):

8192 "strtotime(): Passing null to parameter #1 ($datetime) of type string is deprecated"
in /Users/usernameSites/txpdev/core_plugins/adi_matrix/adi_matrix.php at line 1610.
adminErrorHandler()
core_plugins/adi_matrix/adi_matrix.php:1610 strtotime()
core_plugins/adi_matrix/adi_matrix.php:2316 adi_matrix->validate_post_data()
textpattern/lib/txplib_misc.php:1660 adi_matrix->matrix_matrix()
textpattern/index.php:221 callback_event()

And many

Warning "compact(): Undefined variable $ID"
in /Users/username/Sites/txpdev/core_plugins/adi_matrix/adi_matrix.php at line 767.
adminErrorHandler()
core_plugins/adi_matrix/adi_matrix.php:767 compact()
core_plugins/adi_matrix/adi_matrix.php:924 adi_matrix->update_article()
core_plugins/adi_matrix/adi_matrix.php:2320 adi_matrix->update_articles()
textpattern/lib/txplib_misc.php:1660 adi_matrix->matrix_matrix()
textpattern/index.php:221 callback_event()

Warning "compact(): Undefined variable $exp_month"
in /Users/username/Sites/txpdev/core_plugins/adi_matrix/adi_matrix.php at line 767.

And many more, I got tired to scroll through the list.

Bloke · 2025-02-14 07:07:25

Thank you so much for the updated layout. That’s terrific. I’ll have a go at implementing that.

As for the bugs, I thought I fixed that compact() thing but I must have inadvertently re-hacked the line of code out that addresses it, oops. I’ll reintroduce it.

The null datetime thing I’ll have to track down. Thanks for the report.

giz · 2025-02-15 20:34:29

I installed your latest version on my test site; adi_matrix is moving along nicely :)

I’ve set up a test matrix which stresses the envelope by including everything and turning on all the options.

Can we include the Excerpt in Article Display? I’ve often found a need for this (maybe also the Body field?).

Would it be possible to move .adi_matrix_button before .txp-listtables in the node order? If its given a class of .txp-save-zone it’ll take on sticky qualities like on the content write page – useful when you’re working your way through editing a long matrix and want to save periodically.
If each row’s edit link is in its own cell, the table will adjust positioning automatically. Note: your .ui class is missing the -icon bit. Maybe it should just be a string ‘Edit’?
Can the form > h1 be given a class of .txp-heading so that picks up on styling cues set by the theme?

Bloke · 2025-02-15 20:43:35

I noticed the edit button was looking odd but figured it was a CSS thing above my pay grade. I’ll take a look. I probably missed something in the mockup code.

All the other stuff sounds like a plan. Thanks for looking. I’ll work on it.

Bloke · 2025-02-15 21:14:21

P.S. I haven’t tested this at all with glz_cf yet so it might be seriously wonky there. If anyone has any feedback on how they interplay (or don’t), that’d be terrific.

Bloke · 2025-02-15 22:39:59

giz wrote #339062:

Would it be possible to move .adi_matrix_button before .txp-listtables in the node order? If its given a class of .txp-save-zone it’ll take on sticky qualities like on the content write page

Hmmm. What should the surrounding markup be? It seems to only work properly if there’s a txp-layout-4col-3span / txp-layout-4col-alt split and it’s added to the sidebar. By moving it immediately below the heading and giving it the txp-save-zone class, it renders a sort of ‘cup’ U-shaped border to the zone and squishes it up like this:

//imgur.com/a/qhwdT6u

Textpattern CMS

Textpattern CMS support forum

#229 2025-02-12 08:28:16

Re: adi_matrix – Multi-article update tabs

#230 2025-02-12 08:44:04

Re: adi_matrix – Multi-article update tabs

#231 2025-02-12 16:52:11

Re: adi_matrix – Multi-article update tabs

phiw13 wrote #339051:

#232 2025-02-13 00:46:06

Re: adi_matrix – Multi-article update tabs

giz wrote #339055:

#233 2025-02-13 19:35:35

Re: adi_matrix – Multi-article update tabs

phiw13 wrote #339053:

#234 2025-02-14 01:46:09

Re: adi_matrix – Multi-article update tabs

#235 2025-02-14 01:59:52

Re: adi_matrix – Multi-article update tabs

#236 2025-02-14 07:07:25

Re: adi_matrix – Multi-article update tabs

#237 2025-02-15 20:34:29

Re: adi_matrix – Multi-article update tabs

#238 2025-02-15 20:43:35

Re: adi_matrix – Multi-article update tabs

#239 2025-02-15 21:14:21

Re: adi_matrix – Multi-article update tabs

#240 2025-02-15 22:39:59

Re: adi_matrix – Multi-article update tabs

giz wrote #339062:

Board footer