scrollview: update and refactoring the scroll effect

Since VI is changed, update the VI.
Use the animate function instead of css animation.
Remove unnecessary function.
Reduce duplicated function call.

Change-Id: I61b41b6b24e41cd0affbde29de64021be59ad72f

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.scrollview.less b/src/themes/tizen/common/jquery.mobile.tizen.scrollview.less
index df842ed..6c8a38c 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.tizen.scrollview.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.scrollview.less
@@ -78,54 +78,6 @@
        height: 37 * @unit_base;
 }
 
-@-webkit-keyframes ui-overflow-show-lite {
-       from {
-               opacity: 0;
-       } to {
-               opacity: 0.2;
-       }
-}
-
-@-webkit-keyframes ui-overflow-show {
-       from {
-               opacity: 0;
-       } to {
-               opacity: 0.5;
-       }
-}
-
-@-webkit-keyframes ui-overflow-show-dark {
-       from {
-               opacity: 0;
-       } to {
-               opacity: 0.8;
-       }
-}
-
-@-webkit-keyframes ui-overflow-hide-lite {
-       from {
-               opacity: 0.2;
-       } to {
-               opacity: 0;
-       }
-}
-
-@-webkit-keyframes ui-overflow-hide {
-       from {
-               opacity: 0.5;
-       } to {
-               opacity: 0;
-       }
-}
-
-@-webkit-keyframes ui-overflow-hide-dark {
-       from {
-               opacity: 0.8;
-       } to {
-               opacity: 0;
-       }
-}
-
 .ui-overflow-indicator-top {
        position: absolute;
        display: block;

diff --git a/src/widgets/common/js/jquery.mobile.tizen.scrollview.js b/src/widgets/common/js/jquery.mobile.tizen.scrollview.js
index d222f38..238e649 100644 (file)
--- a/src/widgets/common/js/jquery.mobile.tizen.scrollview.js
+++ b/src/widgets/common/js/jquery.mobile.tizen.scrollview.js
@@ -133,10 +133,6 @@
                                c,
                                v;
 
-                       this._stopMScroll();
-                       this._showScrollBars();
-                       this._showOverflowIndicator();
-
                        this._$clip.trigger( this.options.startEventName );
 
                        if ( ht ) {
@@ -311,13 +307,17 @@
 
                                this._endEffect = true;
                                this._setOverflowIndicator( this._effect_dir );
+                               this._showOverflowIndicator();
                        } else if ( dir === "out" ) {
                                if ( !this._endEffect ) {
                                        return;
                                }
 
                                this._endEffect = false;
-                               this._setOverflowIndicator( this._effect_dir );
+                       } else {
+                               this._endEffect = false;
+                               this._setOverflowIndicator();
+                               this._showOverflowIndicator();
                        }
                },
 
@@ -369,8 +369,7 @@
                                        }
                                } else {
                                        if ( this._endEffect && this._sy !== y ) {
-                                               this._endEffect = false;
-                                               this._setOverflowIndicator();
+                                               this._setEndEffect();
                                        }
 
                                        this._sy = y;
@@ -732,14 +731,16 @@
                                this._doSnapBackY = false;
                        }
 
-                       this._didDrag = true;
                        this._lastX = ex;
                        this._lastY = ey;
 
                        this._setScrollPosition( newX, newY );
 
-                       this._showScrollBars();
-                       this._showOverflowIndicator();
+                       if ( this._didDrag === false ) {
+                               this._didDrag = true;
+                               this._showScrollBars();
+                               this._showOverflowIndicator();
+                       }
                },
 
                _handleDragStop: function ( e ) {
@@ -885,61 +886,31 @@
                        this._scrollbar_showed = false;
                },
 
-               _resetOverflowIndicator: function () {
-                       if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) {
-                               return;
-                       }
-
-                       this._overflow_top.css( "-webkit-animation", "" );
-                       this._overflow_bottom.css( "-webkit-animation", "" );
-               },
-
                _setOverflowIndicator: function ( dir ) {
                        if ( dir === 1 ) {
-                               this._opacity_top = "0.2";
+                               this._opacity_top = "0";
                                this._opacity_bottom = "0.8";
                        } else if ( dir === 0 ) {
                                this._opacity_top = "0.8";
-                               this._opacity_bottom = "0.2";
+                               this._opacity_bottom = "0";
                        } else {
                                this._opacity_top = "0.5";
                                this._opacity_bottom = "0.5";
                        }
                },
 
-               _getOverflowIndicator: function ( opacity ) {
-                       if ( opacity === "0.2" ) {
-                               return "-lite";
-                       } else if ( opacity === "0.8" ) {
-                               return "-dark";
-                       }
-                       return "";
-               },
-
                _showOverflowIndicator: function () {
                        if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) {
                                return;
                        }
 
-                       this._overflow_top.css( "opacity", this._opacity_top );
-                       this._overflow_bottom.css( "opacity", this._opacity_bottom );
-
-                       if ( this._overflow_showed === true ) {
-                               return;
-                       }
-
-                       this._overflow_top.css( "-webkit-animation", "ui-overflow-show" +
-                                       this._getOverflowIndicator( this._opacity_top ) + " 0.3s 1 ease" );
-                       this._overflow_bottom.css( "-webkit-animation", "ui-overflow-show" +
-                                       this._getOverflowIndicator( this._opacity_bottom ) + " 0.3s 1 ease" );
+                       this._overflow_top.animate( { opacity: this._opacity_top }, 300 );
+                       this._overflow_bottom.animate( { opacity: this._opacity_bottom }, 300 );
 
                        this._overflow_showed = true;
                },
 
                _hideOverflowIndicator: function () {
-                       var opacity_top,
-                               opacity_bottom;
-
                        if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) {
                                return;
                        }
@@ -948,16 +919,8 @@
                                return;
                        }
 
-                       opacity_top = this._overflow_top.css( "opacity" );
-                       opacity_bottom = this._overflow_bottom.css( "opacity" );
-
-                       this._overflow_top.css( "opacity", "0" );
-                       this._overflow_bottom.css( "opacity", "0" );
-
-                       this._overflow_top.css( "-webkit-animation", "ui-overflow-hide" +
-                                       this._getOverflowIndicator( opacity_top ) + " 0.5s 1 ease" );
-                       this._overflow_bottom.css( "-webkit-animation", "ui-overflow-hide" +
-                                       this._getOverflowIndicator( opacity_bottom ) + " 0.5s 1 ease" );
+                       this._overflow_top.animate( { opacity: 0 }, 300 );
+                       this._overflow_bottom.animate( { opacity: 0 }, 300 );
 
                        this._overflow_showed = false;
                        this._setOverflowIndicator();
@@ -1205,7 +1168,6 @@
                                                self._set_scrollbar_size();
                                                self._setScrollPosition( self._sx, self._sy );
                                                self._showScrollBars( 2000 );
-                                               self._resetOverflowIndicator();
                                        }, 0 );
                                });
                },