adi_matrix – Multi-article update tabs

giz · 2025-02-24 19:43:24

My inline css for textareas have disappeared, with or without glz_cf (must have been user error!).

The plugin behaves itself apart from one layout glitch I get in Hive 4.9; .adi_matrix_admin_delete is displayed hard top-right, superimposed over the .adi_matrix_row top border.

.

I’m disappointed at the level of css intervention, though grok why its there (to pacify Hive)…

There is one aspect of the admin panel layout I feel is too specific:

@media (min-width: 47em) {
    .adi_matrix_row {
      display: flex;
      flex-flow: row;
      gap: 1em max(1.4em, calc(1em + 4vw));
      justify-content: space-between;
    }

    .adi_matrix_row > div {
      flex: 0 1 30%;
    }
  }

Hive defaults to stacking divs one above the other. Why don’t we follow that pattern? It plays better with non-hive themes too.

phiw13 · 2025-02-24 22:47:26

giz wrote #339134:

My inline css for textareas have disappeared, with or without glz_cf (must have been user error!).

The plugin behaves itself apart from one layout glitch I get in Hive 4.9; .adi_matrix_admin_delete is displayed hard top-right, superimposed over the .adi_matrix_row top border.

As intended to indicate the delete button applies to all 3 columns at once

I’m disappointed at the level of css intervention, though grok why its there (to pacify Hive)…

There is one aspect of the admin panel layout I feel is too specific:

Uh… displaying the 3 blocks in one longlonglong column? Seems a waste of space. What is wrong for the plugin to offer an optimised layout? It is easily overridden if your particular theme prefers something different.

phiw13 · 2025-02-25 05:48:47

1/ Some more unused and unneeded CSS bits

/* admin tab */
.adi_matrix_field label.adi_matrix_label2 { width:auto } /* unused */
.adi_matrix_field p { min-height:1.2em } /* not needed */
.adi_matrix_field p > span { float:left; width:8em } /* pseudo label  not needed */
.adi_matrix_custom_field label { width:12em } /* not needed */

2/
I see know what the actual issue is with that JS error I mentioned: only the first row shows a “reset” link next to the radio set. For all other rows that link is not generated.

My matrix finds 48 articles, displayed over 4 pages/views (12 per page), for each page I see the error once, for the first row. And all 11 other instances in that column are missing the “reset” link.

Full stack (article152 refers to the ID of the article, custom_3 is the CF on the glz_cf admin panel):

Uncaught Error: Syntax error, unrecognized expression: input:radio[name=article_152[custom_3]]
    jQuery 7
    e http://txpdev.local/textpattern/?event=adi_matrix_matrix_1:24
    jQuery 2
    e http://txpdev.local/textpattern/?event=adi_matrix_matrix_1:24
    <anonymous> http://txpdev.local/textpattern/?event=adi_matrix_matrix_1:24
    jQuery 2

That might refer to this part of the glz_cf script(s) – unminified by Safari:

function e() {
    $(".glz-custom-radio").length > 0 && $(".glz-custom-radio").each(function() {
        var e = $(this).find("input:first").attr("name");
        $(this).find("label:first").after(' <span class="small"><a href="#" class="glz-custom-field-reset" name="' + e + '">Reset</a></span>'),
        $("input:radio[name=" + e + "]").is(":checked") || $(".glz-custom-field-reset[name=" + e + "]").addClass("disabled")
    })
}

giz · 2025-02-25 18:25:51

phiw13 wrote #339136:

As intended to indicate the delete button applies to all 3 columns at once

That may be the intention, but it needs inset-block-start: -3em; to locate within Hive (this is sure to inflict pain on future admin themes). Wouldn’t it be better placed adjacent to ‘Matrix View’ in the first panel?

Uh… displaying the 3 blocks in one longlonglong column?

For consistency, yes… like every other panel in Hive. This is one of the reasons I’ve been exploring various css patterns to make better use of available space.

If the author really wants to use space more efficiently, all screen widths would be better served by:

.adi_matrix_row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(36ch,1fr));
  gap: 2em;
}

It is easily overridden if your particular theme prefers something different.

As we’re dealing with the styling of a plugin, admin-theme authors can’t predict the node structure, or any embedded styling. How can they override styles they know nothing about? They’d need to modify their theme css to suit each plugin – a headache for all.

jakob · 2025-02-25 22:44:45

phiw13 wrote #339137:

I see know what the actual issue is with that JS error I mentioned: only the first row shows a “reset” link next to the radio set. For all other rows that link is not generated.

My matrix finds 48 articles, displayed over 4 pages/views (12 per page), for each page I see the error once, for the first row. And all 11 other instances in that column are missing the “reset” link.

Full stack (article152 refers to the ID of the article, custom_3 is the CF on the glz_cf admin panel):

Uncaught Error: Syntax error, unrecognized expression: input:radio[name=article_152[custom_3]]...

That might refer to this part of the glz_cf script(s) – unminified by Safari:

function e() {...

I’ve had a look at this. If you edit glz_cf and replace these lines in function glz_custom_fields_head_js() with the following:

$js = <<<'JS'
$(function(){function e(){$(".glz-custom-radio").length>0&&$(".glz-custom-radio").each(function(){var e=$(this).find("input:first").attr("name");$(this).find("label:first").after(' <span class="small"><a href="#" class="glz-custom-field-reset" name="'+e+'">Reset</a></span>'),$("input[name='"+e+"']:radio").is(":checked")||$(".glz-custom-field-reset[name='"+e+"']").addClass("disabled")})}function t(){$glz_value_field.find("textarea#value").length&&(s.textarea_value=$glz_value_field.find("textarea#value").html(),$glz_value_field.find("textarea#value").remove()),$glz_value_field.find("input#value").length?0==$glz_value_field.find("input#value").prop("disabled")&&(s.path_value=$glz_value_field.find("input#value").attr("value")):$glz_value_field.find(".txp-form-field-value").prepend('<input type="text" id="value" name="value" />'),$glz_value_field.find("input#value").attr("value","-----").prop("disabled",!0),$glz_value_instructions.html("")}function l(){$glz_value_field.find("input#value").length&&(0==$glz_value_field.find("input#value").prop("disabled")&&(s.path_value=$glz_value_field.find("input#value").attr("value")),$glz_value_field.find("input#value").remove(),$glz_value_instructions.html("")),$glz_value_field.find("textarea#value").length||$(".edit-custom-set-value .txp-form-field-value").prepend('<textarea id="value" name="value" rows="5"></textarea>'),s.textarea_value&&$glz_value_field.find("textarea#value").html(s.textarea_value),$glz_value_instructions.html(s.messages.textarea)}function a(){$glz_value_field.find("textarea#value").length&&(s.textarea_value=$glz_value_field.find("textarea#value").html(),$glz_value_field.find("textarea#value").remove(),$glz_value_instructions.html("")),$glz_value_field.find("input#value").length||$glz_value_field.find(".txp-form-field-value").prepend('<input type="text" id="value" name="value" size="32" />'),"-----"==$glz_value_field.find("input#value").attr("value")&&$glz_value_field.find("input#value").attr("value",""),$glz_value_field.find("input#value").prop("disabled",!1),$glz_value_instructions.html(s.messages.customscriptpath),s.path_value&&$glz_value_field.find("input#value").attr("value",s.path_value)}function i(){-1!=$.inArray($("select#custom_set_type :selected").attr("value"),[].concat(s.special_custom_types,["multi-select","custom-script"]))?$glz_select_instructions.html('<a href="//'+window.location.host+window.location.pathname+'?event=prefs#prefs_group_glz_custom_f">'+s.messages.configure+"</a>"):$glz_select_instructions.html("")}textpattern.Relay.register("txpAsyncForm.success",e);var s;s={},s.special_custom_types=["date-picker","time-picker"],s.no_value_custom_types=["text_input","textarea"],$glz_value_field=$(".edit-custom-set-value"),$glz_value_instructions=$glz_value_field.find(".txp-form-field-instructions"),$glz_select_instructions=$(".edit-custom-set-type").find(".txp-form-field-instructions"),s.messages={textarea:$(".glz-custom-textarea-msg").html(),configure:$glz_select_instructions.text(),customscriptpath:$(".glz-custom-script-msg").text()},$(".glz-custom-script-msg").remove(),$(".glz-custom-textarea-msg").remove(),i(),-1!=$.inArray($("select#custom_set_type :selected").attr("value"),[].concat(s.special_custom_types,s.no_value_custom_types))?t():"custom-script"==$("select#custom_set_type :selected").attr("value")&&a(),$("select#custom_set_type").change(function(){i(),-1!=$.inArray($("select#custom_set_type :selected").attr("value"),[].concat(s.special_custom_types,s.no_value_custom_types))?t():"custom-script"==$("select#custom_set_type :selected").attr("value")?a():l()}),e(),$(".txp-body").on("click",".glz-custom-field-reset",function(){if($(this).hasClass("disabled"))return!1;var e=$(this).attr("name");console.log(e);return $("input[name='"+e+"']").prop("checked",!1),$("input[name='"+e+"'].default").prop("checked",!0),$(this).addClass("disabled"),0===$(this).siblings(".txp-form-radio-reset").length&&0===$("input[name='"+e+"']:checked").length&&$(this).after('<input type="hidden" class="txp-form-radio-reset" value="" name="'+e+'" />'),!1}),$(".txp-body").on("click",".glz-custom-radio .radio",function(){var e=$(this).attr("name");$this_reset_button=$(".glz-custom-field-reset[name='"+e+"']"),$this_reset_button.hasClass("disabled")&&($("input[type=hidden][name='"+e+"']").remove(),$this_reset_button.removeClass("disabled"))})});
JS;

This has two main changes:

The selector input:radio[name=article_152[custom_3]] is now referenced as input[name='article_152[custom_3]']:radio
The on click for the reset button was tied to the container .txp-layout which doesn’t exist in the current adi_matrix, so it doesn’t do anything on the matrix panel. I’ve attached the event listener to the .txp-body wrapper that should exist on both matrix and write panels.

In preliminary testing this works for me.

jakob · 2025-02-25 22:51:01

Two more things:

1. If I set a checkbox with glz_cf using adi_matrix, I get a fatal error from adi_matrix when clicking “Save”:

Fatal error: Uncaught TypeError: implode(): Argument #1 ($separator) must be of type string, array given in /Sites/matrix/textpattern/plugins/adi_matrix/adi_matrix.php:1426 
Stack trace: #0 /Sites/matrix/textpattern/plugins/adi_matrix/adi_matrix.php(1426): implode(Array, '|') 
#1 /Sites/matrix/textpattern/plugins/adi_matrix/adi_matrix.php(2359): adi_matrix->get_post_data(Array, '1') 
#2 /Sites/matrix/textpattern/lib/txplib_misc.php(1662): adi_matrix->matrix_matrix('adi_matrix_matr...', 'update') 
#3 /Sites/matrix/textpattern/index.php(221): callback_event('adi_matrix_matr...', 'update', 0) 
#4 /.composer/vendor/laravel/valet/server.php(110): require('/S...') 
#5 {main} thrown in /Sites/matrix/textpattern/plugins/adi_matrix/adi_matrix.php on line 1426

This might have to do with the strange name="article_XX[custom_YY]" naming?

2. Are the Default sort details at the bottom still necessary now that sorting is set via the column heads?

phiw13 · 2025-02-26 04:28:10

giz wrote #339143:

Wouldn’t it be better placed adjacent to ‘Matrix View’ in the first panel?

Maybe?

If the author really wants to use space more efficiently, all screen widths would be better served by:

Your grid-template-columns is too large on a “standard” phone in portrait mode (width=360~375 css px). Additionally, .txp-edit makes a little mess on small screens – yes, auto margins participate in the grid computation.T his works better:

.adi_matrix_row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  gap: var(--txp-spacing) max(1.4em, calc(1em + 4vw));
}

.adi_matrix_row .txp-edit { margin: 0 }

As we’re dealing with the styling of a plugin, admin-theme authors can’t predict the node structure, or any embedded styling.

That is not what I am saying. I am only suggesting that if an admin theme encounters issues with some layout/presentation/… by a plugin it should not be difficult to override a specific style rule. Sanspace includes quite a few plugin related tweaks and overrides.

Mockup updates (Sanspace has the delete / view link-buttons at the top left, Hive next to the “Matrix” headline

Sandspace: dev.l-c-n.com/txp-4.9/adi_matrix_admin_v2.html
Hive: dev.l-c-n.com/txp-4.9/adi_matrix_admin_hive.html

phiw13 · 2025-02-26 04:38:02

jakob wrote #339146:

I’ve had a look at this. If you edit glz_cf and […]

Your fix works well as far as as can see. Thank you. On a matrix page, every occurrence of the radio set now has a “reset” link (and all work as expected when saving an individual row). On the Write tab, the radio set continue to function as intended.

jakob wrote #339147:

Two more things:

1. If I set a checkbox with glz_cf using adi_matrix, I get a fatal error from adi_matrix when clicking “Save”:

Yes, I see that as well when I edit something on multiple rows, including at least one instance of a custom field (a radio set or checkbox or textarea). If I don’t include edits to a / some CF, then all works well.

2. Are the Default sort details at the bottom still necessary now that sorting is set via the column heads?

Ditto. I don’t think those need specifying on the matrix panel. Just me? does clicking that link do anything?

giz · 2025-02-26 16:45:12

Arguing with you on this seemingly achieves nothing.

.

We should be aiming for a more malleable Textpattern where functionality is the only concern of a developer or plugin author. For this to happen, style needs to be completely decoupled from core. This isn’t a pipe dream – its been recommended by UI experts for ages.

phiw13 · 2025-02-27 05:07:34

giz wrote #339150:

Arguing with you on this seemingly achieves nothing.

In this thread I am contributing to make this plugin usable and working in the real world of existing Textpattern with all the limitations including all those stemming from the default theme. No more, no less, Sir.

Textpattern CMS

Textpattern CMS support forum

#289 2025-02-24 19:43:24

Re: adi_matrix – Multi-article update tabs

#290 2025-02-24 22:47:26

Re: adi_matrix – Multi-article update tabs

giz wrote #339134:

#291 2025-02-25 05:48:47

Re: adi_matrix – Multi-article update tabs

#292 2025-02-25 18:25:51

Re: adi_matrix – Multi-article update tabs

phiw13 wrote #339136:

#293 2025-02-25 22:44:45

Re: adi_matrix – Multi-article update tabs

phiw13 wrote #339137:

#294 2025-02-25 22:51:01

Re: adi_matrix – Multi-article update tabs

#295 2025-02-26 04:28:10

Re: adi_matrix – Multi-article update tabs

giz wrote #339143:

#296 2025-02-26 04:38:02

Re: adi_matrix – Multi-article update tabs

jakob wrote #339146:

jakob wrote #339147:

#297 2025-02-26 16:45:12

Re: adi_matrix – Multi-article update tabs

#298 2025-02-27 05:07:34

Re: adi_matrix – Multi-article update tabs

giz wrote #339150:

Board footer