src/widgets/handler/js/jquery.tizen.scrollview.handler.js

   1 /* ***************************************************************************
   2  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   3  *
   4  * Permission is hereby granted, free of charge, to any person obtaining a
   5  * copy of this software and associated documentation files (the "Software"),
   6  * to deal in the Software without restriction, including without limitation
   7  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   8  * and/or sell copies of the Software, and to permit persons to whom the
   9  * Software is furnished to do so, subject to the following conditions:
  10  *
  11  * The above copyright notice and this permission notice shall be included in
  12  * all copies or substantial portions of the Software.
  13  *
  14  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  19  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  20  * DEALINGS IN THE SOFTWARE.
  21  * ***************************************************************************
  22  *
  23  * Authors: Wonseop Kim ( wonseop.kim@samsung.com )
  24 */
  25
  26 /**
  27  * 'Handler' is widget that is working in conjunction with 'scrollview'.
  28  * 'Handler' is supporting 'scroll event( up/down )' and is indicating scroll
  29  * position.
  30  *
  31  * HTML Attributes:
  32  *
  33  *              data-handler : This attribute is indicating that whether enable.
  34  *                                              If you want to use, you will set 'true'.
  35  *              data-handlertheme : Set the widget theme ( optional )
  36  *
  37  * APIs:
  38  *
  39  *              enableHandler ( void )
  40  *                      : Get a status that whether enable.
  41  *              enableHandler ( boolean )
  42  *                      : Set a status that whether enable.
  43  *
  44  * Events:
  45  *
  46  * Examples:
  47  *
  48  *              <div data-role="content" data-scroll="y" data-handler="true">
  49  *                      <ul data-role="listview">
  50  *                              <li data-role="list-divider">A</li>
  51  *                              <li><a href="../../docs/lists/index.html">Adam Kinkaid</a></li>
  52  *                              <li><a href="../../docs/lists/index.html">Alex Wickerham</a></li>
  53  *                              <li><a href="../../docs/lists/index.html">Avery Johnson</a></li>
  54  *                      </ul>
  55  *              </div>
  56  */
  57
  58 ( function ( $, document, undefined ) {
  59         // The options of handler in scrollview
  60         $.tizen.scrollview.prototype.options.handler = false;
  61         $.tizen.scrollview.prototype.options.handlerTheme = "s";
  62
  63         $.extend( $.tizen.scrollview.prototype, {
  64                 enableHandler : function ( enabled ) {
  65                         if ( typeof enabled === 'undefined' ) {
  66                                 return this.options.handler;
  67                         }
  68
  69                         this.options.handler = !!enabled;
  70
  71                         var view = this.element;
  72                         if ( this.options.handler ) {
  73                                 view.find( ".ui-scrollbar" ).hide();
  74                                 view.find( ".ui-handler" ).show();
  75                         } else {
  76                                 view.find( ".ui-handler" ).hide();
  77                                 view.find( ".ui-scrollbar" ).show();
  78                         }
  79                 },
  80                 _handlerTimer : 0
  81         });
  82
  83         $( document ).delegate( ":jqmData(scroll)", "scrollviewcreate", function () {
  84                 if ( $( this ).attr( "data-" + $.mobile.ns + "scroll" ) === "none" ) {
  85                         return;
  86                 }
  87
  88                 var self = this,
  89                         $this = $( this ),
  90                         scrollview = $this.data( "scrollview" ),
  91                         prefix = "<div class=\"ui-handler ui-handler-",
  92                         suffix = "\"><div class=\"ui-handler-track\"><div class=\"ui-handler-thumb\"></div></div></div>",
  93                         direction = scrollview.options.direction,
  94                         isHorizontal = ( scrollview.options.direction === "x" ),
  95                         _$view = scrollview._$view,
  96                         _$clip = scrollview._$clip,
  97                         handler = null,
  98                         handlerThumb = null,
  99                         viewLength = 0,
 100                         clipLength = 0,
 101                         handlerHeight = 0,
 102                         handlerMargin = 0,
 103                         trackLength = 0,
 104                         isTouchable = $.support.touch,
 105                         dragStartEvt = ( isTouchable ? "touchstart" : "mousedown" ) + ".handler",
 106                         dragMoveEvtDefault = ( isTouchable ? "touchmove" : "mousemove" ),
 107                         dragMoveEvt = dragMoveEvtDefault + ".handler",
 108                         dragStopEvt = ( isTouchable ? "touchend" : "mouseup" ) + ".handler";
 109
 110                 if ( $this.find( ".ui-handler-thumb" ).length !== 0 || typeof direction !== "string" ) {
 111                         return;
 112                 }
 113
 114                 $this.append( prefix + direction + suffix );
 115                 handler = $this.find( ".ui-handler" );
 116                 handlerThumb = $this.find( ".ui-handler-thumb" ).hide();
 117                 handlerHeight = ( isHorizontal ? handlerThumb.width() : handlerThumb.height() );
 118                 handlerMargin = ( isHorizontal ? parseInt( handler.css( "right" ), 10 ) : parseInt( handler.css( "bottom" ), 10 ) );
 119
 120                 scrollview.enableHandler( scrollview.options.handler );
 121
 122                 $.extend( self, {
 123                         moveData : null
 124                 });
 125
 126                 // handler drag
 127                 handlerThumb.bind( dragStartEvt, {
 128                         e : handlerThumb
 129                 }, function ( event ) {
 130                         scrollview._stopMScroll();
 131
 132                         var target = event.data.e, t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
 133
 134                         self.moveData = {
 135                                 target : target,
 136                                 X : parseInt( target.css( 'left' ), 10 ) || 0,
 137                                 Y : parseInt( target.css( 'top' ), 10 ) || 0,
 138                                 pX : t.pageX,
 139                                 pY : t.pageY
 140                         };
 141                         clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
 142                         viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
 143                         trackLength = clipLength - handlerHeight - handlerMargin;
 144
 145                         _$view.trigger( "scrollstart" );
 146                         event.preventDefault();
 147                         event.stopPropagation();
 148
 149                         $( document ).bind( dragMoveEvt, function ( event ) {
 150                                 var moveData = self.moveData,
 151                                         handlePos = 0,
 152                                         scrollPos = 0,
 153                                         t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
 154
 155                                 handlePos = ( isHorizontal ? moveData.X + t.pageX - moveData.pX : moveData.Y + t.pageY - moveData.pY );
 156
 157                                 if ( handlePos < 0 ) {
 158                                         handlePos = 0;
 159                                 }
 160
 161                                 if ( handlePos > trackLength ) {
 162                                         handlePos = trackLength;
 163                                 }
 164                                 scrollPos = - Math.round( handlePos / trackLength * viewLength );
 165
 166                                 $this.attr( "display", "none" );
 167                                 if ( isHorizontal ) {
 168                                         scrollview._setScrollPosition( scrollPos, 0 );
 169                                         moveData.target.css( {
 170                                                 left : handlePos
 171                                         });
 172                                 } else {
 173                                         scrollview._setScrollPosition( 0, scrollPos );
 174                                         moveData.target.css( {
 175                                                 top : handlePos
 176                                         });
 177                                 }
 178                                 $this.attr( "display", "inline" );
 179
 180                                 event.preventDefault();
 181                                 event.stopPropagation();
 182                         }).bind( dragStopEvt, function ( event ) {
 183                                 $( document ).unbind( dragMoveEvt ).unbind( dragStopEvt );
 184
 185                                 self.moveData = null;
 186                                 _$view.trigger( "scrollstop" );
 187
 188                                 event.preventDefault();
 189                         });
 190                 });
 191
 192                 $( document ).bind( dragMoveEvtDefault, function ( event ) {
 193                         var isVisible = false,
 194                                 vclass = "ui-scrollbar-visible";
 195
 196                         if ( scrollview._$vScrollBar ) {
 197                                 isVisible = scrollview._$vScrollBar.hasClass( vclass );
 198                         } else if ( scrollview._$hScrollBar ) {
 199                                 isVisible = scrollview._$hScrollBar.hasClass( vclass );
 200                         }
 201
 202                         if ( isVisible || self.moveData !== null ) {
 203                                 if ( handlerThumb.hasClass( "ui-handler-visible" ) ) {
 204                                         _$view.trigger( "scrollupdate" );
 205                                 } else {
 206                                         _$view.trigger( "scrollstart" );
 207                                 }
 208                         }
 209                 });
 210
 211                 $this.bind( "scrollstart", function ( event ) {
 212                         if ( !scrollview.enableHandler() ) {
 213                                 return;
 214                         }
 215                         clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
 216                         viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
 217                         trackLength = clipLength - handlerHeight - handlerMargin;
 218
 219                         if ( clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
 220                                 return;
 221                         }
 222
 223                         handlerThumb.addClass( "ui-handler-visible" );
 224                         handlerThumb.stop().fadeIn( 'fast' );
 225
 226                         event.preventDefault();
 227                         event.stopPropagation();
 228                 }).bind( "scrollupdate", function ( event, data ) {
 229                         if ( !scrollview.enableHandler() || clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
 230                                 return;
 231                         }
 232
 233                         var scrollPos = scrollview.getScrollPosition(), handlerPos = 0;
 234
 235                         handlerThumb.stop( true, true ).hide().css( "opacity", 1.0 );
 236
 237                         if ( isHorizontal ) {
 238                                 handlerPos = Math.round( scrollPos.x / viewLength * trackLength );
 239                                 handlerThumb.css( "left", handlerPos );
 240                         } else {
 241                                 handlerPos = Math.round( scrollPos.y / viewLength * trackLength );
 242                                 handlerThumb.css( "top", handlerPos );
 243                         }
 244
 245                         handlerThumb.show();
 246
 247                         event.preventDefault();
 248                         event.stopPropagation();
 249                 }).bind( "scrollstop", function ( event ) {
 250                         if ( !scrollview.enableHandler() || clipLength > viewLength ) {
 251                                 return;
 252                         }
 253
 254                         scrollview._handlerTimer = setTimeout( function () {
 255                                 if ( scrollview._timerID === 0 && self.moveData === null ) {
 256                                         handlerThumb.removeClass( "ui-handler-visible" );
 257                                         handlerThumb.stop( true, true ).fadeOut( 'fast' );
 258                                         clearTimeout( scrollview._handlerTimer );
 259                                         scrollview._handlerTimer = 0;
 260                                 }
 261                         }, 1000 );
 262
 263                         event.preventDefault();
 264                 });
 265         });
 266 } ( jQuery, document ) );