ProgressBar

function

ProgressBar()

Option name	Type	Description
selector	domelement_or_jqueryobject	The element that will behave as a scrollbar
options	object	Object containing settings for this progress bar handlePositioning {string: "outside"} Either "outside" (default) or "inside". Defines how the handle should be positioned within the bar. "outside" sees the cenre of the handle move between 0 and 100% of the bar, thus leading to it poking outside. "inside" keeps the handle fully within the bar snapSegments {number: 1} Enable snapping by dividing the bar into segments. More than one segment will trigger snapping

Dependencies:

NATION.Utils
NATION.EventDispatcher

About:

Progress bar displaying a percentage from 0 to 100

Selector is expected to contain an element with class 'js-progress' or 'progress', which is the actual progress bar itself. The width of this element is changed as a percentage to represent the desired percentage to display

Selector can contain a clickable hit area. This should be an element with the class 'js-hitarea' or 'hitarea'
Selector can also contain a handle, by using class 'js-handle' or 'handle'
Selector can also contain a separate load progress bar, marked with class 'js-loaded' or 'loaded'. This can be set to different percentages than the progress bar, via the 'setLoaded' method. This will also resize the hit area element to match

Example

CLICKED

property

ProgressBar.prototype.CLICKED

Event that fires when the progress bar has been clicked

HANDLE_MOUSE_DOWN

property

ProgressBar.prototype.HANDLE_MOUSE_DOWN

Event that fires when a handle drag has started

HANDLE_DRAGGED

property

ProgressBar.prototype.HANDLE_DRAGGED

Event that fires each time the user moves the handle during a drag

HANDLE_RELEASED

property

ProgressBar.prototype.HANDLE_RELEASED

Event that fires when the user releases the handle

VALUE_CHANGED

property

ProgressBar.prototype.VALUE_CHANGED

Event that fires when the value of the progress bar changes

getHandleDragInProgress

method

ProgressBar.prototype.getHandleDragInProgress() ->boolean

Returns true if the user is currently dragging the handle

getPercentage

method

ProgressBar.prototype.getPercentage() ->number

Returns the currently displayed percentage

getRequestedPercentage

method

ProgressBar.prototype.getRequestedPercentage() ->number

Returns the percentage corresponding to where the user last clicked

setProgress

method

ProgressBar.prototype.setProgress()

Option name	Type	Description
percentage	number	The percentage to show, between 0 and 1

Display a passed percentage

setLoaded

method

ProgressBar.prototype.setLoaded()

Option name	Type	Description
percentage	number	Percentage between 0 and 1
adjustHitArea	boolean	Whether to match hitarea width to progress bar width

Set the load bar position via a percentage

setNewHandlePosition

method

ProgressBar.prototype.setNewHandlePosition()

Option name	Type	Description
percentage	number	Percentage to position the handle at, between 0 and 1

Set the handle to a percentage along the bar