tizen-web-ui-fw/latest/js/src/widgets/jquery.mobile.tizen.fastscroll.js

   1
   2 /*
   3  * jQuery Mobile Widget @VERSION
   4  *
   5  * This software is licensed under the MIT licence (as defined by the OSI at
   6  * http://www.opensource.org/licenses/mit-license.php)
   7  *
   8  * ***************************************************************************
   9  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
  10  * Copyright (c) 2011 by Intel Corporation Ltd.
  11  *
  12  * Permission is hereby granted, free of charge, to any person obtaining a
  13  * copy of this software and associated documentation files (the "Software"),
  14  * to deal in the Software without restriction, including without limitation
  15  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  16  * and/or sell copies of the Software, and to permit persons to whom the
  17  * Software is furnished to do so, subject to the following conditions:
  18  *
  19  * The above copyright notice and this permission notice shall be included in
  20  * all copies or substantial portions of the Software.
  21  *
  22  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  23  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  24  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  25  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  26  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  27  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  28  * DEALINGS IN THE SOFTWARE.
  29  * ***************************************************************************
  30  *
  31  * Authors: Elliot Smith <elliot.smith@intel.com>
  32  *               Yonghwi Park <yonghwi0324.park@samsung.com>
  33  */
  34
  35 // fastscroll is a scrollview controller, which binds
  36 // a scrollview to a a list of short cuts; the shortcuts are built
  37 // from the text on dividers in the list. Clicking on a shortcut
  38 // instantaneously jumps the scrollview to the selected list divider;
  39 // mouse movements on the shortcut column move the scrollview to the
  40 // list divider matching the text currently under the touch; a popup
  41 // with the text currently under the touch is also displayed.
  42 //
  43 // To apply, add the attribute data-fastscroll="true" to a listview
  44 // (a <ul> or <ol> element inside a page). Alternatively, call
  45 // fastscroll() on an element.
  46 //
  47 // The closest element with class ui-scrollview-clip is used as the
  48 // scrollview to be controlled.
  49 //
  50 // If a listview has no dividers or a single divider, the widget won't
  51 // display.
  52
  53 /**
  54         @class fastscroll
  55         The shortcut scroll widget shows a shortcut list that is bound to its parent scroll bar and respective list view. This widget is displayed as a text pop-up representing shortcuts to different list dividers in the list view. If you select a shortcut text from the shortcut scroll, the parent list view is moved to the location representing the selected shortcut.
  56
  57         To add a shortcut scroll widget to the application, use the following code:
  58
  59                 <div class="content" data-role="content" data-scroll="y">
  60                         <ul id="contacts" data-role="listview" data-fastscroll="true">
  61                                 <li>Anton</li>
  62                         </ul>
  63                 </div>
  64
  65         For the shortcut scroll widget to be visible, the parent list view must have multiple list dividers.
  66 */
  67
  68 /**
  69         @property {Boolean}  data-fastscroll
  70         When set to true, creates a shortcut scroll using the HTML unordered list (&lt;ul&gt;) element.
  71 */
  72 /**
  73         @method fastscroll
  74         The shortcut scroll is created for the closest list view with the ui-scrollview-clip class.
  75 */
  76 /**
  77         @method indexString
  78         The indexString method is used to get (if no value is defined) or set the string to present the index.
  79
  80                 <div class="content" data-role="content" data-scroll="y">
  81                         ul id="contacts" data-role="listview" data-fastscroll="true">
  82                                 <li data-role="list-divider">A</li>
  83                                 <li>Anton</li>
  84                         </ul>
  85                 </div>
  86
  87                 $(".selector").fastscroll( "indexString" [, indexAlphabet] );
  88 */
  89 (function ( $, undefined ) {
  90
  91         $.widget( "tizen.fastscroll", $.mobile.widget, {
  92                 options: {
  93                         initSelector: ":jqmData(fastscroll)"
  94                 },
  95
  96                 _primaryLanguage: null,
  97                 _secondLanguage: null,
  98                 _dividerMap: {},
  99                 _defaultTime: 500,
 100                 _defaultDuration: 500,
 101                 _timer: null,
 102                 _isFadeOut: false,
 103
 104                 _create: function () {
 105                         var $el = this.element,
 106                                 self = this,
 107                                 $popup,
 108                                 page = $el.closest( ':jqmData(role="page")' ),
 109                                 jumpToDivider;
 110
 111                         this.scrollview = $el.addClass( 'ui-fastscroll-target' ).closest( '.ui-scrollview-clip' );
 112                         this.shortcutsContainer = $( '<div class="ui-fastscroll" aria-label="Fast scroll bar, double tap to fast scroll mode" tabindex="0"/>' );
 113                         this.shortcutsList = $( '<ul aria-hidden="true"></ul>' );
 114
 115                         // popup for the hovering character
 116                         this.scrollview.append($( '<div class="ui-fastscroll-popup"></div>' ) );
 117                         $popup = this.scrollview.find( '.ui-fastscroll-popup' );
 118
 119                         this.shortcutsContainer.append( this.shortcutsList );
 120                         this.scrollview.append( this.shortcutsContainer );
 121
 122                         // find the bottom of the last item in the listview
 123                         this.lastListItem = $el.children().last();
 124
 125                         // remove scrollbars from scrollview
 126                         this.scrollview.find( '.ui-scrollbar' ).hide();
 127
 128                         this.jumpToDivider = function ( divider ) {
 129                                 // get the vertical position of the divider (so we can scroll to it)
 130                                 var dividerY = $( divider ).position().top,
 131                                         // find the bottom of the last list item
 132                                         bottomOffset = self.lastListItem.outerHeight( true ) + self.lastListItem.position().top,
 133                                         scrollviewHeight = self.scrollview.height(),
 134
 135                                 // check that after the candidate scroll, the bottom of the
 136                                 // last item will still be at the bottom of the scroll view
 137                                 // and not some way up the page
 138                                         maxScroll = bottomOffset - scrollviewHeight,
 139                                         dstOffset;
 140
 141                                 dividerY = ( dividerY > maxScroll ? maxScroll : dividerY );
 142
 143                                 // don't apply a negative scroll, as this means the
 144                                 // divider should already be visible
 145                                 dividerY = Math.max( dividerY, 0 );
 146
 147                                 // apply the scroll
 148                                 self.scrollview.scrollview( 'scrollTo', 0, -dividerY );
 149
 150                                 dstOffset = self.scrollview.offset();
 151                         };
 152
 153                         this.shortcutsList
 154                         // bind mouse over so it moves the scroller to the divider
 155                                 .bind( 'touchstart mousedown vmousedown touchmove vmousemove vmouseover', function ( e ) {
 156                                         // Get coords relative to the element
 157                                         var coords = $.mobile.tizen.targetRelativeCoordsFromEvent( e ),
 158                                                 shortcutsListOffset = self.shortcutsList.offset();
 159
 160                                         if ( self._isFadeOut === true ) {
 161                                                 return;
 162                                         }
 163
 164                                         // If the element is a list item, get coordinates relative to the shortcuts list
 165                                         if ( e.target.tagName.toLowerCase() === "li" ) {
 166                                                 coords.x += $( e.target ).offset().left - shortcutsListOffset.left;
 167                                                 coords.y += $( e.target ).offset().top  - shortcutsListOffset.top;
 168                                         }
 169
 170                                         if ( e.target.tagName.toLowerCase() === "span" ) {
 171                                                 coords.x += $( e.target ).parent().offset().left - shortcutsListOffset.left;
 172                                                 coords.y += $( e.target ).parent().offset().top  - shortcutsListOffset.top;
 173                                         }
 174
 175                                         self.shortcutsList.find( 'li' ).each( function () {
 176                                                 var listItem = $( this );
 177                                                 $( listItem )
 178                                                         .removeClass( "ui-fastscroll-hover" )
 179                                                         .removeClass( "ui-fastscroll-hover-down" );
 180                                         });
 181                                         // Hit test each list item
 182                                         self.shortcutsList.find( 'li' ).each( function () {
 183                                                 var listItem = $( this ),
 184                                                         l = listItem.offset().left - shortcutsListOffset.left,
 185                                                         t = listItem.offset().top  - shortcutsListOffset.top,
 186                                                         r = l + Math.abs(listItem.outerWidth( true ) ),
 187                                                         b = t + Math.abs(listItem.outerHeight( true ) ),
 188                                                         unit,
 189                                                         baseTop,
 190                                                         baseBottom,
 191                                                         omitSet,
 192                                                         i;
 193
 194                                                 if ( coords.x >= l && coords.x <= r && coords.y >= t && coords.y <= b ) {
 195                                                         if ( listItem.text() !== "." ) {
 196                                                                 self._hitItem( listItem );
 197                                                         } else {
 198                                                                 omitSet = listItem.data( "omitSet" );
 199                                                                 unit = ( b - t ) / omitSet.length;
 200                                                                 for ( i = 0; i < omitSet.length; i++ ) {
 201                                                                         baseTop = t + ( i * unit );
 202                                                                         baseBottom = baseTop + unit;
 203                                                                         if ( coords.y >= baseTop && coords.y <= baseBottom ) {
 204                                                                                 self._hitOmitItem( listItem, omitSet.charAt( i ) );
 205                                                                         }
 206                                                                 }
 207                                                         }
 208                                                         return false;
 209                                                 }
 210                                                 return true;
 211                                         } );
 212
 213                                         self._setTimer( false );
 214
 215                                         e.preventDefault();
 216                                         e.stopPropagation();
 217                                 } )
 218                                 // bind mouseout of the fastscroll container to remove popup
 219                                 .bind( 'touchend mouseup vmouseup vmouseout', function () {
 220                                         $popup.hide();
 221                                         $( ".ui-fastscroll-hover" ).removeClass( "ui-fastscroll-hover" );
 222                                         $( ".ui-fastscroll-hover-first-item" ).removeClass( "ui-fastscroll-hover-first-item" );
 223                                         $( ".ui-fastscroll-hover-down" ).removeClass( "ui-fastscroll-hover-down" );
 224                                         self._setTimer( true );
 225                                 } );
 226
 227                         if ( page && !( page.is( ':visible' ) ) ) {
 228                                 page.bind( 'pageshow', function () { self.refresh(); } );
 229                         } else {
 230                                 self.refresh();
 231                         }
 232
 233                         // refresh the list when dividers are filtered out
 234                         $el.bind( 'updatelayout', function () {
 235                                 self.refresh();
 236                         } );
 237
 238                         self.scrollview.bind( "scrollstart", function ( e ) {
 239                                 self._setTimer( false );
 240                         }).bind( "scrollstop", function ( e ) {
 241                                 self._setTimer( true );
 242                         });
 243                 },
 244
 245                 _hitOmitItem: function ( listItem, text ) {
 246                         var self = this,
 247                                 $popup = self.scrollview.find( '.ui-fastscroll-popup' ),
 248                                 divider = self._dividerMap[ text ];
 249
 250                         if ( typeof divider !== "undefined" ) {
 251                                 self.jumpToDivider( $( divider ) );
 252                         }
 253
 254                         $popup.text( text )
 255                                 .css( { marginLeft: -( $popup.outerWidth() / 2 ),
 256                                         marginTop: -( $popup.outerHeight() / 2 ),
 257                                         padding: $popup.css( "paddingTop" ) } )
 258                                 .width( $popup.height() )
 259                                 .show();
 260
 261                         $( listItem ).addClass( "ui-fastscroll-hover" );
 262                         if ( listItem.index() === 0 ) {
 263                                 $( listItem ).addClass( "ui-fastscroll-hover-first-item" );
 264                         }
 265                         $( listItem ).siblings().eq( listItem.index() ).addClass( "ui-fastscroll-hover-down" );
 266                 },
 267
 268                 _hitItem: function ( listItem  ) {
 269                         var self = this,
 270                                 $popup = self.scrollview.find( '.ui-fastscroll-popup' ),
 271                                 text = listItem.text(),
 272                                 divider;
 273
 274                         if ( text === "#" ) {
 275                                 divider = self._dividerMap.number;
 276                         } else {
 277                                 divider = self._dividerMap[ text ];
 278                         }
 279
 280                         if ( typeof divider !== "undefined" ) {
 281                                 self.jumpToDivider( $( divider ) );
 282                         }
 283
 284                         $popup.text( text )
 285                                 .css( { marginLeft: -( $popup.outerWidth() / 2 ),
 286                                         marginTop: -( $popup.outerHeight() / 2 ),
 287                                         padding: $popup.css( "paddingTop" ) } )
 288                                 .width( $popup.height() )
 289                                 .show();
 290
 291                         $( listItem ).addClass( "ui-fastscroll-hover" );
 292                         if ( listItem.index() === 0 ) {
 293                                 $( listItem ).addClass( "ui-fastscroll-hover-first-item" );
 294                         }
 295                         $( listItem ).siblings().eq( listItem.index() ).addClass( "ui-fastscroll-hover-down" );
 296                 },
 297
 298                 _focusItem: function ( listItem ) {
 299                         var self = this,
 300                                 $popup = self.scrollview.find( '.ui-fastscroll-popup' );
 301
 302                         listItem.focusin( function ( e ) {
 303                                 self.shortcutsList.attr( "aria-hidden", false );
 304                                 self._hitItem( listItem );
 305                                 self._setTimer( false );
 306                         }).focusout( function ( e ) {
 307                                 self.shortcutsList.attr( "aria-hidden", true );
 308                                 $popup.hide();
 309                                 $( ".ui-fastscroll-hover" ).removeClass( "ui-fastscroll-hover" );
 310                                 $( ".ui-fastscroll-hover-first-item" ).removeClass( "ui-fastscroll-hover-first-item" );
 311                                 $( ".ui-fastscroll-hover-down" ).removeClass( "ui-fastscroll-hover-down" );
 312                                 self._setTimer( true );
 313                         });
 314                 },
 315
 316                 _contentHeight: function () {
 317                         var self = this,
 318                                 $content = $( '.ui-scrollview-clip' ),
 319                                 header = null,
 320                                 footer = null,
 321                                 paddingValue = 0,
 322                                 clipSize = $( window ).height();
 323
 324                         if ( $content.hasClass( "ui-content" ) ) {
 325                                 paddingValue = parseInt( $content.css( "padding-top" ), 10 );
 326                                 clipSize = clipSize - ( paddingValue || 0 );
 327                                 paddingValue = parseInt( $content.css( "padding-bottom" ), 10 );
 328                                 clipSize = clipSize - ( paddingValue || 0 );
 329                                 header = $content.siblings( ".ui-header:visible" );
 330                                 footer = $content.siblings( ".ui-footer:visible" );
 331
 332                                 if ( header ) {
 333                                         if ( header.outerHeight( true ) === null ) {
 334                                                 clipSize = clipSize - ( $( ".ui-header" ).outerHeight() || 0 );
 335                                         } else {
 336                                                 clipSize = clipSize - header.outerHeight( true );
 337                                         }
 338                                 }
 339                                 if ( footer ) {
 340                                         clipSize = clipSize - footer.outerHeight( true );
 341                                 }
 342                         } else {
 343                                 clipSize = $content.height();
 344                         }
 345                         return clipSize;
 346                 },
 347
 348                 _omit: function ( numOfItems, maxNumOfItems ) {
 349                         var maxGroupNum = parseInt( ( maxNumOfItems - 1 ) / 2, 10 ),
 350                                 numOfExtraItems = numOfItems - maxNumOfItems,
 351                                 groupPos = [],
 352                                 omitInfo = [],
 353                                 groupPosLength,
 354                                 group,
 355                                 size,
 356                                 i;
 357
 358                         if ( ( maxNumOfItems < 3 ) || ( numOfItems <= maxNumOfItems ) ) {
 359                                 return;
 360                         }
 361
 362                         if ( numOfExtraItems >= maxGroupNum ) {
 363                                 size = 2;
 364                                 group = 1;
 365                                 groupPosLength = maxGroupNum;
 366                         } else {
 367                                 size = maxNumOfItems / ( numOfExtraItems + 1 );
 368                                 group = size;
 369                                 groupPosLength = numOfExtraItems;
 370                         }
 371
 372                         for ( i = 0; i < groupPosLength; i++ ) {
 373                                 groupPos.push( parseInt( group, 10 ) );
 374                                 group += size;
 375                         }
 376
 377                         for ( i = 0; i < maxNumOfItems; i++ ) {
 378                                 omitInfo.push( 1 );
 379                         }
 380
 381                         for ( i = 0; i < numOfExtraItems; i++ ) {
 382                                 omitInfo[ groupPos[ i % maxGroupNum ] ]++;
 383                         }
 384
 385                         return omitInfo;
 386                 },
 387
 388                 _createDividerMap: function () {
 389                         var self = this,
 390                                 primaryCharacterSet = self._primaryLanguage ? self._primaryLanguage.replace( /,/g, "" ) : null,
 391                                 secondCharacterSet = self._secondLanguage ? self._secondLanguage.replace( /,/g, "" ) : null,
 392                                 numberSet = "0123456789",
 393                                 dividers = self.element.find( '.ui-li-divider' ),
 394                                 map = {},
 395                                 matchToDivider,
 396                                 makeCharacterSet,
 397                                 indexChar,
 398                                 i;
 399
 400                         matchToDivider = function ( index, divider ) {
 401                                 if ( $( divider ).text() === indexChar ) {
 402                                         map[ indexChar ] = divider;
 403                                 }
 404                         };
 405
 406                         makeCharacterSet = function ( index, divider ) {
 407                                 primaryCharacterSet += $( divider ).text();
 408                         };
 409
 410                         if ( primaryCharacterSet === null ) {
 411                                 primaryCharacterSet = "";
 412                                 dividers.each( makeCharacterSet );
 413                         }
 414
 415                         for ( i = 0; i < primaryCharacterSet.length; i++ ) {
 416                                 indexChar = primaryCharacterSet.charAt( i );
 417                                 dividers.each( matchToDivider );
 418                         }
 419
 420                         if ( secondCharacterSet !== null ) {
 421                                 for ( i = 0; i < secondCharacterSet.length; i++ ) {
 422                                         indexChar = secondCharacterSet.charAt( i );
 423                                         dividers.each( matchToDivider );
 424                                 }
 425                         }
 426
 427                         dividers.each( function ( index, divider ) {
 428                                 if (  numberSet.search( $( divider ).text() ) !== -1  ) {
 429                                         map.number = divider;
 430                                         return false;
 431                                 }
 432                         });
 433
 434                         self._dividerMap = map;
 435                 },
 436
 437                 _setTimer: function ( start ) {
 438                         var self = this;
 439
 440                         if ( start === true ) {
 441                                 self._timer = setTimeout( function () {
 442                                         self._isFadeOut = true;
 443                                         self.shortcutsContainer.fadeOut( self._defaultDuration, function () {
 444                                                 self._isFadeOut = false;
 445                                         });
 446                                 }, self._defaultTime );
 447                         } else {
 448                                 if ( self._timer !== null ) {
 449                                         clearTimeout( self._timer );
 450                                 }
 451                                 self.shortcutsContainer.show();
 452                         }
 453                 },
 454
 455                 indexString: function ( indexAlphabet ) {
 456                         var self = this,
 457                                 characterSet = [];
 458
 459                         if ( typeof indexAlphabet === "undefined" ) {
 460                                 return self._primaryLanguage + ":" + self._secondLanguage;
 461                         }
 462
 463                         characterSet = indexAlphabet.split( ":" );
 464                         self._primaryLanguage = characterSet[ 0 ];
 465                         if ( characterSet.length === 2 ) {
 466                                 self._secondLanguage = characterSet[ 1 ];
 467                         }
 468                 },
 469
 470                 refresh: function () {
 471                         var self = this,
 472                                 primaryCharacterSet = self._primaryLanguage ? self._primaryLanguage.replace( /,/g, "" ) : null,
 473                                 secondCharacterSet = self._secondLanguage ? self._secondLanguage.replace( /,/g, "" ) : null,
 474                                 contentHeight = self._contentHeight(),
 475                                 shapItem = $( '<li tabindex="0" aria-label="double to move Number list"><span aria-hidden="true">#</span><span aria-label="Number"/></li>' ),
 476                                 omitIndex = 0,
 477                                 makeCharacterSet,
 478                                 makeOmitSet,
 479                                 itemHandler,
 480                                 containerHeight,
 481                                 shortcutsItems,
 482                                 shortcutItem,
 483                                 shortcutsTop,
 484                                 minClipHeight,
 485                                 maxNumOfItems,
 486                                 numOfItems,
 487                                 minHeight,
 488                                 padding,
 489                                 omitInfo,
 490                                 dividers,
 491                                 listItems,
 492                                 emptySize,
 493                                 correction,
 494                                 indexChar,
 495                                 lastIndex,
 496                                 seconds,
 497                                 height,
 498                                 size,
 499                                 i;
 500
 501                         makeCharacterSet = function ( index, divider ) {
 502                                 primaryCharacterSet += $( divider ).text();
 503                         };
 504
 505                         makeOmitSet = function ( index, length ) {
 506                                 var count,
 507                                         omitSet = "";
 508
 509                                 for ( count = 0; count < length; count++ ) {
 510                                         omitSet += primaryCharacterSet[ index + count ];
 511                                 }
 512
 513                                 return omitSet;
 514                         };
 515
 516                         itemHandler = function ( e ) {
 517                                 var text = $( this ).text(),
 518                                         matchDivider = self._dividerMap[ text ];
 519
 520                                 if ( typeof matchDivider !== "undefined" ) {
 521                                         $( matchDivider ).next().focus();
 522                                 }
 523                         };
 524
 525                         self._createDividerMap();
 526
 527                         self.shortcutsList.find( 'li' ).remove();
 528
 529                         // get all the dividers from the list and turn them into shortcuts
 530                         dividers = self.element.find( '.ui-li-divider' );
 531
 532                         // get all the list items
 533                         listItems = self.element.find('li').not('.ui-li-divider');
 534
 535                         // only use visible dividers
 536                         dividers = dividers.filter( ':visible' );
 537                         listItems = listItems.filter( ':visible' );
 538
 539                         if ( dividers.length < 2 ) {
 540                                 self.shortcutsList.hide();
 541                                 return;
 542                         }
 543
 544                         self.shortcutsList.show();
 545                         self.lastListItem = listItems.last();
 546                         self.shortcutsList.append( shapItem );
 547                         self._focusItem( shapItem );
 548
 549                         if ( primaryCharacterSet === null ) {
 550                                 primaryCharacterSet = "";
 551                                 dividers.each( makeCharacterSet );
 552                         }
 553
 554                         padding = parseInt( shapItem.css( "padding" ), 10 );
 555                         minHeight = shapItem.height() + ( padding * 2 );
 556                         maxNumOfItems = parseInt( ( contentHeight / minHeight ) - 1, 10 );
 557                         numOfItems = primaryCharacterSet.length;
 558
 559                         maxNumOfItems = secondCharacterSet ? maxNumOfItems - 2 : maxNumOfItems;
 560
 561                         if ( maxNumOfItems < 3 ) {
 562                                 shapItem.remove();
 563                                 return;
 564                         }
 565
 566                         omitInfo = self._omit( numOfItems, maxNumOfItems );
 567
 568                         for ( i = 0; i < primaryCharacterSet.length; i++ ) {
 569                                 indexChar = primaryCharacterSet.charAt( i );
 570                                 shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
 571
 572                                 self._focusItem( shortcutItem );
 573
 574                                 if ( typeof omitInfo !== "undefined" && omitInfo[ omitIndex ] > 1 ) {
 575                                         shortcutItem = $( '<li>.</li>' );
 576                                         shortcutItem.data( "omitSet",  makeOmitSet( i, omitInfo[ omitIndex ] ) );
 577                                         i += omitInfo[ omitIndex ] - 1;
 578                                 } else {
 579                                         shortcutItem.bind( 'vclick', itemHandler );
 580                                 }
 581
 582                                 shapItem.before( shortcutItem );
 583                                 omitIndex++;
 584                         }
 585
 586                         if ( secondCharacterSet !== null ) {
 587                                 lastIndex = secondCharacterSet.length - 1;
 588                                 seconds = [];
 589
 590                                 seconds.push( secondCharacterSet.charAt( 0 ) );
 591                                 seconds.push( secondCharacterSet.charAt( lastIndex ) );
 592
 593                                 for ( i = 0; i < seconds.length; i++ ) {
 594                                         indexChar = seconds[ i ];
 595                                         shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
 596
 597                                         self._focusItem( shortcutItem );
 598                                         shortcutItem.bind( 'vclick', itemHandler );
 599                                         shapItem.before( shortcutItem );
 600                                 }
 601                         }
 602
 603                         containerHeight = self.shortcutsContainer.outerHeight();
 604                         emptySize = contentHeight - containerHeight;
 605                         shortcutsItems = self.shortcutsList.children();
 606                         size = parseInt( emptySize / shortcutsItems.length, 10 );
 607                         correction = emptySize - ( shortcutsItems.length * size );
 608
 609                         if ( emptySize > 0 ) {
 610                                 shortcutsItems.each( function ( index, item ) {
 611                                         height = $( item ).height() + size;
 612                                         if ( correction !== 0 ) {
 613                                                 height += 1;
 614                                                 correction -= 1;
 615                                         }
 616                                         $( item ).css( {
 617                                                 height: height,
 618                                                 lineHeight: height + "px"
 619                                         } );
 620                                 } );
 621                         }
 622
 623                         // position the shortcut flush with the top of the first list divider
 624                         shortcutsTop = dividers.first().position().top;
 625                         self.shortcutsContainer.css( 'top', shortcutsTop );
 626
 627                         // make the scrollview clip tall enough to show the whole of the shortcutslist
 628                         minClipHeight = shortcutsTop + self.shortcutsContainer.outerHeight() + 'px';
 629                         self.scrollview.css( 'min-height', minClipHeight );
 630
 631                         self._setTimer( false );
 632                         self._setTimer( true );
 633                 }
 634         } );
 635
 636         $( document ).bind( "pagecreate create", function ( e ) {
 637                 $( $.tizen.fastscroll.prototype.options.initSelector, e.target )
 638                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 639                         .fastscroll();
 640         } );
 641
 642         $( window ).bind( "resize orientationchange", function ( e ) {
 643                 $( ".ui-page-active .ui-fastscroll-target" ).fastscroll( "refresh" );
 644         } );
 645 } ( jQuery ) );
 646