1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2 //>>description: Shows slider bar to input number by dragging
4 //>>group: Tizen:Widgets
6 define( [ '../jquery.mobile.tizen.core' ], function ( ) {
7 //>>excludeEnd("jqmBuildExclude");
10 * jQuery Mobile Widget @VERSION
12 * This software is licensed under the MIT licence (as defined by the OSI at
13 * http://www.opensource.org/licenses/mit-license.php)
15 * ***************************************************************************
16 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
17 * Copyright (c) 2011 by Intel Corporation Ltd.
19 * Permission is hereby granted, free of charge, to any person obtaining a
20 * copy of this software and associated documentation files (the "Software"),
21 * to deal in the Software without restriction, including without limitation
22 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
23 * and/or sell copies of the Software, and to permit persons to whom the
24 * Software is furnished to do so, subject to the following conditions:
26 * The above copyright notice and this permission notice shall be included in
27 * all copies or substantial portions of the Software.
29 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
30 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
31 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
32 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
33 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
34 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
35 * DEALINGS IN THE SOFTWARE.
36 * ***************************************************************************
38 * Authors: Max Waterman <max.waterman@intel.com>
39 * Authors: Minkyu Kang <mk7.kang@samsung.com>
43 * tizenslider modifies the JQuery Mobile slider and is created in the same way.
45 * See the JQuery Mobile slider widget for more information :
46 * http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-slider.html
48 * The JQuery Mobile slider option:
49 * theme: specify the theme using the 'data-theme' attribute
52 * theme: string; the theme to use if none is specified using the 'data-theme' attribute
54 * popup: boolean; controls whether the popup is displayed or not
55 * specify if the popup is enabled using the 'data-popup' attribute
56 * set from javascript using .tizenslider('option','popup',newValue)
59 * changed: triggers when the value is changed (rather than when the handle is moved)
63 * <a href="#" id="popupEnabler" data-role="button" data-inline="true">Enable popup</a>
64 * <a href="#" id="popupDisabler" data-role="button" data-inline="true">Disable popup</a>
65 * <div data-role="fieldcontain">
66 * <input id="mySlider" data-theme='a' data-popup='false' type="range" name="slider" value="7" min="0" max="9" />
68 * <div data-role="fieldcontain">
69 * <input id="mySlider2" type="range" name="slider" value="77" min="0" max="777" />
72 * // disable popup from javascript
73 * $('#mySlider').tizenslider('option','popup',false);
76 * $('#popupEnabler').bind('vclick', function() {
77 * $('#mySlider').tizenslider('option','popup',true);
79 * $('#popupDisabler').bind('vclick', function() {
80 * $('#mySlider').tizenslider('option','popup',false);
86 The slider widget shows a control on the screen that you can use to change values by dragging a handle on a horizontal scale. Sliders can be used in Tizen as described in the jQueryMobile documentation for sliders.
88 To add a slider widget to the application, use the following code:
90 <input data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon="text" data-text-left="Min" data-text-right="Max" />
92 The slider can define callbacks for events as described in the jQueryMobile documentation for slider events.
93 You can use methods with the slider as described in the jQueryMobile documentation for slider methods.
96 @property {String} data-icon
97 Defines the icon style for the slider ends. The icon options are bright, volume, and text.
98 The default value is text.
101 @property {Boolean} data-popup
102 Enables or disables a pop-up showing the current value while the handle is dragged.
103 The default value is true.
106 @property {String} data-text-left
107 Defines the text displayed on the left side of the slider.
108 The data-icon option must be set to text.
111 @property {String} data-text-right
112 Defines the text displayed on the right side of the slider.
113 The data-icon option must be set to text.
116 (function ($, window, undefined) {
117 $.widget("tizen.tizenslider", $.mobile.widget, {
126 _create: function () {
127 this.currentValue = null;
128 this.popupVisible = false;
131 inputElement = $( this.element ),
145 inputElement.slider();
147 // hide the slider input element proper
150 self.popup = $('<div class="ui-slider-popup"></div>');
152 // set the popup according to the html attribute
153 popupEnabledAttr = inputElement.jqmData('popup');
154 if ( popupEnabledAttr !== undefined ) {
155 self.options.popup = ( popupEnabledAttr == true );
158 // get the actual slider added by jqm
159 slider = inputElement.next('.ui-slider');
161 icon = inputElement.attr('data-icon');
163 // wrap the background
164 slider.wrap('<div class="ui-slider-container"></div>');
167 self.handle = slider.find('.ui-slider-handle');
169 // remove the rounded corners from the slider and its children
170 slider.removeClass('ui-btn-corner-all');
171 slider.find('*').removeClass('ui-btn-corner-all');
177 elem_left = $('<div class="ui-slider-left-' + icon + '"></div>');
178 elem_right = $('<div class="ui-slider-right-' + icon + '"></div>');
180 slider.before( elem_left );
181 slider.after( elem_right );
183 margin_left = elem_left.width() + 16;
184 margin_right = elem_right.width() + 16;
188 text_left = ( inputElement.attr('data-text-left') === undefined ) ? '' :
189 inputElement.attr('data-text-left').substring( 0, 3 );
190 text_right = ( inputElement.attr('data-text-right') === undefined ) ? '' :
191 inputElement.attr('data-text-right').substring( 0, 3 );
193 text_length = Math.max( text_left.length, text_right.length ) + 1;
195 margin_left = text_length + "rem";
196 margin_right = text_length + "rem";
198 elem_left = $('<div class="ui-slider-left-text" style="left:' +
199 -( text_length ) + 'rem; width:' + text_length + 'rem;">' +
200 '<span style="position:relative;top:0.4em;">' +
203 elem_right = $('<div class="ui-slider-right-text" style="right:' +
204 -( text_length ) + 'rem; width:' + text_length + 'rem;">' +
205 '<span style="position:relative;top:0.4em;">' +
209 slider.before( elem_left );
210 slider.after( elem_right );
215 slider.parent('.ui-slider-container').css({
216 "margin-left": margin_left,
217 "margin-right": margin_right
222 slider.append($('<div class="ui-slider-handle-press"></div>'));
223 self.handle_press = slider.find('.ui-slider-handle-press');
224 self.handle_press.css('display', 'none');
226 // add a popup element (hidden initially)
227 slider.parents(".ui-page").append( self.popup );
230 // get the element where value can be displayed
231 self.handleText = slider.find('.ui-btn-text');
236 // bind to changes in the slider's value to update handle text
237 this.element.on('change', function () {
241 this.element.on( 'slidestart', function( event ) {
246 // bind clicks on the handle to show the popup
247 self.handle.on('vmousedown', function () {
251 // watch events on the document to turn off the slider popup
252 slider.add( document ).on('vmouseup', function () {
257 _handle_press_show: function () {
258 this.handle_press.css('display', '');
261 _handle_press_hide: function () {
262 this.handle_press.css('display', 'none');
265 // position the popup
266 positionPopup: function () {
267 var dstOffset = this.handle.offset();
270 left: dstOffset.left + ( this.handle.width() - this.popup.width() ) / 2,
271 top: dstOffset.top - this.popup.height()
274 this.handle_press.offset({
275 left: dstOffset.left,
280 // show value on the handle and in popup
281 updateSlider: function () {
287 get_value_length = function ( v ) {
288 var val = Math.abs( v ),
293 } else if ( val > 99 ) {
295 } else if ( val > 9 ) {
308 // remove the title attribute from the handle (which is
309 // responsible for the annoying tooltip); NB we have
310 // to do it here as the jqm slider sets it every time
311 // the slider's value changes :(
312 this.handle.removeAttr('title');
314 newValue = this.element.val();
316 font_length = get_value_length( newValue );
318 if ( this.popupVisible ) {
319 this.positionPopup();
321 switch ( font_length ) {
324 font_size = '1.5rem';
325 padding_size = '0.15rem';
329 padding_size = '0.5rem';
332 font_size = '0.8rem';
333 padding_size = '0.5rem';
338 "font-size": font_size,
339 "padding-top": padding_size
343 if ( newValue === this.currentValue ) {
347 switch ( font_length ) {
349 font_size = '0.95rem';
353 font_size = '0.85rem';
354 font_top = '-0.01rem';
357 font_size = '0.65rem';
358 font_top = '-0.05rem';
361 font_size = '0.45rem';
362 font_top = '-0.15rem';
366 if ( font_size != this.handleText.css('font-size') ) {
367 this.handleText.css({
368 'font-size': font_size,
373 this.currentValue = newValue;
374 this.handleText.text( newValue );
375 this.popup.html( newValue );
377 this.element.trigger( 'update', newValue );
381 showPopup: function () {
382 if ( !this.options.popup || this.popupVisible ) {
387 this.popupVisible = true;
388 this._handle_press_show();
392 hidePopup: function () {
393 if ( !this.options.popup || !this.popupVisible ) {
398 this.popupVisible = false;
399 this._handle_press_hide();
402 _setOption: function (key, value) {
403 var needToChange = ( value !== this.options[key] );
405 if ( !needToChange ) {
411 this.options.popup = value;
413 if ( this.options.popup) {
424 // stop jqm from initialising sliders
425 $( document ).on( "pagebeforecreate", function ( e ) {
426 if ( $.data( window, "jqmSliderInitSelector" ) === undefined ) {
427 $.data( window, "jqmSliderInitSelector",
428 $.mobile.slider.prototype.options.initSelector );
429 $.mobile.slider.prototype.options.initSelector = null;
433 // initialise sliders with our own slider
434 $( document ).on( "pagecreate create", function ( e ) {
435 var jqmSliderInitSelector = $.data( window, "jqmSliderInitSelector" );
436 $( e.target ).find(jqmSliderInitSelector).each(function () {
437 var $this = $( this );
438 if ( $this.is("select") ) {
448 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
450 //>>excludeEnd("jqmBuildExclude");