Slider tooltip: New extension to render a tooltip above the slider wh…

…ich moves with the button, displaying the value along the way.

Adapted from https://github.com/web-ui-fw/web-ui-fw/tree/e9ac5c21d2f75b5a68acb2c9d9e7f90494cf0512/src/widgets/slider/

css/structure/jquery.mobile.forms.slider.tooltip.css

@@ -0,0 +1,14 @@
+.ui-slider .ui-btn-inner {
+    padding: 4px 0 0 0 !important;
+}
+
+.ui-slider-popup {
+    position: absolute !important;
+    width: 64px;
+    height: 64px;
+    text-align: center;
+    font-size: 40px;
+    padding-top: 12px;
+    z-index: 100;
+    opacity: 0.8;
+}

css/structure/jquery.mobile.structure.css

@@ -24,6 +24,7 @@
 @import url( "jquery.mobile.forms.rangeslider.css" );
 @import url( "jquery.mobile.listview.css" );
 @import url( "jquery.mobile.forms.slider.css" );
+@import url( "jquery.mobile.forms.slider.tooltip.css" );
 @import url( "jquery.mobile.table.css" );
 @import url( "jquery.mobile.table.columntoggle.css" );
 @import url( "jquery.mobile.table.reflow.css" );

js/index.php

@@ -52,6 +52,7 @@
 	'widgets/forms/checkboxradio.js',
 	'widgets/forms/button.js',
 	'widgets/forms/slider.js',
+	'widgets/forms/slider.tooltip.js',
 	'widgets/forms/rangeslider.js',
 	'widgets/forms/textinput.js',
 	'widgets/forms/select.custom.js',

js/widgets/forms/slider.tooltip.js

@@ -0,0 +1,123 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Slider tooltip extension
+//>>label: Slidertooltip
+//>>group: Forms
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+//>>css.structure: ../css/structure/jquery.mobile.slider.tooltip.css
+
+define( [ "jquery", "./slider" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.slider", $.mobile.slider, {
+	options: {
+		popupEnabled: false,
+		showValue: false
+	},
+
+	_create: function() {
+		var o = this.options,
+			popup = $( "<div></div>", {
+				class: "ui-slider-popup ui-shadow ui-body-" + ( o.theme ? o.theme : $.mobile.getInheritedTheme( this.element, "c" ) )
+			});
+
+		this._super();
+
+		$.extend( this, {
+			_currentValue: null,
+			_popup: popup,
+			_popupVisible: false,
+			_handleText: this.handle.find( ".ui-btn-text" )
+		});
+
+		this.slider.before( popup );
+		popup.hide();
+
+		this._on( this.handle, { "vmousedown" : "_showPopup" } );
+		this._on( this.slider.add( $.mobile.document ), { "vmouseup" : "_hidePopup" } );
+		this._refresh();
+	},
+
+	// position the popup centered 5px above the handle
+	_positionPopup: function() {
+		var dstOffset = this.handle.offset();
+		this._popup.offset( {
+			left: dstOffset.left + ( this.handle.width() - this._popup.width() ) / 2,
+			top: dstOffset.top - this._popup.outerHeight() - 5
+		});
+	},
+
+	_setOption: function( key, value ) {
+		this._super( key, value );
+
+		if ( key === "showValue" ) {
+			if ( value ) {
+				this._handleText.html( this._value() ).show();
+			} else {
+				this._handleText.hide();
+			}
+		}
+	},
+
+	// show value on the handle and in popup
+	refresh: function() {
+		this._super.apply( this, arguments );
+
+		// necessary because slider's _create() calls refresh(), and that lands
+		// here before our own _create() has even run
+		if ( !this._popup ) {
+			return;
+		}
+
+		this._refresh();
+	},
+
+	_refresh: function() {
+		var o = this.options, newValue;
+
+		if ( o.popupEnabled ) {
+			// remove the title attribute from the handle (which is
+			// responsible for the annoying tooltip); NB we have
+			// to do it here as the jqm slider sets it every time
+			// the slider's value changes :(
+			this.handle.removeAttr( 'title' );
+		}
+
+		newValue = this._value();
+		if ( newValue === this._currentValue ) {
+			return;
+		}
+		this._currentValue = newValue;
+
+		if ( o.popupEnabled ) {
+			this._positionPopup();
+			this._popup.html( newValue );
+		}
+
+		if ( o.showValue ) {
+			this._handleText.html( newValue );
+		}
+	},
+
+	_showPopup: function() {
+		if ( this.options.popupEnabled && !this._popupVisible ) {
+			this._handleText.hide();
+			this._popup.show();
+			this._positionPopup();
+			this._popupVisible = true;
+		}
+	},
+
+	_hidePopup: function() {
+		if ( this.options.popupEnabled && this._popupVisible ) {
+			this._handleText.show();
+			this._popup.hide();
+			this._popupVisible = false;
+		}
+	}
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");