Export 0.1.63
[platform/framework/web/web-ui-fw.git] / src / widgets / common / js / jquery.mobile.tizen.scrollview.js
1 /*
2 * jQuery Mobile Framework : scrollview plugin
3 * Copyright (c) 2010 Adobe Systems Incorporated - Kin Blas (jblas@adobe.com)
4 * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
5 * Note: Code is in draft form and is subject to change
6 * Modified by Koeun Choi <koeun.choi@samsung.com>
7 * Modified by Minkyu Kang <mk7.kang@samsung.com>
8 */
9
10 (function ( $, window, document, undefined ) {
11
12         function resizePageContentHeight( page ) {
13                 var $page = $( page ),
14                         $content = $page.children(".ui-content"),
15                         hh = $page.children(".ui-header").outerHeight() || 0,
16                         fh = $page.children(".ui-footer").outerHeight() || 0,
17                         pt = parseFloat( $content.css("padding-top") ),
18                         pb = parseFloat( $content.css("padding-bottom") ),
19                         wh = $( window ).height();
20
21                 $content.height( wh - (hh + fh) - (pt + pb) );
22         }
23
24         function MomentumTracker( options ) {
25                 this.options = $.extend( {}, options );
26                 this.easing = "easeOutQuad";
27                 this.reset();
28         }
29
30         var tstates = {
31                 scrolling: 0,
32                 overshot:  1,
33                 snapback:  2,
34                 done:      3
35         };
36
37         function getCurrentTime() {
38                 return Date.now();
39         }
40
41         jQuery.widget( "tizen.scrollview", jQuery.mobile.widget, {
42                 options: {
43                         direction:         null,  // "x", "y", or null for both.
44
45                         timerInterval:     10,
46                         scrollDuration:    1000,  // Duration of the scrolling animation in msecs.
47                         overshootDuration: 250,   // Duration of the overshoot animation in msecs.
48                         snapbackDuration:  500,   // Duration of the snapback animation in msecs.
49
50                         moveThreshold:     30,   // User must move this many pixels in any direction to trigger a scroll.
51                         moveIntervalThreshold:     150,   // Time between mousemoves must not exceed this threshold.
52
53                         scrollMethod:      "translate",  // "translate", "position"
54                         startEventName:    "scrollstart",
55                         updateEventName:   "scrollupdate",
56                         stopEventName:     "scrollstop",
57
58                         eventType:         $.support.touch ? "touch" : "mouse",
59
60                         showScrollBars:    true,
61                         overshootEnable:   false,
62                         outerScrollEnable: true,
63                         overflowEnable:    true,
64                         scrollJump:        false,
65                 },
66
67                 _getViewHeight: function () {
68                         return this._$view.height() + this._view_offset;
69                 },
70
71                 _makePositioned: function ( $ele ) {
72                         if ( $ele.css("position") === "static" ) {
73                                 $ele.css( "position", "relative" );
74                         }
75                 },
76
77                 _create: function () {
78                         var direction,
79                                 self = this;
80
81                         this._$clip = $( this.element ).addClass("ui-scrollview-clip");
82
83                         if ( this._$clip.children(".ui-scrollview-view").length ) {
84                                 this._$view = this._$clip.children(".ui-scrollview-view");
85                         } else {
86                                 this._$view = this._$clip.wrapInner("<div></div>").children()
87                                                         .addClass("ui-scrollview-view");
88                         }
89
90                         if ( this.options.scrollMethod === "translate" ) {
91                                 if ( this._$view.css("transform") === undefined ) {
92                                         this.options.scrollMethod = "position";
93                                 }
94                         }
95
96                         this._$clip.css( "overflow", "hidden" );
97                         this._makePositioned( this._$clip );
98
99                         this._makePositioned( this._$view );
100                         this._$view.css( { left: 0, top: 0 } );
101
102                         this._view_offset = this._$view.offset().top - this._$clip.offset().top;
103                         this._view_height = this._getViewHeight();
104
105                         this._sx = 0;
106                         this._sy = 0;
107
108                         direction = this.options.direction;
109
110                         this._hTracker = ( direction !== "y" ) ?
111                                         new MomentumTracker( this.options ) : null;
112                         this._vTracker = ( direction !== "x" ) ?
113                                         new MomentumTracker( this.options ) : null;
114
115                         this._timerInterval = this.options.timerInterval;
116                         this._timerID = 0;
117
118                         this._timerCB = function () {
119                                 self._handleMomentumScroll();
120                         };
121
122                         this._add_event();
123                         this._add_scrollbar();
124                         this._add_scroll_jump();
125                         this._add_overflow_indicator();
126                 },
127
128                 _startMScroll: function ( speedX, speedY ) {
129                         var keepGoing = false,
130                                 duration = this.options.scrollDuration,
131                                 ht = this._hTracker,
132                                 vt = this._vTracker,
133                                 c,
134                                 v;
135
136                         this._stopMScroll();
137                         this._showScrollBars();
138                         this._showOverflowIndicator();
139
140                         this._$clip.trigger( this.options.startEventName );
141
142                         if ( ht ) {
143                                 c = this._$clip.width();
144                                 v = this._$view.width();
145
146                                 if ( (( this._sx === 0 && speedX > 0 ) ||
147                                         ( this._sx === -(v - c) && speedX < 0 )) &&
148                                                 v > c ) {
149                                         return;
150                                 }
151
152                                 ht.start( this._sx, speedX,
153                                         duration, (v > c) ? -(v - c) : 0, 0 );
154                                 keepGoing = !ht.done();
155                         }
156
157                         if ( vt ) {
158                                 c = this._$clip.height();
159                                 v = this._getViewHeight();
160
161                                 if ( (( this._sy === 0 && speedY > 0 ) ||
162                                         ( this._sy === -(v - c) && speedY < 0 )) &&
163                                                 v > c ) {
164                                         return;
165                                 }
166
167                                 vt.start( this._sy, speedY,
168                                         duration, (v > c) ? -(v - c) : 0, 0 );
169                                 keepGoing = keepGoing || !vt.done();
170                         }
171
172                         if ( keepGoing ) {
173                                 this._timerID = setTimeout( this._timerCB, this._timerInterval );
174                         } else {
175                                 this._stopMScroll();
176                         }
177                 },
178
179                 _stopMScroll: function () {
180                         if ( this._timerID ) {
181                                 this._$clip.trigger( this.options.stopEventName );
182                                 clearTimeout( this._timerID );
183                         }
184                         this._timerID = 0;
185
186                         if ( this._vTracker ) {
187                                 this._vTracker.reset();
188                         }
189
190                         if ( this._hTracker ) {
191                                 this._hTracker.reset();
192                         }
193
194                         this._hideScrollBars();
195                         this._hideOverflowIndicator();
196                 },
197
198                 _handleMomentumScroll: function () {
199                         var keepGoing = false,
200                                 x = 0,
201                                 y = 0,
202                                 scroll_height = 0,
203                                 self = this,
204                                 bouncing = function ( dir ) {
205                                         setTimeout( function () {
206                                                 self._bouncing_dir = dir;
207                                                 self._setBouncing( self._$view, "in" );
208                                         }, 100 );
209
210                                         setTimeout( function () {
211                                                 self._setBouncing( self._$view, "out" );
212                                         }, 350 );
213                                 },
214                                 vt = this._vTracker,
215                                 ht = this._hTracker;
216
217                         if ( this._outerScrolling ) {
218                                 return;
219                         }
220
221                         if ( vt ) {
222                                 vt.update( this.options.overshootEnable );
223                                 y = vt.getPosition();
224                                 keepGoing = !vt.done();
225
226                                 if ( vt.getRemained() > this.options.overshootDuration ) {
227                                         scroll_height = this._getViewHeight() - this._$clip.height();
228
229                                         if ( !vt.isAvail() ) {
230                                                 if ( this._speedY > 0 ) {
231                                                         this._outerScroll( vt.getRemained() / 3, scroll_height );
232                                                 } else {
233                                                         this._outerScroll( y - vt.getRemained() / 3, scroll_height );
234                                                 }
235                                         } else if ( vt.isMin() ) {
236                                                 this._outerScroll( y - vt.getRemained() / 3, scroll_height );
237
238                                                 if ( scroll_height > 0 ) {
239                                                         bouncing( 1 );
240                                                 }
241                                         } else if ( vt.isMax() ) {
242                                                 this._outerScroll( vt.getRemained() / 3, scroll_height );
243
244                                                 if ( scroll_height > 0 ) {
245                                                         bouncing( 0 );
246                                                 }
247                                         }
248                                 }
249                         }
250
251                         if ( ht ) {
252                                 ht.update( this.options.overshootEnable );
253                                 x = ht.getPosition();
254                                 keepGoing = keepGoing || !ht.done();
255                         }
256
257                         this._setScrollPosition( x, y );
258                         this._$clip.trigger( this.options.updateEventName,
259                                         [ { x: x, y: y } ] );
260
261                         if ( keepGoing ) {
262                                 this._timerID = setTimeout( this._timerCB, this._timerInterval );
263                         } else {
264                                 this._stopMScroll();
265                         }
266                 },
267
268                 _setElementTransform: function ( $ele, x, y, duration ) {
269                         var translate,
270                                 transition;
271
272                         if ( this._bouncing ) {
273                                 return;
274                         }
275
276                         if ( !duration || duration === undefined ) {
277                                 transition = "none";
278                         } else {
279                                 transition =  "-webkit-transform " + duration / 1000 + "s ease-out";
280                         }
281
282                         if ( $.support.cssTransform3d ) {
283                                 translate = "translate3d(" + x + "," + y + ", 0px)";
284                         } else {
285                                 translate = "translate(" + x + "," + y + ")";
286                         }
287
288                         $ele.css({
289                                 "-moz-transform": translate,
290                                 "-webkit-transform": translate,
291                                 "-ms-transform": translate,
292                                 "-o-transform": translate,
293                                 "transform": translate,
294                                 "-webkit-transition": transition
295                         });
296                 },
297
298                 _setBouncing: function ( $ele, dir ) {
299                         if ( dir === "in" ) {
300                                 if ( this._bouncing ) {
301                                         return;
302                                 }
303
304                                 this._bouncing = true;
305                                 this._bouncing_count = 1;
306
307                                 this._bouncing_org_x = 1;
308                                 this._bouncing_org_y = 1;
309
310                                 this._bouncing_x = 0.99;
311                                 this._bouncing_y = 0.99;
312
313                                 this._setOverflowIndicator( this._bouncing_dir );
314                         } else if ( dir === "out" ) {
315                                 if ( !this._bouncing ) {
316                                         return;
317                                 }
318
319                                 this._bouncing = false;
320                                 this._bouncing_count = 1;
321
322                                 this._bouncing_org_x = this._bouncing_x;
323                                 this._bouncing_org_y = this._bouncing_y;
324
325                                 this._bouncing_x = 1;
326                                 this._bouncing_y = 1;
327                                 this._setOverflowIndicator( this._bouncing_dir );
328                         } else {
329                                 return;
330                         }
331
332                         this._doBouncing( $ele, dir );
333                 },
334
335                 _doBouncing: function ( $ele, dir ) {
336                         var translate,
337                                 origin,
338                                 x_rate,
339                                 y_rate,
340                                 frame = 10,
341                                 self = this;
342
343                         if ( $.support.cssTransform3d ) {
344                                 translate = "translate3d(" + this._sx + "px," + this._sy + "px, 0px)";
345                         } else {
346                                 translate = "translate(" + this._sx + "px," + this._sy + "px)";
347                         }
348
349                         if ( dir === "in" ) {
350                                 x_rate = this._bouncing_org_x - ( this._bouncing_org_x -
351                                                 this._bouncing_x ) / frame * this._bouncing_count;
352                                 y_rate = this._bouncing_org_y - ( this._bouncing_org_y -
353                                                 this._bouncing_y ) / frame * this._bouncing_count;
354
355                                 translate += " scale(" + x_rate + "," + y_rate + ")";
356                         } else if ( dir === "out" ) {
357                                 x_rate = this._bouncing_org_x + ( this._bouncing_x -
358                                                 this._bouncing_org_x ) / frame * this._bouncing_count;
359                                 y_rate = this._bouncing_org_y + ( this._bouncing_y -
360                                                 this._bouncing_org_y ) / frame * this._bouncing_count;
361
362                                 translate += " scale(" + x_rate + "," + y_rate + ")";
363                         } else {
364                                 return;
365                         }
366
367                         if ( this._bouncing_dir ) {
368                                 origin = "50% " + ( this._bouncing_y * 100 - 10 ) + "%";
369                         } else {
370                                 origin = "50% 10%";
371                         }
372
373                         $ele.css({
374                                 "-moz-transform": translate,
375                                 "-webkit-transform": translate,
376                                 "-ms-transform": translate,
377                                 "-o-transform": translate,
378                                 "transform": translate,
379                                 "-webkit-transform-origin": origin,
380                         });
381
382                         this._bouncing_count++;
383
384                         if ( this._bouncing_count > frame ) {
385                                 return;
386                         }
387
388                         setTimeout( function () {
389                                 self._doBouncing( $ele, dir );
390                         }, this._timerInterval );
391                 },
392
393                 _setCalibration: function ( x, y ) {
394                         if ( this.options.overshootEnable ) {
395                                 this._sx = x;
396                                 this._sy = y;
397                                 return;
398                         }
399
400                         var $v = this._$view,
401                                 $c = this._$clip,
402                                 dirLock = this._directionLock,
403                                 scroll_height = 0,
404                                 scroll_width = 0;
405
406                         if ( dirLock !== "y" && this._hTracker ) {
407                                 scroll_width = $v.width() - $c.width();
408
409                                 if ( x >= 0 ) {
410                                         this._sx = 0;
411                                 } else if ( x < -scroll_width ) {
412                                         this._sx = -scroll_width;
413                                 } else {
414                                         this._sx = x;
415                                 }
416
417                                 if ( scroll_width < 0 ) {
418                                         this._sx = 0;
419                                 }
420                         }
421
422                         if ( dirLock !== "x" && this._vTracker ) {
423                                 scroll_height = this._getViewHeight() - $c.height();
424
425                                 if ( y > 0 ) {
426                                         this._sy = 0;
427
428                                         if ( scroll_height > 0 ) {
429                                                 this._bouncing_dir = 0;
430                                                 this._setBouncing( this._$view, "in" );
431                                         }
432                                 } else if ( y < -scroll_height ) {
433                                         this._sy = -scroll_height;
434
435                                         if ( scroll_height > 0 ) {
436                                                 this._bouncing_dir = 1;
437                                                 this._setBouncing( this._$view, "in" );
438                                         }
439                                 } else {
440                                         if ( this._bouncing && this._sy !== y ) {
441                                                 this._bouncing = false;
442                                         }
443
444                                         this._sy = y;
445                                 }
446
447                                 if ( scroll_height < 0 ) {
448                                         this._sy = 0;
449                                 }
450                         }
451                 },
452
453                 _setScrollPosition: function ( x, y, duration ) {
454                         var $v = this._$view,
455                                 sm = this.options.scrollMethod,
456                                 $vsb = this._$vScrollBar,
457                                 $hsb = this._$hScrollBar,
458                                 $sbt;
459
460                         this._setCalibration( x, y );
461
462                         x = this._sx;
463                         y = this._sy;
464
465                         if ( sm === "translate" ) {
466                                 this._setElementTransform( $v, x + "px", y + "px", duration );
467                         } else {
468                                 $v.css( {left: x + "px", top: y + "px"} );
469                         }
470
471                         if ( $vsb ) {
472                                 $sbt = $vsb.find(".ui-scrollbar-thumb");
473
474                                 if ( sm === "translate" ) {
475                                         this._setElementTransform( $sbt, "0px",
476                                                 -y / this._getViewHeight() * $sbt.parent().height() + "px",
477                                                 duration );
478                                 } else {
479                                         $sbt.css( "top", -y / this._getViewHeight() * 100 + "%" );
480                                 }
481                         }
482
483                         if ( $hsb ) {
484                                 $sbt = $hsb.find(".ui-scrollbar-thumb");
485
486                                 if ( sm === "translate" ) {
487                                         this._setElementTransform( $sbt,
488                                                 -x / $v.width() * $sbt.parent().width() + "px", "0px",
489                                                 duration);
490                                 } else {
491                                         $sbt.css("left", -x / $v.width() * 100 + "%");
492                                 }
493                         }
494                 },
495
496                 _outerScroll: function ( y, scroll_height ) {
497                         var self = this,
498                                 top = $( window ).scrollTop() - window.screenTop,
499                                 sy = 0,
500                                 duration = this.options.snapbackDuration,
501                                 start = getCurrentTime(),
502                                 tfunc;
503
504                         if ( !this.options.outerScrollEnable ) {
505                                 return;
506                         }
507
508                         if ( this._$clip.jqmData("scroll") !== "y" ) {
509                                 return;
510                         }
511
512                         if ( this._outerScrolling ) {
513                                 return;
514                         }
515
516                         if ( y > 0 ) {
517                                 sy = ( window.screenTop ? window.screenTop : -y );
518                         } else if ( y < -scroll_height ) {
519                                 sy = -y - scroll_height;
520                         } else {
521                                 return;
522                         }
523
524                         tfunc = function () {
525                                 var elapsed = getCurrentTime() - start;
526
527                                 if ( elapsed >= duration ) {
528                                         window.scrollTo( 0, top + sy );
529                                         self._outerScrolling = undefined;
530
531                                         self._stopMScroll();
532                                 } else {
533                                         ec = $.easing.easeOutQuad( elapsed / duration,
534                                                         elapsed, 0, 1, duration );
535
536                                         window.scrollTo( 0, top + ( sy * ec ) );
537                                         self._outerScrolling = setTimeout( tfunc, self._timerInterval );
538                                 }
539                         };
540                         this._outerScrolling = setTimeout( tfunc, self._timerInterval );
541                 },
542
543                 _scrollTo: function ( x, y, duration ) {
544                         var self = this,
545                                 start = getCurrentTime(),
546                                 efunc = $.easing.easeOutQuad,
547                                 sx = this._sx,
548                                 sy = this._sy,
549                                 dx = x - sx,
550                                 dy = y - sy,
551                                 tfunc;
552
553                         x = -x;
554                         y = -y;
555
556                         tfunc = function () {
557                                 var elapsed = getCurrentTime() - start,
558                                     ec;
559
560                                 if ( elapsed >= duration ) {
561                                         self._timerID = 0;
562                                         self._setScrollPosition( x, y );
563                                 } else {
564                                         ec = efunc( elapsed / duration, elapsed, 0, 1, duration );
565
566                                         self._setScrollPosition( sx + ( dx * ec ), sy + ( dy * ec ) );
567                                         self._timerID = setTimeout( tfunc, self._timerInterval );
568                                 }
569                         };
570
571                         this._timerID = setTimeout( tfunc, this._timerInterval );
572                 },
573
574                 scrollTo: function ( x, y, duration ) {
575                         this._stopMScroll();
576
577                         if ( !duration || this.options.scrollMethod === "translate" ) {
578                                 this._setScrollPosition( x, y, duration );
579                         } else {
580                                 this._scrollTo( x, y, duration );
581                         }
582                 },
583
584                 getScrollPosition: function () {
585                         return { x: -this._sx, y: -this._sy };
586                 },
587
588                 _getScrollHierarchy: function () {
589                         var svh = [],
590                                 d;
591
592                         this._$clip.parents( ".ui-scrollview-clip").each( function () {
593                                 d = $( this ).jqmData("scrollview");
594                                 if ( d ) {
595                                         svh.unshift( d );
596                                 }
597                         } );
598                         return svh;
599                 },
600
601                 _getAncestorByDirection: function ( dir ) {
602                         var svh = this._getScrollHierarchy(),
603                                 n = svh.length,
604                                 sv,
605                                 svdir;
606
607                         while ( 0 < n-- ) {
608                                 sv = svh[n];
609                                 svdir = sv.options.direction;
610
611                                 if (!svdir || svdir === dir) {
612                                         return sv;
613                                 }
614                         }
615                         return null;
616                 },
617
618                 _handleDragStart: function ( e, ex, ey ) {
619                         this._stopMScroll();
620
621                         this._didDrag = false;
622                         this._skip_dragging = false;
623
624                         var target = $( e.target ),
625                                 self = this,
626                                 $c = this._$clip,
627                                 svdir = this.options.direction;
628
629                         /* should prevent the default behavior when click the button */
630                         this._is_button = target.is( '.ui-btn-text' ) ||
631                                         target.is( '.ui-btn-inner' ) ||
632                                         target.is( '.ui-btn-inner .ui-icon' );
633
634                         if ( this._is_button ) {
635                                 if ( target.parents('.ui-slider-handle').length ) {
636                                         this._skip_dragging = true;
637                                         return;
638                                 }
639                         }
640
641                         /*
642                          * We need to prevent the default behavior to
643                          * suppress accidental selection of text, etc.
644                          */
645                         this._is_inputbox = target.is(':input') ||
646                                         target.parents(':input').length > 0;
647
648                         if ( this._is_inputbox ) {
649                                 target.one( "resize.scrollview", function () {
650                                         if ( ey > $c.height() ) {
651                                                 self.scrollTo( -ex, self._sy - ey + $c.height(),
652                                                         self.options.snapbackDuration );
653                                         }
654                                 });
655                         }
656
657                         if ( this.options.eventType === "mouse" && !this._is_inputbox && !this._is_button ) {
658                                 e.preventDefault();
659                         }
660
661                         this._lastX = ex;
662                         this._lastY = ey;
663                         this._startY = ey;
664                         this._doSnapBackX = false;
665                         this._doSnapBackY = false;
666                         this._speedX = 0;
667                         this._speedY = 0;
668                         this._directionLock = "";
669
670                         this._lastMove = 0;
671                         this._enableTracking();
672
673                         this._set_scrollbar_size();
674                 },
675
676                 _propagateDragMove: function ( sv, e, ex, ey, dir ) {
677                         this._hideScrollBars();
678                         this._hideOverflowIndicator();
679                         this._disableTracking();
680                         sv._handleDragStart( e, ex, ey );
681                         sv._directionLock = dir;
682                         sv._didDrag = this._didDrag;
683                 },
684
685                 _handleDragMove: function ( e, ex, ey ) {
686                         if ( this._skip_dragging ) {
687                                 return;
688                         }
689
690                         if ( !this._dragging ) {
691                                 return;
692                         }
693
694                         if ( !this._is_inputbox && !this._is_button ) {
695                                 e.preventDefault();
696                         }
697
698                         var mt = this.options.moveThreshold,
699                                 dx = ex - this._lastX,
700                                 dy = ey - this._lastY,
701                                 svdir = this.options.direction,
702                                 dir = null,
703                                 x,
704                                 y,
705                                 sv,
706                                 scope,
707                                 newX,
708                                 newY,
709                                 dirLock;
710
711                         this._lastMove = getCurrentTime();
712
713                         if ( !this._directionLock ) {
714                                 x = Math.abs( dx );
715                                 y = Math.abs( dy );
716
717                                 if ( x < mt && y < mt ) {
718                                         return false;
719                                 }
720
721                                 if ( x < y && (x / y) < 0.5 ) {
722                                         dir = "y";
723                                 } else if ( x > y && (y / x) < 0.5 ) {
724                                         dir = "x";
725                                 }
726
727                                 if ( svdir && dir && svdir !== dir ) {
728                                         /*
729                                          * This scrollview can't handle the direction the user
730                                          * is attempting to scroll. Find an ancestor scrollview
731                                          * that can handle the request.
732                                          */
733
734                                         sv = this._getAncestorByDirection( dir );
735                                         if ( sv ) {
736                                                 this._propagateDragMove( sv, e, ex, ey, dir );
737                                                 return false;
738                                         }
739                                 }
740
741                                 this._directionLock = svdir || (dir || "none");
742                         }
743
744                         newX = this._sx;
745                         newY = this._sy;
746                         dirLock = this._directionLock;
747
748                         if ( dirLock !== "y" && this._hTracker ) {
749                                 x = this._sx;
750                                 this._speedX = dx;
751                                 newX = x + dx;
752
753                                 this._doSnapBackX = false;
754
755                                 scope = ( newX > 0 || newX < this._maxX );
756
757                                 if ( scope && dirLock === "x" ) {
758                                         sv = this._getAncestorByDirection("x");
759                                         if ( sv ) {
760                                                 this._setScrollPosition( newX > 0 ?
761                                                                 0 : this._maxX, newY );
762                                                 this._propagateDragMove( sv, e, ex, ey, dir );
763                                                 return false;
764                                         }
765
766                                         newX = x + ( dx / 2 );
767                                         this._doSnapBackX = true;
768                                 }
769                         }
770
771                         if ( dirLock !== "x" && this._vTracker ) {
772                                 if ( Math.abs( this._startY - ey ) < mt && dirLock !== "xy" ) {
773                                         return;
774                                 }
775
776                                 y = this._sy;
777                                 this._speedY = dy;
778                                 newY = y + dy;
779
780                                 this._doSnapBackY = false;
781
782                                 scope = ( newY > 0 || newY < this._maxY );
783
784                                 if ( scope && dirLock === "y" ) {
785                                         sv = this._getAncestorByDirection("y");
786                                         if ( sv ) {
787                                                 this._setScrollPosition( newX,
788                                                                 newY > 0 ? 0 : this._maxY );
789                                                 this._propagateDragMove( sv, e, ex, ey, dir );
790                                                 return false;
791                                         }
792
793                                         newY = y + ( dy / 2 );
794                                         this._doSnapBackY = true;
795                                 }
796                         }
797
798                         if ( this.options.overshootEnable === false ) {
799                                 this._doSnapBackX = false;
800                                 this._doSnapBackY = false;
801                         }
802
803                         this._didDrag = true;
804                         this._lastX = ex;
805                         this._lastY = ey;
806
807                         this._setScrollPosition( newX, newY );
808
809                         this._showScrollBars();
810                         this._showOverflowIndicator();
811                 },
812
813                 _handleDragStop: function ( e ) {
814                         if ( this._skip_dragging ) {
815                                 return;
816                         }
817
818                         var l = this._lastMove,
819                                 t = getCurrentTime(),
820                                 doScroll = (l && (t - l) <= this.options.moveIntervalThreshold),
821                                 sx = ( this._hTracker && this._speedX && doScroll ) ?
822                                                 this._speedX : ( this._doSnapBackX ? 1 : 0 ),
823                                 sy = ( this._vTracker && this._speedY && doScroll ) ?
824                                                 this._speedY : ( this._doSnapBackY ? 1 : 0 ),
825                                 svdir = this.options.direction,
826                                 x,
827                                 y;
828
829                         if ( sx || sy ) {
830                                 if ( !this._setGestureScroll( sx, sy ) ) {
831                                         this._startMScroll( sx, sy );
832                                 }
833                         } else {
834                                 this._hideScrollBars();
835                                 this._hideOverflowIndicator();
836                         }
837
838                         this._disableTracking();
839
840                         if ( this._bouncing ) {
841                                 this._setBouncing( this._$view, "out" );
842                                 this._hideScrollBars();
843                                 this._hideOverflowIndicator();
844                         }
845
846                         return !this._didDrag;
847                 },
848
849                 _setGestureScroll: function ( sx, sy ) {
850                         var self = this,
851                                 reset = function () {
852                                         clearTimeout( self._gesture_timer );
853                                         self._gesture_dir = 0;
854                                         self._gesture_count = 0;
855                                         self._gesture_timer = undefined;
856                                 };
857
858                         if ( !sy ) {
859                                 return false;
860                         }
861
862                         dir = sy > 0 ? 1 : -1;
863
864                         if ( !this._gesture_timer ) {
865                                 this._gesture_count = 1;
866                                 this._gesture_dir = dir;
867
868                                 this._gesture_timer = setTimeout( function () {
869                                         reset();
870                                 }, 1000 );
871
872                                 return false;
873                         }
874
875                         if ( this._gesture_dir !== dir ) {
876                                 reset();
877                                 return false;
878                         }
879
880                         this._gesture_count++;
881
882                         if ( this._gesture_count === 3 ) {
883                                 if ( dir > 0 ) {
884                                         this.scrollTo( 0, 0, this.options.overshootDuration );
885                                 } else {
886                                         this.scrollTo( 0, -( this._getViewHeight() - this._$clip.height() ),
887                                                         this.options.overshootDuration );
888                                 }
889                                 reset();
890
891                                 return true;
892                         }
893
894                         return false;
895                 },
896
897                 _enableTracking: function () {
898                         this._dragging = true;
899                 },
900
901                 _disableTracking: function () {
902                         this._dragging = false;
903                 },
904
905                 _showScrollBars: function ( interval ) {
906                         var vclass = "ui-scrollbar-visible",
907                                 self = this;
908
909                         if ( !this.options.showScrollBars ) {
910                                 return;
911                         }
912                         if ( this._scrollbar_showed ) {
913                                 return;
914                         }
915
916                         if ( this._$vScrollBar ) {
917                                 this._$vScrollBar.addClass( vclass );
918                         }
919                         if ( this._$hScrollBar ) {
920                                 this._$hScrollBar.addClass( vclass );
921                         }
922
923                         this._scrollbar_showed = true;
924
925                         if ( interval ) {
926                                 setTimeout( function () {
927                                         self._hideScrollBars();
928                                 }, interval );
929                         }
930                 },
931
932                 _hideScrollBars: function () {
933                         var vclass = "ui-scrollbar-visible";
934
935                         if ( !this.options.showScrollBars ) {
936                                 return;
937                         }
938                         if ( !this._scrollbar_showed ) {
939                                 return;
940                         }
941
942                         if ( this._$vScrollBar ) {
943                                 this._$vScrollBar.removeClass( vclass );
944                         }
945                         if ( this._$hScrollBar ) {
946                                 this._$hScrollBar.removeClass( vclass );
947                         }
948
949                         this._scrollbar_showed = false;
950                 },
951
952                 _resetOverflowIndicator: function () {
953                         if ( !this.options.overflowEnable || !this._overflowAvail ) {
954                                 return;
955                         }
956
957                         this._overflow_top.css( "-webkit-animation", "" );
958                         this._overflow_bottom.css( "-webkit-animation", "" );
959                 },
960
961                 _setOverflowIndicator: function ( dir ) {
962                         if ( dir === 1 ) {
963                                 this._opacity_top = "0.2";
964                                 this._opacity_bottom = "0.8";
965                         } else if ( dir === 0 ) {
966                                 this._opacity_top = "0.8";
967                                 this._opacity_bottom = "0.2";
968                         } else {
969                                 this._opacity_top = "0.5";
970                                 this._opacity_bottom = "0.5";
971                         }
972                 },
973
974                 _getOverflowIndicator: function ( opacity ) {
975                         if ( opacity === "0.2" ) {
976                                 return "-lite";
977                         } else if ( opacity === "0.8" ) {
978                                 return "-dark";
979                         }
980                         return "";
981                 },
982
983                 _showOverflowIndicator: function () {
984                         if ( !this.options.overflowEnable || !this._overflowAvail ) {
985                                 return;
986                         }
987
988                         this._overflow_top.css( "opacity", this._opacity_top );
989                         this._overflow_bottom.css( "opacity", this._opacity_bottom );
990
991                         if ( this._overflow_showed === true ) {
992                                 return;
993                         }
994
995                         this._overflow_top.css( "-webkit-animation", "ui-overflow-show" +
996                                         this._getOverflowIndicator( this._opacity_top ) + " 0.3s 1 ease" );
997                         this._overflow_bottom.css( "-webkit-animation", "ui-overflow-show" +
998                                         this._getOverflowIndicator( this._opacity_bottom ) + " 0.3s 1 ease" );
999
1000                         this._overflow_showed = true;
1001                 },
1002
1003                 _hideOverflowIndicator: function () {
1004                         var opacity_top,
1005                                 opacity_bottom;
1006
1007                         if ( !this.options.overflowEnable || !this._overflowAvail ) {
1008                                 return;
1009                         }
1010
1011                         if ( this._overflow_showed === false ) {
1012                                 return;
1013                         }
1014
1015                         opacity_top = this._overflow_top.css( "opacity" );
1016                         opacity_bottom = this._overflow_bottom.css( "opacity" );
1017
1018                         this._overflow_top.css( "opacity", "0" );
1019                         this._overflow_bottom.css( "opacity", "0" );
1020
1021                         this._overflow_top.css( "-webkit-animation", "ui-overflow-hide" +
1022                                         this._getOverflowIndicator( opacity_top ) + " 0.5s 1 ease" );
1023                         this._overflow_bottom.css( "-webkit-animation", "ui-overflow-hide" +
1024                                         this._getOverflowIndicator( opacity_bottom ) + " 0.5s 1 ease" );
1025
1026                         this._overflow_showed = false;
1027                         this._setOverflowIndicator();
1028                 },
1029
1030                 _add_event: function () {
1031                         var self = this,
1032                                 $c = this._$clip,
1033                                 $v = this._$view;
1034
1035                         if ( this.options.eventType === "mouse" ) {
1036                                 this._dragEvt = "mousedown mousemove mouseup click mousewheel";
1037
1038                                 this._dragCB = function ( e ) {
1039                                         switch ( e.type ) {
1040                                         case "mousedown":
1041                                                 return self._handleDragStart( e,
1042                                                                 e.clientX, e.clientY );
1043
1044                                         case "mousemove":
1045                                                 return self._handleDragMove( e,
1046                                                                 e.clientX, e.clientY );
1047
1048                                         case "mouseup":
1049                                                 return self._handleDragStop( e );
1050
1051                                         case "click":
1052                                                 return !self._didDrag;
1053
1054                                         case "mousewheel":
1055                                                 var old = self.getScrollPosition();
1056                                                 self.scrollTo( -old.x,
1057                                                         -(old.y - e.originalEvent.wheelDelta) );
1058                                                 break;
1059                                         }
1060                                 };
1061                         } else {
1062                                 this._dragEvt = "touchstart touchmove touchend click";
1063
1064                                 this._dragCB = function ( e ) {
1065                                         var t;
1066
1067                                         switch ( e.type ) {
1068                                         case "touchstart":
1069                                                 t = e.originalEvent.targetTouches[0];
1070                                                 return self._handleDragStart( e,
1071                                                                 t.pageX, t.pageY );
1072
1073                                         case "touchmove":
1074                                                 t = e.originalEvent.targetTouches[0];
1075                                                 return self._handleDragMove( e,
1076                                                                 t.pageX, t.pageY );
1077
1078                                         case "touchend":
1079                                                 return self._handleDragStop( e );
1080
1081                                         case "click":
1082                                                 return !self._didDrag;
1083                                         }
1084                                 };
1085                         }
1086
1087                         $v.bind( this._dragEvt, this._dragCB );
1088
1089                         $c.bind( "updatelayout", function ( e ) {
1090                                 var sy,
1091                                         vh,
1092                                         view_h = self._getViewHeight();
1093
1094                                 if ( !$c.height() || !view_h ) {
1095                                         self.scrollTo( 0, 0, 0 );
1096                                         return;
1097                                 }
1098
1099                                 sy = $c.height() - view_h;
1100                                 vh = view_h - self._view_height;
1101
1102                                 self._view_height = view_h;
1103
1104                                 if ( vh == 0 || vh > $c.height() / 2 ) {
1105                                         return;
1106                                 }
1107
1108                                 if ( self._sy - sy <= -vh ) {
1109                                         self.scrollTo( 0, sy,
1110                                                 self.options.snapbackDuration );
1111                                 } else if ( self._sy - sy <= vh + self.options.moveThreshold ) {
1112                                         self.scrollTo( 0, sy,
1113                                                 self.options.snapbackDuration );
1114                                 }
1115                         });
1116
1117                         $( window ).bind( "resize", function ( e ) {
1118                                 var focused,
1119                                         view_h = self._getViewHeight();
1120
1121                                 if ( $(".ui-page-active").get(0) !== $c.closest(".ui-page").get(0) ) {
1122                                         return;
1123                                 }
1124
1125                                 if ( !$c.height() || !view_h ) {
1126                                         return;
1127                                 }
1128
1129                                 focused = $c.find(".ui-focus");
1130
1131                                 if ( focused ) {
1132                                         focused.trigger("resize.scrollview");
1133                                 }
1134
1135                                 /* calibration - after triggered throttledresize */
1136                                 setTimeout( function () {
1137                                         if ( self._sy < $c.height() - self._getViewHeight() ) {
1138                                                 self.scrollTo( 0, $c.height() - self._getViewHeight(),
1139                                                         self.options.overshootDuration );
1140                                         }
1141                                 }, 260 );
1142
1143                                 self._view_height = view_h;
1144                         });
1145
1146                         $c.closest(".ui-page")
1147                                 .one( "pageshow", function ( e ) {
1148                                         self._view_offset = self._$view.offset().top - self._$clip.offset().top;
1149                                         self._view_height = self._getViewHeight();
1150                                 })
1151                                 .bind( "pageshow", function ( e ) {
1152                                         /* should be called after pagelayout */
1153                                         setTimeout( function () {
1154                                                 self._set_scrollbar_size();
1155                                                 self._setScrollPosition( self._sx, self._sy );
1156                                                 self._showScrollBars( 2000 );
1157                                                 self._resetOverflowIndicator();
1158                                         }, 0 );
1159                                 });
1160                 },
1161
1162                 _add_scrollbar: function () {
1163                         var $c = this._$clip,
1164                                 prefix = "<div class=\"ui-scrollbar ui-scrollbar-",
1165                                 suffix = "\"><div class=\"ui-scrollbar-track\"><div class=\"ui-scrollbar-thumb\"></div></div></div>";
1166
1167                         if ( !this.options.showScrollBars ) {
1168                                 return;
1169                         }
1170
1171                         if ( this._vTracker ) {
1172                                 $c.append( prefix + "y" + suffix );
1173                                 this._$vScrollBar = $c.children(".ui-scrollbar-y");
1174                         }
1175                         if ( this._hTracker ) {
1176                                 $c.append( prefix + "x" + suffix );
1177                                 this._$hScrollBar = $c.children(".ui-scrollbar-x");
1178                         }
1179
1180                         this._scrollbar_showed = false;
1181                 },
1182
1183                 _add_scroll_jump: function () {
1184                         var $c = this._$clip,
1185                                 self = this,
1186                                 top_btn,
1187                                 left_btn;
1188
1189                         if ( !this.options.scrollJump ) {
1190                                 return;
1191                         }
1192
1193                         if ( this._vTracker ) {
1194                                 top_btn = $( '<div class="ui-scroll-jump-top-bg">' +
1195                                                 '<div data-role="button" data-inline="true" data-icon="jumptop" style="width:37px;height:37px">.</div></div>' );
1196                                 $c.append( top_btn ).trigger("create");
1197
1198                                 top_btn.bind( "vclick", function () {
1199                                         self.scrollTo( 0, 0, self.options.overshootDuration );
1200                                 } );
1201                         }
1202
1203                         if ( this._hTracker ) {
1204                                 left_btn = $( '<div class="ui-scroll-jump-left-bg">' +
1205                                                 '<div data-role="button" data-inline="true" data-icon="jumpleft" style="width:37px;height:37px">.</div></div>' );
1206                                 $c.append( left_btn ).trigger("create");
1207
1208                                 left_btn.bind( "vclick", function () {
1209                                         self.scrollTo( 0, 0, self.options.overshootDuration );
1210                                 } );
1211                         }
1212                 },
1213
1214                 _add_overflow_indicator: function () {
1215                         if ( !this.options.overflowEnable ) {
1216                                 return;
1217                         }
1218
1219                         this._overflow_top = $( '<div class="ui-overflow-indicator-top"></div>' );
1220                         this._overflow_bottom = $( '<div class="ui-overflow-indicator-bottom"></div>' );
1221
1222                         this._$clip.append( this._overflow_top );
1223                         this._$clip.append( this._overflow_bottom );
1224
1225                         this._opacity_top = "0.5";
1226                         this._opacity_bottom = "0.5";
1227                         this._overflow_showed = false;
1228                 },
1229
1230                 _set_scrollbar_size: function () {
1231                         var $c = this._$clip,
1232                                 $v = this._$view,
1233                                 cw = 0,
1234                                 vw = 0,
1235                                 ch = 0,
1236                                 vh = 0,
1237                                 thumb;
1238
1239                         if ( !this.options.showScrollBars ) {
1240                                 return;
1241                         }
1242
1243                         if ( this._hTracker ) {
1244                                 cw = $c.width();
1245                                 vw = $v.width();
1246                                 this._maxX = cw - vw;
1247
1248                                 if ( this._maxX > 0 ) {
1249                                         this._maxX = 0;
1250                                 }
1251                                 if ( this._$hScrollBar && vw ) {
1252                                         thumb = this._$hScrollBar.find(".ui-scrollbar-thumb");
1253                                         thumb.css( "width", (cw >= vw ? "0" :
1254                                                         (Math.floor(cw / vw * 100) || 1) + "%") );
1255                                 }
1256                         }
1257
1258                         if ( this._vTracker ) {
1259                                 ch = $c.height();
1260                                 vh = this._getViewHeight();
1261                                 this._maxY = ch - vh;
1262
1263                                 if ( this._maxY > 0 ) {
1264                                         this._maxY = 0;
1265                                 }
1266                                 if ( this._$vScrollBar && vh ) {
1267                                         thumb = this._$vScrollBar.find(".ui-scrollbar-thumb");
1268                                         thumb.css( "height", (ch >= vh ? "0" :
1269                                                         (Math.floor(ch / vh * 100) || 1) + "%") );
1270
1271                                         this._overflowAvail = !!thumb.height();
1272                                 }
1273                         }
1274                 }
1275         });
1276
1277         $.extend( MomentumTracker.prototype, {
1278                 start: function ( pos, speed, duration, minPos, maxPos ) {
1279                         var tstate = ( pos < minPos || pos > maxPos ) ?
1280                                         tstates.snapback : tstates.scrolling,
1281                                 pos_temp;
1282
1283                         this.state = ( speed !== 0 ) ? tstate : tstates.done;
1284                         this.pos = pos;
1285                         this.speed = speed;
1286                         this.duration = ( this.state === tstates.snapback ) ?
1287                                         this.options.snapbackDuration : duration;
1288                         this.minPos = minPos;
1289                         this.maxPos = maxPos;
1290
1291                         this.fromPos = ( this.state === tstates.snapback ) ? this.pos : 0;
1292                         pos_temp = ( this.pos < this.minPos ) ? this.minPos : this.maxPos;
1293                         this.toPos = ( this.state === tstates.snapback ) ? pos_temp : 0;
1294
1295                         this.startTime = getCurrentTime();
1296                 },
1297
1298                 reset: function () {
1299                         this.state = tstates.done;
1300                         this.pos = 0;
1301                         this.speed = 0;
1302                         this.minPos = 0;
1303                         this.maxPos = 0;
1304                         this.duration = 0;
1305                         this.remained = 0;
1306                 },
1307
1308                 update: function ( overshootEnable ) {
1309                         var state = this.state,
1310                                 cur_time = getCurrentTime(),
1311                                 duration = this.duration,
1312                                 elapsed =  cur_time - this.startTime,
1313                                 dx,
1314                                 x,
1315                                 didOverShoot;
1316
1317                         if ( state === tstates.done ) {
1318                                 return this.pos;
1319                         }
1320
1321                         elapsed = elapsed > duration ? duration : elapsed;
1322
1323                         this.remained = duration - elapsed;
1324
1325                         if ( state === tstates.scrolling || state === tstates.overshot ) {
1326                                 dx = this.speed *
1327                                         ( 1 - $.easing[this.easing]( elapsed / duration,
1328                                                                 elapsed, 0, 1, duration ) );
1329
1330                                 x = this.pos + dx;
1331
1332                                 didOverShoot = ( state === tstates.scrolling ) &&
1333                                         ( x < this.minPos || x > this.maxPos );
1334
1335                                 if ( didOverShoot ) {
1336                                         x = ( x < this.minPos ) ? this.minPos : this.maxPos;
1337                                 }
1338
1339                                 this.pos = x;
1340
1341                                 if ( state === tstates.overshot ) {
1342                                         if ( !overshootEnable ) {
1343                                                 this.state = tstates.done;
1344                                         }
1345                                         if ( elapsed >= duration ) {
1346                                                 this.state = tstates.snapback;
1347                                                 this.fromPos = this.pos;
1348                                                 this.toPos = ( x < this.minPos ) ?
1349                                                                 this.minPos : this.maxPos;
1350                                                 this.duration = this.options.snapbackDuration;
1351                                                 this.startTime = cur_time;
1352                                                 elapsed = 0;
1353                                         }
1354                                 } else if ( state === tstates.scrolling ) {
1355                                         if ( didOverShoot && overshootEnable ) {
1356                                                 this.state = tstates.overshot;
1357                                                 this.speed = dx / 2;
1358                                                 this.duration = this.options.overshootDuration;
1359                                                 this.startTime = cur_time;
1360                                         } else if ( elapsed >= duration ) {
1361                                                 this.state = tstates.done;
1362                                         }
1363                                 }
1364                         } else if ( state === tstates.snapback ) {
1365                                 if ( elapsed >= duration ) {
1366                                         this.pos = this.toPos;
1367                                         this.state = tstates.done;
1368                                 } else {
1369                                         this.pos = this.fromPos + (( this.toPos - this.fromPos ) *
1370                                                 $.easing[this.easing]( elapsed / duration,
1371                                                         elapsed, 0, 1, duration ));
1372                                 }
1373                         }
1374
1375                         return this.pos;
1376                 },
1377
1378                 done: function () {
1379                         return this.state === tstates.done;
1380                 },
1381
1382                 isMin: function () {
1383                         return this.pos === this.minPos;
1384                 },
1385
1386                 isMax: function () {
1387                         return this.pos === this.maxPos;
1388                 },
1389
1390                 isAvail: function () {
1391                         return !( this.minPos === this.maxPos );
1392                 },
1393
1394                 getRemained: function () {
1395                         return this.remained;
1396                 },
1397
1398                 getPosition: function () {
1399                         return this.pos;
1400                 }
1401         });
1402
1403         $( document ).bind( 'pagecreate create', function ( e ) {
1404                 var $page = $( e.target ),
1405                         content_scroll = $page.find(".ui-content").jqmData("scroll");
1406
1407                 /* content scroll */
1408                 if ( $.support.scrollview === undefined ) {
1409                         $.support.scrollview = true;
1410                 }
1411
1412                 if ( $.support.scrollview === true && content_scroll === undefined ) {
1413                         content_scroll = "y";
1414                 }
1415
1416                 if ( content_scroll !== "y" ) {
1417                         content_scroll = "none";
1418                 }
1419
1420                 $page.find(".ui-content").attr( "data-scroll", content_scroll );
1421
1422                 $page.find(":jqmData(scroll):not(.ui-scrollview-clip)").each( function () {
1423                         if ( $( this ).hasClass("ui-scrolllistview") ) {
1424                                 $( this ).scrolllistview();
1425                         } else {
1426                                 var st = $( this ).jqmData("scroll"),
1427                                         dir = st && ( st.search(/^[xy]/) !== -1 ) ? st : null,
1428                                         content = $(this).hasClass("ui-content"),
1429                                         opts;
1430
1431                                 if ( st === "none" ) {
1432                                         return;
1433                                 }
1434
1435                                 opts = {
1436                                         direction: dir || undefined,
1437                                         overflowEnable: content,
1438                                         scrollMethod: $( this ).jqmData("scroll-method") || undefined,
1439                                         scrollJump: $( this ).jqmData("scroll-jump") || undefined
1440                                 };
1441
1442                                 $( this ).scrollview( opts );
1443                         }
1444                 });
1445         });
1446
1447         $( document ).bind( 'pageshow', function ( e ) {
1448                 var $page = $( e.target ),
1449                         scroll = $page.find(".ui-content").jqmData("scroll");
1450
1451                 if ( scroll === "y" ) {
1452                         resizePageContentHeight( e.target );
1453                 }
1454         });
1455
1456 }( jQuery, window, document ) );