Livewire Modal Twitter Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require lao9s/livewire-modal-twitter
   php artisan vendor:publish --tag=livewire-modal-twitter:public --force
   

2. Include Dependencies Add Alpine.js and TailwindCSS (or your preferred CSS framework) to your layout:

   <!-- Alpine.js -->
   <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
   
   <!-- TailwindCSS (optional, if not using locally) -->
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
   

3. Add Directives Place these in your root template (e.g., resources/views/layouts/app.blade.php):

   @livewire('livewire-modal-twitter')
   @livewireModalTwitterScript
   

4. First Use Case Trigger a modal from a button:

   <button wire:click="$emit('open-modal', { title: 'Hello', content: 'World' })">
       Open Modal
   </button>
   

Implementation Patterns

Core Workflow

1. Triggering Modals Use Livewire events to open modals dynamically:

   <!-- Open a simple modal -->
   <button wire:click="$emit('open-modal', { title: 'Confirm', content: 'Are you sure?' })">
       Confirm Action
   </button>
   
   <!-- Open a modal with an image gallery -->
   <button wire:click="$emit('open-modal', {
       title: 'Gallery',
       content: '<img src="image1.jpg" class="w-full">',
       images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
   })">
       View Gallery
   </button>
   

2. Customizing Modal Content Pass structured data via $emit:

   $emit('open-modal', {
       title: 'Dynamic Content',
       content: '<div class="p-4">Custom HTML here</div>',
       buttons: [
           { text: 'Cancel', action: 'close-modal' },
           { text: 'Submit', action: 'submit-form' }
       ]
   });
   

3. Handling Modal Events Listen for modal interactions in your Livewire component:

   public function closeModal()
   {
       $this->emit('close-modal');
   }
   
   public function submitForm()
   {
       // Handle form submission
       $this->closeModal();
   }
   

4. Image Gallery Integration Use the images key to enable gallery mode:

   <button wire:click="$emit('open-modal', {
       images: ['img1.jpg', 'img2.jpg'],
       showGallery: true
   })">
       Open Gallery
   </button>
   

5. Reusing Modals Create a dedicated Livewire component for reusable modals:

   // app/Http/Livewire/ReusableModal.php
   class ReusableModal extends Component
   {
       public $title, $content, $images = [];
   
       public function mount($data)
       {
           $this->title = $data['title'] ?? '';
           $this->content = $data['content'] ?? '';
           $this->images = $data['images'] ?? [];
       }
   
       public function render()
       {
           return view('livewire.reusable-modal');
       }
   }
   

   Trigger it via:

   <button wire:click="$emit('open-modal', {
       component: 'reusable-modal',
       data: { title: 'Reusable', content: 'Content' }
   })">
       Open Reusable
   </button>
   

Gotchas and Tips

Common Pitfalls

1. Missing Alpine.js

   • Symptom: Modal fails to open or close.
   • Fix: Ensure Alpine.js is loaded before @livewireModalTwitterScript.

2. TailwindCSS Conflicts

   • Symptom: Modal styling is broken if using a different CSS framework.
   • Fix: Publish the modal templates and override classes:

     php artisan vendor:publish --tag=livewire-modal-twitter:views --force
     

     Then customize resources/views/vendor/livewire-modal-twitter/modal.blade.php.

3. Event Listener Mismatch

   • Symptom: $emit('open-modal') doesn’t trigger the modal.
   • Fix: Ensure the Livewire component is properly registered and the directive is included in the root template.

4. Image Gallery Not Loading

   • Symptom: Gallery images fail to display.
   • Fix: Verify the images array contains full URLs or paths resolvable by your asset pipeline (e.g., asset('images/img1.jpg')).

5. Z-Index Issues

   • Symptom: Modal appears behind other elements.
   • Fix: Override the modal’s z-index in your CSS:

     .livewire-modal-twitter { z-index: 9999 !important; }
     

Debugging Tips

1. Check Console for Errors Open browser dev tools (F12) to verify Alpine.js and Livewire events are firing correctly.

2. Inspect Livewire Events Add a temporary listener to debug emitted events:

   window.addEventListener('livewire:init', () => {
       Livewire.on('open-modal', (data) => {
           console.log('Modal data:', data);
       });
   });
   

3. Verify Published Assets After publishing, check if the modal’s JS/CSS files are linked in your layout:

   <script src="{{ asset('vendor/livewire-modal-twitter/js/modal.js') }}"></script>
   

Extension Points

1. Custom Modal Templates Override the default modal template by publishing and modifying:

   php artisan vendor:publish --tag=livewire-modal-twitter:views
   

   Edit resources/views/vendor/livewire-modal-twitter/modal.blade.php.

2. Add Animation Extend the modal with Alpine.js animations:

   <script>
       document.addEventListener('alpine:init', () => {
           Alpine.data('modal', () => ({
               open: false,
               transition: true,
               toggle() { this.open = !this.open; }
           }));
       });
   </script>
   

3. Dynamic Button Actions Pass callable actions via $emit:

   <button wire:click="$emit('open-modal', {
       buttons: [
           { text: 'Delete', action: 'deleteItem', data: { id: 123 } }
       ]
   })">
       Delete
   </button>
   

   Handle in Livewire:

   public function deleteItem($id)
   {
       // Logic here
       $this->closeModal();
   }
   

4. Form Integration Use the modal for forms by binding Livewire inputs:

   <button wire:click="$emit('open-modal', {
       component: 'create-post',
       data: {}
   })">
       Create Post
   </button>
   

   In CreatePost.php:

   public $title, $content;
   public function mount($data) { /* ... */ }
   

5. Dark Mode Support Add dark-mode classes dynamically:

   <div x-data="{ dark: false }" class="dark:bg-gray-800">
       <!-- Modal content -->
   </div>