dojox/app/widgets/_ScrollableMixin (version 1.10)

dojox/mobile/scrollable

Summary

Mixin for widgets to have a touch scrolling capability.

Actual implementation is in dojox/mobile/scrollable.js. scrollable.js is not a dojo class, but just a collection of functions. This module makes scrollable.js a dojo class.

Usage

var foo = new _ScrollableMixin();
dojox/app/widgets/_ScrollableMixin

Property Summary

  • _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.
  • allowNestedScrollse.g.
  • 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
  • fixedFooterHeightheight of a fixed footer
  • 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.
  • buildRendering()
  • 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.
  • reparent() Moves all the children to containerNode.
  • resetScrollBar() Resets the scroll bar length, position, etc.
  • resize() Calls resize() of each child 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

_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

e.g. 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
fixedFooterHeight

height of a fixed footer

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
buildRendering()
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.

reparent()

Moves all the children to containerNode.

resetScrollBar()

Resets the scroll bar length, position, etc.

resize()

Calls resize() of each child widget.

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!