From ad6d040e6f326d6811eba2f82aa2155e4577e8ec Mon Sep 17 00:00:00 2001
From: Hans-Peter Buniat <hpbuniat@gmail.com>
Date: Fri, 2 Sep 2011 16:02:55 +0200
Subject: [PATCH 1/3] added support for a background-theme, to highlight the
 background between slider-start and current handle-position

---
 js/jquery.mobile.forms.slider.js              | 10 ++++++++++
 tests/unit/slider/index.html                  |  4 ++++
 tests/unit/slider/slider_events.js            | 17 +++++++++++++----
 themes/default/jquery.mobile.forms.slider.css |  1 +
 4 files changed, 28 insertions(+), 4 deletions(-)
 mode change 100644 => 100755 js/jquery.mobile.forms.slider.js
 mode change 100644 => 100755 tests/unit/slider/index.html
 mode change 100644 => 100755 tests/unit/slider/slider_events.js
 mode change 100644 => 100755 themes/default/jquery.mobile.forms.slider.css

diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js
old mode 100644
new mode 100755
index 9195fca14a1..b4a20eb6fdd
--- a/js/jquery.mobile.forms.slider.js
+++ b/js/jquery.mobile.forms.slider.js
@@ -11,6 +11,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
 	options: {
 		theme: null,
 		trackTheme: null,
+		rangeTheme: null,
 		disabled: false,
 		initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"
 	},
@@ -28,8 +29,12 @@ $.widget( "mobile.slider", $.mobile.widget, {
 
 			theme = this.options.theme ? this.options.theme : parentTheme,
 
+			// theme of the outer track-bar
 			trackTheme = this.options.trackTheme ? this.options.trackTheme : parentTheme,
 
+		    // theme for the part between start & current slider position
+			rangeTheme = this.options.rangeTheme ? this.options.rangeTheme : trackTheme,
+
 			cType = control[ 0 ].nodeName.toLowerCase(),
 
 			selectClass = ( cType == "select" ) ? "ui-slider-switch" : "",
@@ -95,6 +100,9 @@ $.widget( "mobile.slider", $.mobile.widget, {
 			});
 
 		}
+		else if (trackTheme != rangeTheme) {
+		    slider.wrapInner( "<div class='ui-slider-range-background ui-btn-down-" + rangeTheme + " ui-btn-corner-all' role='application'></div>" );
+		}
 
 		label.addClass( "ui-slider" );
 
@@ -265,6 +273,8 @@ $.widget( "mobile.slider", $.mobile.widget, {
 		if ( percent > 60 && cType === "select" ) {
 			// TODO: Dead path?
 		}
+
+		this.slider.find('div.ui-slider-range-background').css('width', percent + "%");
 		this.handle.css( "left", percent + "%" );
 		this.handle.attr( {
 				"aria-valuenow": cType === "input" ? newval : control.find( "option" ).eq( newval ).attr( "value" ),
diff --git a/tests/unit/slider/index.html b/tests/unit/slider/index.html
old mode 100644
new mode 100755
index b359353be20..714af450006
--- a/tests/unit/slider/index.html
+++ b/tests/unit/slider/index.html
@@ -47,6 +47,10 @@ <h2 id="qunit-userAgent"></h2>
 		<input type="range" name="stepped" id="stepped" value="15" min="0" max="100" step="10"  data-nstest-theme="b" data-nstest-track-theme="a" />
 	</div>
 
+    <div  data-nstest-role="fieldcontain">
+        <input type="range" name="range-background" id="range-background" value="15" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" data-nstest-range-theme="c" />
+    </div>
+
 	<div  data-nstest-role="fieldcontain">
 		<select name="slider" id="slider-switch"  data-nstest-role="slider">
 			<option value="off">Off</option>
diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js
old mode 100644
new mode 100755
index eb12b4885e9..290f9734850
--- a/tests/unit/slider/slider_events.js
+++ b/tests/unit/slider/slider_events.js
@@ -6,7 +6,7 @@
 	var onChangeCnt = 0;
 	window.onChangeCounter = function() {
 		onChangeCnt++;
-	}
+	};
 	module('jquery.mobile.slider.js');
 
 	var keypressTest = function(opts){
@@ -99,11 +99,20 @@
 		slider.keyup();
 		same(slider.val(), "200");
 	});
-	
+
 	test( "input type should degrade to number when slider is created", function(){
 		same($("#range-slider-up").attr( "type" ), "number");
 	});
 
+    test( "slider with range-background theme should have a inner range-div with corresponding theme and width", function(){
+        var slider = $("#range-background");
+        slider.focus();
+        same(slider.val(), "15");
+        var backgroundDiv = slider.next().find('.ui-slider-range-background');
+        same((parseInt(100 * parseFloat(backgroundDiv.css('width')) / parseFloat(backgroundDiv.parent().css('width')) ) + '%'), '15%');
+        ok(backgroundDiv.hasClass('ui-btn-down-c'));
+    });
+
 	// generic switch test function
 	var sliderSwitchTest = function(opts){
 		var slider = $("#slider-switch"),
@@ -155,8 +164,8 @@
 		$( "#onchange" ).slider( "refresh", 50 );
 		equals(onChangeCnt, 1, "onChange should have been called once");
 	});
-	
-	
+
+
 	test( "slider controls will create when inside a container that receives a 'create' event", function(){
 		ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-slider").length, "did not have enhancements applied" );
 		ok( $("#enhancetest").trigger("create").find(".ui-slider").length, "enhancements applied" );
diff --git a/themes/default/jquery.mobile.forms.slider.css b/themes/default/jquery.mobile.forms.slider.css
old mode 100644
new mode 100755
index 62b767238a1..5878abd833f
--- a/themes/default/jquery.mobile.forms.slider.css
+++ b/themes/default/jquery.mobile.forms.slider.css
@@ -7,6 +7,7 @@ label.ui-slider { display: block; }
 input.ui-slider-input  { display: inline-block; width: 50px; }
 select.ui-slider-switch { display: none; }
 div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; }
+div.ui-slider-range-background {height:15px; padding:0; margin: 0; border: none}
 a.ui-slider-handle { position: absolute; z-index: 10;  top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
 a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
 @media all and (min-width: 480px){

From afe66304258625b1cbb0e5a964fbf859ce8b5b19 Mon Sep 17 00:00:00 2001
From: Hans-Peter Buniat <hpbuniat@gmail.com>
Date: Sun, 18 Sep 2011 17:53:03 +0200
Subject: [PATCH 2/3] try/catch the regexp, fixes 2416

---
 js/jquery.mobile.listview.filter.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)
 mode change 100644 => 100755 js/jquery.mobile.listview.filter.js

diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js
old mode 100644
new mode 100755
index ebbcc2bdad4..b85048f3e36
--- a/js/jquery.mobile.listview.filter.js
+++ b/js/jquery.mobile.listview.filter.js
@@ -40,12 +40,16 @@ $( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
 				lastval = $this.jqmData( "lastval" ) + "",
 				childItems = false,
 				itemtext = "",
-				item, change;
+				item, change,
+				regex = "";
+
+			try {
+			    regex = new RegExp( "^" + lastval );
+			} catch (e) {}
 
 			// Change val as lastval for next execution
 			$this.jqmData( "lastval" , val );
-
-			change = val.replace( new RegExp( "^" + lastval ) , "" );
+			change = val.replace( regex , "" );
 
 			if ( val.length < lastval.length || change.length != ( val.length - lastval.length ) ) {
 

From df68b0188cfcaf1d339cd0972fb0e807ea9fc522 Mon Sep 17 00:00:00 2001
From: Hans-Peter Buniat <hpbuniat@gmail.com>
Date: Mon, 19 Sep 2011 07:12:36 +0200
Subject: [PATCH 3/3] second attempt to fix #2416

---
 js/jquery.mobile.listview.filter.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js
index b85048f3e36..2d89f5f95b1 100755
--- a/js/jquery.mobile.listview.filter.js
+++ b/js/jquery.mobile.listview.filter.js
@@ -40,16 +40,11 @@ $( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
 				lastval = $this.jqmData( "lastval" ) + "",
 				childItems = false,
 				itemtext = "",
-				item, change,
-				regex = "";
-
-			try {
-			    regex = new RegExp( "^" + lastval );
-			} catch (e) {}
+				item, change;
 
 			// Change val as lastval for next execution
 			$this.jqmData( "lastval" , val );
-			change = val.replace( regex , "" );
+			change = val.substr( 0 , lastval.length + 1 ).replace( lastval , "" );
 
 			if ( val.length < lastval.length || change.length != ( val.length - lastval.length ) ) {