Closing popovers in Ratchet

Ratchet is a css/js library for prototyping iOS apps. Maintained by Twitter, it looks similar to its more established older brother Bootstrap but is much less mature and has an anemic API.

Simple things like closing its popovers don’t seem to exist. If you need to do this, digging into the source reveals

element.addEventListener('touchend', function () {  
      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
      popover.classList.remove('visible');
      popover.parentNode.removeChild(backdrop);
});

for the popover backdrop, so doing something like

var backdrop = document.querySelector('div.backdrop');  
if (backdrop) {  
  // sad there's not real way to close this
  // https://github.com/twbs/ratchet/issues/625
  var evt = document.createEvent('TouchEvent');
  evt.initUIEvent('touchend', true, true);
  evt.target = backdrop;
  backdrop.dispatchEvent(evt);
}

to dispatch the touch event was sufficient for my purposes.

See https://github.com/twbs/ratchet/issues/625 for a short discussion on this.

Leave a Reply

Your email address will not be published. Required fields are marked *