Show:

I am the type definition of an Annotation. An annotation is a user-generated content which is associated with start and end time of the main video.

An annotation can hold any type of Resource.

Annotations are grouped in annotation sets, which are assigned to a user. Each user can have 0 or 1 annotation set.

Annotations are managed by the AnnotationsController.

Methods

brushIn

()

I am called when the mouse pointer is hovering over one of my two DOM elements.

I use the Raphael.js library to draw connecting lines betweem my tileElement and my timelineElement.

brushOut

()

I am called when the mouse pointer is leaving the hovering area over my two DOM elements.

closeAnnotation

()

I tell the AnnotationsController to set "openedAnnotation" to null.

gotInFocus

()

When I "got into focus" (which happens, when I become the referenced object in the AnnotationsController's annotationInFocus attribute), then this method will be called.

makeTimelineElementDraggable

()

I make my timelineElement draggable.

The event handling changes my this.data.start and this.data.end attributes accordingly.

makeTimelineElementResizeable

()

I make my timelineElement resizable.

The event handling changes my this.data.start and this.data.end attributes accordingly.

Returns:

openAnnotation

()

An annotation can be "opened" and "closed".

When I am called, I open the annotation, which means:

  • I set the current play position to my data.start value
  • I tell the AnnotationsController to set me as the "openedAnnotation"

Returns:

removedFromFocus

()

See also: Annotation/gotIntoFocus:method

When I was "removed from focus" (which happens, when the AnnotationsController's annotationInFocus attribute), is set either to null or to an other annotation than myself), then this method will be called.

removeFromDOM

()

I remove my elements from the DOM.

I am called when the Annotation is to be deleted.

Returns:

renderCompareTimelineItem

()

When the global state editMode is "annotations", the user can also choose to create new annotations from other user's annotations (which makes a copy of that data and places a new annotation in the user's collection of his/her own annotations).

These annotation timelines from other users are called "compare timelines" (in contrast to the user's own timeline),.

For this purpose, I create a special, jquery-enabled HTMLElement, which carries all the necessary information to create a new annotation in its data attributes. The returned element is draggable, and ready to be AnnotationsController:makeTimelineDroppable:method.

Returns:

HTMLElement

renderInDOM

()

I render my DOM elements into the DOM.

I am called, when the Annotation is initialized. My counterpart ist Annotation/removeFromDOM.

setActive

()

When I am scheduled to be displayed, this is the method to be called.

setInactive

()

When I am scheduled to disappear, this is the method to be called.

startEditing

()

I am called when the app switches to the editMode "annotations".

I make sure

  • that my timelineElement is resizable and draggable
  • that my elements have click handlers for putting myself into focus.

stopEditing

()

When the global editMode leaves the state "annotations", I am called to stop the editing features of the annotations.

updateTimelineElement

()

I update the CSS of the timelineElement to its correct position within the timeline.

Attributes

activeState

Boolean

I store my state, wether I am "active" (this is, when my timelineElement is highlighted) or not.

annotationElement

HTMLElement

I hold the annotationElement (a jquery-enabled HTMLElement), which contains the actual conent of my resourceItem.

permanentFocusState

Boolean

I store my state, wether I am "in focus" or not. See also:

previewElement

HTMLElement

I hold the previewElement (a jquery-enabled HTMLElement), which shows the actual conent of my resourceItem in a special preview area besides the video.

resourceItem

Resource

I hold the Resource object of the annotation.

tileElement

HTMLElement

I hold the tileElement (a jquery-enabled HTMLElement), which shows a icon for me close to my position in the timeline.

timelineElement

HTMLElement

I hold the timelineElement (a jquery-enabled HTMLElement), which indicates my start and end time.