dojox/mobile/_ScrollableMixin (version 1.10)

dojox/mobile/scrollable

Summary

Mixin for widgets to have a touch scrolling capability.

Usage

var foo = new _ScrollableMixin();
dojox/mobile/_ScrollableMixin

See the dojox/mobile/_ScrollableMixin reference documentation for more information.

Property Summary

  • _fixedAppFooter
  • _movedFlag that signals if the user have moved in (one of) the scroll direction(s) since touch start (a move under the threshold is ignored).
  • _parentPadBorderExtentsBottomFor Tooltip.js.
  • allowNestedScrollsFlag to allow scrolling in nested containers, e.g. to allow ScrollableView in a SwapView.
  • appBarsEnables the search for application-specific bars (header or footer).
  • constraintbounce back to the content area
  • dirLockdisable the move handler if scroll starts in the unexpected direction
  • disableFlashScrollBar
  • fadeScrollBar
  • fixedFooterId of the fixed footer.
  • fixedFooterHeightheight of a fixed footer
  • fixedHeaderId of the fixed header.
  • fixedHeaderHeightheight of a fixed header
  • heightexplicitly specified height of this widget (ex. "300px")
  • isLocalFooterfooter is view-local (as opposed to application-wide)
  • propagatablelet touchstart event propagate up
  • scrollableParamsParameters for dojox/mobile/scrollable.init().
  • scrollBarshow scroll bar or not
  • scrollDirv: vertical, h: horizontal, vh: both, f: flip
  • scrollType1: use (-webkit-)transform:translate3d(x,y,z) style, use (-webkit-)animation for slide animation 2: use top/left style, 3: use (-webkit-)transform:translate3d(x,y,z) style, use (-webkit-)transition for slide animation 0: use default value (3 for Android, iOS6+, and BlackBerry; otherwise 1)
  • thresholddrag threshold value in pixels
  • touchNodea node that will have touch event handlers
  • weightfrictional drag

Method Summary

  • _keepInputCaretInActiveElement()
  • _runSlideAnimation(from,to,duration,easing,node,idx)
  • abort() Aborts scrolling.
  • addCover() Adds the transparent DIV cover.
  • adjustDestination(to,pos,dim) A stub function to be overridden by subclasses.
  • calcScrollBarPos(to) Calculates the scroll bar position.
  • calcSpeed(distance,time) Calculate the speed given the distance and time.
  • checkFixedBar(node,local) Checks if the given node is a fixed bar or not.
  • cleanup() Uninitialize the module.
  • createMask() Creates a mask for a scroll bar edge.
  • destroy()
  • findAppBars() Search for application-specific header or footer.
  • findDisp(node) Finds the currently displayed view node from my sibling nodes.
  • flashScrollBar() Shows the scroll bar instantly.
  • getDim() Returns various internal dimensional information needed for calculation.
  • getPos() Gets the top position in the midst of animation.
  • getScreenSize() Returns the dimensions of the browser window.
  • getSpeed() Returns an object that indicates the scrolling speed.
  • hideScrollBar() Hides the scroll bar.
  • init(params) Initialize according to the given params.
  • isFormElement(node) Returns true if the given node is a form control.
  • isTopLevel() Returns true if this is a top-level widget.
  • makeTranslateStr(to) Constructs a string value that is passed to the -webkit-transform property.
  • removeCover() Removes the transparent DIV cover.
  • resetScrollBar() Resets the scroll bar length, position, etc.
  • resize(e) Adjusts the height of the widget.
  • scrollIntoView(node,alignWithTop,duration) Scrolls the pane until the searching node is in the view.
  • scrollScrollBarTo(to) Moves the scroll bar(s) to the given position without animation.
  • scrollTo(to,doNotMoveScrollBar,node) Scrolls to the given position immediately without animation.
  • setKeyframes(from,to,idx) Programmatically sets key frames for the scroll animation.
  • setSelectable(node,selectable) Sets the given node as selectable or unselectable.
  • showScrollBar() Shows the scroll bar.
  • slideScrollBarTo(to,duration,easing) Moves the scroll bar(s) to the given position with the slide animation.
  • slideTo(to,duration,easing) Scrolls to the given position with the slide animation.
  • startup()
  • stopAnimation() Stops the currently running animation.

Event Summary

Properties

_fixedAppFooter
_moved

Flag that signals if the user have moved in (one of) the scroll direction(s) since touch start (a move under the threshold is ignored).

_parentPadBorderExtentsBottom

For Tooltip.js.

allowNestedScrolls

Flag to allow scrolling in nested containers, e.g. to allow ScrollableView in a SwapView.

appBars

Enables the search for application-specific bars (header or footer).

constraint

bounce back to the content area

dirLock

disable the move handler if scroll starts in the unexpected direction

disableFlashScrollBar
fadeScrollBar
fixedFooter

Id of the fixed footer.

fixedFooterHeight

height of a fixed footer

fixedHeader

Id of the fixed header.

fixedHeaderHeight

height of a fixed header

height

explicitly specified height of this widget (ex. "300px")

isLocalFooter

footer is view-local (as opposed to application-wide)

propagatable

let touchstart event propagate up

scrollableParams
scrollBar

show scroll bar or not

scrollDir

v: vertical, h: horizontal, vh: both, f: flip

scrollType
  • 1: use (-webkit-)transform:translate3d(x,y,z) style, use (-webkit-)animation for slide animation
  • 2: use top/left style,
  • 3: use (-webkit-)transform:translate3d(x,y,z) style, use (-webkit-)transition for slide animation
  • 0: use default value (3 for Android, iOS6+, and BlackBerry; otherwise 1)
threshold

drag threshold value in pixels

touchNode

a node that will have touch event handlers

weight

frictional drag

Methods

_keepInputCaretInActiveElement()
_runSlideAnimation(from,to,duration,easing,node,idx)
Parameter Type Description
from Object
to Object
duration Number
easing String
node DomNode
idx Number
abort()

Aborts scrolling.

This function stops the scrolling animation that is currently running. It is called when the user touches the screen while scrolling.

addCover()

Adds the transparent DIV cover.

The cover is to prevent DOM events from affecting the child widgets such as a list widget. Without the cover, for example, child widgets may receive a click event and respond to it unexpectedly when the user flicks the screen to scroll. Note that only the desktop browsers need the cover.

adjustDestination(to,pos,dim)

A stub function to be overridden by subclasses.

This function is called from onTouchEnd(). The purpose is to give its subclasses a chance to adjust the destination position. If this function returns false, onTouchEnd() returns immediately without performing scroll.

Parameter Type Description
to Object

The destination position. An object with x and y.

pos Object

The current position. An object with x and y.

dim Object

Dimension information returned by getDim().

Returns:boolean
calcScrollBarPos(to)

Calculates the scroll bar position.

Given the scroll destination position, calculates the top and/or the left of the scroll bar(s). Returns an object with x and y.

Parameter Type Description
to Object

The scroll destination position. An object with x and y. ex. {x:0, y:-5}

Returns:object
calcSpeed(distance,time)

Calculate the speed given the distance and time.

Parameter Type Description
distance Number
time Number
Returns:number
checkFixedBar(node,local)

Checks if the given node is a fixed bar or not.

Parameter Type Description
node DomNode
local Boolean
Returns:undefined | null
cleanup()

Uninitialize the module.

createMask()

Creates a mask for a scroll bar edge.

This function creates a mask that hides corners of one scroll bar edge to make it round edge. The other side of the edge is always visible and round shaped with the border-radius style.

destroy()
findAppBars()

Search for application-specific header or footer.

findDisp(node)

Finds the currently displayed view node from my sibling nodes.

Parameter Type Description
node DomNode
Returns:null | DomNode | undefined
flashScrollBar()

Shows the scroll bar instantly.

This function shows the scroll bar, and then hides it 300ms later. This is used to show the scroll bar to the user for a short period of time when a hidden view is revealed.

getDim()

Returns various internal dimensional information needed for calculation.

Returns:object
getPos()

Gets the top position in the midst of animation.

Returns:object
getScreenSize()

Returns the dimensions of the browser window.

Returns:object
getSpeed()

Returns an object that indicates the scrolling speed.

From the position and elapsed time information, calculates the scrolling speed, and returns an object with x and y.

Returns:object
hideScrollBar()

Hides the scroll bar.

If the fadeScrollBar property is true, hides the scroll bar with the fade animation.

init(params)

Initialize according to the given params.

Mixes in the given params into this instance. At least domNode and containerNode have to be given. Starts listening to the touchstart events. Calls resize(), if this widget is a top level widget.

Parameter Type Description
params Object
Optional
isFormElement(node)

Returns true if the given node is a form control.

Parameter Type Description
node DOMNode
Returns:boolean
isTopLevel()

Returns true if this is a top-level widget.

Subclass may want to override.

Returns:boolean
makeTranslateStr(to)

Constructs a string value that is passed to the -webkit-transform property.

Return value example: "translate3d(0px,-8px,0px)"

Parameter Type Description
to Object

The destination position. An object with x and/or y.

Returns:string
removeCover()

Removes the transparent DIV cover.

resetScrollBar()

Resets the scroll bar length, position, etc.

resize(e)

Adjusts the height of the widget.

If the height property is 'inherit', the height is inherited from its offset parent. If 'auto', the content height, which could be smaller than the entire screen height, is used. If an explicit height value (ex. "300px"), it is used as the new height. If nothing is specified as the height property, from the current top position of the widget to the bottom of the screen will be the new height.

Parameter Type Description
e undefined
scrollIntoView(node,alignWithTop,duration)

Scrolls the pane until the searching node is in the view.

Just like the scrollIntoView method of DOM elements, this function causes the given node to scroll into view, aligning it either at the top or bottom of the pane.

Parameter Type Description
node DOMNode

A DOM node to be searched for view.

alignWithTop Boolean
Optional

If true, aligns the node at the top of the pane. If false, aligns the node at the bottom of the pane.

duration Number
Optional

Duration of scrolling in seconds. (ex. 0.3) If not specified, scrolls without animation.

scrollScrollBarTo(to)

Moves the scroll bar(s) to the given position without animation.

Parameter Type Description
to Object

The destination position. An object with x and/or y. ex. {x:2, y:5}, {y:20}, etc.

scrollTo(to,doNotMoveScrollBar,node)

Scrolls to the given position immediately without animation.

Parameter Type Description
to Object

The destination position. An object with x and y. ex. {x:0, y:-5}

doNotMoveScrollBar Boolean
Optional

If true, the scroll bar will not be updated. If not specified, it will be updated.

node DomNode
Optional

A DOM node to scroll. If not specified, defaults to this.containerNode.

setKeyframes(from,to,idx)

Programmatically sets key frames for the scroll animation.

Parameter Type Description
from Object
to Object
idx Number
setSelectable(node,selectable)

Sets the given node as selectable or unselectable.

Parameter Type Description
node DomNode
selectable Boolean
showScrollBar()

Shows the scroll bar.

This function creates the scroll bar instance if it does not exist yet, and calls resetScrollBar() to reset its length and position.

slideScrollBarTo(to,duration,easing)

Moves the scroll bar(s) to the given position with the slide animation.

Parameter Type Description
to Object

The destination position. An object with x and y. ex. {x:0, y:-5}

duration Number

Duration of the animation in seconds. (ex. 0.3)

easing String

The name of easing effect which webkit supports. "ease", "linear", "ease-in", "ease-out", etc.

slideTo(to,duration,easing)

Scrolls to the given position with the slide animation.

Parameter Type Description
to Object

The scroll destination position. An object with x and/or y. ex. {x:0, y:-5}, {y:-29}, etc.

duration Number

Duration of scrolling in seconds. (ex. 0.3)

easing String

The name of easing effect which webkit supports. "ease", "linear", "ease-in", "ease-out", etc.

startup()
stopAnimation()

Stops the currently running animation.

Events

onAfterScroll(e)

called after a scroll has been performed.

Parameter Type Description
e Event

the scroll event, that contains the following attributes: x (x coordinate of the scroll destination), y (y coordinate of the scroll destination), beforeTop (a boolean that is true if the scroll detination is before the top of the scrollable), beforeTopHeight (the number of pixels before the top of the scrollable for the scroll destination), afterBottom (a boolean that is true if the scroll destination is after the bottom of the scrollable), afterBottomHeight (the number of pixels after the bottom of the scrollable for the scroll destination)

onBeforeScroll(e)

called before a scroll is initiated. If this method returns false, the scroll is canceled.

Parameter Type Description
e Event

the scroll event, that contains the following attributes: x (x coordinate of the scroll destination), y (y coordinate of the scroll destination), beforeTop (a boolean that is true if the scroll detination is before the top of the scrollable), beforeTopHeight (the number of pixels before the top of the scrollable for the scroll destination), afterBottom (a boolean that is true if the scroll destination is after the bottom of the scrollable), afterBottomHeight (the number of pixels after the bottom of the scrollable for the scroll destination)

Returns:boolean
onFlickAnimationEnd(e)
Parameter Type Description
e undefined
onFlickAnimationStart(e)
Parameter Type Description
e undefined
onTouchEnd(e)

User-defined function to handle touchEnd events.

Parameter Type Description
e Event
onTouchMove(e)

User-defined function to handle touchMove events.

Parameter Type Description
e undefined
onTouchStart(e)

User-defined function to handle touchStart events.

Parameter Type Description
e undefined
Error in the documentation? Can’t find what you are looking for? Let us know!