git.maemo.org Git - ptas/blob - zouba/misc/rss/WRTKit/UI/Scrollbar.js

   1 /*\r
   2 © Copyright 2008 Nokia Corporation. All rights reserved.\r
   3 \r
   4 IMPORTANT:  The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia\r
   5 Corporation (“Nokia”) in consideration of your agreement to the following terms. Your use, installation\r
   6 and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If\r
   7 you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example\r
   8 Widget files.\r
   9 \r
  10 In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia\r
  11 grants you a personal, non-exclusive license, under Nokia’s copyrights in the WRTKit and Example\r
  12 Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,\r
  13 CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60\r
  14 Widgets.\r
  15 \r
  16 If you redistribute the WRTKit and Example files, you must retain this entire notice in all such\r
  17 redistributions of the WRTKit and Example files.\r
  18 \r
  19 You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products\r
  20 that include the WRTKit and Example files without the prior written explicit agreement with Nokia.\r
  21 Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by\r
  22 Nokia herein, including but not limited to any patent rights that may be infringed by your products that\r
  23 incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files\r
  24 may be incorporated.\r
  25 \r
  26 The WRTKit and Example files are provided on an "AS IS" basis.  NOKIA MAKES NO\r
  27 WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED\r
  28 WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A\r
  29 PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION\r
  30 ALONE OR IN COMBINATION WITH YOUR PRODUCTS.\r
  31 \r
  32 IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR\r
  33 CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF\r
  34 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS\r
  35 INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR\r
  36 DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY\r
  37 OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,\r
  38 EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\r
  39 \r
  40 */\r
  41 \r
  42 ///////////////////////////////////////////////////////////////////////////////\r
  43 // The Scrollbar class is an implementation of a user interface element that\r
  44 // indicates the current viewport position in a document.\r
  45 \r
  46 // Constructor.\r
  47 function Scrollbar(parentElement) {\r
  48     uiLogger.debug("Scrollbar(" + parentElement + ")");\r
  49     \r
  50     // get the parent element\r
  51     this.parentElement = parentElement;\r
  52     \r
  53     // create the root element\r
  54     this.rootElement = document.createElement("div");\r
  55     this.rootElement.className = "Scrollbar";\r
  56     this.rootElement.style.visibility = "hidden";\r
  57     \r
  58     // create the scrollbar\r
  59     // the scrollbar consists of a root element with six children\r
  60     // (three track elements and three thumb elements)\r
  61     \r
  62     // track\r
  63     this.trackTopElement = document.createElement("div");\r
  64     this.trackTopElement.className = "ScrollbarTrackTop";\r
  65     this.trackMiddleElement = document.createElement("div");\r
  66     this.trackMiddleElement.className = "ScrollbarTrackMiddle";\r
  67     this.trackBottomElement = document.createElement("div");\r
  68     this.trackBottomElement.className = "ScrollbarTrackBottom";\r
  69     \r
  70     // thumb\r
  71     this.thumbTopElement = document.createElement("div");\r
  72     this.thumbTopElement.className = "ScrollbarThumbTop";\r
  73     this.thumbMiddleElement = document.createElement("div");\r
  74     this.thumbMiddleElement.className = "ScrollbarThumbMiddle";\r
  75     this.thumbBottomElement = document.createElement("div");\r
  76     this.thumbBottomElement.className = "ScrollbarThumbBottom";\r
  77     \r
  78     // assemble and attach the scrollbar\r
  79     this.rootElement.appendChild(this.trackTopElement);\r
  80     this.rootElement.appendChild(this.trackMiddleElement);\r
  81     this.rootElement.appendChild(this.trackBottomElement);\r
  82     this.rootElement.appendChild(this.thumbTopElement);\r
  83     this.rootElement.appendChild(this.thumbMiddleElement);\r
  84     this.rootElement.appendChild(this.thumbBottomElement);\r
  85     this.parentElement.appendChild(this.rootElement);\r
  86     \r
  87     // bring the scrollbar up to date\r
  88     this.update(0, 100, 100);\r
  89 }\r
  90 \r
  91 // Parent element for the scrollbar.\r
  92 Scrollbar.prototype.parentElement = null;\r
  93 \r
  94 // Root HTML element in the scrollbar.\r
  95 Scrollbar.prototype.rootElement = null;\r
  96 \r
  97 // Scrollbar track top element.\r
  98 Scrollbar.prototype.trackTopElement = null;\r
  99 \r
 100 // Scrollbar track middle element.\r
 101 Scrollbar.prototype.trackMiddleElement = null;\r
 102 \r
 103 // Scrollbar track bottom element.\r
 104 Scrollbar.prototype.trackBottomElement = null;\r
 105 \r
 106 // Scrollbar thumb top element.\r
 107 Scrollbar.prototype.thumbTopElement = null;\r
 108 \r
 109 // Scrollbar thumb middle element.\r
 110 Scrollbar.prototype.thumbMiddleElement = null;\r
 111 \r
 112 // Scrollbar thumb bottom element.\r
 113 Scrollbar.prototype.thumbBottomElement = null;\r
 114 \r
 115 // Is the scrollbar needed?\r
 116 Scrollbar.prototype.scrollbarNeeded = false;\r
 117 \r
 118 // Updates the scrollbar.\r
 119 Scrollbar.prototype.update = function(scrollY, viewportHeight, documentHeight) {\r
 120     // figure out current heights\r
 121     var scrollbarHeight = this.rootElement.clientHeight;\r
 122     var trackTopHeight = this.trackTopElement.clientHeight;\r
 123     var trackBottomHeight = this.trackBottomElement.clientHeight;\r
 124     var thumbTopHeight = this.thumbTopElement.clientHeight;\r
 125     var thumbBottomHeight = this.thumbBottomElement.clientHeight;\r
 126     \r
 127     // scrollable height is the larger of document and viewport heights\r
 128     var scrollableHeight = documentHeight;\r
 129     var scrollbarNeeded = true;\r
 130     if (viewportHeight >= documentHeight) {\r
 131         scrollableHeight = viewportHeight;\r
 132         scrollbarNeeded = false;\r
 133     }\r
 134     \r
 135     // show or hide scrollbar?\r
 136     if (scrollbarNeeded != this.scrollbarNeeded) {\r
 137         this.scrollbarNeeded = scrollbarNeeded;\r
 138         this.rootElement.style.visibility = scrollbarNeeded ? "visible" : "hidden";\r
 139     }\r
 140     \r
 141     // calculate thumb top position...\r
 142     var thumbTopPct = scrollY / scrollableHeight;\r
 143     var thumbTop = scrollbarHeight * thumbTopPct;\r
 144     // ...and bottom position...\r
 145     var thumbBottomPct = (scrollY + viewportHeight) / scrollableHeight;\r
 146     var thumbBottom = scrollbarHeight * thumbBottomPct;\r
 147     \r
 148     // ...and thumb height\r
 149     var thumbHeight = thumbBottom - thumbTop;\r
 150     \r
 151     // ensure that the thumb is not too small\r
 152     var thumbMinHeight = thumbTopHeight + thumbBottomHeight;\r
 153     if (thumbHeight < thumbMinHeight) {\r
 154         var underflow = thumbMinHeight - thumbHeight;\r
 155         // adjust thumb top pos assuming a shorter scrollbar track\r
 156         var thumbMid = (scrollbarHeight - underflow) * ((thumbTopPct + thumbBottomPct) / 2) + (underflow / 2);\r
 157         thumbTop = thumbMid - (thumbMinHeight / 2);\r
 158         thumbBottom = thumbTop + thumbMinHeight;\r
 159         thumbHeight = thumbBottom - thumbTop;\r
 160     }\r
 161     \r
 162     // position and size track element (add 1 to the middle section height for rounding errors)\r
 163     this.trackTopElement.style.top = "0px";\r
 164     this.trackMiddleElement.style.top = Math.round(trackTopHeight) + "px";\r
 165     this.trackMiddleElement.style.height = Math.round(scrollbarHeight - trackTopHeight - trackBottomHeight + 1) + "px";\r
 166     this.trackBottomElement.style.top = Math.round(scrollbarHeight - trackTopHeight) + "px";\r
 167     \r
 168     // position and size thumb element (add 1 to the middle section height for rounding errors)\r
 169     this.thumbTopElement.style.top = Math.round(thumbTop) + "px";\r
 170     this.thumbMiddleElement.style.top = Math.round(thumbTop + thumbTopHeight) + "px";\r
 171     this.thumbMiddleElement.style.height = Math.round(thumbHeight - thumbTopHeight - thumbBottomHeight + 1) + "px";\r
 172     this.thumbBottomElement.style.top = Math.round(thumbBottom - thumbBottomHeight) + "px";\r
 173 }\r