...it should be cool with scrolling now.
/**
* Volume widget presentation code
*
* Greyhound - real web management for Amarok
* Copyright (C) 2008 Dan Fuhry
*
* This program is Free Software; you can redistribute and/or modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for details.
*/
var current_volume = 0;
function set_volume_fill(amount)
{
amount = 10 * ( Math.round(amount / 10) );
if ( amount == 0 )
amount = -10;
for ( var i = 0; i <= amount; i += 10 )
{
if ( !$('volbtn_' + i).hasClass('volume_button_active') )
{
$('volbtn_' + i).addClass('volume_button_active');
}
}
for ( ; i <= 100; i += 10 )
{
if ( $('volbtn_' + i).hasClass('volume_button_active') )
{
$('volbtn_' + i).rmClass('volume_button_active');
}
}
}
function volume_over(amount)
{
set_volume_fill(amount);
}
function volume_out()
{
set_volume_fill(current_volume);
}
function set_volume(level)
{
setAjaxLoading();
if ( level == current_volume )
return false;
ajaxGet('/action.json/volume/' + level, function()
{
if ( ajax.readyState == 4 && ajax.status == 200 )
{
unsetAjaxLoading();
var response = (' ' + ajax.responseText).substr(1);
// quickie JSON parser :)
response = eval('(' + response + ')');
// update volume
if ( response.volume != current_volume )
{
set_volume_fill(response.volume);
current_volume = response.volume;
}
}
});
}
function volume_custom_form()
{
if ( $('volumebox').object )
{
return false;
}
var box = document.createElement('div');
$(box)
.css('position', 'absolute')
.css('padding', '50px 80px')
.css('background-image', 'url(/trans80.png)')
.css('color', 'black')
.css('text-align', 'center')
.attr('id', 'volumebox')
.insertText('volume:')
.insertBR().insertBR()
.opacity(0);
document.body.appendChild(box);
var field = document.createElement('input');
$(field)
.attr('type', 'text')
.attr('value', '')
.attr('size', '7')
.css('text-align', 'center');
box.appendChild(field);
$(box)
.css('top', (( getHeight() / 2 ) - ( $(box).Height() / 2 ) + getScrollOffset()) + 'px')
.css('left', (( $(document.body).Width() / 2 ) - ( $(box).Width() / 2 )) + 'px');
$(box).fadeIn(250);
field.focus();
field.onkeyup = function(e)
{
if ( e.keyCode == 13 )
{
if ( this.value == '' )
{
$(this.parentNode).fadeOut(250, function(o)
{
o.parentNode.removeChild(o);
});
}
else if ( !this.value.match(/^[0-9]+$/) )
{
$(this.parentNode).insertBR().insertText('please enter a number');
}
else
{
set_volume(parseInt(this.value));
$(this.parentNode).fadeOut(250, function(o)
{
o.parentNode.removeChild(o);
});
}
}
}
}
addOnloadHook(function()
{
window.onkeyup = function(e)
{
if ( e.keyCode == 86 )
{
volume_custom_form();
}
}
});
function getHeight() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight;
}
return myHeight;
}
function getWidth() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientWidth ) ) {
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth || document.body.clientWidth ) ) {
myWidth = document.body.clientWidth;
}
return myWidth;
}
function getScrollOffset(el)
{
var position;
var s = el || self;
el = el || document;
if ( el.scrollTop )
{
position = el.scrollTop;
}
else if (s.pageYOffset)
{
position = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
{
position = document.documentElement.scrollTop;
}
else if (document.body)
{
position = document.body.scrollTop;
}
return position;
}