API Docs
AnnotationsController Module
I am the AnnotationsController who mediates between the data model of all annotations (stored in HypervideoModel) and their various User Interface elements (e.g. in ViewVideo)
Item Index
Methods
- changeUserColor
- changeViewSize
- deleteAnnotation
- distributeTiles
- findTopMostActiveAnnotation
- initAnnotations
- initAnnotationSlider
- initController
- initEditOptions
- initSidebarSelectmenu
- makeTimelineDroppable
- onViewSizeChanged
- refreshSidebarSelectmenu
- resetTimelineView
- setAnnotationInFocus
- setOpenedAnnotation
- stackTimelineView
- toggleConfig_annotationsVisible
- toggleEditMode
- toggleSidebarOpen
- toggleViewMode
- updateAnnotationSlider
- updateController
- updateStatesOfAnnotations
Attributes
Methods
changeUserColor
-
color
I react to a change in the global state "userColor"
Parameters:
-
colorString
changeViewSize
()
private
When the global state viewSize changes, I re-arrange the annotationElements and tiles, to fit the new width of the browser.
deleteAnnotation
-
annotation
I am the starting point for the process of deleting an annotation.
Parameters:
-
annotationAnnotation
distributeTiles
()
private
I distribute the tileElements in the tileContainer, so that they match closely to the position of their related timelineElements. When they would start to overlap, I arrange them in groups. See also Annotation.
findTopMostActiveAnnotation
()
I find the annotation which is active. If there are more than one active annotations, I return the last one which has been activated. If there is no active annotation, I return null.
initAnnotations
()
private
I first empty all DOM elements, and then ask all annotations of the current data model, to append new DOM elements, which I the arrange and prepare for view.
initAnnotationSlider
()
private
I prepare the display of the annotationElement (which contains the content of an annotation), which are shown in the AnnotationContainer.
initController
()
I initialize the AnnotationsController. My init process has two tasks: connect the annotation menu in the Sidebar with the data model (select current annotation set) and initialize the annotations (instances of type Annotation)
initEditOptions
()
private
When the editMode 'annotations' was entered, the #EditingOptions area should show two tabs: a ResourcePicker and a tab with the annotation timelines of all other users, drag new items on the annotation timeline.
makeTimelineDroppable
-
droppable
When the editMode 'annotations' has been entered, the annotation timeline should be droppable for new items (from the ResourcePicker or from other users' timelines). A drop event should trigger the process of creating a new annotation. My parameter is true or false to activate or deactivate this behavior.
Parameters:
-
droppableBoolean
onViewSizeChanged
()
private
I react to changes in the global state viewSizeChanged. The state changes after a window resize event and is meant to be used for performance-heavy operations.
resetTimelineView
()
private
When we are in the editMode annotations, the timeline should show all timeline elements stacked. After leaving this mode, I have to reset the timelineElements and the timeline to their normal layout.
setAnnotationInFocus
-
annotation
When an annotation is set into focus, I have to tell the old annotation in the var annotationInFocus, that it is no longer in focus. Then I store the Annotation (or null) from my parameter in the var annotationInFocus, and inform it about it.
Parameters:
-
annotationAnnotation or null
Returns:
Annotation or null
setOpenedAnnotation
-
annotation
I open the annotationElement of an annotation in the annotationContainer. if my parameter is null, I close the annotationContainer. Also, I add CSS classes to the opened annotationElement, and to its left and right neighbour.
Parameters:
-
annotationAnnotation or null
stackTimelineView
()
When we are in the editMode annotations, the timeline should show all timeline elements stacked, which is what I do.
toggleConfig_annotationsVisible
-
newState -
oldState
I am called when the global state "hv_config_annotationsVisible" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleEditMode
-
editMode -
oldEditMode
Listens to global state 'editMode'. The AnnotationsController has to react on a change of the editMode. First it checks, wether we are entering or leaving the edit mode in general (editMode is false, when not the editor is not active, otherwise it is a String indicating the editMode). If the editor is active, the user's own annotation set has to be selected an the select menu for annotations has to be hidden. Secondly it checks wether the editMode we enter or leave is 'annotations'. If so, we activate or deactivate the editing options for annotations.
Parameters:
-
editModeString or false -
oldEditModeString or false
toggleSidebarOpen
()
private
When the state of the sidebar changes, I have to re-arrange the tileElements and the annotationElements, to fit the new width of the #mainContainer.
toggleViewMode
-
viewMode -
oldViewMode
When we enter the viewMode 'video', we have to update the distribution of tiles accoring to the current browser width.
Returns:
updateAnnotationSlider
()
private
The annotationContainer is a slider element, which means that its left position within its container element must be updated according to the left position of the currently opened annotationElement.
updateController
()
I update the AnnotationsController during runtime. My update process has two tasks: refresh the annotation menu in the Sidebar with the data model (select current annotation set) and initialize the annotations (instances of type Annotation)
updateStatesOfAnnotations
-
currentTime
I am a central method of the AnnotationsController. I am called from the update functions inside the HypervideoController and I set the activeState of the annotations according to the current time.
Parameters:
-
currentTimeNumber
Attributes
annotationInFocus
Annotation or null
An annotation can be selected to be the annotationInFocus (either by clicking or dragging/resizing). The annotation then displays additional controls in the #EditPropertiesControls element of ViewVideo