Custom block that's always the first thing in a region?

Question

I'm trying to create a region for my Drupal 7 theme that will be clickable drop-down to allow the user to log in/out, access their profile page and a few of other things. The best analogy I can come up with is that I'm trying to create something similar to the sort of drop-down that you see on sites like Twitter. (It's not exactly the same as what I'm trying to build, but close enough to demonstrate my point.)

Now, neither styling the region nor implementing a show/hide behavior in jQuery is difficult. The key here is to add a bit of custom HTML to the region that will wrap outside the blocks, but inside the region itself.

The output should look something like this:

<div class="region region-name"> <!-- region -->
    <!-- custom HTML "wrapper" -->
    <p><a href="link-to-activate-dropdown">Click here</a></p>
    <div id="wrapper">

        < blocks go here >

    </div> <!-- /custom HTML "wrapper" -->
</div> <!-- /region -->

It's also important to make sure users can't move or delete this special stuff, so I think this should probably go in template.php, but since I'm a Drupal theming newbie, I'm not sure.

Anyone have an idea how to do this?

Answer 1

After a little digging, I found out that Drupal 7 includes support for a new template called region.tpl.php. I created one and here's what it looks like:

<?php if ($content): ?>
  <?php if ($region == 'popdown'): ?>
  <div class="<?php print $classes; ?>">
    <a href="link-to-activate" id="popdown-link">Click</a>
    <div id="popdown-wrapper">
      <?php print $content; ?>
    </div>
    <script type="text/javascript">
    jQuery('#popdown-link').click(function(e) {
      e.preventDefault();
      jQuery('#popdown-wrapper').toggle();
    });
    </script>
  </div>
  <?php else: ?>
  <div class="<?php print $classes; ?>">
    <?php print $content; ?>
  </div>
  <?php endif; ?>
<?php endif; ?>

It's not terribly elegant, but it seems to work with no errors. Now I can focus on cleaning it up and getting the logic out of the region.tpl.php (i.e., moving the inner if/else into template.php and the jQuery into script.js.)

Answer 2

Your "custom HTML wrapper" is only useful for the Javascript, so you are looking at this the wrong way: the HTML generated by Drupal should not contain it, and it should be the job of the Javascript to transform the markup of the region to fit its use.

You probably want something like this:

$('<your selector>').each(function() {
  // Wrap all the content of the region inside a wrapper.
  $(this).wrapInner('<div class="my-custom-wrapper" />');

  // Create a link and insert it into the region.
  var link = $('<p><a href="link-to-activate-dropdown">' + Drupal.t('Click here') + '</a></p>');
  link.prependTo($(this)).click(function() {
    // Your custom logic.
  });
}

Answer 3

I suppose that you have to edit your block.tpl.php like in Drupal 6 ? Add a class to the link and insert a javascript in your theme with a jquery function who toggle the content. Also, don't use the #id 'wrapper', you cannot have more than one id the same in the html, you should use classes.