1 /* ***************************************************************************
2 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
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:
11 * The above copyright notice and this permission notice shall be included in
12 * all copies or substantial portions of the Software.
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 * ***************************************************************************
23 * Authors: Wonseop Kim ( wonseop.kim@samsung.com )
27 * 'Handler' is widget that is working in conjunction with 'scrollview'.
28 * 'Handler' is supporting 'scroll event( up/down )' and is indicating scroll
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 )
39 * enableHandler ( void )
40 * : Get a status that whether enable.
41 * enableHandler ( boolean )
42 * : Set a status that whether enable.
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>
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";
63 $.extend( $.tizen.scrollview.prototype, {
64 enableHandler : function ( enabled ) {
65 if ( typeof enabled === 'undefined' ) {
66 return this.options.handler;
69 this.options.handler = !!enabled;
71 var view = this.element;
72 if ( this.options.handler ) {
73 view.find( ".ui-scrollbar" ).hide();
74 view.find( ".ui-handler" ).show();
76 view.find( ".ui-handler" ).hide();
77 view.find( ".ui-scrollbar" ).show();
83 $( document ).delegate( ":jqmData(scroll)", "scrollviewcreate", function () {
84 if ( $( this ).attr( "data-" + $.mobile.ns + "scroll" ) === "none" ) {
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,
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";
110 if ( $this.find( ".ui-handler-thumb" ).length !== 0 || typeof direction !== "string" ) {
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 ) );
120 scrollview.enableHandler( scrollview.options.handler );
127 handlerThumb.bind( dragStartEvt, {
129 }, function ( event ) {
130 scrollview._stopMScroll();
132 var target = event.data.e, t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
136 X : parseInt( target.css( 'left' ), 10 ) || 0,
137 Y : parseInt( target.css( 'top' ), 10 ) || 0,
141 clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
142 viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
143 trackLength = clipLength - handlerHeight - handlerMargin;
145 _$view.trigger( "scrollstart" );
146 event.preventDefault();
147 event.stopPropagation();
149 $( document ).bind( dragMoveEvt, function ( event ) {
150 var moveData = self.moveData,
153 t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
155 handlePos = ( isHorizontal ? moveData.X + t.pageX - moveData.pX : moveData.Y + t.pageY - moveData.pY );
157 if ( handlePos < 0 ) {
161 if ( handlePos > trackLength ) {
162 handlePos = trackLength;
164 scrollPos = - Math.round( handlePos / trackLength * viewLength );
166 $this.attr( "display", "none" );
167 if ( isHorizontal ) {
168 scrollview._setScrollPosition( scrollPos, 0 );
169 moveData.target.css( {
173 scrollview._setScrollPosition( 0, scrollPos );
174 moveData.target.css( {
178 $this.attr( "display", "inline" );
180 event.preventDefault();
181 event.stopPropagation();
182 }).bind( dragStopEvt, function ( event ) {
183 $( document ).unbind( dragMoveEvt ).unbind( dragStopEvt );
185 self.moveData = null;
186 _$view.trigger( "scrollstop" );
188 event.preventDefault();
192 $( document ).bind( dragMoveEvtDefault, function ( event ) {
193 var isVisible = false,
194 vclass = "ui-scrollbar-visible";
196 if ( scrollview._$vScrollBar ) {
197 isVisible = scrollview._$vScrollBar.hasClass( vclass );
198 } else if ( scrollview._$hScrollBar ) {
199 isVisible = scrollview._$hScrollBar.hasClass( vclass );
202 if ( isVisible || self.moveData !== null ) {
203 if ( handlerThumb.hasClass( "ui-handler-visible" ) ) {
204 _$view.trigger( "scrollupdate" );
206 _$view.trigger( "scrollstart" );
211 $this.bind( "scrollstart", function ( event ) {
212 if ( !scrollview.enableHandler() ) {
215 clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
216 viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
217 trackLength = clipLength - handlerHeight - handlerMargin;
219 if ( clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
223 handlerThumb.addClass( "ui-handler-visible" );
224 handlerThumb.stop().fadeIn( 'fast' );
226 event.preventDefault();
227 event.stopPropagation();
228 }).bind( "scrollupdate", function ( event, data ) {
229 if ( !scrollview.enableHandler() || clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
233 var scrollPos = scrollview.getScrollPosition(), handlerPos = 0;
235 handlerThumb.stop( true, true ).hide().css( "opacity", 1.0 );
237 if ( isHorizontal ) {
238 handlerPos = Math.round( scrollPos.x / viewLength * trackLength );
239 handlerThumb.css( "left", handlerPos );
241 handlerPos = Math.round( scrollPos.y / viewLength * trackLength );
242 handlerThumb.css( "top", handlerPos );
247 event.preventDefault();
248 event.stopPropagation();
249 }).bind( "scrollstop", function ( event ) {
250 if ( !scrollview.enableHandler() || clipLength > viewLength ) {
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;
263 event.preventDefault();
266 } ( jQuery, document ) );