Fastscroll: Add a user interaction at the omitted items.

Users can jump to a list divider even if shortcut items are omitted.
And its popup is displayed.

Change-Id: I22569c08fdba63f1fa35473a86c1a14234f65e6c

3 files changed, 184 insertions, 64 deletions

diff --git a/demos/tizen-winsets/widgets/fastscroll.html b/demos/tizen-winsets/widgets/fastscroll.html
index 55de45e7..cbf67954 100644
--- a/demos/tizen-winsets/widgets/fastscroll.html
+++ b/demos/tizen-winsets/widgets/fastscroll.html
@@ -53,6 +53,8 @@
 			<li data-role="list-divider">O</li>
 			<li>Organza</li>
 			<li>Orlando</li>
+			<li data-role="list-divider">1</li>
+			<li>1st Store</li>
 		</ul>
 	</div><!-- content -->
 	<div data-role="footer">
diff --git a/src/js/widgets/jquery.mobile.tizen.fastscroll.js b/src/js/widgets/jquery.mobile.tizen.fastscroll.js
index f1e3db37..dd53ca87 100644
--- a/src/js/widgets/jquery.mobile.tizen.fastscroll.js
+++ b/src/js/widgets/jquery.mobile.tizen.fastscroll.js
@@ -102,6 +102,7 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 
 		_primaryLanguage: null,
 		_secondLanguage: null,
+		_dividerMap: {},
 
 		_create: function () {
 			var $el = this.element,
@@ -183,10 +184,27 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 							l = listItem.offset().left - shortcutsListOffset.left,
 							t = listItem.offset().top  - shortcutsListOffset.top,
 							r = l + Math.abs(listItem.outerWidth( true ) ),
-							b = t + Math.abs(listItem.outerHeight( true ) );
+							b = t + Math.abs(listItem.outerHeight( true ) ),
+							unit,
+							baseTop,
+							baseBottom,
+							omitSet,
+							i;
 
 						if ( coords.x >= l && coords.x <= r && coords.y >= t && coords.y <= b ) {
-							self._hitItem( listItem );
+							if ( listItem.text() !== "." ) {
+								self._hitItem( listItem );
+							} else {
+								omitSet = listItem.data( "omitSet" );
+								unit = ( b - t ) / omitSet.length;
+								for ( i = 0; i < omitSet.length; i++ ) {
+									baseTop = t + ( i * unit );
+									baseBottom = baseTop + unit;
+									if ( coords.y >= baseTop && coords.y <= baseBottom ) {
+										self._hitOmitItem( listItem, omitSet.charAt( i ) );
+									}
+								}
+							}
 							return false;
 						}
 						return true;
@@ -220,25 +238,55 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 			} );
 		},
 
-		_hitItem: function ( listItem ) {
+		_hitOmitItem: function ( listItem, text ) {
 			var self = this,
-				$popup = self.scrollview.find( '.ui-fastscroll-popup' );
+				$popup = self.scrollview.find( '.ui-fastscroll-popup' ),
+				divider = self._dividerMap[ text ];
 
-			if ( typeof listItem.data( 'divider' ) !== "undefined" ) {
-				self.jumpToDivider( $( listItem.data( 'divider' ) ) );
+			if ( typeof divider !== "undefined" ) {
+				self.jumpToDivider( $( divider ) );
 			}
 
-			if ( listItem.text() !== "." ) {
-				$popup.text( listItem.text() )
-					.css( { marginLeft: -( $popup.width() / 2 ),
-						marginTop: -( $popup.height() / 2 ),
-						padding: $popup.css( "paddingTop" ) } )
-					.width( $popup.height() )
-					.show();
+			$popup.text( text )
+				.css( { marginLeft: -( $popup.width() / 2 ),
+					marginTop: -( $popup.height() / 2 ),
+					padding: $popup.css( "paddingTop" ) } )
+				.width( $popup.height() )
+				.show();
+
+			$( listItem ).addClass( "ui-fastscroll-hover" );
+			if ( listItem.index() === 0 ) {
+				$( listItem ).addClass( "ui-fastscroll-hover-first-item" );
+			}
+			if ( listItem.index() > 0 ) {
+				$( listItem ).siblings().eq( listItem.index() - 1 ).addClass( "ui-fastscroll-hover-up" );
+			}
+			$( listItem ).siblings().eq( listItem.index() ).addClass( "ui-fastscroll-hover-down" );
+		},
+
+		_hitItem: function ( listItem  ) {
+			var self = this,
+				$popup = self.scrollview.find( '.ui-fastscroll-popup' ),
+				text = listItem.text(),
+				divider;
+
+			if ( text === "#" ) {
+				divider = self._dividerMap.number;
 			} else {
-				$popup.hide();
+				divider = self._dividerMap[ text ];
 			}
 
+			if ( typeof divider !== "undefined" ) {
+				self.jumpToDivider( $( divider ) );
+			}
+
+			$popup.text( text )
+				.css( { marginLeft: -( $popup.width() / 2 ),
+					marginTop: -( $popup.height() / 2 ),
+					padding: $popup.css( "paddingTop" ) } )
+				.width( $popup.height() )
+				.show();
+
 			$( listItem ).addClass( "ui-fastscroll-hover" );
 			if ( listItem.index() === 0 ) {
 				$( listItem ).addClass( "ui-fastscroll-hover-first-item" );
@@ -254,8 +302,10 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 				$popup = self.scrollview.find( '.ui-fastscroll-popup' );
 
 			listItem.focusin( function ( e ) {
+				self.shortcutsList.attr( "aria-hidden", false );
 				self._hitItem( listItem );
 			}).focusout( function ( e ) {
+				self.shortcutsList.attr( "aria-hidden", true );
 				$popup.hide();
 				$( ".ui-fastscroll-hover" ).removeClass( "ui-fastscroll-hover" );
 				$( ".ui-fastscroll-hover-first-item" ).removeClass( "ui-fastscroll-hover-first-item" );
@@ -336,11 +386,60 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 			return omitInfo;
 		},
 
+		_createDividerMap: function () {
+			var self = this,
+				primaryCharacterSet = self._primaryLanguage ? self._primaryLanguage.replace( /,/g, "" ) : null,
+				secondCharacterSet = self._secondLanguage ? self._secondLanguage.replace( /,/g, "" ) : null,
+				numberSet = "0123456789",
+				dividers = self.element.find( '.ui-li-divider' ),
+				map = {},
+				matchToDivider,
+				makeCharacterSet,
+				indexChar,
+				i;
+
+			matchToDivider = function ( index, divider ) {
+				if ( $( divider ).text() === indexChar ) {
+					map[ indexChar ] = divider;
+				}
+			};
+
+			makeCharacterSet = function ( index, divider ) {
+				primaryCharacterSet += $( divider ).text();
+			};
+
+			if ( primaryCharacterSet === null ) {
+				primaryCharacterSet = "";
+				dividers.each( makeCharacterSet );
+			}
+
+			for ( i = 0; i < primaryCharacterSet.length; i++ ) {
+				indexChar = primaryCharacterSet.charAt( i );
+				dividers.each( matchToDivider );
+			}
+
+			if ( secondCharacterSet !== null ) {
+				for ( i = 0; i < secondCharacterSet.length; i++ ) {
+					indexChar = secondCharacterSet.charAt( i );
+					dividers.each( matchToDivider );
+				}
+			}
+
+			dividers.each( function ( index, divider ) {
+				if (  numberSet.search( $( divider ).text() ) !== -1  ) {
+					map.number = divider;
+					return false;
+				}
+			});
+
+			self._dividerMap = map;
+		},
+
 		indexString: function ( indexAlphabet ) {
 			var self = this,
 				characterSet = [];
 
-			if ( typeof indexAlphabet === " undefined" ) {
+			if ( typeof indexAlphabet === "undefined" ) {
 				return self._primaryLanguage + ":" + self._secondLanguage;
 			}
 
@@ -358,7 +457,9 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 				contentHeight = self._contentHeight(),
 				shapItem = $( '<li tabindex="0" aria-label="double to move Number list"><span aria-hidden="true">#</span><span aria-label="Number"/></li>' ),
 				omitIndex = 0,
-				matchToDivider,
+				makeCharacterSet,
+				makeOmitSet,
+				itemHandler,
 				containerHeight,
 				shortcutsItems,
 				shortcutItem,
@@ -380,15 +481,32 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 				size,
 				i;
 
-			matchToDivider = function ( index, divider ) {
-				if ( $( divider ).text() === indexChar ) {
-					shortcutItem.data( 'divider', divider )
-						.bind( 'vclick', function ( e ) {
-							$( divider ).next().focus();
-						} );
+			makeCharacterSet = function ( index, divider ) {
+				primaryCharacterSet += $( divider ).text();
+			};
+
+			makeOmitSet = function ( index, length ) {
+				var count,
+					omitSet = "";
+
+				for ( count = 0; count < length; count++ ) {
+					omitSet += primaryCharacterSet[ index + count ];
+				}
+
+				return omitSet;
+			};
+
+			itemHandler = function ( e ) {
+				var text = $( this ).text(),
+					matchDivider = self._dividerMap[ text ];
+
+				if ( typeof matchDivider !== "undefined" ) {
+					$( matchDivider ).next().focus();
 				}
 			};
 
+			self._createDividerMap();
+
 			self.shortcutsList.find( 'li' ).remove();
 
 			// get all the dividers from the list and turn them into shortcuts
@@ -411,63 +529,58 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 			self.shortcutsList.append( shapItem );
 			self._focusItem( shapItem );
 
-			if ( primaryCharacterSet !== null ) {
-				padding = parseInt( shapItem.css( "padding" ), 10 );
-				minHeight = shapItem.height() + ( padding * 2 );
-				maxNumOfItems = parseInt( ( contentHeight / minHeight ) - 1, 10 );
-				numOfItems = primaryCharacterSet.length;
+			if ( primaryCharacterSet === null ) {
+				primaryCharacterSet = "";
+				dividers.each( makeCharacterSet );
+			}
 
-				maxNumOfItems = secondCharacterSet ? maxNumOfItems - 2 : maxNumOfItems;
+			padding = parseInt( shapItem.css( "padding" ), 10 );
+			minHeight = shapItem.height() + ( padding * 2 );
+			maxNumOfItems = parseInt( ( contentHeight / minHeight ) - 1, 10 );
+			numOfItems = primaryCharacterSet.length;
 
-				if ( maxNumOfItems < 3 ) {
-					shapItem.remove();
-					return;
-				}
+			maxNumOfItems = secondCharacterSet ? maxNumOfItems - 2 : maxNumOfItems;
 
-				omitInfo = self._omit( numOfItems, maxNumOfItems );
+			if ( maxNumOfItems < 3 ) {
+				shapItem.remove();
+				return;
+			}
 
-				for ( i = 0; i < primaryCharacterSet.length; i++ ) {
-					indexChar = primaryCharacterSet.charAt( i );
-					shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
+			omitInfo = self._omit( numOfItems, maxNumOfItems );
 
-					self._focusItem( shortcutItem );
-					dividers.each( matchToDivider );
+			for ( i = 0; i < primaryCharacterSet.length; i++ ) {
+				indexChar = primaryCharacterSet.charAt( i );
+				shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
 
-					if ( typeof omitInfo !== "undefined" && omitInfo[ omitIndex ] > 1 ) {
-						shortcutItem = $( '<li>.</li>' );
-						i += omitInfo[ omitIndex ] - 1;
-					}
+				self._focusItem( shortcutItem );
 
-					shapItem.before( shortcutItem );
-					omitIndex++;
+				if ( typeof omitInfo !== "undefined" && omitInfo[ omitIndex ] > 1 ) {
+					shortcutItem = $( '<li>.</li>' );
+					shortcutItem.data( "omitSet",  makeOmitSet( i, omitInfo[ omitIndex ] ) );
+					i += omitInfo[ omitIndex ] - 1;
+				} else {
+					shortcutItem.bind( 'vclick', itemHandler );
 				}
 
-				if ( secondCharacterSet !== null ) {
-					lastIndex = secondCharacterSet.length - 1;
-					seconds = [];
-
-					seconds.push( secondCharacterSet.charAt( 0 ) );
-					seconds.push( secondCharacterSet.charAt( lastIndex ) );
+				shapItem.before( shortcutItem );
+				omitIndex++;
+			}
 
-					for ( i = 0; i < seconds.length; i++ ) {
-						indexChar = seconds[ i ];
-						shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
+			if ( secondCharacterSet !== null ) {
+				lastIndex = secondCharacterSet.length - 1;
+				seconds = [];
 
-						self._focusItem( shortcutItem );
-						dividers.each( matchToDivider );
+				seconds.push( secondCharacterSet.charAt( 0 ) );
+				seconds.push( secondCharacterSet.charAt( lastIndex ) );
 
-						shapItem.before( shortcutItem );
-					}
-				}
-			} else {
-				dividers.each( function ( index, divider ) {
-					indexChar = $( divider ).text();
+				for ( i = 0; i < seconds.length; i++ ) {
+					indexChar = seconds[ i ];
 					shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
 
-					shortcutItem.data( 'divider', divider );
 					self._focusItem( shortcutItem );
+					shortcutItem.bind( 'vclick', itemHandler );
 					shapItem.before( shortcutItem );
-				} );
+				}
 			}
 
 			containerHeight = self.shortcutsContainer.outerHeight();
diff --git a/tests/unit-tests/fastscroll/fastscroll-tests.js b/tests/unit-tests/fastscroll/fastscroll-tests.js
index 7e0bc53c..2fad2b05 100644
--- a/tests/unit-tests/fastscroll/fastscroll-tests.js
+++ b/tests/unit-tests/fastscroll/fastscroll-tests.js
@@ -10,7 +10,8 @@
 	var unit_fastscroll = function ( list ) {
 		var widget,
 			shortcut,
-			divider;
+			divider,
+			indexString = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z:ㄱ,ㄴ,ㄷ,ㄹ,ㅁ,ㅂ,ㅅ,ㅇ,ㅈ,ㅊ,ㅋ,ㅌ,ㅍ,ㅎ" ;
 
 		widget = list.parentsUntil(".ui-content").parent().find(".ui-fastscroll");
 
@@ -24,6 +25,10 @@
 		for ( i = 0; i < divider.length; i++ ) {
 			equal( $( divider[i] ).text(), $( shortcut[i] ).text(), "Shortcut");
 		}
+
+		/* indexString */
+		list.fastscroll( "indexString", indexString );
+		equal( list.fastscroll( "indexString" ), indexString, "indexString" );
 	};
 
 	test( "shortcut", function () {