Namespace: PullToRefreshUtils

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

QuickNav


PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

PullToRefreshUtils

Version:
  • 7.1.0
Since:
  • 1.2.0
Module:
  • ojpulltorefresh

Module usage

See JET Module Loading for an overview of module usage within JET.

Javascript Import Format
define(['ojs/ojpulltorefresh'], function(PullToRefreshUtils) {
 // Application should call API on PullToRefreshUtils 
})
Typescript Import Format
//This namespace exports multiple static methods or members. To import 
import * as PullToRefreshUtils from "ojpulltorefresh";

//Now you can access the methods as PullToRefreshUtils.methodName and so on

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

Description

This class provides functions for adding pull to refresh functionality to any container element which hosts refreshable content. By default this class will generate a default panel, which consists of a refresh icon, a primary text, and a secondary text. The application can use the callback to provide their own panel. When the release happens, the refresh function will be invoked and application should use this to execute any logic required to refresh the content inside the panel. For example, fetching new content for the ListView inside the container. The application must resolve or reject the Promise so that this class can do the necessary cleanup.

Warning: The pull to refresh gesture will not work with drag and drop enabled components. Drag and drop must be disabled in the component if use of pull to refresh is needed.

Touch End User Information

Target Gesture Action
Pull to refresh panel element Pan Shows the pull to refresh panel as user pan downward. Refresh action is triggered if the user pan downward over a specified threshold.

Keyboard End User Information

Target Key Action
Pull to refresh panel element Tab Shift focus to refresh action link.
Link Enter Invoke refresh action.

Methods

(static) setupPullToRefresh(element, refreshFunc, options) → {void}

Setup content container for pull to refresh capability. This method adds touch listeners on the content container. The following events are fired by this method: ojpull is fired when user pulls the content container, the event contains the content element as well as the distance pulled in pixels. ojrelease is fired when user releases the content container, the event contains the content element. ojcomplete is fired when the refresh is done and the panel is completely closed. The event contains the content element.
Parameters:
Name Type Argument Description
element Element the DOM element that hosts the content to refresh. When the content is scrollable, the value of this parameter must be the scrollable element. Specifically, when using this with ListView, the ListView element might not necessarily be the scrollable element, but is one of its ancestors instead.
refreshFunc function():Promise.<any> the function to invoke when refresh is triggered. It must return a Promise.
options Object <optional>
optional values that controls aspects of pull to refresh
Properties
Name Type Argument Description
threshold number <optional>
the number of pixels to pull until refresh is triggered. If not specified, a default value will be calculated based on the height of the panel consisting the refresh icon, primary text, and secondary text.
primaryText string <optional>
the primary text to display. The primary text is usually used to describe the pull action. If not specified then no primary text will be displayed.
secondaryText string <optional>
the secondary text to display. The secondary text is used to add supplementary text. If not specified then no secondary text will be displayed.
See:
Returns:
Type
void

(static) tearDownPullToRefresh(element) → {void}

Removes the listener that was added in setupPullToRefresh. Page authors should call tearDownPullToRefresh when the content container is no longer needed.
Parameters:
Name Type Description
element Element the DOM element that hosts the content to refresh
See:
Returns:
Type
void