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 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.
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 )
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.
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>
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";
66 $.extend( $.tizen.scrollview.prototype, {
67 enableHandler : function ( enabled ) {
68 if ( typeof enabled === 'undefined' ) {
69 return this.options.handler;
72 this.options.handler = !!enabled;
74 var view = this.element;
75 if ( this.options.handler ) {
76 view.find( ".ui-scrollbar" ).hide();
77 view.find( ".ui-handler" ).show();
79 view.find( ".ui-handler" ).hide();
80 view.find( ".ui-scrollbar" ).show();
86 $( document ).delegate( ":jqmData(scroll)", "scrollviewcreate", function () {
87 if ( $( this ).attr( "data-" + $.mobile.ns + "scroll" ) === "none" ) {
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,
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";
113 if ( $this.find( ".ui-handler-thumb" ).length !== 0 || typeof direction !== "string" ) {
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 ) );
123 scrollview.enableHandler( scrollview.options.handler );
130 handlerThumb.bind( dragStartEvt, {
132 }, function ( event ) {
133 scrollview._stopMScroll();
135 var target = event.data.e, t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
139 X : parseInt( target.css( 'left' ), 10 ) || 0,
140 Y : parseInt( target.css( 'top' ), 10 ) || 0,
144 clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
145 viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
146 trackLength = clipLength - handlerHeight - handlerMargin;
148 _$view.trigger( "scrollstart" );
149 event.preventDefault();
150 event.stopPropagation();
152 $( document ).bind( dragMoveEvt, function ( event ) {
153 var moveData = self.moveData,
156 t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
158 handlePos = ( isHorizontal ? moveData.X + t.pageX - moveData.pX : moveData.Y + t.pageY - moveData.pY );
160 if ( handlePos < 0 ) {
164 if ( handlePos > trackLength ) {
165 handlePos = trackLength;
167 scrollPos = - Math.round( handlePos / trackLength * viewLength );
169 $this.attr( "display", "none" );
170 if ( isHorizontal ) {
171 scrollview._setScrollPosition( scrollPos, 0 );
172 moveData.target.css( {
176 scrollview._setScrollPosition( 0, scrollPos );
177 moveData.target.css( {
181 $this.attr( "display", "inline" );
183 event.preventDefault();
184 event.stopPropagation();
185 }).bind( dragStopEvt, function ( event ) {
186 $( document ).unbind( dragMoveEvt ).unbind( dragStopEvt );
188 self.moveData = null;
189 _$view.trigger( "scrollstop" );
191 event.preventDefault();
195 $( document ).bind( dragMoveEvtDefault, function ( event ) {
196 var isVisible = false,
197 vclass = "ui-scrollbar-visible";
199 if ( scrollview._$vScrollBar ) {
200 isVisible = scrollview._$vScrollBar.hasClass( vclass );
201 } else if ( scrollview._$hScrollBar ) {
202 isVisible = scrollview._$hScrollBar.hasClass( vclass );
205 if ( isVisible || self.moveData !== null ) {
206 if ( handlerThumb.hasClass( "ui-handler-visible" ) ) {
207 _$view.trigger( "scrollupdate" );
209 _$view.trigger( "scrollstart" );
214 $this.bind( "scrollstart", function ( event ) {
215 if ( !scrollview.enableHandler() ) {
218 clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
219 viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
220 trackLength = clipLength - handlerHeight - handlerMargin;
222 if ( clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
226 handlerThumb.addClass( "ui-handler-visible" );
227 handlerThumb.stop().fadeIn( 'fast' );
229 event.preventDefault();
230 event.stopPropagation();
231 }).bind( "scrollupdate", function ( event, data ) {
232 if ( !scrollview.enableHandler() || clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
236 var scrollPos = scrollview.getScrollPosition(), handlerPos = 0;
238 handlerThumb.stop( true, true ).hide().css( "opacity", 1.0 );
240 if ( isHorizontal ) {
241 handlerPos = Math.round( scrollPos.x / viewLength * trackLength );
242 handlerThumb.css( "left", handlerPos );
244 handlerPos = Math.round( scrollPos.y / viewLength * trackLength );
245 handlerThumb.css( "top", handlerPos );
250 event.preventDefault();
251 event.stopPropagation();
252 }).bind( "scrollstop", function ( event ) {
253 if ( !scrollview.enableHandler() || clipLength > viewLength ) {
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;
266 event.preventDefault();
269 } ( jQuery, document ) );