Show:

I am the type definition of an Overlay.

An Overlay displays the content of any type of Resource in a separate layer on top of the video.

Overlays are managed by the OverlaysController.

Methods

brushIn

()

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

brushOut

()

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

gotInFocus

()

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

makeOverlayElementDraggable

()

I make my overlayElement draggable.

The event handling changes my this.data.position.[top|left|width|height] attributes accordingly. Also it updates the control elements of my properties control interface.

makeOverlayElementResizeable

()

I make my overlayElement resizable.

The event handling changes my this.data.position.[top|left|width|height] attributes accordingly. Also it updates the control elements of my properties control interface.

makeTimelineElementDraggable

()

I make my timelineElement draggable.

The event handling changes my this.data.start and this.data.end attributes accordingly. Also it updates the control elements of my properties control interface.

makeTimelineElementResizeable

()

I make my timelineElement resizable.

The event handling changes my this.data.start and this.data.end attributes accordingly. Also it updates the control elements of my properties control interface.

removedFromFocus

()

See also: Overlay/gotIntoFocus:method

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

removeFromDOM

()

I remove my DOM elements (Overlay/timelineElement and Overlay/overlayElement) from the DOM.

I am called when the Overlay is to be deleted.

renderInDOM

()

I render my DOM elements (Overlay/timelineElement and Overlay/overlayElement) into the DOM.

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

setActive

(
  • onlyTimelineElement
)

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

Parameters:

  • onlyTimelineElement Boolean

    (optional)

setInactive

()

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

setSyncedMedia

(
  • synced
)

I update my behavior, wether my time-based content (video) should be synchronized with the main video or not.

I control accordingly, wether the video controls should be shown or not.

I append dynamically an attribute to myself (this.videoElement).

Note: My attribute syncedMedia is independent of this method and stores the current state for use in Overlays/setActive:method and Overlays/setInactive:method.

Parameters:

startEditing

()

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

I make sure

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

stopEditing

()

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

updateOverlayElement

()

I update the CSS of the overlayElement to its correct position within the overlaysContainer.

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 I am displayed and my timelineElement is highlighted) or not active (invisible).

data

I hold the data object of an Overlay, which is stored in the Database and saved in the hypervideos's overlays.json file.

overlayElement

I hold the overlayElement (a jquery-enabled HTMLElement), which displays my content on top of the video.

permanentFocusState

Boolean

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

resourceItem

Resource

I hold the Resource object of the overlay.

syncedMedia

Boolean

I signal wether the time-based content of myself should be played synchronized with the main video. I am set to true during construction, when my resource type is video and my data.attributes.autoPlay is also true. This can be changed later in the ResourceVideo/renderPropertiesControls.

Se also Overlay/setSyncedMedia()

timelineElement

HTMLElement

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