0.6.x/js/ui/15_ScrollBox.js

   1 var _ScrollBox;\r
   2 \r
   3 (function(){\r
   4 \r
   5 var m      = Math,\r
   6         ABS    = new Function( 'v', 'return v<0?-v:v' );\r
   7 \r
   8         function Options(){};\r
   9         \r
  10         X.Class._override( Options.prototype, {\r
  11                 hScroll         : true,\r
  12                 vScroll         : true,\r
  13                 x               : 0,\r
  14                 y               : 0,\r
  15                 bounce          : true,\r
  16                 bounceLock      : false,\r
  17                 momentum        : true,\r
  18                 lockDirection   : true,\r
  19                 useTransform    : true,\r
  20                 useTransition   : true,\r
  21                 topOffset       : 0,\r
  22                 checkDOMChanges : false,                // Experimental\r
  23                 handleClick     : true,\r
  24         \r
  25                 // Scrollbar\r
  26                 hScrollbar      : true,\r
  27                 vScrollbar      : true,\r
  28                 fixedScrollbar  : X.UA.Android,\r
  29                 hideScrollbar   : X.UA.iOS,\r
  30                 fadeScrollbar   : X.UA.iOS && has3d,\r
  31                 scrollbarClass  : '',\r
  32         \r
  33                 // Zoom\r
  34                 zoom            : false,\r
  35                 zoomMin         : 1,\r
  36                 zoomMax         : 4,\r
  37                 doubleTapZoom   : 2,\r
  38                 wheelAction     : 'scroll',\r
  39         \r
  40                 // Snap\r
  41                 snap            : false,\r
  42                 snapThreshold   : 1 //,\r
  43         });\r
  44 \r
  45         function Scrollbar( owner, dir ){\r
  46                 this.owner   = owner;\r
  47                 this.options = owner.options;\r
  48                 this.dir     = dir;\r
  49                 if( dir === 'h' ){\r
  50                         this.XorY          = 'x';\r
  51                         this.widthOrHeight = 'width';\r
  52                         this.transrateXorY = 'translateX(';\r
  53                 };\r
  54         };\r
  55         X.Class._override( Scrollbar.prototype, {\r
  56                 owner          : null,\r
  57                 dir            : null,\r
  58                 options        : null,\r
  59                 XorY           : 'y',\r
  60                 widthOrHeight  : 'height',\r
  61                 transrateXorY  : 'translateY(',\r
  62                 active         : false,\r
  63                 xnodeWrapper   : null,\r
  64                 xnodeIndicator : null,\r
  65                 wrapperSize    : 0,\r
  66                 indicatorSize  : 0,\r
  67                 maxScroll      : 0,\r
  68                 scrollPercent  : 0,\r
  69                 \r
  70                 update         : function(){\r
  71                         // remove scrollbar\r
  72                         if( !this.active ){\r
  73                                 if( this.xnodeWrapper ){\r
  74                                         X.Dom.Style.transform && this.xnodeIndicator.css( 'transform', '' );\r
  75                                         this.xnodeWrapper.css( 'display', 'none' );\r
  76                                 };\r
  77                                 return;\r
  78                         };\r
  79         \r
  80                         // create scrollbar\r
  81                         if( !this.xnodeWrapper ){\r
  82                                 // Create the scrollbar wrapper\r
  83                                 this.xnodeWrapper = this.owner.xnodeTarget.create( 'div' )\r
  84                                         .className(\r
  85                                                 this.options.scrollbarClass ?\r
  86                                                         this.options.scrollbarClass + this.dir.toUpperCase() :\r
  87                                                 this.dir === 'h' ?\r
  88                                                         ( this.vScrollbar && this.vScrollbar.active ? 'ScrollBox-Scrollbar-Wrapper-V-withH' : 'ScrollBox-Scrollbar-Wrapper-H' ) :\r
  89                                                         ( this.hScrollbar && this.hScrollbar.active ? 'ScrollBox-Scrollbar-Wrapper-H-withV' : 'ScrollBox-Scrollbar-Wrapper-V' )                                                 \r
  90                                         );\r
  91         \r
  92                                 this.options.fadeScrollbar &&\r
  93                                         this.xnodeWrapper.css(\r
  94                                                 {\r
  95                                                         opacity            : 0,\r
  96                                                         transitionProperty : 'opacity',\r
  97                                                         transitionDuration : '350ms'\r
  98                                                 }\r
  99                                         );\r
 100         \r
 101                                 // Create the scrollbar indicator\r
 102                                 \r
 103                                 this.xnodeIndicator = this.xnodeWrapper.create( 'div' );\r
 104                                 \r
 105                                 !this.options.scrollbarClass &&\r
 106                                         this.xnodeIndicator.className(\r
 107                                                 this.dir === 'h' ?\r
 108                                                         'ScrollBox-Scrollbar-Indicator-H' :\r
 109                                                         'ScrollBox-Scrollbar-Indicator-V'\r
 110                                         );\r
 111                                 //if (this.options.useTransition) bar.style.cssText += ';' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';\r
 112                         };\r
 113         \r
 114                         if( this.dir === 'h' ){\r
 115                                 this.wrapperSize   = this.hScrollbarWrapper.clientWidth;\r
 116                                 this.indicatorSize = m.max( m.round( wrapperSize * wrapperSize / this.owner.scrollerW ), 8 );\r
 117                                 //this.hScrollbarIndicator.style.width = this.hScrollbarIndicatorSize + 'px';\r
 118                                 this.maxScroll     = wrapperSize - indicatorSize;\r
 119                                 this.scrollPercent = maxScroll / this.owner.maxScrollX;\r
 120                         } else {\r
 121                                 this.wrapperSize   = this.vScrollbarWrapper.clientHeight;\r
 122                                 this.indicatorSize = m.max( m.round( wrapperSize * wrapperSize / this.owner.scrollerH ), 8);\r
 123                                 // this.vScrollbarIndicator.style.height = indicatorSize + 'px';\r
 124                                 this.maxScroll     = this.vScrollbarSize - indicatorSize;\r
 125                                 this.scrollPercent = maxScroll / this.owner.maxScrollY;\r
 126                         };              \r
 127                         this.xnodeIndicator.css( this.widthOrHeight, size + 'px' );\r
 128                         // Reset position\r
 129                         this.updatePosition( this.owner[ this.XorY ], true );\r
 130                 },\r
 131                 \r
 132                 updatePosition : function( pos, hidden ){\r
 133                         var size;\r
 134                         pos = this.scrollPercent * pos;\r
 135         \r
 136                         if( pos < 0 ){\r
 137                                 if( !this.options.fixedScrollbar ){\r
 138                                         size = this.indicatorSize + m.round( pos * 3 );\r
 139                                         if( size < 8 ) size = 8;\r
 140                                         //this.xnodeIndicator.style[dir == 'h' ? 'width' : 'height'] = size + 'px';\r
 141                                         this.xnodeIndicator.css( this.widthOrHeight, size + 'px' );\r
 142                                 };\r
 143                                 pos = 0;\r
 144                         } else\r
 145                         if( this.maxScroll < pos ){\r
 146                                 if( !this.options.fixedScrollbar ){\r
 147                                         size = this.indicatorSize - m.round( ( pos - this.maxScroll ) * 3 );\r
 148                                         if( size < 8 ) size = 8;\r
 149                                         //this.xnodeIndicator.style[dir == 'h' ? 'width' : 'height'] = size + 'px';\r
 150                                         this.xnodeIndicator.css( this.widthOrHeight, size + 'px' );\r
 151                                         pos = this.maxScroll + this.indicatorSize - size;\r
 152                                 } else {\r
 153                                         pos = this.maxScroll;\r
 154                                 };\r
 155                         };\r
 156         \r
 157                         if (this.options.useTransition){\r
 158                                 this.xnodeWrapper.css( {\r
 159                                         transitionDelay : '0',\r
 160                                         opacity         : hidden && this.options.hideScrollbar ? '0' : '1'\r
 161                                 });\r
 162                                 //this.xnodeIndicator.style[transform] = 'translate(' + (dir == 'h' ? pos + 'px,0)' : '0,' + pos + 'px)') + translateZ;\r
 163                                 this.xnodeIndicator.anime( this.dir === 'h' ? { x : pos } : { y : pos } );              \r
 164                         };\r
 165                 }\r
 166         });\r
 167 \r
 168         // Constructor\r
 169         function iScroll( uinodeRoot, uinodeTarget, xnodeTarget, xnodeScroller, options ){\r
 170                 var i;\r
 171                 \r
 172                 this.uinodeRoot     = uinodeRoot;\r
 173                 this.uinodeTarget   = uinodeTarget;\r
 174                 this.xnodeTarget    = xnodeTarget;\r
 175                 this.xnodeScroller  = xnodeScroller;\r
 176 \r
 177                 // Default options\r
 178                 this.options = new Options();\r
 179 \r
 180                 // User defined options\r
 181                 if( options ) for (i in options) this.options[i] = options[i];\r
 182                 \r
 183                 this.options.hScroll && ( this.hScrollbar = new Scrollbar( 'h', this ) );\r
 184                 this.options.vScroll && ( this.vScrollbar = new Scrollbar( 'v', this ) );\r
 185                 \r
 186                 // Set starting position\r
 187                 this.x = this.options.x;\r
 188                 this.y = this.options.y;\r
 189 \r
 190                 // Normalize options\r
 191                 this.options.useTransform  = X.Dom.Style.transform && this.options.useTransform;\r
 192                 this.options.hScrollbar    = this.options.hScroll && this.options.hScrollbar;\r
 193                 this.options.vScrollbar    = this.options.vScroll && this.options.vScrollbar;\r
 194                 this.options.zoom          = this.options.useTransform && this.options.zoom;\r
 195                 this.options.useTransition = X.Dom.Style.transition && this.options.useTransition;\r
 196 \r
 197                 // Helpers FIX ANDROID BUG!\r
 198                 // translate3d and scale doesn't work together!\r
 199                 // Ignoring 3d ONLY WHEN YOU SET this.options.zoom\r
 200                 //if ( this.options.zoom && X.UA.isAndroid ){\r
 201                 //      translateZ = '';\r
 202                 //}\r
 203                 \r
 204                 // Set some default styles\r
 205 \r
 206                 if (this.options.useTransform){\r
 207                         this.scroller.style[X.Dom.Style.transform]       = 'translate(' + this.x + 'px,' + this.y + 'px)' + translateZ;\r
 208                         this.scroller.style[X.Dom.Style.transformOrigin] = '0 0';\r
 209                 } else {\r
 210                         this.scroller.style.cssText += ';position:absolute;top:' + this.y + 'px;left:' + this.x + 'px';\r
 211                 };\r
 212 \r
 213                 if (this.options.useTransition){\r
 214                         this.scroller.style[X.Dom.Style.transition.Property]       = this.options.useTransform ? X.Dom.Style.cssVendor + 'transform' : 'top left';\r
 215                         this.scroller.style[X.Dom.Style.transition.Duration]       = '0';                       \r
 216                         this.scroller.style[X.Dom.Style.transition.TimingFunction] = 'cubic-bezier(0.33,0.66,0.66,1)';\r
 217                         this.options.fixedScrollbar = true;\r
 218                 };\r
 219 \r
 220                 this.refresh();\r
 221 \r
 222                 //this._bind(RESIZE_EV, window);\r
 223                 X.Dom.Event.add( window, RESIZE_EV, this );\r
 224                 //this._bind(START_EV);\r
 225                 uinodeTarget.listen( X.UI.Event.DRAG_START, this );\r
 226         };\r
 227 \r
 228 // Prototype\r
 229 iScroll.prototype = {\r
 230         uinodeRoot     : null,\r
 231         uinodeTarget   : null,\r
 232         xnodeTarget    : null,\r
 233         xnodeScroller  : null,\r
 234         options        : null,\r
 235         enabled        : true,\r
 236         x              : 0,\r
 237         y              : 0,\r
 238         steps          : [],\r
 239         scale          : 1,\r
 240         currPageX      : 0,\r
 241         currPageY      : 0,\r
 242         pagesX         : [],\r
 243         pagesY         : [],\r
 244         animeTimerID   : 0,\r
 245         wheelZoomCount : 0,\r
 246         \r
 247         wrapperW       : 0,\r
 248         wrapperH       : 0,\r
 249         minScrollY     : 0,\r
 250         scrollerW      : 0,\r
 251         scrollerH      : 0,\r
 252         maxScrollX     : 0,\r
 253         maxScrollY     : 0,\r
 254         dirX           : 0,\r
 255         dirY           : 0,\r
 256         hScrollbar     : false,\r
 257         vScrollbar     : false,\r
 258         wrapperOffsetLeft : 0,\r
 259         wrapperOffsetTop  : 0,\r
 260         \r
 261         \r
 262         currPageX         : 0,\r
 263         currPageY         : 0,\r
 264         \r
 265         moved             : false,\r
 266         animating         : false,\r
 267         zoomed            : false,\r
 268         distX             : false,\r
 269         distY             : false,\r
 270         absDistX          : false,\r
 271         absDistY          : false,\r
 272         absStartX         : false,      // Needed by snap threshold\r
 273         absStartY         : false,\r
 274         startX            : false,\r
 275         startY            : false,\r
 276         pointX            : false,\r
 277         pointY            : false,\r
 278         startTime         : false,\r
 279         \r
 280         handleEvent: function (e) {\r
 281                 switch(e.type) {\r
 282                         case X.UI.Event.DRAG :\r
 283                                 return this._move(e);\r
 284                         case X.UI.Event.WHEEL :\r
 285                                 return this._wheel(e);\r
 286                         case X.UI.Event.DRAG_START :\r
 287                                 //if (!hasTouch && e.button !== 0) return;\r
 288                                 return this._start(e);\r
 289                         case X.UI.Event.DRAG_END :\r
 290                                 return this._end(e);\r
 291                         case X.UI.Event.ANIME_END :\r
 292                                 return this._transitionEnd(e);\r
 293                         case RESIZE_EV :\r
 294                                 return this._resize();                  \r
 295                 }\r
 296         },\r
 297         \r
 298         _trigger : function( type, e ){\r
 299                 \r
 300                 return this.uinodeTarget.dispatch(  );\r
 301         },\r
 302         \r
 303         _resize: function () {\r
 304                 X.Timer.once( X.UA.Android ? 200 : 0, this, this.refresh );\r
 305                 // setTimeout( this.refresh(), isAndroid ? 200 : 0);\r
 306         },\r
 307         \r
 308         _updateScrollPosition: function( x, y, time ){\r
 309                 if (this.zoomed) return;\r
 310 \r
 311                 this.xnodeScroller.anime({\r
 312                         x : this.x = this.hScrollbar && this.hScrollbar.active ? m.round(x) : 0,\r
 313                         y : this.y = this.vScrollbar && this.vScrollbar.active ? m.round(y) : 0\r
 314                 }, time );\r
 315 \r
 316                 this.hScrollbar && this.hScrollbar.active && this.hScrollbar.updatePosition( this.x );\r
 317                 this.vScrollbar && this.vScrollbar.active && this.vScrollbar.updatePosition( this.y );\r
 318         },\r
 319         \r
 320         _start: function (e) {\r
 321                 var point = hasTouch ? e.touches[0] : e,\r
 322                         matrix, x, y,\r
 323                         ret;\r
 324                         //c1, c2;\r
 325 \r
 326                 if (!this.enabled) return;\r
 327 \r
 328                 //if (this.options.onBeforeScrollStart) this.options.onBeforeScrollStart.call(this, e);\r
 329                 if( ( ret = this._trigger( X.UI.Event.SCROLL_BEFORE_START ) ) & X.Callback.PREVENT_DEFAULT ){\r
 330                         return ret;\r
 331                 };\r
 332 \r
 333                 //if (this.options.useTransition || this.options.zoom) this._transitionTime(0);\r
 334 \r
 335                 this.moved     = false;\r
 336                 this.animating = false;\r
 337                 this.zoomed    = false;\r
 338                 this.distX     = 0;\r
 339                 this.distY     = 0;\r
 340                 this.absDistX  = 0;\r
 341                 this.absDistY  = 0;\r
 342                 this.dirX      = 0;\r
 343                 this.dirY      = 0;\r
 344 \r
 345                 if (this.options.momentum) {\r
 346                         if (this.options.useTransform) {\r
 347                                 // Very lame general purpose alternative to CSSMatrix\r
 348                                 matrix = getComputedStyle(this.scroller, null)[transform].replace(/[^0-9\-.,]/g, '').split(',');\r
 349                                 x = +(matrix[12] || matrix[4]);\r
 350                                 y = +(matrix[13] || matrix[5]);\r
 351                         } else {\r
 352                                 x = +getComputedStyle(this.scroller, null).left.replace(/[^0-9-]/g, '');\r
 353                                 y = +getComputedStyle(this.scroller, null).top.replace(/[^0-9-]/g, '');\r
 354                         };\r
 355                         \r
 356                         if (x !== this.x || y !== this.y) {\r
 357                                 if (this.options.useTransition){\r
 358                                         //this._unbind(TRNEND_EV);\r
 359                                         X.Dom.Event.remove( this.scroller, TRNEND_EV, this );\r
 360                                 } else {\r
 361                                         X.Timer.cancelFrame(this.animeTimerID);\r
 362                                 };\r
 363                                 this.steps = this.steps ? ( this.steps.length = 0 ) : [];\r
 364                                 this._updateScrollPosition( x, y, 0 );\r
 365                                 //if (this.options.onScrollEnd) this.options.onScrollEnd.call(this);\r
 366                                 return this._trigger( X.UI.Event.SCROLL_END, e );\r
 367                         };\r
 368                 };\r
 369 \r
 370                 this.absStartX = this.x;        // Needed by snap threshold\r
 371                 this.absStartY = this.y;\r
 372 \r
 373                 this.startX = this.x;\r
 374                 this.startY = this.y;\r
 375                 this.pointX = point.pageX;\r
 376                 this.pointY = point.pageY;\r
 377 \r
 378                 this.startTime = e.timeStamp || X.getTime();\r
 379 \r
 380                 this.uinodeRoot.listen( X.UI.Event.DRAG, this );\r
 381                 this.uinodeRoot.listen( X.UI.Event.DRAG_END, this );\r
 382 \r
 383                 return this._trigger( X.UI.Event.SCROLL_START, e );\r
 384         },\r
 385         \r
 386         _move: function (e) {\r
 387                 var point  = hasTouch ? e.touches[0] : e,\r
 388                         deltaX = point.pageX - this.pointX,\r
 389                         deltaY = point.pageY - this.pointY,\r
 390                         newX   = this.x + deltaX,\r
 391                         newY   = this.y + deltaY,\r
 392                         c1, c2, scale,\r
 393                         timestamp = e.timeStamp ||X.getTime(), ret;\r
 394 \r
 395                 //if (this.options.onBeforeScrollMove) this.options.onBeforeScrollMove.call(this, e);\r
 396                 if( ( ret = this._trigger( X.UI.Event.SCROLL_BEFORE_MOVE ) ) & X.Callback.PREVENT_DEFAULT ){\r
 397                         return ret;\r
 398                 };\r
 399 \r
 400                 this.pointX = point.pageX;\r
 401                 this.pointY = point.pageY;\r
 402 \r
 403                 // Slow down if outside of the boundaries\r
 404                 if (newX > 0 || newX < this.maxScrollX) {\r
 405                         newX = this.options.bounce ? this.x + (deltaX / 2) : newX >= 0 || this.maxScrollX >= 0 ? 0 : this.maxScrollX;\r
 406                 };\r
 407                 if (newY > this.minScrollY || newY < this.maxScrollY) {\r
 408                         newY = this.options.bounce ? this.y + (deltaY / 2) : newY >= this.minScrollY || this.maxScrollY >= 0 ? this.minScrollY : this.maxScrollY;\r
 409                 };\r
 410 \r
 411                 this.distX += deltaX;\r
 412                 this.distY += deltaY;\r
 413                 this.absDistX = ABS(this.distX);\r
 414                 this.absDistY = ABS(this.distY);\r
 415 \r
 416                 if (this.absDistX < 6 && this.absDistY < 6) {\r
 417                         return;\r
 418                 };\r
 419 \r
 420                 // Lock direction\r
 421                 if (this.options.lockDirection) {\r
 422                         if (this.absDistX > this.absDistY + 5) {\r
 423                                 newY = this.y;\r
 424                                 deltaY = 0;\r
 425                         } else if (this.absDistY > this.absDistX + 5) {\r
 426                                 newX = this.x;\r
 427                                 deltaX = 0;\r
 428                         };\r
 429                 };\r
 430 \r
 431                 this.moved = true;\r
 432                 this._updateScrollPosition(newX, newY, 0);\r
 433                 this.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;\r
 434                 this.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;\r
 435 \r
 436                 if (timestamp - this.startTime > 300) {\r
 437                         this.startTime = timestamp;\r
 438                         this.startX = this.x;\r
 439                         this.startY = this.y;\r
 440                 };\r
 441                 \r
 442                 //if (this.options.onScrollMove) this.options.onScrollMove.call(this, e);\r
 443                 return this._trigger( X.UI.Event.SCROLL_MOVE, e );\r
 444         },\r
 445         \r
 446         _end: function (e) {\r
 447                 if (hasTouch && e.touches.length !== 0) return;\r
 448 \r
 449                 var point     = hasTouch ? e.changedTouches[0] : e,\r
 450                         momentumX = { dist:0, time:0 },\r
 451                         momentumY = { dist:0, time:0 },\r
 452                         duration  = ( e.timeStamp ||X.getTime() ) - this.startTime,\r
 453                         newPosX   = this.x,\r
 454                         newPosY   = this.y,\r
 455                         distX, distY,\r
 456                         newDuration,\r
 457                         snap,\r
 458                         scale;\r
 459 \r
 460                 this.uinodeRoot.unlisten( X.UI.Event.DRAG, this );\r
 461                 this.uinodeRoot.unlisten( X.UI.Event.DRAG_END, this );\r
 462 \r
 463                 //this._unbind(MOVE_EV, window);\r
 464                 //this._unbind(END_EV, window);\r
 465                 //this._unbind(CANCEL_EV, window);\r
 466 \r
 467                 //if (this.options.onBeforeScrollEnd) this.options.onBeforeScrollEnd.call(this, e);\r
 468                 \r
 469 \r
 470                 if (!this.moved) {\r
 471 \r
 472 \r
 473                         this._resetPos(400);\r
 474 \r
 475                         //if (this.options.onTouchEnd) this.options.onTouchEnd.call(this, e);\r
 476                         return;\r
 477                 };\r
 478 \r
 479                 if (duration < 300 && this.options.momentum) {\r
 480                         momentumX = newPosX ? this._momentum(newPosX - this.startX, duration, -this.x, this.scrollerW - this.wrapperW + this.x, this.options.bounce ? this.wrapperW : 0) : momentumX;\r
 481                         momentumY = newPosY ? this._momentum(newPosY - this.startY, duration, -this.y, (this.maxScrollY < 0 ? this.scrollerH - this.wrapperH + this.y - this.minScrollY : 0), this.options.bounce ? this.wrapperH : 0) : momentumY;\r
 482 \r
 483                         newPosX = this.x + momentumX.dist;\r
 484                         newPosY = this.y + momentumY.dist;\r
 485 \r
 486                         if ((this.x > 0 && newPosX > 0) || (this.x < this.maxScrollX && newPosX < this.maxScrollX)) momentumX = { dist:0, time:0 };\r
 487                         if ((this.y > this.minScrollY && newPosY > this.minScrollY) || (this.y < this.maxScrollY && newPosY < this.maxScrollY)) momentumY = { dist:0, time:0 };\r
 488                         \r
 489                         if (momentumX.dist || momentumY.dist) {\r
 490                                 newDuration = m.max(m.max(momentumX.time, momentumY.time), 10);\r
 491         \r
 492                                 this.scrollTo(m.round(newPosX), m.round(newPosY), newDuration);\r
 493         \r
 494                                 //if (this.options.onTouchEnd) this.options.onTouchEnd.call(this, e);\r
 495                                 return;\r
 496                         };                      \r
 497                 };\r
 498 \r
 499                 this._resetPos(200);\r
 500                 //if (this.options.onTouchEnd) this.options.onTouchEnd.call(this, e);\r
 501         },\r
 502         \r
 503         /*\r
 504         _onZoomEndEvent : null,\r
 505         _onZoomEndTimerComplete : function(){\r
 506                 this.options.onZoomEnd.call( this, this._onZoomEndEvent );\r
 507         },\r
 508         */\r
 509         \r
 510         /*\r
 511         _onDobleTapTimerPoint : null,\r
 512         _onDobleTapTimerComplete : function () {\r
 513                 var point = this._onDobleTapTimerPoint,\r
 514                         target, ev;\r
 515                 this.doubleTapTimer = null;\r
 516 \r
 517                 // Find the last touched element\r
 518                 target = point.target;\r
 519                 while (target.nodeType !== 1) target = target.parentNode;\r
 520 \r
 521                 if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {\r
 522                         ev = document.createEvent('MouseEvents');\r
 523                         ev.initMouseEvent('click', true, true, e.view, 1,\r
 524                                 point.screenX, point.screenY, point.clientX, point.clientY,\r
 525                                 e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,\r
 526                                 0, null);\r
 527                         ev._fake = true;\r
 528                         target.dispatchEvent(ev);\r
 529                 }\r
 530         },*/\r
 531         \r
 532         _resetPos: function (time) {\r
 533                 var resetX =\r
 534                                 0 <= this.x ?\r
 535                                         0 :\r
 536                                 this.x < this.maxScrollX ?\r
 537                                         this.maxScrollX :\r
 538                                         this.x,\r
 539                         resetY =\r
 540                                 this.minScrollY <= this.y || 0 < this.maxScrollY ?\r
 541                                         this.minScrollY :\r
 542                                 this.y < this.maxScrollY ?\r
 543                                         this.maxScrollY :\r
 544                                         this.y;\r
 545 \r
 546                 if( resetX === this.x && resetY === this.y ){\r
 547                         if( this.moved ){\r
 548                                 this.moved = false;\r
 549                                 this._trigger( X.UI.Event.SCROLL_END );\r
 550                                 //if (this.options.onScrollEnd) this.options.onScrollEnd.call(this);            // Execute custom code on scroll end\r
 551                         };\r
 552                         if( this.options.hideScrollbar ){\r
 553                                 this.hScrollbar && this.hScrollbar.active &&\r
 554                                         \r
 555                                         //if (vendor == 'webkit') this.hScrollbarWrapper.style[transitionDelay] = '300ms';\r
 556                                         //this.hScrollbarWrapper.style.opacity = '0';\r
 557                                         this.hScrollbar.xnodeWraper.anime( {\r
 558                                                 opacity : 0\r
 559                                         }, 300 );\r
 560                                 this.vScrollbar && this.vScrollbar.active &&\r
 561                                         //if (vendor == 'webkit') this.vScrollbarWrapper.style[transitionDelay] = '300ms';\r
 562                                         //this.vScrollbarWrapper.style.opacity = '0';\r
 563                                         this.hScrollbar.xnodeWraper.anime( {\r
 564                                                 opacity : 0\r
 565                                         }, 300 );                       \r
 566                         };\r
 567                         return;\r
 568                 };\r
 569                 this.scrollTo(resetX, resetY, time || 0);\r
 570         },\r
 571         \r
 572         _wheel: function (e) {\r
 573                 var wheelDeltaX, wheelDeltaY,\r
 574                         deltaX, deltaY,\r
 575                         deltaScale;\r
 576 /*\r
 577                 if ('wheelDeltaX' in e) {\r
 578                         wheelDeltaX = e.wheelDeltaX / 12;\r
 579                         wheelDeltaY = e.wheelDeltaY / 12;\r
 580                 } else if('wheelDelta' in e) {\r
 581                         wheelDeltaX = wheelDeltaY = e.wheelDelta / 12;\r
 582                 } else if ('detail' in e) {\r
 583                         wheelDeltaX = wheelDeltaY = -e.detail * 3;\r
 584                 } else {\r
 585                         return;\r
 586                 } */\r
 587                 \r
 588                 deltaX = this.x + e.wheelDeltaX;\r
 589                 deltaY = this.y + e.wheelDeltaY;\r
 590 \r
 591                 deltaX =\r
 592                         0 < deltaX ?\r
 593                                 0 :\r
 594                         deltaX < this.maxScrollX ?\r
 595                                 this.maxScrollX : deltaX;\r
 596 \r
 597                 deltaY =\r
 598                         this.minScrollY < deltaY ? \r
 599                                 this.minScrollY :\r
 600                         deltaY < this.maxScrollY ?\r
 601                                 this.maxScrollY : deltaY;\r
 602     \r
 603                 this.maxScrollY < 0 && this.scrollTo(deltaX, deltaY, 0);\r
 604         },\r
 605         \r
 606         /*\r
 607         _wheelTimerCompleteEvent : null,\r
 608         _wheelTimerComplete : function() {\r
 609                 this.wheelZoomCount--;\r
 610                 if (!this.wheelZoomCount && this.options.onZoomEnd) this.options.onZoomEnd.call(this, this._wheelTimerCompleteEvent );\r
 611         },\r
 612         */\r
 613         \r
 614         _transitionEnd: function( e ){\r
 615                 if( e.target !== this.xnodeScroller ) return;\r
 616 \r
 617                 //this._unbind(TRNEND_EV);\r
 618                 //X.Dom.Event.remove( this.scroller, TRNEND_EV, this );\r
 619                 this.animating = false;\r
 620                 \r
 621                 this._startAnime();\r
 622                 \r
 623                 return X.Callback.UN_LISTEN;\r
 624         },\r
 625 \r
 626 \r
 627         /**\r
 628         *\r
 629         * Utilities\r
 630         *\r
 631         */\r
 632         _startAnime: function () {\r
 633                 var startX = this.x,\r
 634                         startY = this.y,\r
 635                         step, animate;\r
 636 \r
 637                 if (this.animating) return;\r
 638                 \r
 639                 if (!this.steps.length) {\r
 640                         this._resetPos(400);\r
 641                         return;\r
 642                 };\r
 643                 \r
 644                 step = this.steps.shift();\r
 645                 \r
 646                 if( step.x === startX && step.y === startY ) step.time = 0;\r
 647 \r
 648                 this.animating = true;\r
 649                 this.moved = true;\r
 650                 \r
 651                 //if (this.options.useTransition) {\r
 652                         //this._transitionTime(step.time);\r
 653                         this._updateScrollPosition( step.x, step.y, step.time );\r
 654                         //this.animating = false;\r
 655                         this.xnodeScroller.listenOnce( X.UI.Event.ANIME_END, this );\r
 656                         //step.time ? X.Dom.Event.add( this.scroller, TRNEND_EV, this ) /* this._bind(TRNEND_EV) */ : this._resetPos(0);\r
 657                         //return;\r
 658                 //}\r
 659                 //this._doAnimate( X.getTime(), step, startX, startY );\r
 660         },\r
 661 \r
 662 /*\r
 663         _doAnimate : function( startTime, step, startX, startY ){\r
 664                 var now =X.getTime(),\r
 665                         easeOut, newX, newY;\r
 666 \r
 667                 if (now >= startTime + step.time) {\r
 668                         this._updateScrollPosition(step.x, step.y);\r
 669                         this.animating = false;\r
 670                         //if (this.options.onAnimationEnd) this.options.onAnimationEnd.call( this );                    // Execute custom code on animation end\r
 671                         this._startAnime();\r
 672                         return;\r
 673                 };\r
 674 \r
 675                 now     = (now - startTime) / step.time - 1;\r
 676                 easeOut = m.sqrt(1 - now * now);\r
 677                 newX    = (step.x - startX) * easeOut + startX;\r
 678                 newY    = (step.y - startY) * easeOut + startY;\r
 679                 this._updateScrollPosition(newX, newY);\r
 680                 if( this.animating ) this.animeTimerID = X.Timer.requestFrame( this, this._doAnimate, [ startTime, step, startX, startY ] );\r
 681         },\r
 682 */\r
 683 \r
 684         _momentum: function (dist, time, maxDistUpper, maxDistLower, size) {\r
 685                 var deceleration = 0.0006,\r
 686                         speed   = ABS(dist) / time,\r
 687                         newDist = (speed * speed) / (2 * deceleration),\r
 688                         newTime = 0, outsideDist = 0;\r
 689 \r
 690                 // Proportinally reduce speed if we are outside of the boundaries\r
 691                 if (dist > 0 && newDist > maxDistUpper) {\r
 692                         outsideDist = size / (6 / (newDist / speed * deceleration));\r
 693                         maxDistUpper = maxDistUpper + outsideDist;\r
 694                         speed = speed * maxDistUpper / newDist;\r
 695                         newDist = maxDistUpper;\r
 696                 } else if (dist < 0 && newDist > maxDistLower) {\r
 697                         outsideDist = size / (6 / (newDist / speed * deceleration));\r
 698                         maxDistLower = maxDistLower + outsideDist;\r
 699                         speed = speed * maxDistLower / newDist;\r
 700                         newDist = maxDistLower;\r
 701                 }\r
 702 \r
 703                 newDist = newDist * (dist < 0 ? -1 : 1);\r
 704                 newTime = speed / deceleration;\r
 705 \r
 706                 return { dist: newDist, time: m.round(newTime) };\r
 707         },\r
 708 \r
 709         _offset: function (el) {\r
 710                 var left = -el.offsetLeft,\r
 711                         top = -el.offsetTop;\r
 712                         \r
 713                 while (el = el.offsetParent) {\r
 714                         left -= el.offsetLeft;\r
 715                         top -= el.offsetTop;\r
 716                 }\r
 717                 \r
 718                 if (el != this.wrapper) {\r
 719                         left *= this.scale;\r
 720                         top *= this.scale;\r
 721                 }\r
 722 \r
 723                 return { left: left, top: top };\r
 724         },\r
 725 \r
 726         /*\r
 727         _bind: function (type, el, bubble) {\r
 728                 X.Dom.Event.add( el || this.scroller, type, this );\r
 729         },\r
 730 \r
 731         _unbind: function (type, el, bubble) {\r
 732                 X.Dom.Event.remove( el || this.scroller, type, this );\r
 733         },\r
 734         */\r
 735 \r
 736         /**\r
 737         *\r
 738         * Public methods\r
 739         *\r
 740         */\r
 741         destroy: function () {\r
 742                 this.scroller.style[transform] = '';\r
 743 \r
 744                 // Remove the scrollbars\r
 745                 this.hScrollbar && this.hScrollbar.destroy();\r
 746                 this.vScrollbar && this.vScrollbar.destroy();\r
 747 \r
 748                 // Remove the event listeners\r
 749                 X.Dom.Event.add( window, RESIZE_EV, this );\r
 750                 this.uinodeTarget.unlisten( X.UI.Event.DRAG_START, this );\r
 751                 this.uinodeRoot.unlisten( X.UI.Event.DRAG, this );\r
 752                 this.uinodeRoot.unlisten( X.UI.Event.DRAG_END, this );\r
 753                 \r
 754                 //this._unbind(RESIZE_EV, window);\r
 755                 //this._unbind(START_EV);\r
 756                 //this._unbind(MOVE_EV, window);\r
 757                 //this._unbind(END_EV, window);\r
 758                 //this._unbind(CANCEL_EV, window);\r
 759                 \r
 760                 if (!this.options.hasTouch) {\r
 761                         //this._unbind('DOMMouseScroll');\r
 762                         //this._unbind('mousewheel');\r
 763                 }\r
 764                 \r
 765                 // if (this.options.useTransition) this._unbind(TRNEND_EV);\r
 766                 this.options.useTransition && X.Dom.Event.remove( this.scroller, TRNEND_EV, this );\r
 767                 \r
 768                 //if (this.options.checkDOMChanges) clearInterval(this.checkDOMTime);\r
 769                 \r
 770                 //if (this.options.onDestroy) this.options.onDestroy.call(this);\r
 771         },\r
 772 \r
 773         refresh: function () {\r
 774                 var offset,\r
 775                         i, l,\r
 776                         els,\r
 777                         pos = 0,\r
 778                         page = 0;\r
 779 \r
 780                 if (this.scale < this.options.zoomMin) this.scale = this.options.zoomMin;\r
 781                 this.wrapperW = this.wrapper.clientWidth || 1;\r
 782                 this.wrapperH = this.wrapper.clientHeight || 1;\r
 783 \r
 784                 this.minScrollY = -this.options.topOffset || 0;\r
 785                 this.scrollerW  = m.round(this.scroller.offsetWidth * this.scale);\r
 786                 this.scrollerH  = m.round((this.scroller.offsetHeight + this.minScrollY) * this.scale);\r
 787                 this.maxScrollX = this.wrapperW - this.scrollerW;\r
 788                 this.maxScrollY = this.wrapperH - this.scrollerH + this.minScrollY;\r
 789                 this.dirX       = 0;\r
 790                 this.dirY       = 0;\r
 791 \r
 792                 // if (this.options.onRefresh) this.options.onRefresh.call(this);\r
 793                 this._trigger( X.UI.Event.SCROLL_REFRESH, {} );\r
 794 \r
 795                 this.hScrollbar && ( this.hScrollbar.active = this.maxScrollX < 0 );\r
 796                 this.vScrollbar && ( this.vScrollbar.active = !this.options.bounceLock && !this.hScroll || this.scrollerH > this.wrapperH );\r
 797                 \r
 798                 offset = this._offset(this.wrapper);\r
 799                 this.wrapperOffsetLeft = -offset.left;\r
 800                 this.wrapperOffsetTop = -offset.top;\r
 801 \r
 802                 // Prepare snap\r
 803                 if (typeof this.options.snap == 'string') {\r
 804                         this.pagesX = [];\r
 805                         this.pagesY = [];\r
 806                         els = this.scroller.querySelectorAll(this.options.snap);\r
 807                         for (i=0, l=els.length; i<l; i++) {\r
 808                                 pos = this._offset(els[i]);\r
 809                                 pos.left += this.wrapperOffsetLeft;\r
 810                                 pos.top += this.wrapperOffsetTop;\r
 811                                 this.pagesX[i] = pos.left < this.maxScrollX ? this.maxScrollX : pos.left * this.scale;\r
 812                                 this.pagesY[i] = pos.top < this.maxScrollY ? this.maxScrollY : pos.top * this.scale;\r
 813                         }\r
 814                 } else if (this.options.snap) {\r
 815                         this.pagesX = [];\r
 816                         while (pos >= this.maxScrollX) {\r
 817                                 this.pagesX[page] = pos;\r
 818                                 pos = pos - this.wrapperW;\r
 819                                 page++;\r
 820                         }\r
 821                         if (this.maxScrollX%this.wrapperW) this.pagesX[this.pagesX.length] = this.maxScrollX - this.pagesX[this.pagesX.length-1] + this.pagesX[this.pagesX.length-1];\r
 822 \r
 823                         pos = 0;\r
 824                         page = 0;\r
 825                         this.pagesY = [];\r
 826                         while (pos >= this.maxScrollY) {\r
 827                                 this.pagesY[page] = pos;\r
 828                                 pos = pos - this.wrapperH;\r
 829                                 page++;\r
 830                         }\r
 831                         if (this.maxScrollY%this.wrapperH) this.pagesY[this.pagesY.length] = this.maxScrollY - this.pagesY[this.pagesY.length-1] + this.pagesY[this.pagesY.length-1];\r
 832                 }\r
 833 \r
 834                 // Prepare the scrollbars\r
 835                 this._scrollbar('h');\r
 836                 this._scrollbar('v');\r
 837 \r
 838                 if (!this.zoomed) {\r
 839                         this.scroller.style[transitionDuration] = '0';\r
 840                         this._resetPos(400);\r
 841                 }\r
 842         },\r
 843 \r
 844         scrollTo: function (x, y, time, relative) {\r
 845                 var step = x,\r
 846                         i, l;\r
 847 \r
 848                 this.stop();\r
 849 \r
 850                 if( !step.length ) step = [{ x: x, y: y, time: time, relative: relative }];\r
 851                 \r
 852                 for( i = 0, l = step.length; i < l; ++i ){\r
 853                         if( step[ i ].relative ){\r
 854                                 step[ i ].x = this.x - step[ i ].x;\r
 855                                 step[ i ].y = this.y - step[ i ].y;\r
 856                         };\r
 857                         this.steps.push( {\r
 858                                 x    : step[i].x,\r
 859                                 y    : step[i].y,\r
 860                                 time : step[i].time || 0\r
 861                         });\r
 862                 };\r
 863 \r
 864                 this._startAnime();\r
 865         },\r
 866 \r
 867         disable: function () {\r
 868                 this.stop();\r
 869                 this._resetPos(0);\r
 870                 this.enabled = false;\r
 871 \r
 872                 // If disabled after touchstart we make sure that there are no left over events\r
 873                 //this._unbind(MOVE_EV, window);\r
 874                 //this._unbind(END_EV, window);\r
 875                 //this._unbind(CANCEL_EV, window);\r
 876                 this.uinodeRoot.unlisten( X.UI.Event.DRAG, this );\r
 877                 this.uinodeRoot.unlisten( X.UI.Event.DRAG_END, this );\r
 878         },\r
 879         \r
 880         enable: function () {\r
 881                 this.enabled = true;\r
 882         },\r
 883         \r
 884         stop: function () {\r
 885                 //if (this.options.useTransition) this._unbind(TRNEND_EV);\r
 886                 //else X.Timer.cancelFrame( this.animeTimerID );\r
 887                 /*\r
 888                 if (this.options.useTransition){\r
 889                         X.Dom.Event.remove( this.scroller, TRNEND_EV, this );\r
 890                 } else {\r
 891                         X.Timer.cancelFrame(this.animeTimerID);\r
 892                 };\r
 893                 */\r
 894                 this.xnodeScroller.stop();\r
 895                 if( this.steps ) this.steps.length = 0;\r
 896                 this.moved = false;\r
 897                 this.animating = false;\r
 898         },\r
 899         \r
 900         isReady: function () {\r
 901                 return !this.moved && !this.zoomed && !this.animating;\r
 902         }\r
 903 };\r
 904 \r
 905 \r
 906 \r
 907 _ScrollBox = _ChromeBox.inherits(\r
 908         '_ScrollBox',\r
 909         X.Class.PRIVATE_DATA | X.Class.SUPER_ACCESS,\r
 910         {\r
 911                 //elmScroll     : null,\r
 912                 //elmScroller   : null,\r
 913                 //elmScrollbar  : null,\r
 914                 \r
 915                 scrolling      : false,\r
 916                 _scrollX       : 0,\r
 917                 _scrollY       : 0,\r
 918                 scrollXPercent : 0,\r
 919                 scrollYPercent : 0,\r
 920                 \r
 921                 _containerNode : null,\r
 922                 scrollManager  : null,\r
 923                 \r
 924                 Constructor : function( layout, args ){\r
 925                         this.SuperConstructor( layout, args );\r
 926                         this._containerNode = _X.Class._getPrivate( this.containerNode );\r
 927                 },\r
 928                 \r
 929                 creationComplete : function(){\r
 930                         _AbstractUINode.prototype.creationComplete.call( this, arguments );\r
 931                         this.scrollManager = new iScroll( this.root, this.User, this.rawElement, this._containerNode.rawElement );\r
 932                         this._check();\r
 933                 },\r
 934                 \r
 935                 calculate : function(){\r
 936                         _AbstractUINode.prototype.calculate.call( this, arguments );\r
 937                         this._check();\r
 938                 },\r
 939                 \r
 940                 _check : function(){\r
 941                         if( this.w < this._containerNode.w || this.h < this._containerNode.h ){\r
 942                                 // scroll\r
 943                                 if( this.scrolling ){\r
 944                                         // fix scroll position from scrollXPercent, scrollYPercent\r
 945                                         \r
 946                                 } else {\r
 947                                         // create scroller\r
 948                                         this.listen( X.UI.Event.POINTER_START, this );\r
 949                                         \r
 950                                         \r
 951                                         this._move( 0, 0 );\r
 952                                         \r
 953                                         this.scrolling = true;\r
 954                                 };\r
 955                         } else\r
 956                         // no scroll\r
 957                         if( this.scrolling ){\r
 958                                 // remove scroller\r
 959                                 \r
 960                                 ( this._scrollX !== 0 || this._scrollY !== 0 ) && this._move( 0, 0 );\r
 961                                 \r
 962                                 delete this.scrolling;\r
 963                         };\r
 964                 },\r
 965                 \r
 966                 handleEvent : function( e ){\r
 967                         switch( e.type ){\r
 968                                 case X.UI.Event.POINTER_START :\r
 969                                         this.listen( X.UI.Event.POINTER_MOVE, this );\r
 970                                         this.listen( X.UI.Event.POINTER_END,  this );\r
 971                                         \r
 972                                         break;\r
 973                                 case X.UI.Event.POINTER_MOVE :\r
 974                                         \r
 975                                         break;\r
 976                                 case X.UI.Event.POINTER_END :\r
 977                                         this.unlisten( X.UI.Event.POINTER_MOVE, this );\r
 978                                         this.unlisten( X.UI.Event.POINTER_END,  this );\r
 979                                         \r
 980                                         break;\r
 981                         };\r
 982                 },\r
 983                 \r
 984                 _move : function( x, y ){\r
 985                         \r
 986                 },\r
 987                 \r
 988                 _remove : function(){\r
 989                         _AbstractUINode.prototype._remove.call( this, arguments );\r
 990                         if( this.scrolling ){\r
 991                                 // remove scroll\r
 992                         };\r
 993                 }\r
 994                 \r
 995         }\r
 996 );\r
 997 \r
 998 })();\r
 999 \r
1000 var ScrollBox = ChromeBox.inherits(\r
1001         'ScrollBox',\r
1002         X.Class.SUPER_ACCESS,\r
1003         _ScrollBox,\r
1004         {\r
1005                 Constructor : function(){\r
1006                         var args = [],\r
1007                                 i    = arguments.length,\r
1008                                 arg, layout;\r
1009                         \r
1010                         for( ; i; ){\r
1011                                 arg = arguments[ --i ];\r
1012                                 if( arg.instanceOf && arg.instanceOf( X.UI.Layout.Base ) ){\r
1013                                         layout = arg;\r
1014                                 } else {\r
1015                                         args[ args.length ] = arg;\r
1016                                 };\r
1017                         };\r
1018                         \r
1019                         this.style = DisplayNodeStyle( this,\r
1020                                 X.Class._newPrivate(\r
1021                                         this,\r
1022                                         X.UI.Layout.Canvas,\r
1023                                         [\r
1024                                                 Box(\r
1025                                                         layout || VerticalLayoutManager,\r
1026                                                         {\r
1027                                                                 name : 'ScrollBox-Scroller',\r
1028                                                                 role : 'container'\r
1029                                                         },\r
1030                                                         args\r
1031                                                 )\r
1032                                         ]\r
1033                                 )\r
1034                         );\r
1035                         this.style.addName( 'ScrollBox' );\r
1036                 },\r
1037                 scrollX  : function(){\r
1038                         \r
1039                 },\r
1040                 scrollY  : function(){\r
1041                         \r
1042                 },\r
1043                 scrollWidth : function(){\r
1044                         \r
1045                 },\r
1046                 scrollHeight : function(){\r
1047                         \r
1048                 },\r
1049                 scrollTo : function( nodeOrX, y ){\r
1050                         \r
1051                 }\r
1052         }\r
1053 );