Home Reference Source
import {Timeline} from 'jquery-timeline/src/timeline.esdoc.js'
public class | since 2.0.0 | source

Timeline

Pluin Core Class

Static Member Summary

Static Public Members
public static get
public static get

Static Method Summary

Static Private Methods
private static

_jQueryInterface(config: string | Object, args: ...string | ...Function): *

Interface for jQuery

Member Summary

Private Members
private
private
private
private
private
private
private
private
private

Method Summary

Public Methods
public

addEvent(callback: Function, userdata: Object)

Add new events to the rendered timeline object

public

alignment(position: string, duration: number | string)

Move the display position of the timeline container to the specified position

public

compareValues(property: string, order: string): number

Sort an array by value of specific property (Note: destructive method)

public

dateback(options: Object, callback: Function, userdata: Object)

Move shift or expand the range of timeline container as to past direction (to left)

public

dateforth(options: Object, callback: Function, userdata: Object)

Move shift or expand the range of timeline container as to futrue direction (to right)

public

Destroy the object to which the plugin is applied

public

Generate the pluggable unique id

public

getCorrectDatetime(datetime_str: string): Object

Get the correct datetime with remapping to that if the year is 0 - 99

public

Retrieve one higher scale

public

getLocaleString(date_seed: string, scale: string, locales: string, options: Object): string

Retrieve the date string of specified locale

public
this method was deprecated. This method has been deprecated since version 2.0.0
public

getWeek(date_str: string): number

Method to get week number as extension of Date object

public

hexToRgbA(hex: string, alpha: number): string

Convert hex of color code to rgba

public

hide()

Hide shown timeline

public

Hide the loader

public

initialized(callback: Function, userdata: Object)

This method is able to call only once after completed an initializing of the plugin

public

Determine whether variable is an Object

public

Determine empty that like PHP

public

Determine whether the object is iterable

public

mergeDeep(target: Object, source: Object): Object

Merge two objects deeply as polyfill for instead "$.extend(true,target,source)"

public

numRound(number: number, digit: number, round_type: string): number

Round a number with specific digit

public

openEvent(event: Object)

The method that fires when an event on the timeline is clicked Note: You can hook the custom processing with the callback specified in the event parameter

public

reload(callback: Function, userdata: Object)

Reload the timeline with overridable any options

public

removeEvent(callback: Function, userdata: Object)

Remove events from the currently timeline object

public

render()

this method was deprecated. This method has been deprecated since version 2.0.0
public

show()

Show hidden timeline

public

Show the loader

public

sleep(msec: number): *

Await until next process at specific millisec

public

Get the rendering width of the given string

public

supplement(default_value: number | string | Object | boolean, opt_arg: number | string | Object | boolean, opt_callback: number | string | Object | boolean): number | string | Object | boolean

Supplemental method for validating arguments in local scope

public

Add an @@iterator method to non-iterable object

public

updateEvent(callback: Function, userdata: Object)

Update events on the currently timeline object

public

Validator for array

public

Validator for boolean

public

Validator for numeric

public

Validator for object

public

Validator for string

public

zoomScale(event: Object)

Be zoomed in scale of the timeline that fires when any scales on the ruler is double clicked

Private Methods
private

Event when focus or blur

private

Calculate each properties of the timeline instance

private

Create the event container of the timeline

private

Create an event element on the timeline

private

Create the footer of the timeline

private

Create the headline of the timeline

private

_createRuler(position: string): Object

Create the ruler of the timeline

private

_createRulerContent(_line_grids: Object, line_scale: string, ruler: RulerOptions): Object

Create the content of ruler of the timeline

private

Create the side indexes of the timeline

private

_debug(message: string, throwType: string)

Echo the log of plugin for debugging

private

_diffDate(date1: number, date2: number, scale: string, absval: boolean): number | boolean

Acquire the difference between two dates with the specified scale value

private

Draw the relational lines

private

Filter the scale key name for LimitScaleGrids

private

Filter to aggregate the grid width of the variable length scale

private

Define the default options of this plugin

private

Get the coordinate X on the timeline of any date

private

_getGridsPerScale(target_scale: string): Object

Get the grid number per scale (for fixed length scale)

private

Retrieve the pluggable datetime as milliseconds from specified keyword

private

_getPluggableParams(str_like_params: string): Object

Retrieve the pluggable parameter as an object

private

Retrieve the pluggable rows of the timeline

private

Retrieve the diameter size (pixel) of pointer

private

Event when hover on the pointer type event

private

_init()

Initialize the plugin

private

Load all enabled events markupped on target element to the timeline object

private

Load the cached event data from the web storage

private

Retrieve the mapping data that placed current events

private

Controller method to place event data on timeline @private:

private

_registerEventData(event_element: Object, params: Object): Object

Register one event data as object

private

Remove the cache data on the web storage

private

Render the view of timeline container

private

Cache the event data to the web storage

private

Verify the display period of the timeline does not exceed the maximum renderable range

private

Verify the allowed scale, then retrieve that scale's millisecond if allowed

Static Public Members

public static get Default: Default source

public static get VERSION: string source

Static Private Methods

private static _jQueryInterface(config: string | Object, args: ...string | ...Function): * source

Interface for jQuery

Params:

NameTypeAttributeDescription
config string | Object
  • nullable: true

The object of plugin options or string of public method

args ...string | ...Function
  • nullable: true

Arguments for public method

Return:

*

Private Members

private _config: Object source

private _element: Object source

private _instanceProps: Object source

private _isCached: boolean source

private _isCompleted: boolean source

private _isInitialized: boolean source

private _isShown: boolean source

private _observer: Object source

private _selector: string source

Public Methods

public addEvent(callback: Function, userdata: Object) source

Add new events to the rendered timeline object

Params:

NameTypeAttributeDescription
callback Function
  • nullable: true

Custom callback fired after calling this method

userdata Object
  • nullable: true

Data as object of referable in that callback

public alignment(position: string, duration: number | string) source

Move the display position of the timeline container to the specified position

Params:

NameTypeAttributeDescription
position string
  • nullable: true

The preset string of position on timeline you want to align. Allowed values are "left", "begin", "center", "right", "end", "latest", "current", "currently" or number of event id

duration number | string
  • nullable: true

The duration of alignment animation. Allowed values are "fast", "normal", "slow" or number of milliseconds

public compareValues(property: string, order: string): number source

Sort an array by value of specific property (Note: destructive method)

Params:

NameTypeAttributeDescription
property string
  • nullable: false

To compare a property of object

order string
  • optional
  • default: "asc"

Order to sort

Return:

number

Comparison index

Example:

Object.sort( this.compareValues( property, order ) )

public dateback(options: Object, callback: Function, userdata: Object) source

Move shift or expand the range of timeline container as to past direction (to left)

Params:

NameTypeAttributeDescription
options Object
  • nullable: true

Options for moving as dateback on the timeline container

callback Function
  • nullable: true

Custom callback fired after calling this method

userdata Object
  • nullable: true

Data as object of referable in that callback

public dateforth(options: Object, callback: Function, userdata: Object) source

Move shift or expand the range of timeline container as to futrue direction (to right)

Params:

NameTypeAttributeDescription
options Object
  • nullable: true

Options for moving as dateforth on the timeline container

callback Function
  • nullable: true

Custom callback fired after calling this method

userdata Object
  • nullable: true

Data as object of referable in that callback

public destroy() source

Destroy the object to which the plugin is applied

public generateUniqueID(digit: number): string source

Generate the pluggable unique id

Params:

NameTypeAttributeDescription
digit number
  • optional
  • default: 1000

Return:

string

public getCorrectDatetime(datetime_str: string): Object source

Get the correct datetime with remapping to that if the year is 0 - 99

Params:

NameTypeAttributeDescription
datetime_str string
  • nullable: false

Return:

Object (nullable: true)

Date Object, or null if failed

public getHigherScale(scale: string): string source

Retrieve one higher scale

Params:

NameTypeAttributeDescription
scale string
  • nullable: false

Return:

string

String of higher scale

public getLocaleString(date_seed: string, scale: string, locales: string, options: Object): string source

Retrieve the date string of specified locale

Params:

NameTypeAttributeDescription
date_seed string
  • nullable: false
scale string
  • optional
  • default: ""
locales string
  • optional
  • default: "en-US"
options Object
  • optional
  • default: {}

Return:

string

Locale string

public getOptions() source

this method was deprecated. This method has been deprecated since version 2.0.0

public getWeek(date_str: string): number source

Method to get week number as extension of Date object

Params:

NameTypeAttributeDescription
date_str string
  • nullable: false

Return:

number

public hexToRgbA(hex: string, alpha: number): string source

Convert hex of color code to rgba

Params:

NameTypeAttributeDescription
hex string
  • nullable: false
alpha number
  • optional
  • default: 1

Return:

string

public hide() source

Hide shown timeline

public hideLoader() source

Hide the loader

public initialized(callback: Function, userdata: Object) source

This method is able to call only once after completed an initializing of the plugin

Params:

NameTypeAttributeDescription
callback Function
  • nullable: true

Custom callback fired after calling this method

userdata Object
  • nullable: true

Data as object of referable in that callback

public is_Object(item: number | string | Object | boolean): boolean source

Determine whether variable is an Object

Params:

NameTypeAttributeDescription
item number | string | Object | boolean
  • nullable: false

Variable you want to check

Return:

boolean

public is_empty(value: number | string | Object | number[] | boolean): boolean source

Determine empty that like PHP

Params:

NameTypeAttributeDescription
value number | string | Object | number[] | boolean
  • nullable: false

Variable you want to check

Return:

boolean

public is_iterable(obj: Object): boolean source

Determine whether the object is iterable

Params:

NameTypeAttributeDescription
obj Object
  • nullable: false

Return:

boolean

public mergeDeep(target: Object, source: Object): Object source

Merge two objects deeply as polyfill for instead "$.extend(true,target,source)"

Params:

NameTypeAttributeDescription
target Object
  • nullable: false
source Object
  • nullable: false

Return:

Object

public numRound(number: number, digit: number, round_type: string): number source

Round a number with specific digit

Params:

NameTypeAttributeDescription
number number
  • nullable: false
digit number
  • nullable: true

Defaults to 0

round_type string
  • optional
  • default: "round"

Return:

number

public openEvent(event: Object) source

The method that fires when an event on the timeline is clicked Note: You can hook the custom processing with the callback specified in the event parameter

Params:

NameTypeAttributeDescription
event Object

public reload(callback: Function, userdata: Object) source

Reload the timeline with overridable any options

Params:

NameTypeAttributeDescription
callback Function
  • nullable: true

Custom callback fired after calling this method

userdata Object
  • nullable: true

Data as object of referable in that callback

public removeEvent(callback: Function, userdata: Object) source

Remove events from the currently timeline object

Params:

NameTypeAttributeDescription
callback Function
  • nullable: true

Custom callback fired after calling this method

userdata Object
  • nullable: true

Data as object of referable in that callback

public render() source

this method was deprecated. This method has been deprecated since version 2.0.0

public show() source

Show hidden timeline

public showLoader() source

Show the loader

public sleep(msec: number): * source

Await until next process at specific millisec

Params:

NameTypeAttributeDescription
msec number
  • optional
  • default: 1

Millisecond

Return:

*

public strWidth(str: string): number source

Get the rendering width of the given string

Params:

NameTypeAttributeDescription
str string
  • nullable: false

Return:

number

public supplement(default_value: number | string | Object | boolean, opt_arg: number | string | Object | boolean, opt_callback: number | string | Object | boolean): number | string | Object | boolean source

Supplemental method for validating arguments in local scope

Params:

NameTypeAttributeDescription
default_value number | string | Object | boolean
  • nullable: false
opt_arg number | string | Object | boolean
  • nullable: true
opt_callback number | string | Object | boolean
  • nullable: true

function or string of function to call

Return:

number | string | Object | boolean

public toIterableObject(obj: Object): Object source

Add an @@iterator method to non-iterable object

Params:

NameTypeAttributeDescription
obj Object
  • nullable: false

Return:

Object

public updateEvent(callback: Function, userdata: Object) source

Update events on the currently timeline object

Params:

NameTypeAttributeDescription
callback Function
  • nullable: true

Custom callback fired after calling this method

userdata Object
  • nullable: true

Data as object of referable in that callback

public validateArray(def: number | string | Object | boolean, val: number | string | Object | boolean): number | string | Object | boolean source

Validator for array

Params:

NameTypeAttributeDescription
def number | string | Object | boolean
  • nullable: false

Define instead this value as default if validation failure

val number | string | Object | boolean
  • nullable: false

Value to validate

Return:

number | string | Object | boolean

public validateBoolean(def: number | string | Object | boolean, val: number | string | Object | boolean): number | string | Object | boolean source

Validator for boolean

Params:

NameTypeAttributeDescription
def number | string | Object | boolean
  • nullable: false

Define instead this value as default if validation failure

val number | string | Object | boolean
  • nullable: false

Value to validate

Return:

number | string | Object | boolean

public validateNumeric(def: number | string | Object | boolean, val: number | string | Object | boolean): number | string | Object | boolean source

Validator for numeric

Params:

NameTypeAttributeDescription
def number | string | Object | boolean
  • nullable: false

Define instead this value as default if validation failure

val number | string | Object | boolean
  • nullable: false

Value to validate

Return:

number | string | Object | boolean

public validateObject(def: number | string | Object | boolean, val: number | string | Object | boolean): number | string | Object | boolean source

Validator for object

Params:

NameTypeAttributeDescription
def number | string | Object | boolean
  • nullable: false

Define instead this value as default if validation failure

val number | string | Object | boolean
  • nullable: false

Value to validate

Return:

number | string | Object | boolean

public validateString(def: number | string | Object | boolean, val: number | string | Object | boolean): number | string | Object | boolean source

Validator for string

Params:

NameTypeAttributeDescription
def number | string | Object | boolean
  • nullable: false

Define instead this value as default if validation failure

val number | string | Object | boolean
  • nullable: false

Value to validate

Return:

number | string | Object | boolean

public zoomScale(event: Object) source

Be zoomed in scale of the timeline that fires when any scales on the ruler is double clicked

Params:

NameTypeAttributeDescription
event Object

Private Methods

private _activeEvent(event: Object) source

Event when focus or blur

Params:

NameTypeAttributeDescription
event Object

private _calcVars() source

Calculate each properties of the timeline instance

private _createEventContainer(): Object source

Create the event container of the timeline

Return:

Object

Generated DOM element

private _createEventNode(params: Object): Object source

Create an event element on the timeline

Params:

NameTypeAttributeDescription
params Object

Return:

Object

Generated DOM element

private _createFooter(): Object source

Create the footer of the timeline

Return:

Object

Generated DOM element

private _createHeadline(): Object source

Create the headline of the timeline

Return:

Object

Generated DOM element

private _createRuler(position: string): Object source

Create the ruler of the timeline

Params:

NameTypeAttributeDescription
position string

Either "top" or "bottom" as the position of the ruler

Return:

Object

Generated DOM element

private _createRulerContent(_line_grids: Object, line_scale: string, ruler: RulerOptions): Object source

Create the content of ruler of the timeline

Params:

NameTypeAttributeDescription
_line_grids Object
line_scale string
ruler RulerOptions

Return:

Object

Generated DOM element

private _createSideIndex(margin: Object): Object source

Create the side indexes of the timeline

Params:

NameTypeAttributeDescription
margin Object
margin.top number
margin.bottom number

Return:

Object

Generated DOM element

private _debug(message: string, throwType: string) source

Echo the log of plugin for debugging

Params:

NameTypeAttributeDescription
message string
throwType string
  • optional
  • default: "Notice"

private _diffDate(date1: number, date2: number, scale: string, absval: boolean): number | boolean source

Acquire the difference between two dates with the specified scale value

Params:

NameTypeAttributeDescription
date1 number

Number that can be parsed as datetime

date2 number

Number that can be parsed as datetime

scale string
  • optional
  • default: "millisecond"
absval boolean
  • optional
  • default: false

Return:

number | boolean

private _drawRelationLine(events: Object) source

Draw the relational lines

Params:

NameTypeAttributeDescription
events Object

private _filterScaleKeyName(key: string): string source

Filter the scale key name for LimitScaleGrids

Params:

NameTypeAttributeDescription
key string

Return:

string

Filtered scale key name

private _filterVariableScale(target_scale: string): Object source

Filter to aggregate the grid width of the variable length scale

Params:

NameTypeAttributeDescription
target_scale string

Return:

Object

private _getConfig(config: Object): Object source

Define the default options of this plugin

Params:

NameTypeAttributeDescription
config Object

Initial options

Return:

Object

Config overrided initial options to default config

private _getCoordinateX(date: string): number source

Get the coordinate X on the timeline of any date

Params:

NameTypeAttributeDescription
date string

Return:

number

The pixel value as the coordinate X on timeline

private _getGridsPerScale(target_scale: string): Object source

Get the grid number per scale (for fixed length scale)

Params:

NameTypeAttributeDescription
target_scale string

Return:

Object

private _getPluggableDatetime(key: string, round_type: string): number source

Retrieve the pluggable datetime as milliseconds from specified keyword

Params:

NameTypeAttributeDescription
key string

Any one of "current", "auto", or datetime string

round_type string
  • optional

Return:

number

This value unit is milliseconds

private _getPluggableParams(str_like_params: string): Object source

Retrieve the pluggable parameter as an object

Params:

NameTypeAttributeDescription
str_like_params string

Strings that can be parsed as javascript objects

Return:

Object

private _getPluggableRows(): number source

Retrieve the pluggable rows of the timeline

Return:

number

private _getPointerSize(key: number | string, margin: number): number source

Retrieve the diameter size (pixel) of pointer

Params:

NameTypeAttributeDescription
key number | string
margin number

Return:

number

private _hoverPointer(event: Object) source

Event when hover on the pointer type event

Params:

NameTypeAttributeDescription
event Object

private _init() source

Initialize the plugin

private _loadEvent() source

Load all enabled events markupped on target element to the timeline object

private _loadToCache(): Object source

Load the cached event data from the web storage

Return:

Object

private _mapPlacedEvents(): number[] source

Retrieve the mapping data that placed current events

Return:

number[]

private _placeEvent() source

Controller method to place event data on timeline @private:

private _registerEventData(event_element: Object, params: Object): Object source

Register one event data as object

Params:

NameTypeAttributeDescription
event_element Object
params Object

Return:

Object

Registered new event data

private _removeCache() source

Remove the cache data on the web storage

private _renderView() source

Render the view of timeline container

private _saveToCache(data: Object): boolean source

Cache the event data to the web storage

Params:

NameTypeAttributeDescription
data Object

Return:

boolean

private _verifyMaxRenderableRange(): boolean source

Verify the display period of the timeline does not exceed the maximum renderable range

Return:

boolean

private _verifyScale(scale: string): number | boolean source

Verify the allowed scale, then retrieve that scale's millisecond if allowed

Params:

NameTypeAttributeDescription
scale string

Return:

number | boolean

Return false if specified an invalid scale