Option for keeping only one drop open?

[sjelfull]

I'm using Drop to do a dropdown action menu on buttons, and I would like only one to stay open at a time.

Would you consider adding an option like maxOpenDropsor the like?

[geekjuice]

Unless you were opening and closing the drop manually, opening a drop while one is already open should close the other, no? Otherwise, I believe you could implement a similar behavior using the current API.

let currentDrop;
const dropInstance = new Drop(options);
const otherDropInstance = new Drop(otherOptions);

function toggleDrop(drop) {
  if (currentDrop && currentDrop.isOpened()){
    currentDrop.close();
  }
  drop.open();
  currentDrop = drop;
}

toggleDrop(dropInstance); // Should open dropInstance
toggleDrop(dropInstance); // Should close dropInstance
toggleDrop(otherDropInstance); // Should open otherDropInstance
toggleDrop(dropInstance); // Should close otherDropInstance and open otherDropInstance

If you wanted to allow more drop instances to be allowed to stay open, you could store them in a queue array, check if the drop is in the queue already and if it is, just toggle it and remove it from the queue otherwise push it onto the queue and open it.

Again, this is not to say this isn't a great idea, but I think one of the goals for drop was to stay as flexible as possible and allow the users to implement custom features using the (hopefully?) simple API.

Let me know if this helps. One last note is that I have been considering creating extensions for this library which would let users extend drop with additional features like these, so possibly in the future we can include this as an extensions :smile_cat:

[sjelfull]

Your right, I see that's the default behaviour.

This us the code that create the Drop instances:

var $dropdownTriggers;

$dropdownTriggers = $('.js-dropdownTriggerLink');
$dropdownTriggers.each(function() {
    var $target, content, drop;

    $target = $(this);
    content = $($target.attr('data-target')).html();

    return drop = new Drop({
        target: $target.get(0),
        position: 'bottom center',
        openOn: 'click',
        content: content,
        tetherOptions: {
            offset: '-15px 0'
        }
    });
});

The extensions idea sounds really great! During this project, i've needed behaviour that might be edge-cases for the Drop.js project, but very normal needs for the project / myself. Would have been perfect if there was an easy way to add these in.