trigger "toggle" action

[jamesarosen]

The native <details> element triggers a toggle action whenever it is toggled.

Something like the following might work:

function clickHandler (e) {
  if (e.target.nodeName.toLowerCase() === 'summary') {
    var details = e.target.parentNode
    if (!details) return

    var shouldContinue = dispatchToggleEvent(details);
    if (!shouldContinue) return

    if (details.getAttribute('open')) {
      details.open = false
      details.removeAttribute('open')
    } else {
      details.open = true
      details.setAttribute('open', 'open')
    }
  }
}

function dispatchToggleEvent (details) {
  var toggleEvent;
  try {
    toggleEvent = new CustomEvent('toggle', { bubbles: true, canceable: true });
  } catch(e) {
    toggleEvent = document.createEvent('CustomEvent');
    toggleEvent.initCustomEvent('toggle', true, true, null);
  }

  return details.dispatchEvent(toggleEvent);
}

I don't have access to enough browsers to test this thoroughly, though.

[stevenvachon]

Ditch this lib and use https://www.npmjs.com/package/details-element-polyfill

[rstacruz]

When suggesting alternatives, it'd be helpful if you can provide some reasons to back up your suggestion rather than just saying "ditch this and use X".

Nevertheless, PR's would be welcome for this. :) @stevenvachon you can send in your change as a pull request so you don't have to maintain a fork of this repo.

[stevenvachon]

@rstacruz you were ignoring all communication regarding this project for at least 6 months.