1 /*

     2 © Copyright 2008 Nokia Corporation. All rights reserved.

     3 

     4 IMPORTANT:  The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia

     5 Corporation (“Nokia”) in consideration of your agreement to the following terms. Your use, installation

     6 and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If

     7 you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example

     8 Widget files.

     9 

    10 In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia

    11 grants you a personal, non-exclusive license, under Nokia’s copyrights in the WRTKit and Example

    12 Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,

    13 CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60

    14 Widgets.

    15 

    16 If you redistribute the WRTKit and Example files, you must retain this entire notice in all such

    17 redistributions of the WRTKit and Example files.

    18 

    19 You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products

    20 that include the WRTKit and Example files without the prior written explicit agreement with Nokia.

    21 Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by

    22 Nokia herein, including but not limited to any patent rights that may be infringed by your products that

    23 incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files

    24 may be incorporated.

    25 

    26 The WRTKit and Example files are provided on an "AS IS" basis.  NOKIA MAKES NO

    27 WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED

    28 WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A

    29 PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION

    30 ALONE OR IN COMBINATION WITH YOUR PRODUCTS.

    31 

    32 IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR

    33 CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

    34 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

    35 INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR

    36 DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY

    37 OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,

    38 EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

    39 

    40 */

    41 

    42 ///////////////////////////////////////////////////////////////////////////////

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

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

    45 

    46 // Constructor.

    47 function Scrollbar(parentElement) {

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

    49     

    50     // get the parent element

    51     this.parentElement = parentElement;

    52     

    53     // create the root element

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

    55     this.rootElement.className = "Scrollbar";

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

    57     

    58     // create the scrollbar

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

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

    61     

    62     // track

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

    64     this.trackTopElement.className = "ScrollbarTrackTop";

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

    66     this.trackMiddleElement.className = "ScrollbarTrackMiddle";

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

    68     this.trackBottomElement.className = "ScrollbarTrackBottom";

    69     

    70     // thumb

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

    72     this.thumbTopElement.className = "ScrollbarThumbTop";

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

    74     this.thumbMiddleElement.className = "ScrollbarThumbMiddle";

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

    76     this.thumbBottomElement.className = "ScrollbarThumbBottom";

    77     

    78     // assemble and attach the scrollbar

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

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

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

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

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

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

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

    86     

    87     // bring the scrollbar up to date

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

    89 }

    90 

    91 // Parent element for the scrollbar.

    92 Scrollbar.prototype.parentElement = null;

    93 

    94 // Root HTML element in the scrollbar.

    95 Scrollbar.prototype.rootElement = null;

    96 

    97 // Scrollbar track top element.

    98 Scrollbar.prototype.trackTopElement = null;

    99 

   100 // Scrollbar track middle element.

   101 Scrollbar.prototype.trackMiddleElement = null;

   102 

   103 // Scrollbar track bottom element.

   104 Scrollbar.prototype.trackBottomElement = null;

   105 

   106 // Scrollbar thumb top element.

   107 Scrollbar.prototype.thumbTopElement = null;

   108 

   109 // Scrollbar thumb middle element.

   110 Scrollbar.prototype.thumbMiddleElement = null;

   111 

   112 // Scrollbar thumb bottom element.

   113 Scrollbar.prototype.thumbBottomElement = null;

   114 

   115 // Is the scrollbar needed?

   116 Scrollbar.prototype.scrollbarNeeded = false;

   117 

   118 // Updates the scrollbar.

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

   120     // figure out current heights

   121     var scrollbarHeight = this.rootElement.clientHeight;

   122     var trackTopHeight = this.trackTopElement.clientHeight;

   123     var trackBottomHeight = this.trackBottomElement.clientHeight;

   124     var thumbTopHeight = this.thumbTopElement.clientHeight;

   125     var thumbBottomHeight = this.thumbBottomElement.clientHeight;

   126     

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

   128     var scrollableHeight = documentHeight;

   129     var scrollbarNeeded = true;

   130     if (viewportHeight >= documentHeight) {

   131         scrollableHeight = viewportHeight;

   132         scrollbarNeeded = false;

   133     }

   134     

   135     // show or hide scrollbar?

   136     if (scrollbarNeeded != this.scrollbarNeeded) {

   137         this.scrollbarNeeded = scrollbarNeeded;

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

   139     }

   140     

   141     // calculate thumb top position...

   142     var thumbTopPct = scrollY / scrollableHeight;

   143     var thumbTop = scrollbarHeight * thumbTopPct;

   144     // ...and bottom position...

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

   146     var thumbBottom = scrollbarHeight * thumbBottomPct;

   147     

   148     // ...and thumb height

   149     var thumbHeight = thumbBottom - thumbTop;

   150     

   151     // ensure that the thumb is not too small

   152     var thumbMinHeight = thumbTopHeight + thumbBottomHeight;

   153     if (thumbHeight < thumbMinHeight) {

   154         var underflow = thumbMinHeight - thumbHeight;

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

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

   157         thumbTop = thumbMid - (thumbMinHeight / 2);

   158         thumbBottom = thumbTop + thumbMinHeight;

   159         thumbHeight = thumbBottom - thumbTop;

   160     }

   161     

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

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

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

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

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

   167     

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

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

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

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

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

   173 }