Slider tooltip: Make popup creation lazy and clean up refresh.

js/widgets/forms/slider.tooltip.js

@@ -9,29 +9,34 @@ define( [ "jquery", "./slider" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
 
+var popup;
+
+function getPopup() {
+	if ( !popup ) {
+		popup = $( "<div></div>", {
+			"class": "ui-slider-popup ui-shadow ui-corner-all"
+		});
+	}
+	return popup.clone();
+}
+
 $.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-corner-all ui-body-" + ( o.theme ? o.theme : $.mobile.getInheritedTheme( this.element, "c" ) )
-			});
-
 		this._super();
 
 		$.extend( this, {
 			_currentValue: null,
-			_popup: popup,
+			_popup: null,
 			_popupVisible: false,
 			_handleText: this.handle.find( ".ui-btn-text" )
 		});
 
-		this.slider.before( popup );
-		popup.hide();
+		this._setOption( "popupEnabled", this.options.popupEnabled );
 
 		this._on( this.handle, { "vmousedown" : "_showPopup" } );
 		this._on( this.slider.add( $.mobile.document ), { "vmouseup" : "_hidePopup" } );
@@ -41,6 +46,7 @@ $.widget( "mobile.slider", $.mobile.slider, {
 	// 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
@@ -56,19 +62,18 @@ $.widget( "mobile.slider", $.mobile.slider, {
 			} else {
 				this._handleText.hide();
 			}
+		} else if ( key === "popupEnabled" ) {
+			if ( value && !this._popup ) {
+				this._popup = getPopup()
+					.addClass( "ui-body-" + ( this.options.theme || $.mobile.getInheritedTheme( this.element, "c" ) ) )
+					.insertBefore( this.element );
+			}
 		}
 	},
 
 	// 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();
 	},
 
@@ -89,12 +94,12 @@ $.widget( "mobile.slider", $.mobile.slider, {
 		}
 		this._currentValue = newValue;
 
-		if ( o.popupEnabled ) {
+		if ( o.popupEnabled && this._popup ) {
 			this._positionPopup();
 			this._popup.html( newValue );
 		}
 
-		if ( o.showValue ) {
+		if ( o.showValue && this._handleText ) {
 			this._handleText.html( newValue );
 		}
 	},