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 a widget helping a user to scroll a window or panel.
  28  * It is different from the scrollview feature in that the handler has a fixed size
  29  * and disappears when a scroll size is smaller than a parent window's size.
  30  * If the handler widget is activated, a scroll bar on the screen will be deactivated.
  31  * The handler widget supports scrolling up and down and indicates the position of the scrolled window.
  32  *
  33  * HTML Attributes:
  34  *
  35  *              data-handler : This attribute is indicating that whether enable.
  36  *                                              If you want to use, you will set 'true'.
  37  *              data-handlertheme : Set the widget theme ( optional )
  38  *
  39  * APIs:
  40  *
  41  *              enableHandler ( boolean )
  42  *                      : Get or set the use of Handler.
  43  *                      If the value is ‘true’, it will be run Handler.
  44  *                      If the value is ‘false’, it will be not run Handler.
  45  *                      If no value is specified, will act as a getter.
  46  *
  47  * Events:
  48  *
  49  * Examples:
  50  *
  51  *              <div data-role="content" data-scroll="y" data-handler="true">
  52  *                      <ul data-role="listview">
  53  *                              <li data-role="list-divider">A</li>
  54  *                              <li><a href="../../docs/lists/index.html">Adam Kinkaid</a></li>
  55  *                              <li><a href="../../docs/lists/index.html">Alex Wickerham</a></li>
  56  *                              <li><a href="../../docs/lists/index.html">Avery Johnson</a></li>
  57  *                      </ul>
  58  *              </div>
  59  */
  60
  61 ( function ( $, document, undefined ) {
  62         // The options of handler in scrollview
  63         $.tizen.scrollview.prototype.options.handler = false;
  64         $.tizen.scrollview.prototype.options.handlerTheme = "s";
  65
  66         $.extend( $.tizen.scrollview.prototype, {
  67                 enableHandler : function ( enabled ) {
  68                         if ( typeof enabled === 'undefined' ) {
  69                                 return this.options.handler;
  70                         }
  71
  72                         this.options.handler = !!enabled;
  73
  74                         var view = this.element;
  75                         if ( this.options.handler ) {
  76                                 view.find( ".ui-scrollbar" ).hide();
  77                                 view.find( ".ui-handler" ).show();
  78                         } else {
  79                                 view.find( ".ui-handler" ).hide();
  80                                 view.find( ".ui-scrollbar" ).show();
  81                         }
  82                 },
  83                 _handlerTimer : 0
  84         });
  85
  86         $( document ).delegate( ":jqmData(scroll)", "scrollviewcreate", function () {
  87                 if ( $( this ).attr( "data-" + $.mobile.ns + "scroll" ) === "none" ) {
  88                         return;
  89                 }
  90
  91                 var self = this,
  92                         $this = $( this ),
  93                         scrollview = $this.data( "scrollview" ),
  94                         prefix = "<div class=\"ui-handler ui-handler-",
  95                         suffix = "\"><div class=\"ui-handler-track\"><div class=\"ui-handler-thumb\"></div></div></div>",
  96                         direction = scrollview.options.direction,
  97                         isHorizontal = ( scrollview.options.direction === "x" ),
  98                         _$view = scrollview._$view,
  99                         _$clip = scrollview._$clip,
 100                         handler = null,
 101                         handlerThumb = null,
 102                         viewLength = 0,
 103                         clipLength = 0,
 104                         handlerHeight = 0,
 105                         handlerMargin = 0,
 106                         trackLength = 0,
 107                         isTouchable = $.support.touch,
 108                         dragStartEvt = ( isTouchable ? "touchstart" : "mousedown" ) + ".handler",
 109                         dragMoveEvtDefault = ( isTouchable ? "touchmove" : "mousemove" ),
 110                         dragMoveEvt = dragMoveEvtDefault + ".handler",
 111                         dragStopEvt = ( isTouchable ? "touchend" : "mouseup" ) + ".handler";
 112
 113                 if ( $this.find( ".ui-handler-thumb" ).length !== 0 || typeof direction !== "string" ) {
 114                         return;
 115                 }
 116
 117                 $this.append( prefix + direction + suffix );
 118                 handler = $this.find( ".ui-handler" );
 119                 handlerThumb = $this.find( ".ui-handler-thumb" ).hide();
 120                 handlerHeight = ( isHorizontal ? handlerThumb.width() : handlerThumb.height() );
 121                 handlerMargin = ( isHorizontal ? parseInt( handler.css( "right" ), 10 ) : parseInt( handler.css( "bottom" ), 10 ) );
 122
 123                 scrollview.enableHandler( scrollview.options.handler );
 124
 125                 $.extend( self, {
 126                         moveData : null
 127                 });
 128
 129                 // handler drag
 130                 handlerThumb.bind( dragStartEvt, {
 131                         e : handlerThumb
 132                 }, function ( event ) {
 133                         scrollview._stopMScroll();
 134
 135                         var target = event.data.e, t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
 136
 137                         self.moveData = {
 138                                 target : target,
 139                                 X : parseInt( target.css( 'left' ), 10 ) || 0,
 140                                 Y : parseInt( target.css( 'top' ), 10 ) || 0,
 141                                 pX : t.pageX,
 142                                 pY : t.pageY
 143                         };
 144                         clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
 145                         viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
 146                         trackLength = clipLength - handlerHeight - handlerMargin;
 147
 148                         _$view.trigger( "scrollstart" );
 149                         event.preventDefault();
 150                         event.stopPropagation();
 151
 152                         $( document ).bind( dragMoveEvt, function ( event ) {
 153                                 var moveData = self.moveData,
 154                                         handlePos = 0,
 155                                         scrollPos = 0,
 156                                         t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
 157
 158                                 handlePos = ( isHorizontal ? moveData.X + t.pageX - moveData.pX : moveData.Y + t.pageY - moveData.pY );
 159
 160                                 if ( handlePos < 0 ) {
 161                                         handlePos = 0;
 162                                 }
 163
 164                                 if ( handlePos > trackLength ) {
 165                                         handlePos = trackLength;
 166                                 }
 167                                 scrollPos = - Math.round( handlePos / trackLength * viewLength );
 168
 169                                 $this.attr( "display", "none" );
 170                                 if ( isHorizontal ) {
 171                                         scrollview._setScrollPosition( scrollPos, 0 );
 172                                         moveData.target.css( {
 173                                                 left : handlePos
 174                                         });
 175                                 } else {
 176                                         scrollview._setScrollPosition( 0, scrollPos );
 177                                         moveData.target.css( {
 178                                                 top : handlePos
 179                                         });
 180                                 }
 181                                 $this.attr( "display", "inline" );
 182
 183                                 event.preventDefault();
 184                                 event.stopPropagation();
 185                         }).bind( dragStopEvt, function ( event ) {
 186                                 $( document ).unbind( dragMoveEvt ).unbind( dragStopEvt );
 187
 188                                 self.moveData = null;
 189                                 _$view.trigger( "scrollstop" );
 190
 191                                 event.preventDefault();
 192                         });
 193                 });
 194
 195                 $( document ).bind( dragMoveEvtDefault, function ( event ) {
 196                         var isVisible = false,
 197                                 vclass = "ui-scrollbar-visible";
 198
 199                         if ( scrollview._$vScrollBar ) {
 200                                 isVisible = scrollview._$vScrollBar.hasClass( vclass );
 201                         } else if ( scrollview._$hScrollBar ) {
 202                                 isVisible = scrollview._$hScrollBar.hasClass( vclass );
 203                         }
 204
 205                         if ( isVisible || self.moveData !== null ) {
 206                                 if ( handlerThumb.hasClass( "ui-handler-visible" ) ) {
 207                                         _$view.trigger( "scrollupdate" );
 208                                 } else {
 209                                         _$view.trigger( "scrollstart" );
 210                                 }
 211                         }
 212                 });
 213
 214                 $this.bind( "scrollstart", function ( event ) {
 215                         if ( !scrollview.enableHandler() ) {
 216                                 return;
 217                         }
 218                         clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
 219                         viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
 220                         trackLength = clipLength - handlerHeight - handlerMargin;
 221
 222                         if ( clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
 223                                 return;
 224                         }
 225
 226                         handlerThumb.addClass( "ui-handler-visible" );
 227                         handlerThumb.stop().fadeIn( 'fast' );
 228
 229                         event.preventDefault();
 230                         event.stopPropagation();
 231                 }).bind( "scrollupdate", function ( event, data ) {
 232                         if ( !scrollview.enableHandler() || clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
 233                                 return;
 234                         }
 235
 236                         var scrollPos = scrollview.getScrollPosition(), handlerPos = 0;
 237
 238                         handlerThumb.stop( true, true ).hide().css( "opacity", 1.0 );
 239
 240                         if ( isHorizontal ) {
 241                                 handlerPos = Math.round( scrollPos.x / viewLength * trackLength );
 242                                 handlerThumb.css( "left", handlerPos );
 243                         } else {
 244                                 handlerPos = Math.round( scrollPos.y / viewLength * trackLength );
 245                                 handlerThumb.css( "top", handlerPos );
 246                         }
 247
 248                         handlerThumb.show();
 249
 250                         event.preventDefault();
 251                         event.stopPropagation();
 252                 }).bind( "scrollstop", function ( event ) {
 253                         if ( !scrollview.enableHandler() || clipLength > viewLength ) {
 254                                 return;
 255                         }
 256
 257                         scrollview._handlerTimer = setTimeout( function () {
 258                                 if ( scrollview._timerID === 0 && self.moveData === null ) {
 259                                         handlerThumb.removeClass( "ui-handler-visible" );
 260                                         handlerThumb.stop( true, true ).fadeOut( 'fast' );
 261                                         clearTimeout( scrollview._handlerTimer );
 262                                         scrollview._handlerTimer = 0;
 263                                 }
 264                         }, 1000 );
 265
 266                         event.preventDefault();
 267                 });
 268         });
 269 } ( jQuery, document ) );