1 /**

     2  * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).

     3  * All rights reserved.

     4  * This component and the accompanying materials are made available

     5  * under the terms of the License "Eclipse Public License v1.0"

     6  * which accompanies this distribution, and is available

     7  * at the URL "http://www.eclipse.org/legal/epl-v10.html".

     8  *

     9  * Initial Contributors:

    10  * Nokia Corporation - initial contribution.

    11  * 

    12  * Contributors:

    13  * 

    14  * Description:

    15  * 

    16  */

    17 

    18 ///////////////////////////////////////////////////////////////////////////////

    19 // The Scrollbar class is an implementation of a user interface element that

    20 // indicates the current viewport position in a document.

    21 

    22 // Constructor.

    23 function Scrollbar(parentElement) {

    24     uiLogger.debug("Scrollbar(" + parentElement + ")");

    25     

    26     // get the parent element

    27     this.parentElement = parentElement;

    28     

    29     // create the root element

    30     this.rootElement = document.createElement("div");

    31     this.rootElement.className = "Scrollbar";

    32     this.rootElement.style.visibility = "hidden";

    33     

    34     // create the scrollbar

    35     // the scrollbar consists of a root element with six children

    36     // (three track elements and three thumb elements)

    37     

    38     // track

    39     this.trackTopElement = document.createElement("div");

    40     this.trackTopElement.className = "ScrollbarTrackTop";

    41     this.trackMiddleElement = document.createElement("div");

    42     this.trackMiddleElement.className = "ScrollbarTrackMiddle";

    43     this.trackBottomElement = document.createElement("div");

    44     this.trackBottomElement.className = "ScrollbarTrackBottom";

    45     

    46     // thumb

    47     this.thumbTopElement = document.createElement("div");

    48     this.thumbTopElement.className = "ScrollbarThumbTop";

    49     this.thumbMiddleElement = document.createElement("div");

    50     this.thumbMiddleElement.className = "ScrollbarThumbMiddle";

    51     this.thumbBottomElement = document.createElement("div");

    52     this.thumbBottomElement.className = "ScrollbarThumbBottom";

    53     

    54     // assemble and attach the scrollbar

    55     this.rootElement.appendChild(this.trackTopElement);

    56     this.rootElement.appendChild(this.trackMiddleElement);

    57     this.rootElement.appendChild(this.trackBottomElement);

    58     this.rootElement.appendChild(this.thumbTopElement);

    59     this.rootElement.appendChild(this.thumbMiddleElement);

    60     this.rootElement.appendChild(this.thumbBottomElement);

    61     this.parentElement.appendChild(this.rootElement);

    62     

    63     // bring the scrollbar up to date

    64     this.update(0, 100, 100);

    65 }

    66 

    67 // Parent element for the scrollbar.

    68 Scrollbar.prototype.parentElement = null;

    69 

    70 // Root HTML element in the scrollbar.

    71 Scrollbar.prototype.rootElement = null;

    72 

    73 // Scrollbar track top element.

    74 Scrollbar.prototype.trackTopElement = null;

    75 

    76 // Scrollbar track middle element.

    77 Scrollbar.prototype.trackMiddleElement = null;

    78 

    79 // Scrollbar track bottom element.

    80 Scrollbar.prototype.trackBottomElement = null;

    81 

    82 // Scrollbar thumb top element.

    83 Scrollbar.prototype.thumbTopElement = null;

    84 

    85 // Scrollbar thumb middle element.

    86 Scrollbar.prototype.thumbMiddleElement = null;

    87 

    88 // Scrollbar thumb bottom element.

    89 Scrollbar.prototype.thumbBottomElement = null;

    90 

    91 // Is the scrollbar needed?

    92 Scrollbar.prototype.scrollbarNeeded = false;

    93 

    94 // Updates the scrollbar.

    95 Scrollbar.prototype.update = function(scrollY, viewportHeight, documentHeight) {

    96     // figure out current heights

    97     var scrollbarHeight = this.rootElement.clientHeight;

    98     var trackTopHeight = this.trackTopElement.clientHeight;

    99     var trackBottomHeight = this.trackBottomElement.clientHeight;

   100     var thumbTopHeight = this.thumbTopElement.clientHeight;

   101     var thumbBottomHeight = this.thumbBottomElement.clientHeight;

   102     

   103     // scrollable height is the larger of document and viewport heights

   104     var scrollableHeight = documentHeight;

   105     var scrollbarNeeded = true;

   106     if (viewportHeight >= documentHeight) {

   107         scrollableHeight = viewportHeight;

   108         scrollbarNeeded = false;

   109     }

   110     

   111     // show or hide scrollbar?

   112     if (scrollbarNeeded != this.scrollbarNeeded) {

   113         this.scrollbarNeeded = scrollbarNeeded;

   114         this.rootElement.style.visibility = scrollbarNeeded ? "visible" : "hidden";

   115     }

   116     

   117     // calculate thumb top position...

   118     var thumbTopPct = scrollY / scrollableHeight;

   119     var thumbTop = scrollbarHeight * thumbTopPct;

   120     // ...and bottom position...

   121     var thumbBottomPct = (scrollY + viewportHeight) / scrollableHeight;

   122     var thumbBottom = scrollbarHeight * thumbBottomPct;

   123     

   124     // ...and thumb height

   125     var thumbHeight = thumbBottom - thumbTop;

   126     

   127     // ensure that the thumb is not too small

   128     var thumbMinHeight = thumbTopHeight + thumbBottomHeight;

   129     if (thumbHeight < thumbMinHeight) {

   130         var underflow = thumbMinHeight - thumbHeight;

   131         // adjust thumb top pos assuming a shorter scrollbar track

   132         var thumbMid = (scrollbarHeight - underflow) * ((thumbTopPct + thumbBottomPct) / 2) + (underflow / 2);

   133         thumbTop = thumbMid - (thumbMinHeight / 2);

   134         thumbBottom = thumbTop + thumbMinHeight;

   135         thumbHeight = thumbBottom - thumbTop;

   136     }

   137     

   138     // position and size track element (add 1 to the middle section height for rounding errors)

   139     this.trackTopElement.style.top = "0px";

   140     this.trackMiddleElement.style.top = Math.round(trackTopHeight) + "px";

   141     this.trackMiddleElement.style.height = Math.round(scrollbarHeight - trackTopHeight - trackBottomHeight + 1) + "px";

   142     this.trackBottomElement.style.top = Math.round(scrollbarHeight - trackTopHeight) + "px";

   143     

   144     // position and size thumb element (add 1 to the middle section height for rounding errors)

   145     this.thumbTopElement.style.top = Math.round(thumbTop) + "px";

   146     this.thumbMiddleElement.style.top = Math.round(thumbTop + thumbTopHeight) + "px";

   147     this.thumbMiddleElement.style.height = Math.round(thumbHeight - thumbTopHeight - thumbBottomHeight + 1) + "px";

   148     this.thumbBottomElement.style.top = Math.round(thumbBottom - thumbBottomHeight) + "px";

   149 };