Allow for the block to auto-collapse

I second this. It would be a great feature to be able to have menu items automatically collapse.

I have made several modifications to enhance this module for a project I am currently working on and wanted to share the results. This version includes configuration options for auto-expand/collapse, hover/click trigger and the ability to make the link itself the droplink. Hopefully this will help further the modules development. Thanks for the great module. - John

I've made a small change to menu_attach_block.js so that the animation is differed until after ajax content is loaded successfully. Best - John

Thanks for the patch, bamberj!

There's quite a lot of changes here, so I've tried to convert the indents to the Drupal coding standards ones to make things a little easier to compare.

drupalcbf to the rescue - more style cleanup. Hopefully we can now see only the actual code changes :)

This has now been merged into head. I'll go ahead and do a new release now that incorporates this :)

Thanks bamberj!

Awesome and thanks for the great module. My project required that the block automatically collapse when clicking outside of the parent <li>, so I've added the following code on my local copy to menu_attach_block.js,

/* if click outside, collapse */
$(document).click(function(event) {
	var link = $('a.menu-attach-block-drop-link.expand-on-click.dropped');
	if (!$(link).parent().has($(event.target)).length) {
		expand_toggle($(link));
	}
});

Thought this may be useful to others as well. Best - John

I've noticed an issue on anchors with class expand-on-click not retracting their attached block due to the hover out callback not being fired. I believe this is due to the content within menu-attach-block-wrapper expanding the width of the <li>. Additionally, the "if click outside, collapse" snippet I've previously provided doesn't take into account anchors with the class expand-on-click and will collapse expanded hovers when clicking on contents within their menu-attach-block-wrapper.

Here is an updated version of menu_attach_block.js,

(function ($) {
  // Implement a show/hide.
  Drupal.behaviors.menu_attach_block = {
    attach: function (context, settings) {

	  // Attach hover events, if this link has been defined as hoverable.
	  $('ul.menu > li', context).hover(function() {
		  /* Hide all siblings containing attached blocks within menu structure */
		  var sibling_link = $(this).parent().find('li a.menu-attach-block-drop-link.expand-on-hover.dropped');
		  if ($(sibling_link).length) {
			  expand_toggle(sibling_link);
		  }
          /**
           * Show on mouse in.
           */
		  var link = $(this).find('a.menu-attach-block-drop-link.expand-on-hover');
		  if ($(link).length) {
			  expand_toggle(link);
		  }
	  }, function () {
          /**
           * Hide on mouse out.
           */	  
		  var link = $(this).find('a.menu-attach-block-drop-link.expand-on-hover.dropped');
		  expand_toggle(link);
	  });

	  /* if click outside, collapse */
      $(document).click(function(event) {
		  var link = $('a.menu-attach-block-drop-link.dropped');

		  if (!$(link).parent().has($(event.target)).length) {
			  expand_toggle($(link));
		  }
	  });
	  
      // Attach click events for links configured to use that.
      $('a.menu-attach-block-drop-link.expand-on-click', context).click(function(event) {
        expand_toggle($(this));
        event.preventDefault();
      });

      /**
       * Shows a block embedded inside a menu item.
       *
       * @param link
       *   The link attached to this menu item, which triggers block show.
       */
      function expand_toggle(link) {
        if (link.hasClass('menu-ajax-enabled')) {
          // Load contents using AJAX.
          if (!link.hasClass('menu-ajax-loaded')) {
            ajax_path = Drupal.settings.basePath + 'menu_attach_block/ajax/' + (link).attr('data-block-id');
            $.ajax({
              type: 'GET',
              url: ajax_path,
              data: '',
              dataType: 'HTML',
              success: function ($block_html) {
                $(link).next('.menu-attach-block-wrapper').html($block_html);
                Drupal.attachBehaviors(link);
              }
            });
          }
        }
        // Show/hide the link.
        $(link).next('.menu-attach-block-wrapper').slideToggle('fast');
        $(link).toggleClass('dropped');
      }
    }
  }
}(jQuery));

Feedback welcome. Best - John

I've made a few more modifications from the current dev to meet my project requirements. Thought they may be useful to others as well.

Changes:

• Hover over link to expand block while retaining the path.
• Removed <block> and <droplink> paths and added <void> option. Solved the first part of 2258157 by replacing <block> with "Disable Link" checkbox. Now have Droplink radio field that will alter the output accordingly (void link click to expand/collapse block, link with path and hover to expand/collapse block, external link click to expand/collapse block and external link hover to expand/collapse block).
• JS fix noted in #10.

Best - John

Minor fix in menu_attach_block_link. Best - John

Hi bamberj - would it be possible for you to post these as patch files? It makes it much easier for me to quickly review them and (hopefully) add them onto the module trunk.

https://www.drupal.org/node/707484

Please find the attached requested patch. This patch includes additional modifications to improve the UI. Additional validation has also been added to prevent the attachment of the menu which parents the link (recursive). I have added the ability to generate both the link as a droplink and add an external link with different triggers which may be beneficial for this modules translation to mobile formatting. Best, John