FrameTrail API Docs

  • for FrameTrail Version: 0.8.1

    • Modules & Types

    Show:

    frametrail/player/types/Videolink/type.js File

    1. /**
    2.  * @module Player
    3.  */
    4.  
    5.  
    6. /**
    7.  * I am the type definition of a Videolink. 
    8.  *
    9.  * A video link is classical hyperlink (to either another video or any other resource locatable bei an URL)
    10.  * and which has a start and a end time related to the time base of the main video.
    11.  *
    12.  * Videolinks are managed by the {{#crossLink "VideolinksController"}}VideolinksController{{/crossLink}}.
    13.  *
    14.  * @class Videolink
    15.  * @category TypeDefinition
    16.  */
    17.  
    18.  
    19.  
    20. FrameTrail.defineType(
    21.  
    22.     'Videolink',
    23.  
    24.     function(data){
    25.  
    26.         this.data = data;
    27.  
    28.         this.timelineElement  = $('<div class="timelineElement"></div>');
    29.         this.tileElement      = $('<div class="tileElement"></div>');
    30.         this.videolinkElement = $('<div class="videolinkElement"></div>');
    31.  
    32.  
    33.     },
    34.  
    35.     {
    36.         
    37.         /**
    38.          * I hold the data object of a Videolink, which is stored in the {{#crossLink "Database"}}Database{{/crossLink}} and saved in the hypervideos's links.json file.
    39.          * @attribute data
    40.          * @type {}
    41.          */
    42.         data:                   {},
    43.  
    44.         /**
    45.          * I hold the timelineElement (a jquery-enabled HTMLElement), which indicates my start and end time.
    46.          * @attribute timelineElement
    47.          * @type HTMLElement
    48.          */
    49.         timelineElement:        null,
    50.         
    51.         /**
    52.          * I hold the tileElement (a jquery-enabled HTMLElement), which shows a icon for me close to my position in the timeline.
    53.          * @attribute tileElement
    54.          * @type HTMLElement
    55.          */
    56.         tileElement:            null,
    57.         
    58.         /**
    59.          * I hold the videolinkElement (a jquery-enabled HTMLElement), which shows the linked content in an iframe.
    60.          * @attribute videolinkElement
    61.          * @type HTMLElement
    62.          */
    63.         videolinkElement:       null,
    64.  
    65.         /**
    66.          * I store my state, wether I am "active" (this is, when my timelineElement and tileElements are highlighted) or not.
    67.          * @attribute activeState
    68.          * @type Boolean
    69.          */
    70.         activeState:            false,
    71.         
    72.  
    73.         /**
    74.          * I store my state, wether I am "in focus" or not. See also:
    75.          * * {{#crossLink "Videolink/gotInFocus:method"}}Videolink/gotInFocus(){{/crossLink}}
    76.          * * {{#crossLink "Videolink/removedFromFocus:method"}}Videolink/removedFromFocus(){{/crossLink}}
    77.          * * {{#crossLink "VideolinksController/videolinkInFocus:attribute"}}VideolinksController/videolinkInFocus{{/crossLink}}
    78.          * @attribute permanentFocusState
    79.          * @type Boolean
    80.          */
    81.         permanentFocusState:    false,
    82.         
    83.  
    84.         /**
    85.          * I render my ({{#crossLink "Videolink/timelineElement:attribute"}}this.timelineElement{{/crossLink}}
    86.          * into the DOM.
    87.          *
    88.          * I am called, when the Videolink is initialized.
    89.          *
    90.          * The tileElement and videolinkElement however are rendere separately into the DOM (see 
    91.          * {{#crossLink "Videolink/renderTilesAndContentInDOM:method"}}this.renderTilesAndContentInDOM{{/crossLink}}),
    92.          * because their order in the DOM tree has to be sorted by this.data.start after each change.
    93.          *
    94.          * @method renderTimelineInDOM
    95.          */
    96.         renderTimelineInDOM: function () {
    97.  
    98.             var ViewVideo = FrameTrail.module('ViewVideo');
    99.  
    100.             this.timelineElement.unbind('hover');
    101.             this.timelineElement.hover(this.brushIn.bind(this), this.brushOut.bind(this));
    102.  
    103.             ViewVideo.VideolinkTimeline.append(this.timelineElement);
    104.             this.updateTimelineElement();
    105.             
    106.             
    107.         },
    108.  
    109.         /**
    110.          * I render my ({{#crossLink "Videolink/tileElement:attribute"}}this.tileElement{{/crossLink}}
    111.          * and my {{#crossLink "Videolink/videolinkElement:attribute"}}this.videolinkElement{{/crossLink}} into the DOM.
    112.          *
    113.          * I am called, when the Videolink is initialized, and also every time, when the global state "editMode" leaves the state 
    114.          * "links". This is the case, when the user has finished his/her changes to the Videolinks. All tiles and content
    115.          * containers have to be re-rendered into the DOM, because they need to sorted by ascending value of this.data.start.
    116.          *
    117.          * @method renderTilesAndContentInDOM
    118.          */
    119.         renderTilesAndContentInDOM: function () {
    120.  
    121.             var ViewVideo = FrameTrail.module('ViewVideo'),
    122.                 iFrame    = $('<iframe frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'),
    123.                 linkElem  = $('<a class="videolinkAnchor" href="'+ this.data.href +'">Go to Hypervideo</a>');
    124.  
    125.             this.videolinkElement.empty();
    126.             this.videolinkElement.append(iFrame, linkElem);
    127.  
    128.             ViewVideo.VideolinkTileSlider.append(this.tileElement);
    129.             ViewVideo.VideolinkContainer.append(this.videolinkElement);
    130.  
    131.             this.tileElement.unbind('hover');
    132.             this.tileElement.unbind('click')
    133.             this.tileElement.hover(this.brushIn.bind(this), this.brushOut.bind(this));
    134.             
    135.             // self = this necessary as self can not be kept in anonymous handler function 
    136.             var self = this;
    137.             this.tileElement.click(function() {
    138.                 if ( FrameTrail.module('VideolinksController').openedLink == self ) {
    139.                     self.closeVideolink();
    140.                 } else {
    141.                     self.openVideolink();
    142.                 }
    143.             });
    144.             
    145.         },
    146.  
    147.  
    148.         /**
    149.          * I remove all my elements from the DOM. I am called when a Videolink is to be deleted.
    150.          * @method removeFromDOM
    151.          */
    152.         removeFromDOM: function () {
    153.  
    154.             this.timelineElement.remove();
    155.             this.tileElement.remove();
    156.             this.videolinkElement.remove();
    157.  
    158.         },
    159.  
    160.         /**
    161.          * I update the CSS of the {{#crossLink "Videolink/timelineElement:attribute"}}timelineElement{{/crossLink}}
    162.          * to its correct position within the timeline.
    163.          *
    164.          * @method updateTimelineElement
    165.          */
    166.         updateTimelineElement: function () {
    167.  
    168.             var videoDuration   = FrameTrail.module('HypervideoModel').duration,
    169.                 positionLeft    = 100 * (this.data.start / videoDuration),
    170.                 width           = 100 * ((this.data.end - this.data.start) / videoDuration);
    171.  
    172.             this.timelineElement.css({
    173.                 top: '',
    174.                 left:  positionLeft + '%',
    175.                 right: '',
    176.                 width: width + '%'
    177.             });
    178.  
    179.         },
    180.  
    181.         
    182.  
    183.         /**
    184.          * When I am scheduled to be displayed, this is the method to be called.
    185.          * @method setActive
    186.          */
    187.         setActive: function () {
    188.  
    189.             this.activeState = true;
    190.  
    191.             this.timelineElement.addClass('active');
    192.             this.tileElement.addClass('active');
    193.  
    194.         },
    195.  
    196.         /**
    197.          * When I am scheduled to disappear, this is the method to be called.
    198.          * @method setInactive
    199.          */
    200.         setInactive: function () {
    201.  
    202.             this.activeState = false;
    203.  
    204.             this.timelineElement.removeClass('active');
    205.             this.tileElement.removeClass('active');
    206.  
    207.         },
    208.  
    209.  
    210.         /**
    211.          * I am called when the mouse pointer is hovering over one of my tile or my timeline element
    212.          * @method brushIn
    213.          */
    214.         brushIn: function () {
    215.  
    216.             this.timelineElement.addClass('brushed');
    217.             this.tileElement.addClass('brushed');
    218.  
    219.             if ( FrameTrail.getState('editMode') == false || FrameTrail.getState('editMode') == 'preview' ) {
    220.                 clearRaphael();
    221.                 drawConnections( this.tileElement, this.timelineElement, 10, {stroke: "#6B7884"} );
    222.             }
    223.  
    224.         },
    225.  
    226.         /**
    227.          * I am called when the mouse pointer is leaving the hovering area over my tile or my timeline element.
    228.          * @method brushOut
    229.          */
    230.         brushOut: function () {
    231.  
    232.             this.timelineElement.removeClass('brushed');
    233.             this.tileElement.removeClass('brushed');
    234.  
    235.             if ( (FrameTrail.getState('editMode') ==  false || FrameTrail.getState('editMode') ==  'preview') ) {
    236.                 clearRaphael();
    237.             }
    238.  
    239.         },
    240.  
    241.  
    242.         /**
    243.          * A video link can be "opened" and "closed".
    244.          *
    245.          * When I am called, I open the video link, which means:
    246.          * * I set the current play position to my data.start value
    247.          * * I tell the {{#crossLink "VideolinksController/openedLink:attribute"}}VideolinksController{{/crossLink}} to set me as the "openedLink".
    248.          *
    249.          * @method openVideolink
    250.          */
    251.         openVideolink: function () {
    252.  
    253.             var ViewVideo = FrameTrail.module('ViewVideo');
    254.  
    255.  
    256.             FrameTrail.module('HypervideoController').currentTime = this.data.start;
    257.  
    258.             FrameTrail.module('VideolinksController').openedLink = this;
    259.  
    260.             //ViewVideo.ExpandButton.one('click', this.closeVideolink.bind(this));
    261.  
    262.  
    263.         },
    264.  
    265.         /**
    266.          * I tell the {{#crossLink "VideolinksController/openedLink:attribute"}}VideolinksController{{/crossLink}} to set "openedLink" to null.
    267.          * @method closeVideolink
    268.          * @return 
    269.          */
    270.         closeVideolink: function () {
    271.  
    272.             FrameTrail.module('VideolinksController').openedLink = null;
    273.  
    274.         },
    275.  
    276.  
    277.  
    278.         /**
    279.          * I am called when the app switches to the editMode "links".
    280.          *
    281.          * I make sure
    282.          * * that my {{#crossLink "Videolink/timelineElement:attribute"}}timelineElement{{/crossLink}} is resizable and draggable
    283.          * * and that it has a click handler for putting myself into focus.
    284.          *
    285.          * @method startEditing
    286.          */
    287.         startEditing: function () {
    288.  
    289.  
    290.             var self = this,
    291.                 VideolinksController = FrameTrail.module('VideolinksController');
    292.  
    293.             this.makeTimelineElementDraggable();
    294.             this.makeTimelineElementResizeable();
    295.  
    296.             this.timelineElement.on('click', function(){
    297.  
    298.                 if (VideolinksController.videolinkInFocus === self){
    299.                     return VideolinksController.videolinkInFocus = null;
    300.                 }
    301.  
    302.                 self.permanentFocusState = true;
    303.                 VideolinksController.videolinkInFocus = self;
    304.  
    305.                 FrameTrail.module('HypervideoController').currentTime = self.data.start;
    306.  
    307.             });
    308.             
    309.  
    310.         },
    311.  
    312.         /**
    313.          * When the global editMode leaves the state "links", I am called to 
    314.          * stop the editing features of the video link.
    315.          *
    316.          * @method stopEditing
    317.          */
    318.         stopEditing: function () {
    319.  
    320.             this.timelineElement.draggable('destroy');
    321.             this.timelineElement.resizable('destroy');
    322.  
    323.             this.timelineElement.unbind('click');
    324.  
    325.  
    326.         },
    327.  
    328.  
    329.         /**
    330.          * I make my {{#crossLink "Videolink/timelineElement:attribute"}}timelineElement{{/crossLink}} draggable.
    331.          * 
    332.          * The event handling changes my this.data.start and this.data.end attributes
    333.          * accordingly.
    334.          *
    335.          * @method makeTimelineElementDraggable
    336.          */
    337.         makeTimelineElementDraggable: function () {
    338.  
    339.             var self = this;
    340.  
    341.  
    342.             this.timelineElement.draggable({
    343.                 
    344.                 axis:        'x',
    345.                 containment: 'parent',
    346.                 snapTolerance: 10,
    347.  
    348.                 drag: function(event, ui) {
    349.                     
    350.                     var closestGridline = FrameTrail.module('ViewVideo').closestToOffset($('.gridline'), {
    351.                             left: ui.position.left,
    352.                             top: ui.position.top
    353.                         }),
    354.                         snapTolerance = $(this).draggable('option', 'snapTolerance');
    355.  
    356.                     if (closestGridline) {
    357.                         
    358.                         $('.gridline').css('background-color', '#ff9900');
    359.  
    360.                         if ( ui.position.left - snapTolerance < closestGridline.position().left &&
    361.                              ui.position.left + snapTolerance > closestGridline.position().left ) {
    362.  
    363.                             ui.position.left = closestGridline.position().left;
    364.  
    365.                             closestGridline.css('background-color', '#00ff00');
    366.  
    367.                         }
    368.                     }
    369.  
    370.                     var videoDuration = FrameTrail.module('HypervideoModel').duration,
    371.                         leftPercent   = 100 * (ui.helper.position().left / ui.helper.parent().width()),
    372.                         newStartValue = leftPercent * (videoDuration / 100);
    373.  
    374.                     FrameTrail.module('HypervideoController').currentTime = newStartValue;    
    375.                     
    376.                 },
    377.  
    378.                 start: function(event, ui) {
    379.  
    380.                     if (!self.permanentFocusState) {
    381.                         FrameTrail.module('VideolinksController').videolinkInFocus = self;
    382.                     }
    383.                     
    384.                 },
    385.  
    386.                 stop: function(event, ui) {
    387.  
    388.                     if (!self.permanentFocusState) {
    389.                         FrameTrail.module('VideolinksController').videolinkInFocus = null;
    390.                     }
    391.                     
    392.  
    393.                     var videoDuration = FrameTrail.module('HypervideoModel').duration,
    394.                         leftPercent   = 100 * (ui.helper.position().left / ui.helper.parent().width()),
    395.                         widthPercent  = 100 * (ui.helper.width() / ui.helper.parent().width());
    396.                     
    397.                     self.data.start = leftPercent * (videoDuration / 100);
    398.                     self.data.end   = (leftPercent + widthPercent) * (videoDuration / 100);
    399.  
    400.                     self.updateTimelineElement();
    401.  
    402.                     FrameTrail.module('VideolinksController').stackTimelineView();
    403.  
    404.                     FrameTrail.module('HypervideoModel').newUnsavedChange('links');
    405.                     
    406.                 }
    407.             });
    408.  
    409.         },
    410.  
    411.         /**
    412.          * I make my {{#crossLink "Videolink/timelineElement:attribute"}}timelineElement{{/crossLink}} resizable.
    413.          * 
    414.          * The event handling changes my this.data.start and this.data.end attributes
    415.          * accordingly.
    416.          *
    417.          * @method makeTimelineElementResizeable
    418.          */
    419.         makeTimelineElementResizeable: function () {
    420.  
    421.             var self = this,
    422.                 endHandleGrabbed;
    423.  
    424.  
    425.             this.timelineElement.resizable({
    426.                 
    427.                 containment: 'parent',
    428.                 handles:     'e, w',
    429.  
    430.                 resize: function(event, ui) {
    431.                     
    432.                     var closestGridline = FrameTrail.module('ViewVideo').closestToOffset($('.gridline'), {
    433.                             left: (endHandleGrabbed ? (ui.position.left + ui.helper.width()) : ui.position.left),
    434.                             top: ui.position.top
    435.                         }),
    436.                         snapTolerance = $(this).draggable('option', 'snapTolerance');
    437.  
    438.                     if (closestGridline) {
    439.                         
    440.                         $('.gridline').css('background-color', '#ff9900');
    441.  
    442.                         if ( !endHandleGrabbed && 
    443.                              ui.position.left - snapTolerance < closestGridline.position().left &&
    444.                              ui.position.left + snapTolerance > closestGridline.position().left ) {
    445.  
    446.                             ui.position.left = closestGridline.position().left;
    447.                             ui.size.width = ( ui.helper.width() + ( ui.helper.position().left - ui.position.left ) );
    448.  
    449.                             closestGridline.css('background-color', '#00ff00');
    450.  
    451.                         } else if ( endHandleGrabbed &&
    452.                                     ui.position.left + ui.helper.width() - snapTolerance < closestGridline.position().left &&
    453.                                     ui.position.left + ui.helper.width() + snapTolerance > closestGridline.position().left ) {
    454.                         
    455.                             ui.helper.width(closestGridline.position().left - ui.position.left);
    456.  
    457.                             closestGridline.css('background-color', '#00ff00');
    458.  
    459.                         }
    460.                     }
    461.  
    462.  
    463.                     var videoDuration = FrameTrail.module('HypervideoModel').duration,
    464.                         leftPercent   = 100 * (ui.position.left / ui.helper.parent().width()),
    465.                         widthPercent  = 100 * (ui.helper.width() / ui.helper.parent().width()),
    466.                         newValue;
    467.  
    468.                     if ( endHandleGrabbed ) {
    469.  
    470.                         newValue = (leftPercent + widthPercent) * (videoDuration / 100);
    471.                         FrameTrail.module('HypervideoController').currentTime = newValue;
    472.  
    473.                     } else {
    474.  
    475.                         newValue = leftPercent * (videoDuration / 100);
    476.                         FrameTrail.module('HypervideoController').currentTime = newValue;
    477.  
    478.                     }
    479.                     
    480.                 },
    481.  
    482.                 start: function(event, ui) {
    483.  
    484.                     if (!self.permanentFocusState) {
    485.                         FrameTrail.module('VideolinksController').videolinkInFocus = self;
    486.                     }
    487.  
    488.                     endHandleGrabbed = $(event.originalEvent.target).hasClass('ui-resizable-e')
    489.                     
    490.                 },
    491.  
    492.                 stop: function(event, ui) {
    493.                     
    494.                     if (!self.permanentFocusState) {
    495.                         FrameTrail.module('VideolinksController').videolinkInFocus = null;
    496.                     }
    497.  
    498.  
    499.                     var videoDuration = FrameTrail.module('HypervideoModel').duration,
    500.                         leftPercent  = 100 * (ui.helper.position().left / ui.helper.parent().width()),
    501.                         widthPercent = 100 * (ui.helper.width() / ui.helper.parent().width());
    502.  
    503.                     
    504.                     self.data.start = leftPercent * (videoDuration / 100);
    505.                     self.data.end   = (leftPercent + widthPercent) * (videoDuration / 100);
    506.  
    507.                     FrameTrail.module('VideolinksController').stackTimelineView();
    508.  
    509.                     FrameTrail.module('HypervideoModel').newUnsavedChange('links');
    510.                     
    511.                 }
    512.             });
    513.  
    514.         },
    515.  
    516.  
    517.         /**
    518.          * When I "got into focus" (which happens, when I become the referenced object in the VideolinksController's
    519.          * {{#crossLink "VideolinksController/videolinkInFocus:attribute"}}videolinkInFocus attribute{{/crossLink}}),
    520.          * then this method will be called.
    521.          * 
    522.          * @method gotInFocus
    523.          */
    524.         gotInFocus: function () {
    525.  
    526.             var EditPropertiesContainer = FrameTrail.module('ViewVideo').EditPropertiesContainer,
    527.                 self = this;
    528.  
    529.             EditPropertiesContainer.empty();
    530.             
    531.             var propertiesControls = $('<div>'
    532.                                      + '    <div class="propertiesTypeIcon" data-type="videolink"></div>'
    533.                                      + '    <div>Title:</div>'
    534.                                      + '    <div>' + this.data.name + '</div><br>'
    535.                                      + '    <div>Link:</div>'
    536.                                      + '    <div><input id="VideolinkHref" type="text" value="'+ this.data.href +'"></div><br>'
    537.                                      + '    <button id="DeleteVideolink">Delete</button>'
    538.                                      + '</div>');
    539.  
    540.                 propertiesControls.find('#VideolinkHref').change(function() {
    541.  
    542.                     self.data.href = $(this).val();
    543.                     
    544.                     FrameTrail.module('HypervideoModel').newUnsavedChange('links');
    545.  
    546.                 });
    547.  
    548.                 propertiesControls.find('#DeleteVideolink').click(function() {
    549.  
    550.                     FrameTrail.module('VideolinksController').deleteVideolink(self);
    551.  
    552.                 });
    553.  
    554.             EditPropertiesContainer.addClass('active').append(propertiesControls);
    555.  
    556.             this.timelineElement.addClass('highlighted');
    557.  
    558.  
    559.         },
    560.  
    561.  
    562.         /**
    563.          * See also: {{#crossLink "Videolink/gotIntoFocus:method"}}this.gotIntoFocus(){{/crossLink}}
    564.          *
    565.          * When I was "removed from focus" (which happens, when the VideolinksController's
    566.          * {{#crossLink "VideolinksController/videolinkInFocus:attribute"}}videolinkInFocus attribute{{/crossLink}}),
    567.          * is set either to null or to an other Videolink than myself),
    568.          * then this method will be called.
    569.          *
    570.          * @method removedFromFocus
    571.          */
    572.         removedFromFocus: function () {
    573.  
    574.             FrameTrail.module('ViewVideo').EditPropertiesContainer.removeClass('active').empty();
    575.  
    576.             this.timelineElement.removeClass('highlighted');
    577.  
    578.  
    579.         }
    580.  
    581.  
    582.  
    583.     }
    584.  
    585. );
    586.  
    587.