slider: use data-highlight attribute
authorMinkyu Kang <mk7.kang@samsung.com>
Wed, 2 Jan 2013 03:03:10 +0000 (12:03 +0900)
committerMinkyu Kang <mk7.kang@samsung.com>
Fri, 4 Jan 2013 11:30:38 +0000 (20:30 +0900)
Since the data-highlight attribute is supported at JQM 1.2.0,
use this attribute as TIZEN default option.

Change-Id: Ic44f2f6475fbb519869b6db4698c2255bdd0d3d0

demos/tizen-winsets/index.html
libs/patch/0022-JQM-set-the-highlight-as-default.patch [new file with mode: 0644]
src/themes/tizen/common/jquery.mobile.tizen.slider.less
src/widgets/slider/js/jquery.mobile.tizen.slider.js

index 260572d..e6bc867 100755 (executable)
                                <li data-role="list-divider">Text Slider</li>
                                <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text-right='99'/></li>
                                <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='text' data-text-left='Min' data-text-right='Max'/></li>
+                               <li data-role="list-divider">data-highlight="false"</li>
+                               <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-highlight="false" /></li>
                        </ul>
                </div><!-- /content -->
                <div data-role="footer">
diff --git a/libs/patch/0022-JQM-set-the-highlight-as-default.patch b/libs/patch/0022-JQM-set-the-highlight-as-default.patch
new file mode 100644 (file)
index 0000000..e2adfdb
--- /dev/null
@@ -0,0 +1,30 @@
+From 0f66eb51ac4bad220e5b74fd2c4c3b2126d97f4e Mon Sep 17 00:00:00 2001
+From: Minkyu Kang <mk7.kang@samsung.com>
+Date: Wed, 2 Jan 2013 11:54:18 +0900
+Subject: [PATCH] JQM: set the highlight as default
+
+According to the TIZEN UX, set the highlight as default.
+If don't want to fill highlight then user should be set data-highlight="fasle" explicitly.
+
+Change-Id: I573ec253d3212cc8c56c180083f4f9ce903a369b
+Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
+---
+ .../jquery-mobile-1.2.0/js/widgets/forms/slider.js |    2 +-
+ 1 file changed, 1 insertion(+), 1 deletion(-)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/forms/slider.js b/libs/js/jquery-mobile-1.2.0/js/widgets/forms/slider.js
+index e7f5df0..1c683df 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/forms/slider.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/forms/slider.js
+@@ -65,7 +65,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
+                       domSlider = document.createElement( 'div' ),
+                       slider = $( domSlider ),
+-                      valuebg = control.jqmData( "highlight" ) && cType !== "select" ? (function() {
++                      valuebg = control.jqmData( "highlight" ) !== false && cType !== "select" ? (function() {
+                               var bg = document.createElement('div');
+                               bg.className = 'ui-slider-bg ' + $.mobile.activeBtnClass + ' ui-btn-corner-all';
+                               return $( bg ).prependTo( slider );
+-- 
+1.7.9.5
+
index 11c88ab..f56d03f 100755 (executable)
@@ -15,8 +15,8 @@ select.ui-slider-switch {
        display: none;
 }
 
-.ui-slider-bg,
-.ui-slider-icon-bg {
+.ui-slider-container,
+.ui-slider-icon-container {
        position: relative;
        vertical-align: middle;
 
@@ -35,7 +35,7 @@ select.ui-slider-switch {
        .LESSborder-radius-all( 10 * @unit_base );
 }
 
-.ui-slider-icon-bg {
+.ui-slider-icon-container {
        margin-left: 58 * @unit_base;
        margin-right: 58 * @unit_base;
 }
@@ -162,10 +162,9 @@ a.ui-slider-handle {
        .LESSbackground-size(@popup-width, @popup-height);
 }
 
-.ui-slider-bar {
-       position: relative;
+.ui-slider-bg {
+       position: absolute;
 
-       top: -36 * @unit_base;
        height: 7 * @unit_base;
        width: 0;
 
index 02525a4..60fb999 100755 (executable)
                        var self = this,
                                inputElement = $( this.element ),
                                slider,
-                               slider_bar,
                                handle_press,
                                popupEnabledAttr,
                                icon,
 
                        // wrap the background
                        if ( icon === undefined ) {
-                               slider.wrap('<div class="ui-slider-bg"></div>');
+                               slider.wrap('<div class="ui-slider-container"></div>');
                        } else {
-                               slider.wrap('<div class="ui-slider-icon-bg"></div>');
+                               slider.wrap('<div class="ui-slider-icon-container"></div>');
                        }
 
                        // get the handle
                                break;
                        }
 
-                       // slider bar
-                       slider.append($('<div class="ui-slider-bar"></div>'));
-                       self.slider_bar = slider.find('.ui-slider-bar');
-
                        // handle press
                        slider.append($('<div class="ui-slider-handle-press"></div>'));
                        self.handle_press = slider.find('.ui-slider-handle-press');
                        // the slider's value changes :(
                        this.handle.removeAttr('title');
 
-                       this.slider_bar.width( this.handle.css('left') );
-
                        newValue = this.element.val();
 
                        if ( this.popupVisible ) {