Editor: Simplified and improved UI.Number (now tab-friendly).

editor/js/UI.js

@@ -218,9 +218,11 @@ UI.Panel = function ( position ) {
 
 	UI.Element.call( this );
 
-	this.dom = document.createElement( 'div' );
-	this.dom.style.position = position || 'relative';
-	this.dom.style.marginBottom = '10px';
+	var dom = document.createElement( 'div' );
+	dom.style.position = position || 'relative';
+	dom.style.marginBottom = '10px';
+
+	this.dom = dom;
 
 	// this.dom.addEventListener( 'mousedown', function ( event ) { event.preventDefault() }, false );
 
@@ -248,8 +250,10 @@ UI.Text = function ( position ) {
 
 	UI.Element.call( this );
 
-	this.dom = document.createElement( 'span' );
-	this.dom.style.position = position || 'relative';
+	var dom = document.createElement( 'span' );
+	dom.style.position = position || 'relative';
+
+	this.dom = dom;
 
 	return this;
 
@@ -274,10 +278,12 @@ UI.Input = function ( position ) {
 
 	var scope = this;
 
-	this.dom = document.createElement( 'input' );
-	this.dom.style.position = position || 'relative';
-	this.dom.style.marginTop = '-2px';
-	this.dom.style.marginLeft = '-2px';
+	var dom = document.createElement( 'input' );
+	dom.style.position = position || 'relative';
+	dom.style.marginTop = '-2px';
+	dom.style.marginLeft = '-2px';
+
+	this.dom = dom;
 
 	this.onChangeCallback = null;
 
@@ -324,12 +330,14 @@ UI.Select = function ( position ) {
 
 	var scope = this;
 
-	this.dom = document.createElement( 'select' );
-	this.dom.style.position = position || 'relative';
-	this.dom.style.width = '64px';
-	this.dom.style.height = '16px';
-	this.dom.style.border = '0px';
-	this.dom.style.padding = '0px';
+	var dom = document.createElement( 'select' );
+	dom.style.position = position || 'relative';
+	dom.style.width = '64px';
+	dom.style.height = '16px';
+	dom.style.border = '0px';
+	dom.style.padding = '0px';
+
+	this.dom = dom;
 
 	this.onChangeCallback = null;
 
@@ -405,9 +413,11 @@ UI.Checkbox = function ( position ) {
 
 	var scope = this;
 
-	this.dom = document.createElement( 'input' );
-	this.dom.type = 'checkbox';
-	this.dom.style.position = position || 'relative';
+	var dom = document.createElement( 'input' );
+	dom.type = 'checkbox';
+	dom.style.position = position || 'relative';
+
+	this.dom = dom;
 
 	this.onChangeCallback = null;
 
@@ -454,14 +464,16 @@ UI.Color = function ( position ) {
 
 	var scope = this;
 
-	this.dom = document.createElement( 'input' );
-	this.dom.type = 'color';
-	this.dom.style.position = position || 'relative';
-	this.dom.style.width = '64px';
-	this.dom.style.height = '16px';
-	this.dom.style.border = '0px';
-	this.dom.style.padding = '0px';
-	this.dom.style.backgroundColor = 'transparent';
+	var dom = document.createElement( 'input' );
+	dom.type = 'color';
+	dom.style.position = position || 'relative';
+	dom.style.width = '64px';
+	dom.style.height = '16px';
+	dom.style.border = '0px';
+	dom.style.padding = '0px';
+	dom.style.backgroundColor = 'transparent';
+
+	this.dom = dom;
 
 	this.onChangeCallback = null;
 
@@ -508,23 +520,18 @@ UI.Number = function ( position ) {
 
 	var scope = this;
 
-	this.dom = document.createElement( 'span' );
-	this.dom.style.position = position || 'relative';
-
-	var display = document.createElement( 'span' );
-	display.style.color = '#0080f0';
-	display.style.fontSize = '12px';
-	display.style.cursor = 'col-resize';
-	display.textContent = '0.00';
-	this.dom.appendChild( display );
+	var dom = document.createElement( 'input' );
+	dom.style.position = position || 'relative';
+	dom.style.color = '#0080f0';
+	dom.style.fontSize = '12px';
+	dom.style.cursor = 'col-resize';
+	dom.style.backgroundColor = 'transparent';
+	dom.style.borderColor = 'transparent';
+	dom.style.marginTop = '-2px';
+	dom.style.marginLegt = '-2px';
+	dom.value = '0.00';
 
-	var input = document.createElement( 'input' );
-	input.style.display = 'none';
-	input.style.width = '100%';
-	input.style.marginTop = '-2px';
-	input.style.marginLeft = '-2px';
-	input.style.fontSize = '12px';
-	this.dom.appendChild( input );
+	this.dom = dom;
 
 	this.min = - Infinity;
 	this.max = Infinity;
@@ -540,7 +547,7 @@ UI.Number = function ( position ) {
 
 		distance = 0;
 
-		onMouseDownValue = parseFloat( display.textContent );
+		onMouseDownValue = parseFloat( dom.value );
 
 		document.addEventListener( 'mousemove', onMouseMove, false );
 		document.addEventListener( 'mouseup', onMouseUp, false );
@@ -556,7 +563,7 @@ UI.Number = function ( position ) {
 
 		var number = onMouseDownValue + ( distance / ( event.shiftKey ? 10 : 100 ) );
 
-		display.textContent = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 );
+		dom.value = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 );
 
 		if ( scope.onChangeCallback ) scope.onChangeCallback();
 
@@ -567,32 +574,22 @@ UI.Number = function ( position ) {
 		document.removeEventListener( 'mousemove', onMouseMove, false );
 		document.removeEventListener( 'mouseup', onMouseUp, false );
 
-		if ( Math.abs( distance ) < 1 ) {
-
-			display.style.display = 'none';
-
-			input.value = display.textContent;
+		if ( Math.abs( distance ) < 2 ) {
 
-			input.addEventListener( 'change', onInputChange, false );
-			input.addEventListener( 'blur', onInputBlur, false );
-			input.addEventListener( 'keyup', onInputKeyUp, false );
-
-			input.style.display = '';
-
-			input.focus();
-			input.select();
+			dom.focus();
+			dom.select();
 
 		}
 
 	};
 
-	var onInputChange = function ( event ) {
+	var onChange = function ( event ) {
 
-		var number = parseFloat( input.value );
+		var number = parseFloat( dom.value );
 
 		if ( isNaN( number ) === false ) {
 
-			display.textContent = number.toFixed( 2 );
+			dom.value = number;
 
 			if ( scope.onChangeCallback ) scope.onChangeCallback();
 
@@ -600,33 +597,35 @@ UI.Number = function ( position ) {
 
 	};
 
-	var onInputBlur = function ( event ) {
+	var onFocus = function ( event ) {
+
+		dom.style.backgroundColor = '';
+		dom.style.borderColor = '';
+
+	};
 
-		display.style.display = '';
+	var onBlur = function ( event ) {
 
-		input.removeEventListener( 'change', onInputChange );
-		input.removeEventListener( 'blur', onInputBlur );
-		input.removeEventListener( 'keyup', onInputKeyUp );
-		input.style.display = 'none';
+		dom.style.backgroundColor = 'transparent';
+		dom.style.borderColor = 'transparent';
 
 	};
 
-	var onInputKeyUp = function ( event ) {
+	var onKeyUp = function ( event ) {
 
 		if ( event.keyCode == 13 ) {
 
-			display.style.display = '';
-
-			input.removeEventListener( 'change', onInputChange );
-			input.removeEventListener( 'blur', onInputBlur );
-			input.removeEventListener( 'keyup', onInputKeyUp );
-			input.style.display = 'none';
+			onBlur();
 
 		}
 
 	};
 
-	display.addEventListener( 'mousedown', onMouseDown, false );
+	dom.addEventListener( 'mousedown', onMouseDown, false );
+	dom.addEventListener( 'change', onChange, false );
+	dom.addEventListener( 'focus', onFocus, false );
+	dom.addEventListener( 'blur', onBlur, false );
+	dom.addEventListener( 'keyup', onKeyUp, false );
 
 	return this;
 
@@ -636,13 +635,13 @@ UI.Number.prototype = Object.create( UI.Element.prototype );
 
 UI.Number.prototype.getValue = function () {
 
-	return parseFloat( this.dom.children[ 0 ].textContent );
+	return parseFloat( this.dom.value );
 
 };
 
 UI.Number.prototype.setValue = function ( value ) {
 
-	this.dom.children[ 0 ].textContent = value.toFixed( 2 );
+	this.dom.value = value.toFixed( 2 );
 
 	return this;
 
@@ -672,7 +671,9 @@ UI.Break = function () {
 
 	UI.Element.call( this );
 
-	this.dom = document.createElement( 'br' );
+	var dom = document.createElement( 'br' );
+
+	this.dom = dom;
 
 	return this;
 
@@ -687,8 +688,10 @@ UI.HorizontalRule = function ( position ) {
 
 	UI.Element.call( this );
 
-	this.dom = document.createElement( 'hr' );
-	this.dom.style.position = position || 'relative';
+	var dom = document.createElement( 'hr' );
+	dom.style.position = position || 'relative';
+
+	this.dom = dom;
 
 	return this;
 
@@ -705,8 +708,10 @@ UI.Button = function ( position ) {
 
 	var scope = this;
 
-	this.dom = document.createElement( 'button' );
-	this.dom.style.position = position || 'relative';
+	var dom = document.createElement( 'button' );
+	dom.style.position = position || 'relative';
+
+	this.dom = dom;
 
 	this.onClickCallback = null;