scripts/position.js
changeset 10 d3059e20b0fa
child 11 0faea3a6c881
equal deleted inserted replaced
9:63a257541313 10:d3059e20b0fa
       
     1 var pos_supported = false;
       
     2 var pos_in_drag = false;
       
     3 
       
     4 var posslide_init = function()
       
     5 {
       
     6   // make sure the theme supports the playhead
       
     7   var base = document.getElementById('playhead');
       
     8   var inner = document.getElementById('playhead-filler');
       
     9   var slider = document.getElementById('playhead-button');
       
    10   if ( !slider || !inner || !base )
       
    11     return false;
       
    12   
       
    13   pos_supported = true;
       
    14   
       
    15   var minX = $(base).Left() - 3;
       
    16   var minY = $(base).Top() + 3;
       
    17   var maxY = minY;
       
    18   var maxX = minX + $(base).Width() - 6;
       
    19   Drag.init(slider, inner, minX, maxX, minY, maxY);
       
    20   
       
    21   inner.onDrag = posslide_handle_drag;
       
    22   inner.onDragEnd = posslide_handle_dragend;
       
    23   inner.onDragStart = function(x, y) { pos_in_drag = true; };
       
    24   base.onclick = posslide_handle_click;
       
    25   
       
    26   posslide_set_position(0);
       
    27   slider.style.top = minY + 'px';
       
    28 }
       
    29 
       
    30 var posslide_handle_drag = function(x, y, do_inner)
       
    31 {
       
    32   var inner = document.getElementById('playhead-filler');
       
    33   var slider = document.getElementById('playhead-button');
       
    34   var size = x - $(inner).Left() + 8;
       
    35   if ( do_inner )
       
    36     inner.style.width = size + 'px';
       
    37   if ( ( pos_in_drag && !do_inner ) || ( !pos_in_drag && do_inner ) )
       
    38     slider.style.left = x + 'px';
       
    39 }
       
    40 
       
    41 var posslide_handle_dragend = function(x, y)
       
    42 {
       
    43   pos_in_drag = false;
       
    44   var inner = document.getElementById('playhead-filler');
       
    45   var base = document.getElementById('playhead');
       
    46   var multiplier = $(base).Width();
       
    47   var pos = x - $(inner).Left() + 8;
       
    48   pos = 100 * ( pos / multiplier );
       
    49   set_playback_position(pos);
       
    50 }
       
    51 
       
    52 var posslide_handle_click = function(e)
       
    53 {
       
    54   e = Drag.fixE(e);
       
    55   var base = document.getElementById('playhead');
       
    56   var val = e.clientX - $(base).Left();
       
    57   val = 100 * ( val / $(base).Width() );
       
    58   posslide_set_position(val);
       
    59   set_playback_position(val);
       
    60 }
       
    61 
       
    62 function posslide_set_position(pos)
       
    63 {
       
    64   if ( !pos_supported )
       
    65     return false;
       
    66   
       
    67   // pos needs to be 1-100
       
    68   var base = document.getElementById('playhead');
       
    69   var multiplier = $(base).Width();
       
    70   pos = ( pos / 100 ) * multiplier;
       
    71   var left = pos + $(base).Left();
       
    72   posslide_handle_drag(left, 0, true);
       
    73 }
       
    74 
       
    75 addOnloadHook(posslide_init);
       
    76