If set, the content bounces back to its original position after the dragging stopped.
Classes added to the content element.
Sets the display type of the content element to "table". Forces the content to set its height to its inner content height. The inner content should be wrapped by a "div".
Disables horizontal dragging.
Disables vertical dragging.
The height style of the reference view area. Can also be set by adding the style to "hylo-drag-area .hylo-drag-area-view".
A reference element from which the height value is taken. Alternative to the "height" property.
Can be provided as css query or as HTMLElement object.
Classes added to the horizontal hylo-scrollbar component.
The left style of the reference view area. Its relative to the hylo-drag-area component. It can also be set by adding the style to "hylo-drag-area .hylo-drag-area-view" if scrollX is not used.
Stops dragging when the mouse leaves the component boundary.
Starts only dragging when the mouse is in the reference view area boundary. Otherwise the content area reacts to drag start.
Scrolls the focused element into view. The focused element has to be completely outside the view to trigger scrolling.
If "scrollToKeyFocus" is set as well, the element has only to be partially outside the view.
An inner offset in px of the dimensions of the view an element has to be pass to trigger "scrollToFocus" or "scrollToKeyFocus".
Scrolls the focused element into view. The focused element has only to be partially outside the view to trigger scrolling. Triggers only when focus was gained through the "tab" key.
Instead of positioning the dragged area by using the left/right css style, the horizontal browser scrollbar is used but the scrollbar is hidden. Fixes the unwanted view shift of the browser when an element gets the focus which is not in the browser view but clips the content to the scroll area.
Instead of positioning the dragged area by using the top/bottom css style, the vertical browser scrollbar is used but the scrollbar is hidden. Fixes the unwanted view shift of the browser when an element gets the focus which is not in the browser view but clips the content to the scroll area.
Defines whether the scrollbar listens to touch events. Can be set as boolean or as a comma separated string of breakpoints (hylo-breakpoint-listener needed).
Classes added to the element which wraps the hylo-scrollbar and hylo-drag-area component. Add padding to adjust the scrollbars' positions.
Shows the scrollbar when "scrollX" or "scrollY" is set. Hides the scrollbar if nothing is to scroll.
Wraps this component together with hylo-scrollbar components in a div with the class "hylo-drag-area-wrapper".
If "showScrollbar" is set, it shows the scrollbar even if nothing is to scroll.
Initial horizontal snap index.
Is not being updated. Use getSnapX() instead.
Can be used to jump immediately to the snap point. For a smooth animation use snapTo() instead.
Initial vertical snap index.
Is not being updated. Use getSnapY() instead.
Can be used to jump immediately to the snap point. For a smooth animation use snapTo() instead.
A comma separated list of x values (numbers) to which the area is gonna snap when released.
A comma separated list of y values (numbers) to which the area is gonna snap when released.
The top style of the reference view area. Its relative to the hylo-drag-area component. It can also be set by adding the style to "hylo-drag-area .hylo-drag-area-view" if scrollY is not used..
Overwrites the default value of the css property "touch-action" of the component.
Default values:
By default the vertical relative position of the content element is changed by setting the style property "top". By setting this property, "bottom" is used instead.
By default the horizontal relative position of the content element is changed by setting the style property "left". By setting this property, "right" is used instead.
Classes added to the vertical hylo-scrollbar component.
The width style of the reference view area. Can also be set by adding the style to "hylo-drag-area .hylo-drag-area-view".
A reference element from which the width value is taken. Alternative to the "width" property.
Can be provided as css query or as HTMLElement object.
Returns a comma separated string of horizontal snap points of all elements matching the query.
The query is applied onto this component. The elements need to be children of this component.
To be used with snapPointsX property.
a css query string defining the snap point elements (starting with this component)
Returns a comma separated string of vertical snap points of all elements matching the query.
The query is applied onto this component. The elements need to be children of this component.
To be used with snapPointsY property.
a css query string defining the snap point elements (starting with this component)
The drag area snaped to a snap point. Emits the snap index and axis.
The drag area status toggled between active and inactive.
Emits if "active".
Fires whenever the "dragX" and/or the "dragY" value changed. Emits the values in an object {x: number, y:number}.
The drag started.
The drag stopped.
Emits the timespan the component got dragged in milliseconds. Can be used to determine whether it counts as drag and if subsequent click events should be "preventDefault" or if it was simply to short and actually just a click event in progress.
Generated using TypeDoc
Defines an area where the user can drag the content around relative to the boundaries of a reference view area.
The reference view area is created inside and relative to the component. The reference view area has the class "hylo-drag-area-view" and the content is placed inside an element with the class "hylo-drag-area-content".
The content needs to have dimensions -> root element or ".hylo-drag-area-content" should have "display: inline-block" or "display: inline-flex".
Listens to the event "hyloDragAreaUpdate" and "resize" on the window element to update itself.
Gets the class "active" when the component is active. The component is active when dragging is possible or in progress.
Give the hylo-drag-area a tabIndex of 0 or higher and use scrollbars (scrollX / scrollY) to have the area be scrollable by arrow keys.