349 lines
9.2 KiB
Plaintext
349 lines
9.2 KiB
Plaintext
|
<!-- ******************************************************** -->
|
||
|
|
<!-- -->
|
||
|
|
<!-- Copyright (c) 1999-2000 Microsoft Corporation -->
|
||
|
|
<!-- -->
|
||
|
|
<!-- scroll.htc -->
|
||
|
|
<!-- -->
|
||
|
|
<!-- Build Type : Free -->
|
||
|
|
<!-- Build Number : 0707 -->
|
||
|
|
<!-- Build Date : 07/07/2000 -->
|
||
|
|
<!-- ******************************************************* -->
|
||
|
|
<HTC>
|
||
|
|
<PUBLIC:COMPONENT tagName="scrollBarBehaviour">
|
||
|
|
|
||
|
|
<PUBLIC:PROPERTY NAME="value" />
|
||
|
|
<PUBLIC:PROPERTY NAME="smallChange" />
|
||
|
|
<PUBLIC:PROPERTY NAME="LargeChange" />
|
||
|
|
<PUBLIC:PROPERTY NAME="Max" />
|
||
|
|
<PUBLIC:PROPERTY NAME="Min" />
|
||
|
|
<PUBLIC:PROPERTY NAME="Orientation" />
|
||
|
|
<PUBLIC:PROPERTY NAME="Enabled" />
|
||
|
|
|
||
|
|
<PUBLIC:METHOD NAME="handleMouseDown" />
|
||
|
|
<PUBLIC:METHOD NAME="scrollLoop" />
|
||
|
|
<PUBLIC:METHOD NAME="calcParams" />
|
||
|
|
<PUBLIC:METHOD NAME="removeFocus" />
|
||
|
|
|
||
|
|
<PUBLIC:EVENT NAME="onchange" ID=changeID />
|
||
|
|
|
||
|
|
<PUBLIC:ATTACH EVENT="onreadystatechange" ONEVENT="scrollBarLoad()"/>
|
||
|
|
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="handleMouseDown()"/>
|
||
|
|
<PUBLIC:ATTACH EVENT="onmousemove" FOR='document' ONEVENT="drag()"/>
|
||
|
|
<PUBLIC:ATTACH EVENT="onmouseup" FOR='document' ONEVENT="handleMouseUp()"/>
|
||
|
|
<PUBLIC:ATTACH EVENT="onresize" ONEVENT="resize()"/>
|
||
|
|
<PUBLIC:ATTACH EVENT="onpropertychange" ONEVENT="propertyChangeHandler()"/>
|
||
|
|
<PUBLIC:ATTACH EVENT="onkeydown" ONEVENT="keyPressHandler()"/>
|
||
|
|
|
||
|
|
<SCRIPT LANGUAGE="jscript">
|
||
|
|
|
||
|
|
var dragThumb=false;
|
||
|
|
var myheight;
|
||
|
|
var divMax = 0;
|
||
|
|
var divMin = 0;
|
||
|
|
var started;
|
||
|
|
var smallChange = 1;
|
||
|
|
var LargeChange = new Number(1);
|
||
|
|
var jump;
|
||
|
|
var value = new Number(0);
|
||
|
|
var Max = 1;
|
||
|
|
var Min = 0;
|
||
|
|
var oldHeight=1;
|
||
|
|
var fLoaded = false;
|
||
|
|
var thumbToValue = 0;
|
||
|
|
var thumbTop = 0;
|
||
|
|
var scrollOn = false;
|
||
|
|
var elementTop = 0;
|
||
|
|
var direction;
|
||
|
|
var change;
|
||
|
|
var scrollAreaAvailable = 0;
|
||
|
|
var largeJump = 0;
|
||
|
|
var smallJump = 0;
|
||
|
|
var oldValue = 0;
|
||
|
|
var i = 0;
|
||
|
|
var value = 0;
|
||
|
|
var Enabled = false;
|
||
|
|
|
||
|
|
function scrollBarLoad()
|
||
|
|
{
|
||
|
|
if(element.readyState != 'complete')
|
||
|
|
return;
|
||
|
|
|
||
|
|
str = '<DIV id="scrollArea" onmousedown="this.parentElement.removeFocus()" onmouseup="this.parentElement.removeFocus()" style="position:relative;background-color:silver;height:100%;width:100%">' +
|
||
|
|
'<BUTTON style="margin:0;padding:0;position:absolute;top:0%;height:17" id="upper" onmousedown="this.parentElement.parentElement.removeFocus()" onmouseup="this.parentElement.parentElement.removeFocus()" onmousemove="this.parentElement.parentElement.removeFocus()"><IMG id="uppergif" src="images/up.gif" onmousedown="this.parentElement.parentElement.parentElement.removeFocus()" onmousemove="this.parentElement.parentElement.parentElement.removeFocus()" onmouseup="this.parentElement.parentElement.parentElement.removeFocus()"></IMG></BUTTON>' +
|
||
|
|
'<BUTTON style="position:relative;top:18;width:100%" onmousedown="this.parentElement.parentElement.removeFocus()" onmousemove="this.parentElement.parentElement.removeFocus()" id="thumb"></BUTTON>' +
|
||
|
|
'</DIV>' +
|
||
|
|
'<BUTTON style="position:absolute;left:0;top:18;height:17" onmousedown="this.parentElement.removeFocus()" onmouseup="this.parentElement.removeFocus()" onmousemove="this.parentElement.removeFocus()" id="lower"><IMG id="lowergif" src="images/dwn.gif" onmousemove="this.parentElement.parentElement.removeFocus()" onmouseup="this.parentElement.parentElement.removeFocus()" onmousedown="this.parentElement.parentElement.removeFocus()" ></IMG></BUTTON>'
|
||
|
|
|
||
|
|
element.innerHTML = str;
|
||
|
|
lower.style.setExpression ("top", "scrollArea.style.pixelHeight-upper.style.pixelHeight") ;
|
||
|
|
calcParams();
|
||
|
|
thumbTop = thumb.offsetTop;
|
||
|
|
value = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
function keyPressHandler()
|
||
|
|
{
|
||
|
|
if(Enabled == true)
|
||
|
|
enterForDrillDown();
|
||
|
|
}
|
||
|
|
function propertyChangeHandler()
|
||
|
|
{
|
||
|
|
if(window.event.propertyName == 'value')
|
||
|
|
{
|
||
|
|
if(oldValue != value)
|
||
|
|
{
|
||
|
|
temp = (value/Max)*scrollAreaAvailable + upper.style.pixelHeight;
|
||
|
|
if(!isNaN(temp))
|
||
|
|
{
|
||
|
|
thumb.style.posTop = Math.min(temp,divMax);
|
||
|
|
thumbTop = thumb.offsetTop;
|
||
|
|
fireChangeEvent();
|
||
|
|
oldValue == value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if( ( window.event.propertyName == 'LargeChange') || (window.event.propertyName == 'Max') )
|
||
|
|
{
|
||
|
|
calcParams();
|
||
|
|
}
|
||
|
|
else if ( window.event.propertyName == 'Enabled')
|
||
|
|
{
|
||
|
|
if(Enabled == true)
|
||
|
|
{
|
||
|
|
lowergif.src = "images/dwn.gif";
|
||
|
|
uppergif.src = "images/up.gif";
|
||
|
|
lower.disabled = false;
|
||
|
|
upper.disabled = false;
|
||
|
|
thumb.style.display = '';
|
||
|
|
if(value == 0)
|
||
|
|
{
|
||
|
|
thumb.style.posTop = upper.style.pixelHeight;
|
||
|
|
thumbTop = thumb.offsetTop;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
lowergif.src = "images/dwngray.gif";
|
||
|
|
uppergif.src = "images/upgray.gif";
|
||
|
|
lower.disabled = true;
|
||
|
|
upper.disabled = true;
|
||
|
|
thumb.style.display = 'none';
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
function resize()
|
||
|
|
{
|
||
|
|
if(element.readyState != 'complete')
|
||
|
|
return;
|
||
|
|
document.recalc(true);
|
||
|
|
calcParams()
|
||
|
|
if(oldHeight != 1)
|
||
|
|
{
|
||
|
|
if ( thumb.offsetTop != upper.style.pixelHeight)
|
||
|
|
{
|
||
|
|
temp = thumb.offsetTop * (scrollAreaAvailable/oldHeight)+upper.style.pixelHeight;
|
||
|
|
if (temp > divMax)
|
||
|
|
temp = divMax;
|
||
|
|
|
||
|
|
if (temp < divMin)
|
||
|
|
temp = divMin;
|
||
|
|
|
||
|
|
thumb.style.posTop = temp;
|
||
|
|
|
||
|
|
thumbTop = thumb.offsetTop;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
oldHeight = scrollAreaAvailable;
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleMouseDown()
|
||
|
|
{
|
||
|
|
if(divMax <= 0)
|
||
|
|
calcParams();
|
||
|
|
|
||
|
|
if(dragThumb == false)
|
||
|
|
{
|
||
|
|
if ( (window.event.srcElement.id == 'thumb') && (window.event.type == "mousedown") )
|
||
|
|
{
|
||
|
|
dragThumb = true;
|
||
|
|
elementTop = element.offsetTop
|
||
|
|
started = thumb.offsetTop;
|
||
|
|
oldValue = value;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
if(Enabled == true)
|
||
|
|
{
|
||
|
|
scrollOn = true;
|
||
|
|
handleMouseOver();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
dragThumb = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleMouseOver()
|
||
|
|
{
|
||
|
|
if(scrollOn == false)
|
||
|
|
return;
|
||
|
|
|
||
|
|
if(divMax <= 0)
|
||
|
|
calcParams();
|
||
|
|
if(window.event.srcElement.id == 'upper')
|
||
|
|
{
|
||
|
|
scrollLoop('up',smallJump,smallChange);
|
||
|
|
}
|
||
|
|
else if (window.event.srcElement.id == 'lower')
|
||
|
|
{
|
||
|
|
scrollLoop('down',smallJump,smallChange);
|
||
|
|
}
|
||
|
|
else if(window.event.srcElement.id == 'scrollArea')
|
||
|
|
{
|
||
|
|
scrollArea.style.backgroundColor= "black";
|
||
|
|
if(window.event.offsetY < thumb.offsetTop)
|
||
|
|
{
|
||
|
|
scrollLoop('up',largeJump,LargeChange);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
if(window.event.offsetY > (thumb.offsetTop + thumb.style.pixelHeight))
|
||
|
|
{
|
||
|
|
scrollLoop('down',largeJump,LargeChange);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
scrollArea.style.backgroundColor= "silver";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function scrollLoop(direction,jump,change)
|
||
|
|
{
|
||
|
|
oldValue = value;
|
||
|
|
//alert(jump + ":" + change + ":" + thumbTop);
|
||
|
|
if(direction == 'up')
|
||
|
|
{
|
||
|
|
thumbTop = Math.max(thumbTop - jump,divMin);
|
||
|
|
value = Math.max(value - change,Min);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
thumbTop = Math.min(thumbTop + jump,divMax);
|
||
|
|
value = Math.min(value + change,Max - LargeChange);
|
||
|
|
}
|
||
|
|
thumb.style.posTop=Math.floor(thumbTop);
|
||
|
|
if(value < 0 )
|
||
|
|
value = 0;
|
||
|
|
if(oldValue != value)
|
||
|
|
{
|
||
|
|
fireChangeEvent();
|
||
|
|
oldValue = value;
|
||
|
|
}
|
||
|
|
// window.status = thumbTop;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function drag()
|
||
|
|
{
|
||
|
|
|
||
|
|
var newPos = window.event.clientY - elementTop - myheight;
|
||
|
|
|
||
|
|
if(dragThumb==true)
|
||
|
|
{
|
||
|
|
if(newPos < divMin)
|
||
|
|
{
|
||
|
|
if(newPos < (divMin - 40))
|
||
|
|
{
|
||
|
|
thumb.style.posTop = started;
|
||
|
|
thumbTop = started;
|
||
|
|
dragThumb = false;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
thumb.style.posTop = Math.max(newPos,divMin);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
|
||
|
|
if(newPos > (divMax + 40))
|
||
|
|
{
|
||
|
|
thumb.style.posTop = started;
|
||
|
|
thumbTop = started;
|
||
|
|
dragThumb = false;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
thumb.style.posTop= Math.min(newPos,divMax);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
thumbTop = thumb.offsetTop;
|
||
|
|
if( (thumbTop + thumb.style.pixelHeight) == (scrollAreaAvailable + upper.style.pixelHeight) )
|
||
|
|
value = Math.max(Max - LargeChange,0);
|
||
|
|
else
|
||
|
|
value = Math.round((thumbTop - upper.style.pixelHeight )* thumbToValue);
|
||
|
|
if (value < 0)
|
||
|
|
value = 0;
|
||
|
|
}
|
||
|
|
thumb.title = value+1;
|
||
|
|
//window.status = "Value:"+value + "ThumbTop:" + thumb.offsetTop + "ScrollArea:" + scrollAreaAvailable;
|
||
|
|
// + "ThumbToValue:" + thumbToValue + "ScreenArea:" + scrollArea.style.pixelHeight;
|
||
|
|
//" OffsetY: " +window.event.offsetY+" clientY: " + window.event.clientY + " newPos : " + newPos;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function fireChangeEvent()
|
||
|
|
{
|
||
|
|
changeEvent = createEventObject();
|
||
|
|
changeID.fire(changeEvent);
|
||
|
|
}
|
||
|
|
function handleMouseUp()
|
||
|
|
{
|
||
|
|
//thumbTop = thumb.offsetTop;
|
||
|
|
if(dragThumb == true)
|
||
|
|
{
|
||
|
|
dragThumb = false;
|
||
|
|
if(oldValue != value)
|
||
|
|
{
|
||
|
|
fireChangeEvent();
|
||
|
|
oldValue = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
scrollOn = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function calcParams()
|
||
|
|
{
|
||
|
|
scrollAreaAvailable = scrollArea.style.pixelHeight-upper.style.pixelHeight-lower.style.pixelHeight;
|
||
|
|
|
||
|
|
if(Max<LargeChange) Max = LargeChange;
|
||
|
|
|
||
|
|
largeJump = (LargeChange/Max)*(scrollAreaAvailable);
|
||
|
|
smallJump = (smallChange/Max)*(scrollAreaAvailable);
|
||
|
|
|
||
|
|
thumb.style.pixelHeight = Math.max(largeJump,6);
|
||
|
|
|
||
|
|
myheight = thumb.style.pixelHeight/2;
|
||
|
|
|
||
|
|
divMax = lower.offsetTop - thumb.style.pixelHeight;
|
||
|
|
divMin = upper.offsetTop + upper.style.pixelHeight;
|
||
|
|
|
||
|
|
thumbToValue = Max/(scrollAreaAvailable);
|
||
|
|
thumbTop = thumb.offsetTop;
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeFocus() {
|
||
|
|
|
||
|
|
if((scrollOn == true)||(dragThumb == true))
|
||
|
|
scrollArea.focus();
|
||
|
|
}
|
||
|
|
|
||
|
|
</SCRIPT>
|
||
|
|
|
||
|
|
</PUBLIC:COMPONENT>
|
||
|
|
|
||
|
|
</HTC>
|