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

diff --git a/demos/tizen-winsets/widgets/fastscroll.html b/demos/tizen-winsets/widgets/fastscroll.html
index 55de45e..cbf6795 100644 (file)
--- 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 f1e3db3..dd53ca8 100644 (file)
--- 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 7e0bc53..2fad2b0 100644 (file)
--- 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 () {