From 91265e918190613fa719b7f98b52c0f38455be18 Mon Sep 17 00:00:00 2001 From: "yonghwi0324.park" Date: Fri, 12 Apr 2013 16:17:30 +0900 Subject: [PATCH] Fastscroll: Add a feature to fade out Fastscroll widget. Fastscroll widget fades out if there is no interaction during the 500 milliseconds. And then it shows up again when there is a scrollstart event. Change-Id: I45cb6ca1e811cea6b42afa99ee5677865735b74b --- src/js/widgets/jquery.mobile.tizen.fastscroll.js | 40 ++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/js/widgets/jquery.mobile.tizen.fastscroll.js b/src/js/widgets/jquery.mobile.tizen.fastscroll.js index dd53ca8..a8e89b0 100644 --- a/src/js/widgets/jquery.mobile.tizen.fastscroll.js +++ b/src/js/widgets/jquery.mobile.tizen.fastscroll.js @@ -103,6 +103,10 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { _primaryLanguage: null, _secondLanguage: null, _dividerMap: {}, + _defaultTime: 500, + _defaultDuration: 500, + _timer: null, + _isFadeOut: false, _create: function () { var $el = this.element, @@ -160,6 +164,10 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { var coords = $.mobile.tizen.targetRelativeCoordsFromEvent( e ), shortcutsListOffset = self.shortcutsList.offset(); + if ( self._isFadeOut === true ) { + return; + } + // If the element is a list item, get coordinates relative to the shortcuts list if ( e.target.tagName.toLowerCase() === "li" ) { coords.x += $( e.target ).offset().left - shortcutsListOffset.left; @@ -210,6 +218,8 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { return true; } ); + self._setTimer( false ); + e.preventDefault(); e.stopPropagation(); } ) @@ -220,6 +230,7 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { $( ".ui-fastscroll-hover-first-item" ).removeClass( "ui-fastscroll-hover-first-item" ); $( ".ui-fastscroll-hover-up" ).removeClass( "ui-fastscroll-hover-up" ); $( ".ui-fastscroll-hover-down" ).removeClass( "ui-fastscroll-hover-down" ); + self._setTimer( true ); } ); if ( page && !( page.is( ':visible' ) ) ) { @@ -236,6 +247,12 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { $( window ).unbind( ".fastscroll" ).bind( "resize.fastscroll", function ( e ) { self.refresh(); } ); + + self.scrollview.bind( "scrollstart", function ( e ) { + self._setTimer( false ); + }).bind( "scrollstop", function ( e ) { + self._setTimer( true ); + }); }, _hitOmitItem: function ( listItem, text ) { @@ -304,6 +321,7 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { listItem.focusin( function ( e ) { self.shortcutsList.attr( "aria-hidden", false ); self._hitItem( listItem ); + self._setTimer( false ); }).focusout( function ( e ) { self.shortcutsList.attr( "aria-hidden", true ); $popup.hide(); @@ -311,6 +329,7 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { $( ".ui-fastscroll-hover-first-item" ).removeClass( "ui-fastscroll-hover-first-item" ); $( ".ui-fastscroll-hover-up" ).removeClass( "ui-fastscroll-hover-up" ); $( ".ui-fastscroll-hover-down" ).removeClass( "ui-fastscroll-hover-down" ); + self._setTimer( true ); }); }, @@ -435,6 +454,24 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { self._dividerMap = map; }, + _setTimer: function ( start ) { + var self = this; + + if ( start === true ) { + self._timer = setTimeout( function () { + self._isFadeOut = true; + self.shortcutsContainer.fadeOut( self._defaultDuration, function () { + self._isFadeOut = false; + }); + }, self._defaultTime ); + } else { + if ( self._timer !== null ) { + clearTimeout( self._timer ); + } + self.shortcutsContainer.show(); + } + }, + indexString: function ( indexAlphabet ) { var self = this, characterSet = []; @@ -610,6 +647,9 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) { // make the scrollview clip tall enough to show the whole of the shortcutslist minClipHeight = shortcutsTop + self.shortcutsContainer.outerHeight() + 'px'; self.scrollview.css( 'min-height', minClipHeight ); + + self._setTimer( false ); + self._setTimer( true ); } } ); -- 2.7.4