Home

Pinny

What is Pinny?

Pinny is a mobile-first plugin for off-canvas overlays. It's meant to replace the modal dialog pattern on mobile devices for in-depth interactions. It covers either the whole screen or a portion of it.

Features

1. Pinny can be triggered by any event.
2. Multiple Pinnys can be triggered at any given time.
3. Pinny can cover the entire screen or a defined portion of it.
4. Pinny's dimensions can be set in one of three ways:
   1. Cover the whole screen
   2. Cover a defined percentage or unit value of the screen.
   3. Dependent on the height of the content within it.
5. Pinny can have any markup inside of it. Includes forms/videos/iframes.
6. If Pinny is not full-screen, it can be closed by tapping on the remaining visible page.
7. Pinny should trap all scrolling within it.
8. Pinny appears on screen from wherever you are on the page.
9. Pinny smoothly animates in and out.

Assumptions

1. Auto-initialize with a data-attribute
2. Fires events on every interaction
3. Is unit-testable

Support Requirements

1. Pinny opens and covers the whole screen without animating

Optimized Requirements

1. Pinny animates in smoothly
2. Pinny has variable sizes
3. Pinny traps scrolling