Life @ NCP

not everyone needs to go outside to have fun

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.