Options

This component offers a variety of configuration options, the purpose of many of which is to allow you to custom-tailor its behavior to fit within the norms of a particular platform/browser, without hard-coding any user-agent sniffing into of the component itself.

touchEvents

Allows the drawer to be pulled with touch gestures.

Type
Boolean
Default
false
HTML attribute
touch-events
jQuery attribute
data-touch-events

opened

Indicates whether the component is currently opened or closed. Setting a value will cause it to animate to the new state.

Type
Boolean
Default
false
HTML attribute
opened
jQuery attribute
data-opened

align

The alignment of the drawer. Can be either to the left or to the right. Setting it this value will cause the drawer to jump to the other side.

Type
String (One of: left, right)
Default
left
HTML attribute
align
jQuery attribute
data-align

range

Sets the range in pixels from either left or right side of the screen (depending on alignment) from within which the drawer can be drawn.

You can use this to account for native gestures, e.g. iOS Safari has a ~35 pixel area on the sides where native ‘forward’ and ‘backward’ gestures can be initiated. Setting the range to something like [35, 135] prevents these from overlapping.

Note that the range can overlap with the content area without interfering with scrolling, since hy-drawer will still distinguish between horizontal and vertical sliding motions: See threshold for more.

Type
Array of Number (length must be 2, numbers are pixels)
Default
[0, 100]
HTML attribute
range (e.g. range="0,100")
jQuery attribute
data-range (e.g. data-range="0,100")

persistent

Indicates whether the drawer is in ‘persistent’ state. While persistent, the drawer can’t be moved with touch events (or mouse move events when mouseEvents are enabled), and the scrim will not be visible. However, the drawer can be opened/closed using methods.

Type
Boolean
Default
false
HTML attribute
persistent
jQuery attribute
data-persistent

preventDefault

When true, hy-drawer will call preventDefault on every (touch-)move event, effectively preventing scrolling while sliding the drawer.

This results in much better experience on devices that can handle the scripting load. However, since the touchmove listener has to be registered with the passive: false flag set in this case, this also means that page scrolling is delayed by the time it takes the move handler to complete.

Type
Boolean
Default
false
HTML attribute
prevent-default
jQuery attribute
data-prevent-default

threshold

Minimum distance the finger/mouse has to travel after a touchstart/mousedown event before deciding whether to slide the drawer or letting the browser take over and scroll the document.

It makes sense setting this to 0 on iOS devices, since webkit won’t trigger a touchmove event until the finger has moved ~10 pixels anyway.

Type
Number (pixels)
Default
10
HTML attribute
threshold
jQuery attribute
data-threshold

mouseEvents

Allows the drawer to be pulled with the mouse. This is mostly for presentation purposes, as pulling things with the mouse isn’t a common pattern (other than to resize things).

Type
Boolean
Default
false
HTML attribute
mouse-events
jQuery attribute
data-mouse-events

© 2018 Florian Klampfer

Powered by Hydejack v8.0.0