#article_form and txpAsyncForm: some questions

sacripant · 2017-03-19 11:35:07

Hi Txp core team,

I noticed that when I modify some custom fields with btw_customize plugins (add class, hide by sections, etc.), I loose my changes when I save Articles.

I looked a bit what happens with the ajax function.
txpAsyncForm send datas and recieve an answer : a jQuery code to execute for update article-form :

;
                $(document).ready(function ()
                {
                    $("#messagepane").html("<span class=\"messageflash success\" role=\"alert\" aria-live=\"assertive\"><span class=\"ui-icon ui-icon-check\"></span> Article publié. &#160;<a class=\"close\" role=\"button\" title=\"Fermer\" aria-label=\"Fermer\" href=\"#close\">&#215;</a></span>");
                });;
$("#article_form [type=submit]").val(textpattern.gTxt("save"));
$("#article_form").addClass("published").removeClass("saved");
$("title").replaceWith($("<div><title>5 jours à 400€ - Memento_FR &#124; Textpattern CMS</title></div>").find("title"));
$("#view_modes").replaceWith($("<div>\n<div id=\"view_modes\">\n<ul>\n<li class=\"active\" id=\"tab-text\"><a data-view-mode=\"text\" title=\"Mode saisie\" aria-pressed=\"true\" role=\"button\" href=\"#\">Saisie</a></li>\n<li id=\"tab-html\"><a data-view-mode=\"html\" title=\"Vue HTML\" aria-pressed=\"false\" role=\"button\" href=\"#\">HTML</a></li>\n<li id=\"tab-preview\"><a data-view-mode=\"preview\" title=\"Aperçu de l’article\" aria-pressed=\"false\" role=\"button\" href=\"#\">Aperçu</a></li></ul>\n</div></div>").find("#view_modes"));
$("#title").val("5 jours à 400€");
$("p.author").replaceWith($("<div>\n<p class=\"author\"><small>Posté par: sacripant &#183; 16 fév 2017 &#183; 16:03:30<br />Dernière modification par: sacripant &#183; 19 mar 2017 &#183; 12:28:30</small></p></div>").find("p.author"));
$("[name=sPosted]").val("1487257410");
$("[name=sLastMod]").val("1489922910");
$("#article_partial_article_clone").replaceWith($("<div>\n<a class=\"txp-clone\" id=\"article_partial_article_clone\" href=\"#\"><span class=\"ui-icon ui-icon-copy\"></span> Dupliquer</a></div>").find("#article_partial_article_clone"));
$("#article_partial_article_view").replaceWith($("<div>\n<a class=\"txp-article-view\" id=\"article_partial_article_view\" href=\"http://localhost/sacripant/mementoFR/45/5-jours-a-400\"><span class=\"ui-icon ui-icon-notice\"></span> Voir</a></div>").find("#article_partial_article_view"));
$("nav.nav-tertiary").replaceWith($("<div>\n<nav class=\"nav-tertiary\"><a class=\"navlink\" rel=\"prev\" href=\"?event=article&amp;step=edit&amp;ID=44\">Précédent</a><a class=\"navlink\" rel=\"next\" href=\"?event=article&amp;step=edit&amp;ID=46\">Suivant</a></nav></div>").find("nav.nav-tertiary"));
$("#txp-container-status").replaceWith($("<div>\n<div id=\"txp-container-status\">\n<div class=\"txp-form-field status\">\n<div class=\"txp-form-field-label\"><label for=\"status\">Statut</label></div>\n<div class=\"txp-form-field-value\">\n<select id=\"status\" name=\"Status\">\n<option value=\"1\">Brouillon</option>\n<option value=\"2\">Masqué</option>\n<option value=\"3\">À valider</option>\n<option value=\"4\" selected=\"selected\">Publié</option>\n<option value=\"5\">Persistant</option>\n</select>\n</div>\n</div></div></div>").find("#txp-container-status"));
$("#publish-datetime-group").replaceWith($("<div>\n<div id=\"publish-datetime-group\">\n<div class=\"txp-form-field date posted\">\n<div class=\"txp-form-field-label\"><label for=\"year\">Date de publication&#160;<a class=\"pophelp\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 0, 0); return false;\" href=\"http://rpc.textpattern.com/help/?item=publish_date&amp;language=fr-fr\">i</a></label></div>\n<div class=\"txp-form-field-value\">\n<input class=\"input-year\" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]{4}\" size=\"4\" maxlength=\"4\" title=\"Année\" aria-label=\"Année\" placeholder=\"yyyy\" tabindex=\"0\" value=\"2017\" /> <span role=\"separator\">/</span> \n<input class=\"input-month\" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\" pattern=\"(0[1-9]|1[012])\" size=\"2\" maxlength=\"2\" title=\"Mois\" aria-label=\"Mois\" placeholder=\"mm\" tabindex=\"0\" value=\"02\" /> <span role=\"separator\">/</span> \n<input class=\"input-day\" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\" pattern=\"(0[1-9]|1[0-9]|2[0-9]|3[01])\" size=\"2\" maxlength=\"2\" title=\"Jour\" aria-label=\"Jour\" placeholder=\"dd\" tabindex=\"0\" value=\"16\" /></div>\n</div>\n<div class=\"txp-form-field time posted\">\n<div class=\"txp-form-field-label\"><label for=\"hour\">Heure de publication</label></div>\n<div class=\"txp-form-field-value\">\n<input class=\"input-hour\" id=\"hour\" name=\"hour\" type=\"text\" inputmode=\"numeric\" pattern=\"(0[0-9]|1[0-9]|2[0-3])\" size=\"2\" maxlength=\"2\" title=\"Heure\" aria-label=\"Heure\" placeholder=\"hh\" tabindex=\"0\" value=\"16\" /> <span role=\"separator\">:</span> \n<input class=\"input-minute\" id=\"minute\" name=\"minute\" type=\"text\" inputmode=\"numeric\" pattern=\"([0-5][0-9])\" size=\"2\" maxlength=\"2\" title=\"Minute\" aria-label=\"Minute\" placeholder=\"mn\" tabindex=\"0\" value=\"03\" /> <span role=\"separator\">:</span> \n<input class=\"input-second\" id=\"second\" name=\"second\" type=\"text\" inputmode=\"numeric\" pattern=\"([0-5][0-9])\" size=\"2\" maxlength=\"2\" title=\"Seconde\" aria-label=\"Seconde\" placeholder=\"ss\" tabindex=\"0\" value=\"30\" /></div>\n</div>\n<div class=\"reset-time\">\n<input class=\"checkbox\" id=\"reset_time\" name=\"reset_time\" type=\"checkbox\" value=\"1\" />\n<label for=\"reset_time\">Horodater à « maintenant »</label></div>\n</div></div>").find("#publish-datetime-group"));
$("#expires-datetime-group").replaceWith($("<div>\n<div id=\"expires-datetime-group\">\n<div class=\"txp-form-field date expires\">\n<div class=\"txp-form-field-label\"><label for=\"exp_year\">Expiration&#160;<a class=\"pophelp\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 0, 0); return false;\" href=\"http://rpc.textpattern.com/help/?item=expire_date&amp;language=fr-fr\">i</a></label></div>\n<div class=\"txp-form-field-value\">\n<input class=\"input-year\" id=\"exp_year\" name=\"exp_year\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]{4}\" size=\"4\" maxlength=\"4\" title=\"Année\" aria-label=\"Année\" placeholder=\"yyyy\" tabindex=\"0\" value=\"2017\" /> <span role=\"separator\">/</span> \n<input class=\"input-month\" id=\"exp_month\" name=\"exp_month\" type=\"text\" inputmode=\"numeric\" pattern=\"(0[1-9]|1[012])\" size=\"2\" maxlength=\"2\" title=\"Mois\" aria-label=\"Mois\" placeholder=\"mm\" tabindex=\"0\" value=\"03\" /> <span role=\"separator\">/</span> \n<input class=\"input-day\" id=\"exp_day\" name=\"exp_day\" type=\"text\" inputmode=\"numeric\" pattern=\"(0[1-9]|1[0-9]|2[0-9]|3[01])\" size=\"2\" maxlength=\"2\" title=\"Jour\" aria-label=\"Jour\" placeholder=\"dd\" tabindex=\"0\" value=\"18\" /></div>\n</div>\n<div class=\"txp-form-field time expires\">\n<div class=\"txp-form-field-label\"><label for=\"exp_hour\">Heure d’expiration</label></div>\n<div class=\"txp-form-field-value\">\n<input class=\"input-hour\" id=\"exp_hour\" name=\"exp_hour\" type=\"text\" inputmode=\"numeric\" pattern=\"(0[0-9]|1[0-9]|2[0-3])\" size=\"2\" maxlength=\"2\" title=\"Heure\" aria-label=\"Heure\" placeholder=\"hh\" tabindex=\"0\" value=\"23\" /> <span role=\"separator\">:</span> \n<input class=\"input-minute\" id=\"exp_minute\" name=\"exp_minute\" type=\"text\" inputmode=\"numeric\" pattern=\"([0-5][0-9])\" size=\"2\" maxlength=\"2\" title=\"Minute\" aria-label=\"Minute\" placeholder=\"mn\" tabindex=\"0\" value=\"59\" /> <span role=\"separator\">:</span> \n<input class=\"input-second\" id=\"exp_second\" name=\"exp_second\" type=\"text\" inputmode=\"numeric\" pattern=\"([0-5][0-9])\" size=\"2\" maxlength=\"2\" title=\"Seconde\" aria-label=\"Seconde\" placeholder=\"ss\" tabindex=\"0\" value=\"59\" /></div>\n</div>\n<input name=\"sExpires\" type=\"hidden\" value=\"1489877999\" />\n</div></div>").find("#expires-datetime-group"));
$("#url-title").val("5-jours-a-400");
$("#description").val("");
$("#keywords").val("");
$("#write-comments").replaceWith($("<div>\n<div id=\"write-comments\">\n<div class=\"txp-form-field comment-annotate\">\n<input class=\"radio active\" id=\"Annotate-0\" name=\"Annotate\" type=\"radio\" checked=\"checked\" value=\"0\" />\n<label for=\"Annotate-0\">Désactivés</label>\n<input class=\"radio\" id=\"Annotate-1\" name=\"Annotate\" type=\"radio\" value=\"1\" />\n<label for=\"Annotate-1\">Activés</label></div>\n<div class=\"txp-form-field comment-invite\">\n<div class=\"txp-form-field-label\"><label for=\"comment-invite\">Texte de l’invite à commenter :</label></div>\n<div class=\"txp-form-field-value\">\n<input id=\"comment-invite\" name=\"AnnotateInvite\" type=\"text\" size=\"32\" value=\"\" /></div>\n</div>\n</div></div>").find("#write-comments"));
$("#txp-image-group .txp-container").replaceWith($("<div><div class=\"txp-container\">\n<div class=\"txp-form-field article-image\">\n<div class=\"txp-form-field-label\"><label for=\"article-image\">Image de l’article&#160;<a class=\"pophelp\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 0, 0); return false;\" href=\"http://rpc.textpattern.com/help/?item=article_image&amp;language=fr-fr\">i</a></label></div>\n<div class=\"txp-form-field-value\">\n<input id=\"article-image\" name=\"Image\" type=\"text\" size=\"32\" value=\"\" /></div>\n</div></div></div>").find(".txp-container"));
$("#txp-custom-field-group-content .txp-container").replaceWith($("<div><div class=\"txp-container\"> \n<p class=\"glz_custom_field_script\"><label for=\"custom-1\">Projet</label><br /><select id=\"custom-1\" name=\"custom_1\" class=\"list\"><option value=\"25\">Africafête — formulaire de contact</option><option value=\"39\">Gan assurances</option><option value=\"44\" selected=\"selected\">Gan assurances — 5 jrs dev web</option><option value=\"36\">LBHF: améliorations progressives (release 2)</option><option value=\"17\">LBHF: Compatibilité IE8 - IE7</option><option value=\"12\">LBHF: Intégration web</option><option value=\"1\">LBHF: Prototypage web</option><option value=\"30\">Mokolo — Intégration page d\'accueil</option><option value=\"5\">Mokolo.pro — Conception</option><option value=\"20\">Mokolo.pro — Design Page d\'accueil</option><option value=\"7\">Mokolo.pro — Prototypage</option><option value=\"41\">Régie GAN/G2S</option></select></p>\n<p class=\"glz_custom_select_field\"><label for=\"custom-2\">Etat</label><br /><select id=\"custom-2\" name=\"custom_2\" class=\"list\"><option value=\"\">&nbsp;</option><option value=\"Non programmé\">Non programmé</option><option value=\"Programmé\">Programmé</option><option value=\"En cours\">En cours</option><option value=\"En pause\">En pause</option><option value=\"Terminé\" selected=\"selected\">Terminé</option><option value=\"Rejeté\">Rejeté</option></select></p>\n<p class=\"glz_custom_field\"><label for=\"custom-3\">Temps_prevu</label><br />\n<input class=\"edit\" id=\"custom-3\" name=\"custom_3\" type=\"text\" size=\"22\" value=\"5\" /></p>\n<p class=\"glz_custom_field\"><label for=\"custom-4\">Temps_reel</label><br />\n<input class=\"edit\" id=\"custom-4\" name=\"custom_4\" type=\"text\" size=\"22\" value=\"\" /></p>\n<p class=\"glz_custom_field\"><label for=\"custom-5\">Taux_horaire</label><br />\n<input class=\"edit\" id=\"custom-5\" name=\"custom_5\" type=\"text\" size=\"22\" value=\"\" /></p>\n<p class=\"glz_custom_select_field\"><label for=\"custom-6\">Devise</label><br /><select id=\"custom-6\" name=\"custom_6\" class=\"list\"><option value=\"\">&nbsp;</option><option value=\"€\">€</option><option value=\"Fcfa\">Fcfa</option></select></p>\n<p class=\"glz_custom_select_field\"><label for=\"custom-8\">taxe</label><br /><select id=\"custom-8\" name=\"custom_8\" class=\"list\"><option value=\"off\">off</option><option value=\"5.5\">5.5</option><option value=\"19.6\" selected=\"selected\">19.6</option></select></p>\n<p class=\"glz_custom_field\"><label for=\"custom-9\">Parent</label><br />\n<input class=\"edit\" id=\"custom-9\" name=\"custom_9\" type=\"text\" size=\"22\" value=\"\" /></p>\n<p class=\"glz_custom_field\"><label for=\"custom-10\">Num-date_Devis</label><br />\n<input class=\"edit\" id=\"custom-10\" name=\"custom_10\" type=\"text\" size=\"22\" value=\"\" /></p>\n<p class=\"glz_custom_field\"><label for=\"custom-11\">total-HT</label><br />\n<input class=\"edit\" id=\"custom-11\" name=\"custom_11\" type=\"text\" size=\"22\" value=\"\" /></p>\n<p class=\"glz_custom_select_field\"><label for=\"custom-12\">type_reglement</label><br /><select id=\"custom-12\" name=\"custom_12\" class=\"list\"><option value=\"devis + factures\" selected=\"selected\">devis + factures</option><option value=\"factures uniquement\">factures uniquement</option></select></p></div></div>").find(".txp-container"));
$("ul.textile").replaceWith($("<div>\n<ul class=\"textile plain-list\">\n<li>Sous-titres: <strong>h<em>n</em>.</strong>&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=header&amp;language=fr-fr\">i</a></li>\n<li>Bloc de citation: <strong>bq.</strong>&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=blockquote&amp;language=fr-fr\">i</a></li>\n<li>Liste ordonnée: <strong>#</strong>&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=numeric&amp;language=fr-fr\">i</a></li>\n<li>Liste non ordonnée: <strong>*</strong>&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=bulleted&amp;language=fr-fr\">i</a></li>\n<li>Liste de définitions: <strong>; :</strong>&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=definition&amp;language=fr-fr\">i</a></li>\n<li>_<em>emphase</em>_&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=italic&amp;language=fr-fr\">i</a></li>\n<li>*<strong>forte emphase</strong>*&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=bold&amp;language=fr-fr\">i</a></li>\n<li>??<cite>référence</cite>??&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 500, 300); return false;\" href=\"http://rpc.textpattern.com/help/?item=cite&amp;language=fr-fr\">i</a></li>\n<li>-texte supprimé-&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 300); return false;\" href=\"http://rpc.textpattern.com/help/?item=delete&amp;language=fr-fr\">i</a></li>\n<li>+texte inséré+&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 300); return false;\" href=\"http://rpc.textpattern.com/help/?item=insert&amp;language=fr-fr\">i</a></li>\n<li>^exposant^&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 300); return false;\" href=\"http://rpc.textpattern.com/help/?item=super&amp;language=fr-fr\">i</a></li>\n<li>~indice~&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=subscript&amp;language=fr-fr\">i</a></li>\n<li>\"Texte du lien\":url&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 300); return false;\" href=\"http://rpc.textpattern.com/help/?item=link&amp;language=fr-fr\">i</a></li>\n<li>!URL de l’image!&#160;<a class=\"pophelpsubtle\" rel=\"help\" target=\"_blank\" title=\"Aide\" aria-label=\"Aide\" role=\"button\" onclick=\"popWin(this.href, 400, 400); return false;\" href=\"http://rpc.textpattern.com/help/?item=image&amp;language=fr-fr\">i</a></li>\n</ul>\n<p><a class=\"textile-docs-link\" rel=\"external\" target=\"_blank\" href=\"http://textpattern.com/textile-sandbox\">Documentation&#160;<span class=\"ui-icon ui-icon-extlink\">(ouvre le lien externe dans une nouvelle fenêtre)</span></a></p></div>").find("ul.textile"));
$("#txp-recent-group-content .txp-container").replaceWith($("<div><div class=\"txp-container\"><ol class=\"recent\">\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=45\">5 jours à 400€</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=12\">LBHF: Intégration web</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=40\">30 jours de développement web</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=46\">8 jours de fous</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=16\">débogage et cross-browser</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=39\">Gan assurances</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=41\">Régie GAN/G2S</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=44\">Gan assurances — 5 jrs dev web</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=43\">Frais journaliers</a></li>\n<li class=\"recent-article\"><a href=\"?event=article&#38;step=edit&#38;ID=42\">5 jours de régie à 500€/j</a></li></ol></div></div>").find(".txp-container"));

Why sometime you just inject values to existing field, and why sometime you replace part of DOM and inject new markup with .replacewith() fct ?

In fact, I don’t understand why is necessary to make all this changes after save Async form ? If anyone can give some explanations.
Thanks.

etc · 2017-03-19 13:30:45

sacripant wrote #304904:

Why sometime you just inject values to existing field, and why sometime you replace part of DOM and inject new markup with .replacewith() fct ?

In fact, I don’t understand why is necessary to make all this changes after save Async form ? If anyone can give some explanations.

I haven’t been there when async saves were introduced, but worked on this part later, so here are my two kopecks. Two main reasons for value/markup updates are, imo:

data validation (like invalid date, non-existing image id, etc)
plugins accommodation: let plugins modify the default output, registering a callback.

The markup of some article panes has been changed in 4.6, this can explain the problems with bwt_customize.

sacripant · 2017-03-19 17:17:13

Thx Oleg,

etc wrote #304905:

data validation (like invalid date, non-existing image id, etc)

plugins accommodation: let plugins modify the default output, registering a callback.

Ok thanks. But what append with Javascript that modify some markup ? Modifications are removed. txpAsyncForm make a reset.

What the best way with 4.6 for make some change in article tab with Javascript ? and prevent txpAsyncForm reset ?

The markup of some article panes has been changed in 4.6, this can explain the problems with bwt_customize.

I used bwt_cutomize 0.7.5. modified by Jakob, and updated for TXP 4.6. Work great. Only problem is that since Txp 4.6, AsyncForm reset custom fields markup. All Dom modifications in custom fields are deleted after save article. It’s funny because if you move a custom field outside #txp-custom-field-group-content block, AsyncForm reset orginal custom-field inside #txp-custom-field-group-content. You have 2 same custom field :)

sacripant · 2018-04-19 12:49:43

Hi core team,

Julian work actually in a update of bwt-customize for TXP 4.7.

And it’s a nightmare to make it working as he worked before TXP 4.6.

Actually, each time a article is saved, Txp use replaceWith jQuery fonction to remove and recreate DOM elements.
Txp could not use cleaner solution by modifying the attributes of existing elements instead of rewrite entire sections of the DOM?

Thanks.

Bloke · 2018-04-19 15:39:10

sacripant wrote #311210:

Txp could not use cleaner solution by modifying the attributes of existing elements instead of rewrite entire sections of the DOM?

It can (I think) because we have the option of declaring a piece of the DOM as:

STATIC (unchanges on Ajax return)
VOLATILE (DOM node rewritten on Ajax return)
VOLATILE_VALUE (just value injected on AJax return)

Custom fields are, however, defined as VOLATILE, hence they are completely rewritten. This is probably to help plugins such as per-section custom fields to operate, as they can then more easily enable/disable the entire field. Not sure.

It may be a case that some plugins could benefit from being VOLATILE_VALUE only. Not sure how to factor that in though.

EDIT: In the new custom fields implementation, slated for 4.8, perhaps each field’s definition could determine if it was to replace everything or just the value? That does push some implementation logic onto designers though, which is something I’m keen to avoid. We’ll think about it.

Last edited by Bloke (2018-04-19 15:41:24)

jakob · 2018-04-19 22:20:19

I’ll have to check the most recent – albeit rather unlikely and nonsensical – situation that sacripant found. Maybe there’s a way of determining what needs to be volatile.

Bloke wrote #311226:

In the new custom fields implementation, slated for 4.8, perhaps each field’s definition could determine if it was to replace everything or just the value? That does push some implementation logic onto designers though, which is something I’m keen to avoid. We’ll think about it.

My hope and thinking was that with the forthcoming core implementation of custom fields, the position and order of the custom field on the respective pane could be determined when creating the custom field, so that the write pane loads them in the correct location/position on page load (and ajax refresh). bot_wtc would then only be needed (if at all) for things like show/hide by section and wouldn’t contain any code to move items around the write pane.

sacripant · 2018-04-20 09:06:20

Thanks Steve for clarifications.

If I understand, there is no granularity between Volatile_value that allow to change only the value attribut, and volatile.

If you want just add a class, add a required or disabled attribut or modify any attribut, Txp erase/replace DOM with a jackhammer.
I understand that it’s more easier for php. But from a front-end point of view, it’s radical.

firstly, I think It would be better if the fields were individually overwritten.
Actually, all custom fields are overwritten in one pass.

Could we not gain flexibility if each custom field are overwrittern separately?
Or explained differently: it would be better to apply volatile to the fields directly instead of the parent block.

Bloke · 2018-04-20 10:02:55

sacripant wrote #311244:

If I understand, there is no granularity between Volatile_value that allow to change only the value attribut, and volatile.

There should be. I thought only the value was updated and the surrounding markup remains when VOLATILE_VALUE was employed. Will check one day.

Could we not gain flexibility if each custom field are overwrittern separately… instead of the parent block.

Absolutely. When we move to the new custom fields implementation, we’ll have to do that as there may be no “Custom fields” block as such. Fields will have to be able to be attached anywhere.

Not sure exactly how to do that cleanly yet. We have options:

Append them to the DOM in a ‘Custom fields’ area like now and a designer has to drag n drop them (per role?) to their desired location so that all users see them there.
Same as above, but allow individual users to lay out the panel.
‘Attach’ the fields to existing fields when they are defined – perhaps via a dropdown selector and then ‘before’ or ‘after’ to appear above or below. But that would need to take into account other custom fields (for the current content type) so they can have other fields attached to them! Tricky?
A variant on the above: some way for each field to raise a callback, like inputLabel() does, but specifically for the purpose of “subscribing” or “attaching” other fields to it and then nominating which fields are related to other fields.
Something else…

One thing to be aware of is that (tentatively – although it doesn’t work intuitively enough for my liking yet) custom fields have a “Created” and “Expiry” date so you can phase old ones out if you like and replace them, while still keeping the data around for ‘expired’ fields in old content types. Thus, the only time the data would be deleted would be if you delete the actual field itself.

It would also mean you could choose when new fields become available but, unfortunately at the current state of the custom fields implementation, they are defined “from now” by default. Thus, when you go to an existing article – one that has a Posted date before the custom field’s Created date – you don’t see the field, which is kind of counter-intuitive to how we have it now.

In 4.7.0 and before, custom fields are “global”: when you create one, it’s available everywhere, from the first article until the last. In the current updated implementation, you have to ensure the field definition has an “old” created date so it shows up as available on older articles before the field was added – if that’s what you want. It might make more sense to default the created date to that of the earliest article and add a “Set created date to now” checkbox alongside, just so there’s less head scratching.

I’m thinking of ditching the created and/or expiry concept for custom fields, but something at the back of my mind is nagging me that it might be useful so I’m still keeping it around unless I hit a serious roadblock. Thoughts welcome, btw.

sacripant · 2018-04-20 10:49:06

Or It maybe time to let the layout logic to a dedicated javascript framework.
Throw in the trash “jquery” and especially “jqueryUI” which is no longer useful and look at react / vueJS or other webcomponent framework for Txp back office ?
_{I can already hear angry people}

Bloke · 2018-04-20 11:58:55

:-)

Not angry, but from what I’ve tried of React and Angular, I honestly can’t see why anyone uses it. Yes, it promises much. Yes, it’s stateful. But the last few UIs I’ve played with that were built in both of them… man they were slow. It was like wading through treacle. Click. Wait. Update. Wait…

It made the WordPress back-end seem fast.

Things may have moved on, but if client-side layout and management of UI components is where the world is heading, it might be a long while before either wins me over. They’d need to become far more usable compared to the much faster native alternatives before I’d consider it viable.

EDIT: I’m not defending our choice of jQuery UI, btw. I don’t like that either, it was only the best of a bad bunch at the time. And Phil had to do a lot of work to make it even halfway usable!

Last edited by Bloke (2018-04-20 12:01:46)

michaelkpate · 2018-04-20 16:44:25

The cool thing about the jQuery vs. React debate is you can always find a YouTube video on the subject. Or 3.

Is jQuery Dead? Should You Still Use It? – https://www.youtube.com/watch?v=OuBPcpAUxQI
Should you Learn jQuery in 2017 and 2018? – https://www.youtube.com/watch?v=QZRrKS3x1rk
Is jQuery Still Relevant in 2018? – https://www.youtube.com/watch?v=pk3tsynNZ0w

Not to mention the other endless argument is React vs. Vue.js.

.

Bloke · 2018-04-20 20:56:12

Vue looks promising. Way less baggage than React or Angular, which is always a good thing in my book.

Textpattern CMS

Textpattern CMS support forum

#1 2017-03-19 11:35:07