Support for multiple trigger buttons

[daveromsey]

I would like to use multiple trigger buttons for my JS Offcanvas menu, but it seems that the options limit the triggerButton selector to the first element only:

if (options.triggerButton ) {
    this.$triggerBtn = $(options.triggerButton);
    new window.componentNamespace.OffcanvasTrigger(this.$triggerBtn[0], {"offcanvas": offcanvasID}).init();
}

I'd like for all elements matching the selector used for options.triggerButton to work.

Edit: I was able to create a workaround, but I do believe that the expected behavior of using a selector that allows class names is to apply the functionality to all instances found.

jQuery( function($) {
    var drawerSelector = "#the-drawer";
    var $drawer = $(drawerSelector).offcanvas({
        triggerButton: '.drawer-toggle' // Button to open offcanvas
    });

    var drawerData = $drawer.data('offcanvas-component');

    // Only the first instance of .drawer-toggle works as a toggler,
    // so add a new class and manually trigger the togglin'
    var $offcanvasMenuToggle = $(".menu-drawer-toggle");
    $offcanvasMenuToggle.find("a").on("click", function(e) {
        e.preventDefault();
        drawerData.toggle();
    });
});

[vmitsaras]

Hi David,

the triggerButton is optional. Check the Demo without triggerButton. Now for your Problem. Can you try this:

A)

<button data-offcanvas-trigger="left">js-trigger-offcanvas</button>
<button data-offcanvas-trigger="left">js-trigger-offcanvas</button>

<aside class="js-offcanvas" data-offcanvas-options='{"modifiers":"left, overlay"}'  id="left">
...
</aside>

$( document ).trigger( "enhance" );

or B)

<button class="js-btns">js-trigger-offcanvas</button>
<button class="js-btns">js-trigger-offcanvas</button>

<aside id="left">...</aside>

$( '.js-btns' ).offcanvasTrigger( {
  offcanvas: "left"
});
$( document ).trigger( "enhance" );

Can you tell me what works for you?

[daveromsey]

Thank you for such a quick and helpful response. I went with option B and it works great.