Contributte multiplier – vytvoření elementu a nereagující snippet (resp. redraw)

Martk napsal(a):

Vypadá to, že máš starší verzi multiplieru. SubmitButton má event $submitter->onAnchor[]? Neviděl jsem ho tam nikdy, vždy jsem používal $submitter->onClick[]

@Martk
To onAnchor[] jsem tam zapomněl, našel jsem to v jiném příspěvku ohledně multiplieru. Ale ani s onClick[] to nefungovalo a nefunguje.
Multiplier mám `contributte/forms-multiplier: dev-master #f2cf, Nette 3.0.5 a na PHP 7.4.6

Z nějakého důvodu pořád podezřívám nefunkčnost snippetu, resp. Redrawu. V odpovědi serveru po kliku na ten createButton se mi vrátí celá HTML stránka a je v ní i to nově přidané pole správně, ale web se mi nijak nerefreshne.
Ani do toho snippetu, který je třeba jen nad multiplierem, se mi nenačte ta celá HTML odpověd (to by se samozřejmě form rozpadl jak nemá, ale proběhl by tam očividně ten redraw, což se nejspíš neděje)

Editoval MikKuba (21. 10. 2020 15:22)

Martk napsal(a):

V tom případě v addCreateButton neexistuje 3 argument, musíš použít toto:

$multiplier->addCreateButton('Add')
			->addOnCreateCallback(function (Submitter $submitter) {
				$submitter->onClick[] = function (): void {
					$this->redrawControl(...);
				};
			})
			->addClass('ajax');

Ach, tohle jsem přehlídl, že to umí jen dva parametry. Za to řešení addOnCreateCallback() moc díky, funguje!

Tam se to použije stejně jako v addCreateButton

$multiplier->addRemoveButton('Remove')
			->addOnCreateCallback(function (SubmitButton $submitter) {
				$submitter->onClick[] = function (): void {
					$this->redrawControl(...);
				};
			})

Editoval Martk (21. 10. 2020 18:43)

@Martk
Navíc ta metoda $questions->addRemoveButton('Smazat otázku')->addOnCreateCallback() se skutečně nespustí, i když z ní volám neexistující funkci, nic se nestane. Když stejnou neexistující dám do $questions->addCreateButton('+ Přidat otázku')->addOnCreateCallback() tak to normálně vyhodí chybu, že volám neexistující funkci.

S tímto jsem teď trochu v koncích, protože zjišťuju že při tom mazacím callbacku potřebuju i danou položku smazat z DB pokud tam je, což teď nemůžu, protože se mi na to nezavolá funkce.

@Martk
Zpětně děkuju za ten fix, pomohlo to :)

Po nějakém čase jsem narazil na další oříšek a nevím, jak s ním naložit.

Formulář, v němž kromě několika polí je i multiplier, mám obalenný snippetem, abych při vytvoření/smazání nějakého pole to měl ihned obnovené.
Do textového pole uvnitř multiplieru jsem nastavil načítání mceEditoru (Tiny 5.0.6), mám jej stažený, nenačítám skrz CDN.
Mám trochu problém s rychlostí načítání. V momentě, kdy mám v multiplieru vytvořených třeba už 5 kontejnerů, každý v jednom svém textovém poli obsahuje TinyMce, který se na to pole vlastně volá při každém ajax refreshi a už to zabírá viditelné množství času == neproběhne nějaký hladký refresh a přidání nového kontejneru v rámci třeba sekundy, ale třeba to trvá už 4 sekundy.
Prvně jsem neměl žádnou preloader animaci, protože vše běželo rychle. Ale jakmile toto trvá 4 sekundy, uživatel si může myslet, te kliknul špatně a zavolá znovu createButton a tím to ještě více zaseká. Proto jsem během ajaxu přidal zobrazení loading kolečka a na web nejde dočasně klikat. Ale to neřeší problém, že při každém kliknutí na addCreateButton překresluji snippet s multipliery a tím překreslením na ně znovu volám inicializaci tiny.

Není na to nějaká šikovná fíčurka prosím?

{snippetArea wrapper}
{form form class => 'form-horizontal', autocomplete=>"off"}

        {snippet questions}
                {var $counter = 0}
                <div n:multiplier="questions" class="form-group questions">
                        {input id }
                        <div class="col-sm-6 float-right mb-2 select-question-type">{input type id => 'type-'. $counter, onchange => "changeType(this)"}</div>
                        <div class="col-sm-6 control-label">{label question /}</div>
                        <div class="col-sm-12 mt-4">{input question class => "form-control mceEditorSmall"}</div>
                        <div class="form-group question-settings">
                                <div class="col-sm-3 control-label">{label points /}</div>
                                <div class="col-sm-6">{input points }</div>
                        </div>
                        <div class="form-group question-settings">
                                <div class="col-sm-9 checkbox-inline">{input required }</div>
                        </div>
                        <div style="clear: both;"></div>
                        {btnRemove questions, class => "btn btn-xs btn-danger ajax"}

                        <script n:syntax="double" defer>
                                $('#preloader').show("fast", function(){
                                        if (typeof checkType === "function") {
                                                checkType(document.getElementById('type-' + {{$counter}}));
                                        }
                                        if (typeof initMCE === "function") {
                                                initMCE();
                                        }
                                        $('#preloader').delay(100).fadeOut('slow', function() {
                                          $(this).hide();
                                        });
                                });

                        </script>
                        {var $counter = $counter +1}
                </div>
        {/snippet}
	{btnCreate questions, class => "btn btn-xs btn btn-info ajax"}
{/form}
{/snippetArea}

No a to JSko s tiny.init() je dole v šabloně:

<script defer>
                        function initMCE(){
                                tinymce.remove();
                                tinyMCE.init({
                                        selector: ".mceEditorSmall",
                                        height: 150,
                                        plugins: '',
                                        toolbar1: 'bold superscript subscript',
                                        menubar: "",
                                        entity_encoding: "raw",
                                        setup: function (editor) {
                                                editor.on('change blur', function () {
                                                    tinymce.triggerSave();
                                                });
                                        }
                                });

                                tinyMCE.init({
                                        mode: "specific_textareas",
                                        editor_selector: "mceEditor",
                                        height: 350,
                                        plugins: 'media autolink directionality visualblocks visualchars image link table charmap hr anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help',
                                        toolbar1: 'media | formatselect | bold underline italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat ',
                                        menubar: "",
                                        entity_encoding: "raw"
                                });
                        }
                </script>

Ten .mceEditor se používá jen na jiný textový blok mimo multiplier, na začátku formu.
Reset pomocí tinymce.remove(); tam je kvůli tomu, že bez toho se mi provede ajax poměrně rychle, ale ten tinyEditor se aplikuje jen na posledně přidaný multiplier a jeho textArea a všechny předešlé containery zůstanou jen s obyčejnou textArea bez editoru.

@Martk
Asi bych chtěl mít víc pod kontrolou překreslování snippetu, protože když jsem si přidal do kontejneru ještě upload pro obrázek, vložím obrázek a v momentě kliknutí na addCreateButton se mi při redrawu ten zvolený soubor z addUpload smaže.
Nepodařilo se mi vygooglovat ale něco, z čeho bych pochopil jakým způsobem můžu ručně ovlivnit to, co se ve snippetu překreslí. Protože hádám že v multiplieru není nějaká možnost že addCreateButton provede jen přidání a ty předtím vytvořené kontejnery nechá bez manipulace?

@Martk
Wow, to je super. Zkusil jsem, nasadil ten replaceable class na všechny btnCreate nebo remove a přidal ten skript s Najou dolů do šablony (importuji přímo naja.js soubor, nemám takhle žádný JS modul ve kterým by to šlo importnout – takže ten řádek s require(‚naja‘) jsem vyhodil).

Potom jsem zjistil že to ID snippetu s question se jmenuje snippet-form-questions, refresh už probíhá svižně, jen teda se mi tam nenačte ten tinyMce :/ Tam mi to hlásí Uncaught Error: Node cannot be null or undefined, což mi přijde, že se mi zavolá ta funkce ale nemá k sobě načtený všechny potřebný JS.

Takhle to mám na konci šablony:

<script>
                        function createElementFromTemplate(content) {
                            const template = document.createElement('template');
                            template.innerHTML = content;

                            return template.content;
                        }

                        naja.snippetHandler.addEventListener('beforeUpdate', (event) => {
                            if (event.detail.snippet.id !== 'snippet-form-questions') {
                                return;
                            }

                            const target = event.detail.snippet;

                            const replaceableClass = target.dataset.replaceable;

                            const containers = {};
                            target.querySelectorAll('[data-container]').forEach((container) => {
                                containers[container.dataset.container] = container;
                            });

                            const source = createElementFromTemplate(event.detail.content);
                            source.querySelectorAll('[data-container]').forEach((container) => {
                                const id = container.dataset.container;

                                if (!containers.hasOwnProperty(id)) {
                                    // new element
                                    initMCE();
                                    target.appendChild(container);
                                } else {
                                    // old element - replace replaceable
                                    const original = containers[id].querySelectorAll(replaceableClass);
                                    const actual = container.querySelectorAll(replaceableClass);

                                    if (original.length !== actual.length) {
                                        throw new Error('Something gone wrong...');
                                    }

                                    original.forEach((el, index) => {
                                        el.replaceWith(actual[index]);
                                    });

                                    delete containers[id];
                                }
                            });

                            // remove containers
                            const values = Object.values(containers);
                            if (values.length) {
                                values.forEach(container => {
                                    container.remove();
                                });
                            }

                            event.preventDefault();
                        });

                        document.addEventListener('DOMContentLoaded', () => naja.initialize());

                </script>

Nad tím je <script> s initem toho tinyMCE a někde víš pak import toho JS pro tiny.

EDIT: Tak jsem do té části //new element hodil místo volání funkce samotný ten blok s inicializací toho „mini“ editoru a už se to načte, jen teda pro posledně přidaný container, a všechny předešlé ho tím ztratí :/

Editoval MikKuba (12. 11. 2020 21:01)

Ty scripty uvnitř multiplieru jsem tam nechtěně nechal, ty by tam být neměly… máš tam jen loader a ten se dá navěsit na naja události (https://naja.js.org/#…)

addUpload je stejný problém jako u tinyMce, tudíž stejné možnosti řešení

Klidně ten script můžeš upravit z

if (event.detail.snippet.id !== 'snippet--questions') {

{snippet questions}

na

if (event.detail.snippet.classList.has('js-multiplier')) {

<div n:snippet="questions" class="js-multiplier">

a pak to můžeš použít na kterýkoliv multiplier.

@MikKuba ten <script> s naja by neměl být v tom snippetu, ale úplně mimo. Klidně v patičce hned. Myslím si, že naja.eventListener beforeUpdate se vůbec nespustí, když se překreslí i upload