RickArt blog

A feature of this configuration is that we must have a toggle button that allows to change the visibility of the window filters. For a configuration similar to the first snapshoot our layout.php will be similar to:

<div id="menuwrapper">
  <ul>
     <li><?php echo link_to('Píldoras', '@lib_pill'); ?></li>
     <li><a href="#">Atributos</a>
     ...
     // Rest of menu
  </ul>
  <ul style="float:right">
    <?php if (sfContext::getInstance()->getActionName() == 'index'): ?>
      <li>
        <?php echo link_to_function(__('No active filters'),
                                    'showFilters()',
                                    array('id'=>'filters_link'));
        ?>
      </li>
    <?php endif; ?>
    <li class="dark"><?php echo link_to('Cerrar sesión', '@signout'); ?></li>
  </ul>
</div>

<div id="content">
  <?php echo $sf_content ?>
</div>

...

It's important to pay attention at the first condition to ensure that this button is showed only when we are in a listing.

The function that is called from the button must be defined in anywhere, for example main.js or admin.js. The code of this function must be: (Please note that we have previously included the jQuery libraries)

function showFilters (module)
{
	var action = ($("#sf_admin_bar").dialog('isOpen'))? 'close':'open';
	$("#sf_admin_bar").dialog(action);
}

Finally, in order to run the filters in this new form, we take advantage of the way in which Symfony generates the code, its nomenclature and the capabilities of jQuery to traverse the elements of HTML items. The final layout.php shines as follows:

// Menu configured as we have said previously

<div id="content">
  <?php echo $sf_content ?>
</div>

<?php if (sfContext::getInstance()->getActionName() == 'index'): ?>

<script type="text/javascript">
  $("#sf_admin_bar").dialog({
                           autoOpen: false,
                           width: 600,
                           height: 500,
                           title: '<?php echo __('Filters') ?>' });

  var hasFilter = false;
  $("*[id*='lib_<?php echo sfContext::getInstance()->getModuleName(); ?>_filters']").each(function(i)  {
    if (this.name.indexOf('[is_empty]') != -1) {
      if (this.checked) {
        hasFilter = true;
      }
    }
    else if (this.value.length > 0) {
      hasFilter = true;
    }
  });

  if (hasFilter)
  {
    $("#filters_link").text('<?php echo __('There are active filters'); ?>');
    $("#filters_link").css('background-color','#F1B2B2');
  }
</script>

<?php endif; ?>

Voilà:

This fragment is valid for all modules because it uses the function getModuleName(). When there are active filters, we change the background color of filters-toggle button to notify the user.

Enjoy !