0

Este es mi componente Livewire en donde cargo imágenes de una API:

<div
    wire:init="loadTHPS4"
    class="thps-carousel mb-8 py-2" 
    data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "pageDots": false, "groupCells": true }'>
    @forelse ($thps4Results as $thps4)
        <div
            class="box mr-26 carousel-cell rounded-b-none hover:bg-indigo-600 bg-gray-900 hover:rounded-md
                transition-all duration-700 ease-in-out transform hover:scale-105"
            x-data="{show: false}"
            x-on:mouseenter="show = true" 
            x-on:mouseleave="show = false"
        >
            <img
                class="px-2 pt-2"
                src="{{ $thps4['Thumbnail'] }}" 
                alt=""
            >
            <div 
                class="relative h-14 p-2 grid grid-cols-2 items-center rounded-t-none rounded-md"
                x-show="show"
            >
                <svg
                    fill="currentColor"
                    class="w-8 h-8 cursor-pointer"
                    viewBox="0 0 20 20" 
                    version="1.1" 
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                    <g id="Page-1" stroke="none" stroke-width="1" fill="white" fill-rule="evenodd">
                        <g id="icon-shape">
                            <path d="M2.92893219,17.0710678 C6.83417511,20.9763107 13.1658249,20.9763107 17.0710678,17.0710678 C20.9763107,13.1658249 20.9763107,6.83417511 17.0710678,2.92893219 C13.1658249,-0.976310729 6.83417511,-0.976310729 2.92893219,2.92893219 C-0.976310729,6.83417511 -0.976310729,13.1658249 2.92893219,17.0710678 L2.92893219,17.0710678 Z M15.6568542,15.6568542 C18.7810486,12.5326599 18.7810486,7.46734008 15.6568542,4.34314575 C12.5326599,1.21895142 7.46734008,1.21895142 4.34314575,4.34314575 C1.21895142,7.46734008 1.21895142,12.5326599 4.34314575,15.6568542 C7.46734008,18.7810486 12.5326599,18.7810486 15.6568542,15.6568542 Z M7,6 L15,10 L7,14 L7,6 Z" id="Combined-Shape"></path>
                        </g>
                    </g>
                </svg>
                
                <p class="text-sm font-semibold absolute ml-11">
                    {{ $thps4['Title'] }}
                </p>
            </div>
        </div>
    @empty
        @foreach (range(1,6) as $thumbnail)
            <div class="animate-pulse mx-auto pl-2">
                <p class="flex bg-gray-700 rounded-sm h-32 mb-2 mr-2 w-44"></p>
            </div>
        @endforeach
    @endforelse
</div>

En esta estructura existen algunos factores importantes referentes a la implementación de un componente Livewire y hacia una librería Javascript que cargo a través de un CDN (Flickity). El href con el CDN se encuentra en master.blade.php. (más abajo explico como funciona, en donde se encuentra la vista maestra, qué vista utiliza la vista maestra y en dónde se utiliza el componente de Livewire)

  1. wire:init="loadTHPS4" es el método que estoy usando que hace correr una función proveniente de Livewire
  2. Estas son las opciones en cuanto al plug-in de flickity data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "pageDots": false, "groupCells": true }
  3. Tengo una condición, que dice que si el loop inicial se encuentra vacío entonces que se inicie este loop foreach, mientras el componente se encuentre vacío (ya que tarda de 2 a 3 segundos en cargar) que una animación de "carga" tome su lugar hasta que la llamada sea satisfactoria.
     @empty
       @foreach (range(1,6) as $thumbnail)
           <div class="animate-pulse mx-auto pl-2">
               <p class="flex bg-gray-700 rounded-sm h-32 mb-2 mr-2 w-44"></p>
           </div>
       @endforeach

El componente en sí está realizando la solicitud a la API y todo funciona bien por el lado de Livewire ya que las imagenes si se logran visualizar, pero se pierde el plug-in ya que se termina la carga de Livewire.

Este paquete, anteriormente me estaba funcionando con las imágenes de esta misma API. Es una librería Javascript, Flickity https://flickity.metafizzy.co/, la cual implementa un Image slider en el navegador, y me funcionaba bien hasta que quize implementar el Livewire.

Esto es lo que pasa:

  1. Primero la página se carga y cuando esto sucede, las flechas de navegación del image slider, (provenientes del plug-in) aparecen.
  2. Ya que se cargó el Livewire, las flechas se pierden, lo que significa que el plug-in deja de correr entonces las imágenes me aparecen pero no como deberían.

Las imagenes deberían de cargarse en una fila horizontal y no vertical como lo esta haciendo, aparte el plug-in debería de entrar en acción pero se pierde.

¿Cómo puedo cargar el plug-in correctamente?

Implementación del componente Livewire

master.blade.php es mi vista "maestra" que utilizo como mi esqueleto HTML el cuál lo utilizo como componente de Blade anónimo y lo implemento en la vista de welcome.blade.php, esta se encuentra en mi carpeta de componentes. components/master.blade.php

La vista de welcome.blade.php es en donde se carga el componente Livewire:

<x-master>    
    <div class="my-8">

        <div class="px-16">

            <h2 class="text-gray-500 font-semibold pl-4 mb-4">THPS4</h2>
            
            @livewire('thps4')
    
        </div>
    </div>
</x-master>

1 respuesta 1

0

El problema persistía en que cuando el navegador quería cargar el componente Livewire, al ser cargado, la libería Flickity se reinicializaba, aún cuando ya se iniciaba en cuanto el navegador cargaba la página, entonces existía una especie de superposición para ambos.

   <div 
    x-data="{ flkty: null }"
    wire:init="loadTHPS4"
    x-init="
        flkty = new Flickity($refs.carousel, { imagesLoaded: true, cellAlign: 'left', contain: true, wrapAround: true, pageDots: false, groupCells: true });

        Livewire.hook('message.processed', (message, component) => {
        // Check to make sure received message is for this Livewire component and return if not
        if(component != @this.__instance) return

        // Need to delete this otherwise flickity thinks it is already initialised and won't reinitalise
        delete $refs.carousel.flickityGUID

        // Reinitalise flickity
        flkty = new Flickity($refs.carousel, { imagesLoaded: true, cellAlign: 'left', contain: true, wrapAround: true, pageDots: false, groupCells: true })
        })
    "
    class="mb-8 py-2" 
>

Este es el contendor div en donde hago llamar al método que existe en mi componente Livewire, en éste podemos ver como iniciamos el div usando AlpineJs, ponemos como parámetro {flkty : null}, cargamos el método del Livewire y a continuación, iniciamos la librería para que se carge una vez despues de que el método de Livewire haya sido inicializado. Esto lo logre con ayuda de más personas entonces dejaré los comentarios originales.

El componente de tipo vista terminó así y funciona tal y como lo esperaba, no existe ya interrupción en ninguna de las partes.

<div 
    x-data="{ flkty: null }"
    wire:init="loadTHPS4"
    x-init="
        flkty = new Flickity($refs.carousel, { imagesLoaded: true, cellAlign: 'left', contain: true, wrapAround: true, pageDots: false, groupCells: true });

        Livewire.hook('message.processed', (message, component) => {
        // Check to make sure received message is for this Livewire component and return if not
        if(component != @this.__instance) return

        // Need to delete this otherwise flickity thinks it is already initialised and won't reinitalise
        delete $refs.carousel.flickityGUID

        // Reinitalise flickity
        flkty = new Flickity($refs.carousel, { imagesLoaded: true, cellAlign: 'left', contain: true, wrapAround: true, pageDots: false, groupCells: true })
        })
    "
    class="mb-8 py-2" 
>
    <div 
        x-ref="carousel"
        class="m-4 h-40"
    >

        @forelse ($thps4Results as $thps4)
            <div 
                class="box w-full h-full relative pb-44 px-1"
                x-data="{show: false}"
                x-on:mouseenter="show = true"
                x-on:mouseleave="show = false"
                wire:key="results-{{ $thps4['_id'] }}"
            >
                <img 
                    class="carousel-cell hover:rounded-md rounded-sm
                           transition-all duration-500 ease-in-out transform hover:scale-105 object-contain"
                    src="{{ $thps4['Thumbnail'] }}" 
                    alt=""
                >
                    <div
                        class="relative bottom-0 w-full h-full p-1 flex items-center justify-center rounded-md rounded-t-none bg-green-700"
                        x-show="show"
                    >
                        <svg
                            fill="currentColor"
                            class="absolute left-2 w-8 h-8 cursor-pointer hover:bg-red-700 rounded-full transition ease-in-out duration-300"
                            viewBox="0 0 20 20" 
                            version="1.1" 
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                        >
                            <g id="Page-1" stroke="none" stroke-width="1" fill="white" fill-rule="evenodd">
                                <g id="icon-shape">
                                    <path d="M2.92893219,17.0710678 C6.83417511,20.9763107 13.1658249,20.9763107 17.0710678,17.0710678 C20.9763107,13.1658249 20.9763107,6.83417511 17.0710678,2.92893219 C13.1658249,-0.976310729 6.83417511,-0.976310729 2.92893219,2.92893219 C-0.976310729,6.83417511 -0.976310729,13.1658249 2.92893219,17.0710678 L2.92893219,17.0710678 Z M15.6568542,15.6568542 C18.7810486,12.5326599 18.7810486,7.46734008 15.6568542,4.34314575 C12.5326599,1.21895142 7.46734008,1.21895142 4.34314575,4.34314575 C1.21895142,7.46734008 1.21895142,12.5326599 4.34314575,15.6568542 C7.46734008,18.7810486 12.5326599,18.7810486 15.6568542,15.6568542 Z M7,6 L15,10 L7,14 L7,6 Z" id="Combined-Shape"></path>
                                </g>
                            </g>
                        </svg>

                        <p class="text-sm font-semibold ml-14">
                            {{ $thps4['Title'] }}
                        </p>
                    </div>
            </div>
        @empty
            @foreach (range(1,6) as $thumbnail)
                <div class="animate-pulse mx-auto w-full h-full" wire:key="empty-{{ $thumbnail }}">
                    <p class="flex bg-gray-700 rounded-sm mb-2 mr-2 w-full h-full"></p>
                </div>
            @endforeach
        @endforelse
    </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.