Can't use button on items if activateOn is set to 'click'

[tblaisot]

Hi, Thanks for your awesome library! I have a problem when trying to use a button on an sly item if activateOn is set to click : the button doesn't respond.

After debugging I find this function :

function activateHandler(event) {
    /*jshint validthis:true */
    // Ignore clicks on interactive elements.
    if (isInteractive(this)) {
         event.stopPropagation();
         return;
     }
    // Accept only events from direct SLIDEE children.
    if (this.parentNode === $slidee[0]) {
         self.activate(this);
    }
}

which cause the click event to be dropped on a button because by default buttons are "interactive". If I understand it, this is to prevent to start dragging when clicking on a button ?

Here is a exemple of the "item" code I am using. I use the twitter bootstrap framework to open a popup when clicking on the buttons (with data-toggle data-target) and the handler of bootstrap is never called because the sly one is called before and drop the event.

<ul class="items">
    <li class="postIt commentaire clearfix panel panel-default" data-parent="#SubMenu1">
        <div class="header">
            <a class="" aria-controls="collapseOne" aria-expanded="false" href="#collapseOne" data-parent="#accordion" data-toggle="collapse">
                <span class="">Commentaire du 15/12/15</span>
            </a>
            <button class="td noBtnStyle glyphicon right flag small white" title="Marquer comme vu"></button>
            <button class="td noBtnStyle right glyphicon retweet small noBtnStyle white" title="Répondre avec un post-it" data-toggle="modal" data-target="#postItRepondre"></button>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" aria-labelledby="headingTwo" role="tabpanel">
            <header class="row ">
                <div class="tr">
                    <span>Réponse attendue pour le <strong>17/12/2015</strong></span>
                </div>
                <div class="tr">
                    <span class="provenance col-md-12">De la part de <a href="">Berther Benoit</a> à <a href="">Vincent Gachet</a></span>
                </div>
            </header>
            <article class="col-md-12">L'appel d'offre doit être envoyé ce soir. Les imprimantes doivent être impérativement en service le 24 mars 2015 à midi.L'appel d'offre doit être envoyé ce soir. Les imprimantes doivent être impérativement en service le 24 mars 2015 à midi.</article>
        </div>
    </li>
</ul>

Any way to fix this ? Thanks!

[darsain]

Yeah that .stopPropagation() shouldn't be there. That's why those events are not reaching your event handler.

Try replacing the activeHandler() function with this:

function activateHandler(event) {
    /*jshint validthis:true */

    // Ignore clicks on interactive elements.
    if (isInteractive(this)) {
        event.originalEvent[namespace + 'ignore'] = true;
        return;
    }

    // Ignore events that:
    // - are not originating from direct SLIDEE children
    // - originated from interactive elements
    if (this.parentNode !== $slidee[0] || event.originalEvent[namespace + 'ignore']) return;

    self.activate(this);
}

If it works for you I'll release it in next patch.

[tblaisot]

This seems to be working fine. I tried it with or without drag enable and my buttons are working properly now. Thank for the correction!