FlashMessage popup automaticky

mimacala

Zdravíčko,
je nějaká možnost jak udělat z flashmessage pop up přes bootstrap ?
Přesně tedy nevím jak vyvolat popup vždy když je FlashMessage vyvolána.

Pokud si tedy vezmu jednoduchý vzor z bs dokumentace, jak místo tlačítka dám automatickou akci při vyvolání flashmessage ?

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div n:foreach="$flashes as $flash" n:class="flash, $flash->type" data-toggle="modal">
        <div class="alert alert-primary" role="alert">
        <p>{$flash->message}</p>
          </div>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
 <div n:foreach="$flashes as $flash" n:class="flash, $flash->type" data-toggle="modal">
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <div class="alert alert-primary" role="alert">
        <p>{$flash->message}</p>
          </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div>

Zkusil jsem to celé hodit do foreach ale tím se popup neotevře :/
Děkuji

Marek Bartoš

Myslím že chceš spíš alert, který se vykreslí rovnou viditelný v kombinaci s fixním pozicováním
https://getbootstrap.com/…ents/alerts/

Lumeriol

Já to třeba řeším Bootstrapovou komponentou Toast a zobrazím si flashky ve snippetu pomocí javascriptu (Naja). Výhodou proti BS Alertu je, že ti to nerozbije layout a zobrazíš si to relativně kde chceš a na jak dlouho chceš.

naja.snippetHandler.addEventListener('afterUpdate', (event) => {
    if (event.detail.snippet.id === 'snippet--flashes') {
        let toastElList = [].slice.call(document.querySelectorAll('.toast'));
        let toastList = toastElList.map(function (toastEl) {
            return new bootstrap.Toast(toastEl, {'animation': true, 'delay': 4000}).show();
        });
    }
});

emololftw

Lumeriol napsal(a):

Já to třeba řeším Bootstrapovou komponentou Toast a zobrazím si flashky ve snippetu pomocí javascriptu (Naja). Výhodou proti BS Alertu je, že ti to nerozbije layout a zobrazíš si to relativně kde chceš a na jak dlouho chceš.
naja.snippetHandler.addEventListener('afterUpdate', (event) => {
    if (event.detail.snippet.id === 'snippet--flashes') {
        let toastElList = [].slice.call(document.querySelectorAll('.toast'));
        let toastList = toastElList.map(function (toastEl) {
            return new bootstrap.Toast(toastEl, {'animation': true, 'delay': 4000}).show();
        });
    }
});

Řeším to úplně stejně. Souhlasím, jen, BS alerty je možné taktéž zobrazit kdekoliv a to přidání na rodiče třídu position-absolute

mimacala

Ahojte,
snažím se to vymyslet pro mě jednodušeji :)
Bude někdo vědět prosím jak spustit script ?
v @layout mám

       <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
                <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                  <div class="toast-header">
                    <img src="..." class="rounded me-2" alt="...">
                    <strong class="me-auto">Zpráva</strong>
                    <small>Hlavička</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">
                        <div n:foreach="$flashes as $flash" n:class="flash, $flash->type" data-toggle="modal">
                         <div class="alert alert-primary" role="alert">
                         <p>{$flash->message}</p>
                           </div>
                       </div>
                  </div>
                </div>
              </div>

a chtěl bych při spuštění flashmessage zapnout tento script

echo"<script type='text/JavaScript'>
                        $(document).ready(function(){
                          $('.toast').toast('show');
                        });
                        </script>";

tento script mám v control.php

public function flashMessage($message, string $type = 'info'): \stdClass
	{
             echo"<script type='text/JavaScript'>
                        $(document).ready(function(){
                          $('.toast').toast('show');
                        });
                        </script>";
		$id = $this->getParameterId('flash');
		$flash = $message instanceof \stdClass ? $message : (object) [
			'message' => $message,
			'type' => $type,
		];
		$messages = $this->getPresenter()->getFlashSession()->$id;
		$messages[] = $flash;
		$this->getTemplate()->flashes = $messages;
		$this->getPresenter()->getFlashSession()->$id = $messages;

		return $flash;
	}

ovšem vyhodí mi to chybu

Possible problem: you are sending a HTTP header while already having some data in output buffer.

Stále se učím :), takž je nějaká možnost jak script spustit později když v bufferu nejsou data ?
Děkuji

Kamil Valenta

Dej si ten script přímo do šablony.

{if count($flashes)}
<script type='text/JavaScript'>
    $('.toast').toast('show');
</script>
{/if}

Musí to být součástí snippetu s flashmessages, který invaliduješ.

Editoval Kamil Valenta (1. 3. 2022 17:08)

mimacala

Vložil jsem zde, ale nefunguje :/

    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
                <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                  <div class="toast-header">
                    <img src="..." class="rounded me-2" alt="...">
                    <strong class="me-auto">Zpráva</strong>
                    <small>Hlavička</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">
                        <div n:foreach="$flashes as $flash" n:class="flash, $flash->type" data-toggle="modal">
                            {if count($flashes)}
                                <script type='text/JavaScript'>
                                    $('.toast').toast('show');
                                </script>
                                {/if}

                         <div class="alert alert-primary" role="alert">
                         <p>{$flash->message}</p>
                           </div>
                       </div>
                  </div>
                </div>
              </div>

Tedy funkce count vrací počet flashmessage a pro každou mi to zobrazí jedno okno ?

mimacala

Už funguje, kód <script> nebyl celý přehlédl jsem to :D
Děkuji