scripts/position.js
author Dan
Tue, 23 Sep 2008 23:26:18 -0400
changeset 50 1b4288399b1f
parent 42 774751e7faed
child 78 08f8a72b1f7b
permissions -rw-r--r--
Added graphical configuration, at this point only for the grey theme but others will follow soon. (This has been nearly done for two weeks or more but was on hold due to the bugs with multithreading)

var pos_supported = false;
var pos_in_drag = false;

var posslide_init = function()
{
  // make sure the theme supports the playhead
  var base = document.getElementById('playhead');
  var inner = document.getElementById('playhead-filler');
  var slider = document.getElementById('playhead-button');
  if ( !slider || !inner || !base )
    return false;
  
  pos_supported = true;
  
  var minX = $(base).Left() - 3;
  var minY = $(base).Top() + 3;
  var maxY = minY;
  var maxX = minX + $(base).Width() - 6;
  Drag.init(slider, slider, minX, maxX, minY, maxY);
  
  slider.onDrag = posslide_handle_drag;
  slider.onDragEnd = posslide_handle_dragend;
  slider.onDragStart = function(x, y) { pos_in_drag = true; };
  base.onclick = posslide_handle_click;
  
  posslide_set_position(0);
  slider.style.top = minY + 'px';
}

var posslide_handle_drag = function(x, y, do_inner)
{
  var inner = document.getElementById('playhead-filler');
  var slider = document.getElementById('playhead-button');
  var size = x - $(inner).Left() + 8;
  if ( do_inner )
    inner.style.width = size + 'px';
  if ( ( pos_in_drag && !do_inner ) || ( !pos_in_drag && do_inner ) )
    slider.style.left = ( x ) + 'px';
}

var posslide_handle_dragend = function(x, y)
{
  pos_in_drag = false;
  var inner = document.getElementById('playhead-filler');
  var base = document.getElementById('playhead');
  var multiplier = $(base).Width() - 13;
  var pos = x - $(inner).Left() + 8;
  pos = 100 * ( pos / multiplier );
  set_playback_position(pos);
}

var posslide_handle_click = function(e)
{
  e = Drag.fixE(e);
  var base = document.getElementById('playhead');
  var val = e.clientX - $(base).Left();
  val = 100 * ( val / $(base).Width() );
  posslide_set_position(val);
  set_playback_position(val);
}

function posslide_set_position(pos)
{
  if ( !pos_supported )
    return false;
  
  // pos needs to be 1-100
  var base = document.getElementById('playhead');
  var multiplier = $(base).Width() - 13;
  pos = ( pos / 100 ) * multiplier;
  var left = pos + $(base).Left();
  posslide_handle_drag(left, 0, true);
}

addOnloadHook(posslide_init);