ui.js clean up.

editor/js/libs/ui.js

@@ -53,7 +53,7 @@ properties.forEach( function ( property ) {
 
 // events
 
-var events = [ 'MouseOver', 'MouseOut', 'Click' ];
+var events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'Change' ];
 
 events.forEach( function ( event ) {
 
@@ -164,14 +164,6 @@ UI.Input = function () {
 
 	this.dom = dom;
 
-	this.onChangeCallback = null;
-
-	this.dom.addEventListener( 'change', function ( event ) {
-
-		if ( scope.onChangeCallback ) scope.onChangeCallback();
-
-	}, false );
-
 	return this;
 
 };
@@ -192,14 +184,6 @@ UI.Input.prototype.setValue = function ( value ) {
 
 };
 
-UI.Input.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};
-
 
 // TextArea
 
@@ -218,20 +202,6 @@ UI.TextArea = function () {
 
 	this.dom = dom;
 
-	this.onChangeCallback = null;
-
-	this.dom.addEventListener( 'keyup', function ( event ) {
-
-		if ( scope.onKeyUpCallback ) scope.onKeyUpCallback();
-
-	}, false );
-
-	this.dom.addEventListener( 'change', function ( event ) {
-
-		if ( scope.onChangeCallback ) scope.onChangeCallback();
-
-	}, false );
-
 	return this;
 
 };
@@ -252,22 +222,6 @@ UI.TextArea.prototype.setValue = function ( value ) {
 
 };
 
-UI.TextArea.prototype.onKeyUp = function ( callback ) {
-
-	this.onKeyUpCallback = callback;
-
-	return this;
-
-};
-
-UI.TextArea.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};
-
 
 // Select
 
@@ -286,14 +240,6 @@ UI.Select = function () {
 
 	this.dom = dom;
 
-	this.onChangeCallback = null;
-
-	this.dom.addEventListener( 'change', function ( event ) {
-
-		if ( scope.onChangeCallback ) scope.onChangeCallback();
-
-	}, false );
-
 	return this;
 
 };
@@ -343,14 +289,6 @@ UI.Select.prototype.setValue = function ( value ) {
 
 };
 
-UI.Select.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};
-
 // FancySelect
 
 UI.FancySelect = function () {
@@ -369,8 +307,6 @@ UI.FancySelect = function () {
 
 	this.dom = dom;
 
-	this.onChangeCallback = null;
-
 	this.options = [];
 	this.selectedValue = null;
 
@@ -384,6 +320,9 @@ UI.FancySelect.prototype.setOptions = function ( options ) {
 
 	var scope = this;
 
+	var changeEvent = document.createEvent( 'HTMLEvents' );
+	changeEvent.initEvent( 'change', true, true );
+
 	while ( scope.dom.children.length > 0 ) {
 
 		scope.dom.removeChild( scope.dom.firstChild );
@@ -406,7 +345,7 @@ UI.FancySelect.prototype.setOptions = function ( options ) {
 
 			scope.selectedValue = value;
 
-			if ( scope.onChangeCallback ) scope.onChangeCallback();
+			scope.dom.dispatchEvent( changeEvent );
 
 		}
 
@@ -465,14 +404,6 @@ UI.FancySelect.prototype.setValue = function ( value ) {
 
 };
 
-UI.FancySelect.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};
-
 // Checkbox
 
 UI.Checkbox = function ( boolean ) {
@@ -488,14 +419,6 @@ UI.Checkbox = function ( boolean ) {
 	this.dom = dom;
 	this.setValue( boolean );
 
-	this.onChangeCallback = null;
-
-	this.dom.addEventListener( 'change', function ( event ) {
-
-		if ( scope.onChangeCallback ) scope.onChangeCallback();
-
-	}, false );
-
 	return this;
 
 };
@@ -520,14 +443,6 @@ UI.Checkbox.prototype.setValue = function ( value ) {
 
 };
 
-UI.Checkbox.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};
-
 
 // Color
 
@@ -549,14 +464,6 @@ UI.Color = function () {
 
 	this.dom = dom;
 
-	this.onChangeCallback = null;
-
-	this.dom.addEventListener( 'change', function ( event ) {
-
-		if ( scope.onChangeCallback ) scope.onChangeCallback();
-
-	}, false );
-
 	return this;
 
 };
@@ -591,14 +498,6 @@ UI.Color.prototype.setHexValue = function ( hex ) {
 
 };
 
-UI.Color.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};
-
 
 // Number
 
@@ -629,7 +528,8 @@ UI.Number = function ( number ) {
 	this.dom = dom;
 	this.setValue( number );
 
-	this.onChangeCallback = null;
+	var changeEvent = document.createEvent( 'HTMLEvents' );
+	changeEvent.initEvent( 'change', true, true );
 
 	var distance = 0;
 	var onMouseDownValue = 0;
@@ -660,7 +560,7 @@ UI.Number = function ( number ) {
 
 		dom.value = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( scope.precision );
 
-		if ( currentValue !== dom.value && scope.onChangeCallback ) scope.onChangeCallback();
+		if ( currentValue !== dom.value ) dom.dispatchEvent( changeEvent );
 
 	};
 
@@ -686,8 +586,6 @@ UI.Number = function ( number ) {
 
 			dom.value = number;
 
-			if ( scope.onChangeCallback ) scope.onChangeCallback();
-
 		}
 
 	};
@@ -754,14 +652,6 @@ UI.Number.prototype.setPrecision = function ( precision ) {
 
 };
 
-UI.Number.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};
-
 
 // Integer
 
@@ -791,7 +681,8 @@ UI.Integer = function ( number ) {
 	this.dom = dom;
 	this.setValue( number );
 
-	this.onChangeCallback = null;
+	var changeEvent = document.createEvent( 'HTMLEvents' );
+	changeEvent.initEvent( 'change', true, true );
 
 	var distance = 0;
 	var onMouseDownValue = 0;
@@ -822,7 +713,7 @@ UI.Integer = function ( number ) {
 
 		dom.value = Math.min( scope.max, Math.max( scope.min, number ) ) | 0;
 
-		if ( currentValue !== dom.value && scope.onChangeCallback ) scope.onChangeCallback();
+		if ( currentValue !== dom.value ) dom.dispatchEvent( changeEvent );
 
 	};
 
@@ -848,8 +739,6 @@ UI.Integer = function ( number ) {
 
 			dom.value = number;
 
-			if ( scope.onChangeCallback ) scope.onChangeCallback();
-
 		}
 
 	};
@@ -908,14 +797,6 @@ UI.Integer.prototype.setRange = function ( min, max ) {
 
 };
 
-UI.Integer.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};
-
 
 // Break