/**
* Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).
* All rights reserved.
* This component and the accompanying materials are made available
* under the terms of the License "Eclipse Public License v1.0"
* which accompanies this distribution, and is available
* at the URL "http://www.eclipse.org/legal/epl-v10.html".
*
* Initial Contributors:
* Nokia Corporation - initial contribution.
*
* Contributors:
*
* Description:
*
*/
///////////////////////////////////////////////////////////////////////////////
// The Scrollbar class is an implementation of a user interface element that
// indicates the current viewport position in a document.
// Constructor.
function Scrollbar(parentElement) {
uiLogger.debug("Scrollbar(" + parentElement + ")");
// get the parent element
this.parentElement = parentElement;
// create the root element
this.rootElement = document.createElement("div");
this.rootElement.className = "Scrollbar";
this.rootElement.style.visibility = "hidden";
// create the scrollbar
// the scrollbar consists of a root element with six children
// (three track elements and three thumb elements)
// track
this.trackTopElement = document.createElement("div");
this.trackTopElement.className = "ScrollbarTrackTop";
this.trackMiddleElement = document.createElement("div");
this.trackMiddleElement.className = "ScrollbarTrackMiddle";
this.trackBottomElement = document.createElement("div");
this.trackBottomElement.className = "ScrollbarTrackBottom";
// thumb
this.thumbTopElement = document.createElement("div");
this.thumbTopElement.className = "ScrollbarThumbTop";
this.thumbMiddleElement = document.createElement("div");
this.thumbMiddleElement.className = "ScrollbarThumbMiddle";
this.thumbBottomElement = document.createElement("div");
this.thumbBottomElement.className = "ScrollbarThumbBottom";
// assemble and attach the scrollbar
this.rootElement.appendChild(this.trackTopElement);
this.rootElement.appendChild(this.trackMiddleElement);
this.rootElement.appendChild(this.trackBottomElement);
this.rootElement.appendChild(this.thumbTopElement);
this.rootElement.appendChild(this.thumbMiddleElement);
this.rootElement.appendChild(this.thumbBottomElement);
this.parentElement.appendChild(this.rootElement);
// bring the scrollbar up to date
this.update(0, 100, 100);
}
// Parent element for the scrollbar.
Scrollbar.prototype.parentElement = null;
// Root HTML element in the scrollbar.
Scrollbar.prototype.rootElement = null;
// Scrollbar track top element.
Scrollbar.prototype.trackTopElement = null;
// Scrollbar track middle element.
Scrollbar.prototype.trackMiddleElement = null;
// Scrollbar track bottom element.
Scrollbar.prototype.trackBottomElement = null;
// Scrollbar thumb top element.
Scrollbar.prototype.thumbTopElement = null;
// Scrollbar thumb middle element.
Scrollbar.prototype.thumbMiddleElement = null;
// Scrollbar thumb bottom element.
Scrollbar.prototype.thumbBottomElement = null;
// Is the scrollbar needed?
Scrollbar.prototype.scrollbarNeeded = false;
// Updates the scrollbar.
Scrollbar.prototype.update = function(scrollY, viewportHeight, documentHeight) {
// figure out current heights
var scrollbarHeight = this.rootElement.clientHeight;
var trackTopHeight = this.trackTopElement.clientHeight;
var trackBottomHeight = this.trackBottomElement.clientHeight;
var thumbTopHeight = this.thumbTopElement.clientHeight;
var thumbBottomHeight = this.thumbBottomElement.clientHeight;
// scrollable height is the larger of document and viewport heights
var scrollableHeight = documentHeight;
var scrollbarNeeded = true;
if (viewportHeight >= documentHeight) {
scrollableHeight = viewportHeight;
scrollbarNeeded = false;
}
// show or hide scrollbar?
if (scrollbarNeeded != this.scrollbarNeeded) {
this.scrollbarNeeded = scrollbarNeeded;
this.rootElement.style.visibility = scrollbarNeeded ? "visible" : "hidden";
}
// calculate thumb top position...
var thumbTopPct = scrollY / scrollableHeight;
var thumbTop = scrollbarHeight * thumbTopPct;
// ...and bottom position...
var thumbBottomPct = (scrollY + viewportHeight) / scrollableHeight;
var thumbBottom = scrollbarHeight * thumbBottomPct;
// ...and thumb height
var thumbHeight = thumbBottom - thumbTop;
// ensure that the thumb is not too small
var thumbMinHeight = thumbTopHeight + thumbBottomHeight;
if (thumbHeight < thumbMinHeight) {
var underflow = thumbMinHeight - thumbHeight;
// adjust thumb top pos assuming a shorter scrollbar track
var thumbMid = (scrollbarHeight - underflow) * ((thumbTopPct + thumbBottomPct) / 2) + (underflow / 2);
thumbTop = thumbMid - (thumbMinHeight / 2);
thumbBottom = thumbTop + thumbMinHeight;
thumbHeight = thumbBottom - thumbTop;
}
// position and size track element (add 1 to the middle section height for rounding errors)
this.trackTopElement.style.top = "0px";
this.trackMiddleElement.style.top = Math.round(trackTopHeight) + "px";
this.trackMiddleElement.style.height = Math.round(scrollbarHeight - trackTopHeight - trackBottomHeight + 1) + "px";
this.trackBottomElement.style.top = Math.round(scrollbarHeight - trackTopHeight) + "px";
// position and size thumb element (add 1 to the middle section height for rounding errors)
this.thumbTopElement.style.top = Math.round(thumbTop) + "px";
this.thumbMiddleElement.style.top = Math.round(thumbTop + thumbTopHeight) + "px";
this.thumbMiddleElement.style.height = Math.round(thumbHeight - thumbTopHeight - thumbBottomHeight + 1) + "px";
this.thumbBottomElement.style.top = Math.round(thumbBottom - thumbBottomHeight) + "px";
};