Mootools Laravel Package

Getting Started

Minimal Steps

1. Installation Require the package via Composer:

   composer require contao-components/mootools
   

   Publish the assets (if using Contao integration):

   php artisan vendor:publish --tag=mootools-assets
   

2. First Integration Include MooTools in a Blade template:

   @mootools
   

   This injects the MooTools script into your layout (typically in the footer).

3. Basic Usage Example Add a click handler to a button:

   document.addEvent('domready', function() {
       $('myButton').addEvent('click', function() {
           alert('Button clicked!');
       });
   });
   

   Ensure your HTML includes:

   <button id="myButton">Click Me</button>
   

4. Where to Look First

   • Package Structure: vendor/contao-components/mootools/src/ for core files.
   • Published Assets: public/vendor/mootools/ (if published).
   • Blade Directives: Check resources/views/vendor/mootools.blade.php for template logic.

Implementation Patterns

Workflows

1. Legacy Contao Migration

   • Pattern: Use MooTools to replicate Contao’s frontend behavior in Laravel.
   • Example: Port Contao’s modal dialogs to Laravel using MooTools’ Fx and Class utilities.

   // Contao-style modal in Laravel
   var modal = new Element('div', {
       'class': 'modal',
       styles: {
           display: 'none'
       }
   }).inject(document.body);
   
   modal.addEvent('click:relay(.close)', function() {
       modal.setStyle('display', 'none');
   });
   

2. Isolated MooTools Components

   • Pattern: Load MooTools only for specific routes or components.
   • Implementation:
     • Use middleware to conditionally include MooTools:

       // app/Http/Middleware/MooToolsMiddleware.php
       public function handle($request, Closure $next) {
           if ($request->is('admin/*')) {
               $request->mootools = true;
           }
           return $next($request);
       }
       

     • Blade check:

       @if(request()->mootools)
           @mootools
       @endif
       

3. Laravel + MooTools AJAX

   • Pattern: Use MooTools’ Request for API calls to Laravel endpoints.
   • Example:

     new Request({
         url: '/api/update-status',
         method: 'post',
         data: { status: 'active' },
         onSuccess: function(response) {
             $('statusIndicator').set('text', response.status);
         }
     }).send();
     

4. Dynamic Asset Loading

   • Pattern: Load MooTools asynchronously to avoid blocking.
   • Implementation:

     <script>
         document.addEvent('domready', function() {
             var script = new Element('script', {
                 src: "{{ asset('vendor/mootools/mootools-core.js') }}",
                 type: 'text/javascript'
             }).inject(document.head);
         });
     </script>
     

5. Integration with Laravel Mix

   • Pattern: Bundle MooTools with Laravel’s asset pipeline.
   • Config:

     // webpack.mix.js
     mix.js('resources/js/mootools-app.js', 'public/js')
         .alias({
             mootools: path.resolve(__dirname, 'node_modules/mootools/mootools-core.js')
         });
     

   • Usage:

     // resources/js/mootools-app.js
     import 'mootools';
     document.addEvent('domready', () => {
         console.log('MooTools ready!');
     });
     

Gotchas and Tips

Pitfalls

1. DOM Ready Race Conditions

   • Issue: MooTools code may execute before the DOM is fully loaded if not wrapped in domready.
   • Fix: Always use:

     document.addEvent('domready', function() {
         // Your MooTools code
     });
     

2. Selector Conflicts

   • Issue: MooTools’ $$() and $() selectors may conflict with jQuery or vanilla JS.
   • Fix: Use unique class names or IDs for MooTools-managed elements.

3. Laravel Mix Bundling Issues

   • Issue: MooTools may not be properly bundled with Laravel Mix.
   • Fix: Explicitly include it in your entry file:

     import 'mootools';
     // Your app code
     

4. Contao-Specific Quirks

   • Issue: Contao’s MooTools extensions (e.g., Contao.Fx) may not work out-of-the-box.
   • Fix: Check the Contao documentation for required extensions and include them manually.

5. Performance Overhead

   • Issue: MooTools adds ~30–50KB to your bundle, increasing load time.
   • Fix: Load MooTools asynchronously or only on pages that need it.

6. Deprecation Warnings

   • Issue: Modern browsers may show deprecation warnings for MooTools.
   • Fix: Suppress warnings or replace MooTools with modern alternatives (e.g., vanilla JS or Alpine.js).

Debugging Tips

1. Console Errors

   • Use try-catch blocks to handle MooTools errors gracefully:

     try {
         $$('.nonexistent').addEvent('click', function() {});
     } catch (e) {
         console.error('MooTools error:', e);
     }
     

2. Selector Debugging

   • Verify selectors work as expected:

     console.log($$('body .my-class').length); // Check if elements are found
     

3. Event Listener Leaks

   • Remove event listeners to avoid memory leaks:

     var event = $('element').addEvent('click', function() {});
     // Later...
     event.remove();
     

4. Laravel Logs

   • Check Laravel logs for asset publishing issues:

     tail -f storage/logs/laravel.log
     

Extension Points

1. Custom MooTools Builds

   • Tip: Create a custom MooTools build with only the modules you need (e.g., Core, Element, Request) to reduce bundle size.
   • Tool: Use MooTools Builder to generate a lightweight version.

2. Laravel Facades

   • Tip: Create a Facade for MooTools to integrate it more tightly with Laravel:

     // app/Facades/MooTools.php
     namespace App\Facades;
     use Illuminate\Support\Facades\Facade;
     class MooTools extends Facade {
         protected static function getFacadeAccessor() { return 'mootools'; }
     }
     

   • Service Provider:

     // app/Providers/MooToolsServiceProvider.php
     public function register() {
         $this->app->singleton('mootools', function() {
             return new \MooTools\MooTools();
         });
     }
     

3. Blade Directives

   • Tip: Extend Blade directives for MooTools:

     // app/Providers/BladeServiceProvider.php
     Blade::directive('mootools', function() {
         return '<script src="{{ asset("vendor/mootools/mootools-core.js") }}"></script>';
     });
     

4. Testing

   • Tip: Use Laravel’s testing helpers to mock MooTools:

     $this->withoutJavaScript(); // Disable JS if not needed
     // Or mock MooTools in PHPUnit:
     $this->partialMock(MooTools\MooTools::class, ['someMethod']);