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" ) {
91 if ( $( this ).jqmData("handler") !== true ) {
97 scrollview = $this.data( "scrollview" ),
98 prefix = "<div class=\"ui-handler ui-handler-",
99 suffix = "\"><div class=\"ui-handler-track\"><div class=\"ui-handler-thumb\"></div></div></div>",
100 direction = scrollview.options.direction,
101 isHorizontal = ( scrollview.options.direction === "x" ),
102 _$view = scrollview._$view,
103 _$clip = scrollview._$clip,
111 isTouchable = $.support.touch,
112 dragStartEvt = ( isTouchable ? "touchstart" : "mousedown" ) + ".handler",
113 dragMoveEvtDefault = ( isTouchable ? "touchmove" : "mousemove" ),
114 dragMoveEvt = dragMoveEvtDefault + ".handler",
115 dragStopEvt = ( isTouchable ? "touchend" : "mouseup" ) + ".handler";
117 if ( $this.find( ".ui-handler-thumb" ).length !== 0 || typeof direction !== "string" ) {
121 $this.append( prefix + direction + suffix );
122 handler = $this.find( ".ui-handler" );
123 handlerThumb = $this.find( ".ui-handler-thumb" ).hide();
124 handlerHeight = ( isHorizontal ? handlerThumb.width() : handlerThumb.height() );
125 handlerMargin = ( isHorizontal ? parseInt( handler.css( "right" ), 10 ) : parseInt( handler.css( "bottom" ), 10 ) );
127 scrollview.enableHandler( scrollview.options.handler );
134 handlerThumb.bind( dragStartEvt, {
136 }, function ( event ) {
137 scrollview._stopMScroll();
139 var target = event.data.e, t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
143 X : parseInt( target.css( 'left' ), 10 ) || 0,
144 Y : parseInt( target.css( 'top' ), 10 ) || 0,
148 clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
149 viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
150 trackLength = clipLength - handlerHeight - handlerMargin;
152 _$view.trigger( "scrollstart" );
153 event.preventDefault();
154 event.stopPropagation();
156 $( document ).bind( dragMoveEvt, function ( event ) {
157 var moveData = self.moveData,
160 t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
162 handlePos = ( isHorizontal ? moveData.X + t.pageX - moveData.pX : moveData.Y + t.pageY - moveData.pY );
164 if ( handlePos < 0 ) {
168 if ( handlePos > trackLength ) {
169 handlePos = trackLength;
171 scrollPos = - Math.round( handlePos / trackLength * viewLength );
173 $this.attr( "display", "none" );
174 if ( isHorizontal ) {
175 scrollview._setScrollPosition( scrollPos, 0 );
176 moveData.target.css( {
180 scrollview._setScrollPosition( 0, scrollPos );
181 moveData.target.css( {
185 $this.attr( "display", "inline" );
187 event.preventDefault();
188 event.stopPropagation();
189 }).bind( dragStopEvt, function ( event ) {
190 $( document ).unbind( dragMoveEvt ).unbind( dragStopEvt );
192 self.moveData = null;
193 _$view.trigger( "scrollstop" );
195 event.preventDefault();
199 $( document ).bind( dragMoveEvtDefault, function ( event ) {
200 var isVisible = false,
201 vclass = "ui-scrollbar-visible";
203 if ( scrollview._$vScrollBar ) {
204 isVisible = scrollview._$vScrollBar.hasClass( vclass );
205 } else if ( scrollview._$hScrollBar ) {
206 isVisible = scrollview._$hScrollBar.hasClass( vclass );
209 if ( isVisible || self.moveData !== null ) {
210 if ( handlerThumb.hasClass( "ui-handler-visible" ) ) {
211 _$view.trigger( "scrollupdate" );
213 _$view.trigger( "scrollstart" );
218 $this.bind( "scrollstart", function ( event ) {
219 if ( !scrollview.enableHandler() ) {
222 clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
223 viewLength = ( isHorizontal ? _$view.outerWidth( true ) : _$view.outerHeight( true ) ) - clipLength;
224 trackLength = clipLength - handlerHeight - handlerMargin;
226 if ( clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
230 handlerThumb.addClass( "ui-handler-visible" );
231 handlerThumb.stop().fadeIn( 'fast' );
233 event.preventDefault();
234 event.stopPropagation();
235 }).bind( "scrollupdate", function ( event, data ) {
236 if ( !scrollview.enableHandler() || clipLength > viewLength || trackLength < ( handlerHeight * 4 / 3 ) ) {
240 var scrollPos = scrollview.getScrollPosition(), handlerPos = 0;
242 handlerThumb.stop( true, true ).hide().css( "opacity", 1.0 );
244 if ( isHorizontal ) {
245 handlerPos = Math.round( scrollPos.x / viewLength * trackLength );
246 handlerThumb.css( "left", handlerPos );
248 handlerPos = Math.round( scrollPos.y / viewLength * trackLength );
249 handlerThumb.css( "top", handlerPos );
254 event.preventDefault();
255 event.stopPropagation();
256 }).bind( "scrollstop", function ( event ) {
257 if ( !scrollview.enableHandler() || clipLength > viewLength ) {
261 scrollview._handlerTimer = setTimeout( function () {
262 if ( scrollview._timerID === 0 && self.moveData === null ) {
263 handlerThumb.removeClass( "ui-handler-visible" );
264 handlerThumb.stop( true, true ).fadeOut( 'fast' );
265 clearTimeout( scrollview._handlerTimer );
266 scrollview._handlerTimer = 0;
270 event.preventDefault();
273 } ( jQuery, document ) );