Skip to content
Logan Kearsley edited this page Nov 2, 2013 · 8 revisions

Initialization

A basic timeline editor can be initialized with

var timeline = new Timeline(el,{});

Where el is a DOM element into which to insert the timeline GUI. The second argument is a dictionary of optional configuration arguments.

Options

Graphics options

fonts: (Object) A font style configuration object.
colors: (Object) A color style configuration object.
images: (Object) An image set configuration object.
cursors: (Object) A cursor set configuration object.

Dimensional options

width: (Number) The width of the timeline editor in CSS pixels. Defaults to the offsetWidth of the containing element.
length: (Number) The length of the timeline in seconds. Defaults to 1800 (30 minutes).
start: (Number) The starting point of the initial viewing window, in seconds. Defaults to 0.
end: (Number) The ending point of the initial viewing window, in seconds. Defaults to 60 (1 minute).

Functional options

stack: (Object) An instance of EditorWidgets.COmmandStack to use for handling undo/redo operations. Defaults to a newly instantiated instance.
multi: (Bool) Allow multiple selection. Defaults to false, but you almost always want to set it to true to enable more advanced editing features.
autoSelect: (Bool) Whether or not to automatically select a cue after creation.
tool: (Number) The editing tool to initially make active; one of Timeline.ORDER, Timeline.SELECT, Timeline.MOVE, Timeline.CREATE, Timeline.DELETE, Timeline.REPEAT, Timeline.SCROLL, Timeline.SHIFT, Timeline.SPLIT. Defaults to Timeline.SELECT.

Properties

fonts: (Object) A font style configuration object (read/write).
colors: (Object) A color style configuration object (read/write).
images: (Object) An image set configuration object (read/write).
cursors: (Object) A cursor set configuration object (read/write).
length: (Number) The length of the timeline in seconds (read/write).
width: (Number) The width of the timeline editor in CSS pixels (read/write).
height: (Number) The height of the timeline editor in CSS pixels (read only).
commandStack: (Object) The undo/redo manager, equal to the stack option if given (read only).
abRepeatSet: (Bool) Whether or not A/B Repeat points have been set (read-only).
abRepeatOn: (Bool) Whether or not automatic repeat is currently active (read/write).
currentTime: (Number) The current time in seconds (read/write).
timeCode: (String) The current time in HH:MM:SS.mmm format (read only).
multi: (Bool) Whether or not multiple selection in allowed (read/write).
autoSelect: (Bool) Whether or not to automatically select newly-created cues (read/write).
currentTool: (Number) The currently active editing tool (read/write).

Methods

Event methods

emit(evt: Timeline.Event): trigger the event evt.
on(name: String, cb: Function(evt: Timeline.Event)): register the callback function cb(evt) for the event name.
off(name: String, cb: Function(evt: Timeline.Event)): remove the callback function cb(evt) for the event name.

Context Menu methods

showMenu({x: Number, y: Number}): display a context menu at location (x,y).
addMenuItem(path: String, config: Object): Add an extra menu item at the sub-menu position specified by path, a . delimited string. Intermediate sub-menus along the path will be created if they don't exist yet. TODO: explain the structure of the config object.
getMenuItems(path: String): Array[Object]: Gets the configuration objects for menu items in the submenu at path.

View methods

timeInView(time: Number): Bool: Determine whether a certain time (in seconds) is in the current viewing window.
spanInView(start: Number, end: Number): Bool: Determine whether any part of a time span (in seconds) overlaps the current viewing window.

Text Track methods

hasTextTrack(id: String): Bool: Determine whether a track with the given name is currently loaded in the editor.
getTrack(id: String): Timeline.TextTrack: Get the timeline text track object with the given name, or null if none is loaded.
addTextTrack(track: TimedText.TextTrack, mime: String[, overwrite: Bool]): Given a timed text track, create a new timeline text track with the given mime type and add it to the editor. Throws an error if another track with the same name is already loaded, unless overwrite is set to true, in which case the conflicting track is removed.
loadTextTrack(source: File|String, kind: String, lang: String, name: String[, overwrite: Bool]): Create a new text track from a File object or by loading a file from a URL. Throws an error if the name conflicts with another already-loaded track, unless overwrite is set to true, in which case the conflicting track is removed.
cloneTimeCodes(id: String, kind: String, lang: String, name: String[, overwrite: Bool]): Create a new track by cloning the time codes (but not the cue contents) from the track identified by id. Throws an error if the new name conflicts with another already-loaded track, unless overwrite is set to true, in which case the conflicting track is removed.
removeTextTrack(id: String): Remove the track with the given name from the editor
alterTextTrack(id: String, kind: String, lang: String, name: String[, overwrite: Bool]): Change the attributes of the text track with original name given by id. Throws an error if the new name conflicts with another already-loaded track, unless overwrite is set to true, in which case the conflicting track is removed.
addSegment(id: String, cue: TextTrackCue[, select: Bool]): Create a new track segment from the given cue and add it to the track identified by id, selecting it if select is set to true.
exportTracks([id: String|Array[String]]): Array[Object]: Returns an array of file info objects whose data attributes are the serializations of the tracks identified by id, or all currently loaded tracks if no argument is provided.

A/B Repeat methods

clearRepeat(): Clears A/B repeat points.
setRepeat(start: Number, end: Number): Sets new A/B repeat points (in seconds).
setAutoCue(onoff: Bool, tid: String): Activates or deactivates autocuing for the text track identified by tid.
breakPoint([skip: Bool]): triggers an autocue breakpoint at the current time. When this results in creating a new cue, this will automatically set new A/B repeat points around the new cue if skip is falsy.

Audio methods

addAudioTrack(wave: WaveForm, id: String): Creates a new audio track with the given id from a waveform object. Throws an error if another audio track with the same id is already loaded.
loadAudioTrack(source: File|String, id: String): Creates a new audio track with the given id from a File object or by loading a file from a URL. Throws an error if another audio track with the same id is already loaded.
removeAudioTrack(id: String): Removes the audio track with the given id from the editor.
setAudioTrack(tid: String, aid: String): Assigns the audio track identified by aid to the text track given by tid.
unsetAudioTrack(tid: String): Removes audio rendering from the text track identified by tid.

Events

Event handlers are called with a single Timeline.Event argument, which contains timeStamp (Date) and type (String) properties and a preventDefault() method. Additional data properties are included for specific event types.

Track Events

addtrack: Emitted when a track is added to the editor.

  • track (Timeline.TextTrack): The added track.

droptrack: Emitted when a track is added to the editor via drag-and-drop.

  • track (Timeline.TextTrack): The added track.

removetrack: Emitted when a track is removed from the editor.

  • track (Timeline.TextTrack): The removed track.

convert: Emitted when a track is converted between different formats.

  • track (Timeline.TextTrack): the altered track
  • oldtype (String): the track's previous mime type

Segment Events

activechange: Emitted when the properties of any active cue change. Used to trigger minimal re-rendering during undo/redo operations.

addcue: Emitted when a pre-existing cue is added to a track with TextTrack.add(cue: TimedTextCue).

  • cue (TimedTextCue): The added cue.
  • segment (Segment): The newly created segment wrapping the cue.

segstart: Emitted when the Add tool is used to begin creating a new segment.

  • track (Timeline.TextTrack): the track in which the segment is being added.

segcomplete: Emitted when a new segment is created with the Add tool.

  • track (Timeline.TextTrack): The track to which the segment was added.
  • segment (Segment): The new segment.

create: Emitted when segments are created for any reason.

  • segments (Array[Segment]): The list of added segments.

delete: Emitted when segments are deleted for any reason.

  • segments (Array[Segment]): The list of deleted segments.

paste: Emitted when segments are pasted into a track.

  • segments (Array[Segment]): The list of added segments.

unpaste: Emitted when originally pasted segments are removed due to an undo operation.

  • segments (Array[Segment]): The list of removed segments.

split: Emitted when a segment is split.

  • first (Segment): The first of the resulting segments.
  • second (Segment): The second of the resulting segments.

merge: Emitted when segments are merged.

  • merged (Segment): The resulting merged segment.
  • removed (Array[Segment]): The removed excess segments.

unmerge: Emitted when an undo operation restores merged segments; same properties as merge.

select: Emitted when segments are selected.

  • segments (Array[Segment]): The newly selected segments.

unselect: Emitted when segments are deselected.

  • segments (Array[Segment]): The deselected segments.

move: Emitted when a segment is moved with the Move tool.

  • segment (Segment): The moved segment.

resizel: Emitted when a segment's left boundary is moved with the Move tool.

  • segment (Segment): The resized segment.

resizer: Emitted when a segment's right boundary is moved with the Move tool.

  • segment (Segment): The resized segment.

shift: Emitted when multiple segments are moved simultaneously with the Timeshift tool.

  • segments (Array[Segment]): The moved segments.
  • delta (Number): The distance by which segments were shifted (in seconds).

Timing Events

timeupdate: Emitted when currentTime changes.

jump: Emitted when the currentTime changes due to internal causes (such as hitting repeat points or user interaction). Calling preventDefault() will cancel the jump.

  • time (Number): The new value of currentTime (not actually assigned until all event handlers have returned).

abrepeatenabled: Emitted when A/B Repeat is enabled.

abrepeatdisabled: Emitted when A/B Repeat is disabled.

abrepeatset: Emitted when A/B Repeat points are set.

abrepeatunset: Emitted when A/B repeat points are cleared.