diff -r c521df56b15d -r c01f5ab28a11 org.symbian.tools.wrttools/projecttemplates/WRTKit/UI/Scrollbar.js --- a/org.symbian.tools.wrttools/projecttemplates/WRTKit/UI/Scrollbar.js Thu Apr 15 16:00:54 2010 -0700 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,149 +0,0 @@ -/** - * 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"; -};