Gridster Bundle Laravel Package

Getting Started

Minimal Setup

1. Install the Bundle:

   composer require babaganoush/gridster-bundle:dev-master
   

   Update AppKernel.php to include:

   new Babaganoush\GridsterBundle\BabaganoushGridsterBundle(),
   

2. Install Assets:

   php app/console assets:install web --symlink
   

3. First Use Case: Include assets in a Twig template (e.g., base.html.twig):

   <link rel="stylesheet" href="{{ asset('bundles/babaganoushgridster/css/jquery.gridster.css') }}">
   <script src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
   <script src="{{ asset('bundles/babaganoushgridster/js/jquery.gridster.js') }}"></script>
   

4. Basic Gridster Initialization:

   <div id="grid"></div>
   <script>
       $(function() {
           $('#grid').gridster({
               widget_margins: [10, 10],
               widget_base_dimensions: [140, 140]
           });
       });
   </script>
   

Implementation Patterns

Common Workflows

1. Dynamic Widgets: Use Symfony Twig to render widgets dynamically (e.g., from a database):

   {% for widget in widgets %}
       <div class="gridster-item">
           <div class="gridster-widget">
               {{ widget.content }}
           </div>
       </div>
   {% endfor %}
   

2. Responsive Gridster: Combine with Symfony’s asset versioning for cache-busting:

   <script src="{{ asset('bundles/babaganoushgridster/js/jquery.gridster.js', {'version': 'v1.0'}) }}"></script>
   

3. Integration with Symfony Forms: Use Gridster to display form collections (e.g., drag-and-drop form fields):

   $('#grid').gridster({
       serialize_params: function($w, wgd) {
           return { id: $w.find('.gridster-widget').data('id') };
       }
   });
   

Best Practices

• Asset Management: Use --symlink for development to avoid bloating web/bundles.
• Versioning: Tag releases in composer.json to avoid dev-master in production.
• Twig Extensions: Create a custom Twig extension to generate Gridster JS config from Symfony services.

Gotchas and Tips

Pitfalls

1. Outdated Gridster Version: The bundle ships with gridster.js v0.5.6 (2014). Override assets in app/Resources/public/ if you need newer features.

   cp vendor/babaganoush/gridster-bundle/Resources/public/js/jquery.gridster.js web/bundles/babaganoushgridster/js/
   

2. jQuery Dependency: The bundle includes bmatzner/jquery-bundle, but ensure no conflicts with other jQuery versions in your project.

3. Symfony 2.x Only: The bundle is untested on Symfony 3+ or 4+. Fork and update if needed.

Debugging Tips

• Console Errors: Check browser console for missing assets or jQuery conflicts.
• Gridster Events: Use console.log to debug events (e.g., gridster-add-widget).

  $('#grid').bind('gridster-add-widget', function(e, $w, $gs) {
      console.log('Added widget:', $w);
  });
  

Extension Points

1. Custom Widget Templates: Override Twig templates in app/Resources/BabaganoushGridsterBundle/views/ to modify widget rendering.

2. Symfony Services: Inject Symfony services (e.g., EntityManager) into Gridster callbacks via Twig:

   <script>
       var emPath = '{{ path('api_em_proxy') }}';
       // Use emPath in Gridster callbacks
   </script>
   

3. Webpack Encore: If using Encore, manually copy Gridster assets to public/ and exclude the bundle’s assets.