Merge pull request #21229 from mrdoob/ui

Editor: Converted ui.js to ES6 classes

editor/js/libs/ui.js

@@ -1,16 +1,16 @@
-function UIElement( dom ) {
+class UIElement {
 
-	this.dom = dom;
+	constructor( dom ) {
 
-}
+		this.dom = dom;
 
-UIElement.prototype = {
+	}
 
-	add: function () {
+	add() {
 
-		for ( var i = 0; i < arguments.length; i ++ ) {
+		for ( let i = 0; i < arguments.length; i ++ ) {
 
-			var argument = arguments[ i ];
+			const argument = arguments[ i ];
 
 			if ( argument instanceof UIElement ) {
 
@@ -26,13 +26,13 @@ UIElement.prototype = {
 
 		return this;
 
-	},
+	}
 
-	remove: function () {
+	remove() {
 
-		for ( var i = 0; i < arguments.length; i ++ ) {
+		for ( let i = 0; i < arguments.length; i ++ ) {
 
-			var argument = arguments[ i ];
+			const argument = arguments[ i ];
 
 			if ( argument instanceof UIElement ) {
 
@@ -48,9 +48,9 @@ UIElement.prototype = {
 
 		return this;
 
-	},
+	}
 
-	clear: function () {
+	clear() {
 
 		while ( this.dom.children.length ) {
 
@@ -58,49 +58,49 @@ UIElement.prototype = {
 
 		}
 
-	},
+	}
 
-	setId: function ( id ) {
+	setId( id ) {
 
 		this.dom.id = id;
 
 		return this;
 
-	},
+	}
 
-	getId: function () {
+	getId() {
 
 		return this.dom.id;
 
-	},
+	}
 
-	setClass: function ( name ) {
+	setClass( name ) {
 
 		this.dom.className = name;
 
 		return this;
 
-	},
+	}
 
-	addClass: function ( name ) {
+	addClass( name ) {
 
 		this.dom.classList.add( name );
 
 		return this;
 
-	},
+	}
 
-	removeClass: function ( name ) {
+	removeClass( name ) {
 
 		this.dom.classList.remove( name );
 
 		return this;
 
-	},
+	}
 
-	setStyle: function ( style, array ) {
+	setStyle( style, array ) {
 
-		for ( var i = 0; i < array.length; i ++ ) {
+		for ( let i = 0; i < array.length; i ++ ) {
 
 			this.dom.style[ style ] = array[ i ];
 
@@ -108,41 +108,41 @@ UIElement.prototype = {
 
 		return this;
 
-	},
+	}
 
-	setDisabled: function ( value ) {
+	setDisabled( value ) {
 
 		this.dom.disabled = value;
 
 		return this;
 
-	},
+	}
 
-	setTextContent: function ( value ) {
+	setTextContent( value ) {
 
 		this.dom.textContent = value;
 
 		return this;
 
-	},
+	}
 
-	getIndexOfChild: function ( element ) {
+	getIndexOfChild( element ) {
 
 		return Array.prototype.indexOf.call( this.dom.children, element.dom );
 
 	}
 
-};
+}
 
 // properties
 
-var properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
+const properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
 	'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
 	'background', 'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex' ];
 
 properties.forEach( function ( property ) {
 
-	var method = 'set' + property.substr( 0, 1 ).toUpperCase() + property.substr( 1, property.length );
+	const method = 'set' + property.substr( 0, 1 ).toUpperCase() + property.substr( 1, property.length );
 
 	UIElement.prototype[ method ] = function () {
 
@@ -156,11 +156,11 @@ properties.forEach( function ( property ) {
 
 // events
 
-var events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change', 'Input' ];
+const events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change', 'Input' ];
 
 events.forEach( function ( event ) {
 
-	var method = 'on' + event;
+	const method = 'on' + event;
 
 	UIElement.prototype[ method ] = function ( callback ) {
 
@@ -172,1208 +172,1102 @@ events.forEach( function ( event ) {
 
 } );
 
-// UISpan
-
-function UISpan() {
+class UISpan extends UIElement {
 
-	UIElement.call( this );
+	constructor() {
 
-	this.dom = document.createElement( 'span' );
+		super( document.createElement( 'span' ) );
 
-	return this;
+	}
 
 }
 
-UISpan.prototype = Object.create( UIElement.prototype );
-UISpan.prototype.constructor = UISpan;
-
-// UIDiv
+class UIDiv extends UIElement {
 
-function UIDiv() {
+	constructor() {
 
-	UIElement.call( this );
+		super( document.createElement( 'div' ) );
 
-	this.dom = document.createElement( 'div' );
-
-	return this;
+	}
 
 }
 
-UIDiv.prototype = Object.create( UIElement.prototype );
-UIDiv.prototype.constructor = UIDiv;
+class UIRow extends UIDiv {
 
-// UIRow
+	constructor() {
 
-function UIRow() {
+		super();
 
-	UIElement.call( this );
+		this.dom.className = 'Row';
 
-	var dom = document.createElement( 'div' );
-	dom.className = 'Row';
-
-	this.dom = dom;
-
-	return this;
+	}
 
 }
 
-UIRow.prototype = Object.create( UIElement.prototype );
-UIRow.prototype.constructor = UIRow;
-
-// UIPanel
+class UIPanel extends UIDiv {
 
-function UIPanel() {
+	constructor() {
 
-	UIElement.call( this );
+		super();
 
-	var dom = document.createElement( 'div' );
-	dom.className = 'Panel';
+		this.dom.className = 'Panel';
 
-	this.dom = dom;
-
-	return this;
+	}
 
 }
 
-UIPanel.prototype = Object.create( UIElement.prototype );
-UIPanel.prototype.constructor = UIPanel;
+class UIText extends UISpan {
 
-// UIText
+	constructor( text ) {
 
-function UIText( text ) {
+		super();
 
-	UIElement.call( this );
+		this.dom.className = 'Text';
+		this.dom.style.cursor = 'default';
+		this.dom.style.display = 'inline-block';
+		this.dom.style.verticalAlign = 'middle';
 
-	var dom = document.createElement( 'span' );
-	dom.className = 'Text';
-	dom.style.cursor = 'default';
-	dom.style.display = 'inline-block';
-	dom.style.verticalAlign = 'middle';
+		this.setValue( text );
 
-	this.dom = dom;
-	this.setValue( text );
+	}
 
-	return this;
+	getValue() {
 
-}
+		return this.dom.textContent;
 
-UIText.prototype = Object.create( UIElement.prototype );
-UIText.prototype.constructor = UIText;
-
-UIText.prototype.getValue = function () {
+	}
 
-	return this.dom.textContent;
+	setValue( value ) {
 
-};
+		if ( value !== undefined ) {
 
-UIText.prototype.setValue = function ( value ) {
+			this.dom.textContent = value;
 
-	if ( value !== undefined ) {
+		}
 
-		this.dom.textContent = value;
+		return this;
 
 	}
 
-	return this;
-
-};
-
-
-// UIInput
+}
 
-function UIInput( text ) {
 
-	UIElement.call( this );
+class UIInput extends UIElement {
 
-	var dom = document.createElement( 'input' );
-	dom.className = 'Input';
-	dom.style.padding = '2px';
-	dom.style.border = '1px solid transparent';
+	constructor( text ) {
 
-	dom.addEventListener( 'keydown', function ( event ) {
+		super( document.createElement( 'input' ) );
 
-		event.stopPropagation();
+		this.dom.className = 'Input';
+		this.dom.style.padding = '2px';
+		this.dom.style.border = '1px solid transparent';
 
-	}, false );
+		this.dom.addEventListener( 'keydown', function ( event ) {
 
-	this.dom = dom;
-	this.setValue( text );
+			event.stopPropagation();
 
-	return this;
+		}, false );
 
-}
+		this.setValue( text );
 
-UIInput.prototype = Object.create( UIElement.prototype );
-UIInput.prototype.constructor = UIInput;
+	}
 
-UIInput.prototype.getValue = function () {
+	getValue() {
 
-	return this.dom.value;
+		return this.dom.value;
 
-};
+	}
 
-UIInput.prototype.setValue = function ( value ) {
+	setValue( value ) {
 
-	this.dom.value = value;
+		this.dom.value = value;
 
-	return this;
+		return this;
 
-};
+	}
 
+}
 
-// UITextArea
+class UITextArea extends UIElement {
 
-function UITextArea() {
+	constructor() {
 
-	UIElement.call( this );
+		super( document.createElement( 'textarea' ) );
 
-	var dom = document.createElement( 'textarea' );
-	dom.className = 'TextArea';
-	dom.style.padding = '2px';
-	dom.spellcheck = false;
+		this.dom.className = 'TextArea';
+		this.dom.style.padding = '2px';
+		this.dom.spellcheck = false;
 
-	dom.addEventListener( 'keydown', function ( event ) {
+		this.dom.addEventListener( 'keydown', function ( event ) {
 
-		event.stopPropagation();
+			event.stopPropagation();
 
-		if ( event.keyCode === 9 ) {
+			if ( event.keyCode === 9 ) {
 
-			event.preventDefault();
+				event.preventDefault();
 
-			var cursor = dom.selectionStart;
+				const cursor = this.dom.selectionStart;
 
-			dom.value = dom.value.substring( 0, cursor ) + '\t' + dom.value.substring( cursor );
-			dom.selectionStart = cursor + 1;
-			dom.selectionEnd = dom.selectionStart;
+				this.dom.value = this.dom.value.substring( 0, cursor ) + '\t' + this.dom.value.substring( cursor );
+				this.dom.selectionStart = cursor + 1;
+				this.dom.selectionEnd = this.dom.selectionStart;
 
-		}
+			}
 
-	}, false );
+		}, false );
 
-	this.dom = dom;
+	}
 
-	return this;
+	getValue() {
 
-}
+		return this.dom.value;
 
-UITextArea.prototype = Object.create( UIElement.prototype );
-UITextArea.prototype.constructor = UITextArea;
+	}
 
-UITextArea.prototype.getValue = function () {
+	setValue( value ) {
 
-	return this.dom.value;
+		this.dom.value = value;
 
-};
+		return this;
 
-UITextArea.prototype.setValue = function ( value ) {
+	}
 
-	this.dom.value = value;
+}
 
-	return this;
+class UISelect extends UIElement {
 
-};
+	constructor() {
 
+		super( document.createElement( 'select' ) );
 
-// UISelect
+		this.dom.className = 'Select';
+		this.dom.style.padding = '2px';
 
-function UISelect() {
+	}
 
-	UIElement.call( this );
+	setMultiple( boolean ) {
 
-	var dom = document.createElement( 'select' );
-	dom.className = 'Select';
-	dom.style.padding = '2px';
+		this.dom.multiple = boolean;
 
-	this.dom = dom;
+		return this;
 
-	return this;
+	}
 
-}
+	setOptions( options ) {
 
-UISelect.prototype = Object.create( UIElement.prototype );
-UISelect.prototype.constructor = UISelect;
+		const selected = this.dom.value;
 
-UISelect.prototype.setMultiple = function ( boolean ) {
+		while ( this.dom.children.length > 0 ) {
 
-	this.dom.multiple = boolean;
+			this.dom.removeChild( this.dom.firstChild );
 
-	return this;
+		}
 
-};
+		for ( const key in options ) {
 
-UISelect.prototype.setOptions = function ( options ) {
+			const option = document.createElement( 'option' );
+			option.value = key;
+			option.innerHTML = options[ key ];
+			this.dom.appendChild( option );
 
-	var selected = this.dom.value;
+		}
 
-	while ( this.dom.children.length > 0 ) {
+		this.dom.value = selected;
 
-		this.dom.removeChild( this.dom.firstChild );
+		return this;
 
 	}
 
-	for ( var key in options ) {
+	getValue() {
 
-		var option = document.createElement( 'option' );
-		option.value = key;
-		option.innerHTML = options[ key ];
-		this.dom.appendChild( option );
+		return this.dom.value;
 
 	}
 
-	this.dom.value = selected;
-
-	return this;
-
-};
+	setValue( value ) {
 
-UISelect.prototype.getValue = function () {
+		value = String( value );
 
-	return this.dom.value;
+		if ( this.dom.value !== value ) {
 
-};
+			this.dom.value = value;
 
-UISelect.prototype.setValue = function ( value ) {
-
-	value = String( value );
-
-	if ( this.dom.value !== value ) {
+		}
 
-		this.dom.value = value;
+		return this;
 
 	}
 
-	return this;
+}
 
-};
+class UICheckbox extends UIElement {
 
-// UICheckbox
+	constructor( boolean ) {
 
-function UICheckbox( boolean ) {
+		super( document.createElement( 'input' ) );
 
-	UIElement.call( this );
+		this.dom.className = 'Checkbox';
+		this.dom.type = 'checkbox';
 
-	var dom = document.createElement( 'input' );
-	dom.className = 'Checkbox';
-	dom.type = 'checkbox';
+		this.setValue( boolean );
 
-	this.dom = dom;
-	this.setValue( boolean );
+	}
 
-	return this;
+	getValue() {
 
-}
+		return this.dom.checked;
 
-UICheckbox.prototype = Object.create( UIElement.prototype );
-UICheckbox.prototype.constructor = UICheckbox;
-
-UICheckbox.prototype.getValue = function () {
+	}
 
-	return this.dom.checked;
+	setValue( value ) {
 
-};
+		if ( value !== undefined ) {
 
-UICheckbox.prototype.setValue = function ( value ) {
+			this.dom.checked = value;
 
-	if ( value !== undefined ) {
+		}
 
-		this.dom.checked = value;
+		return this;
 
 	}
 
-	return this;
-
-};
-
-
-// UIColor
+}
 
-function UIColor() {
 
-	UIElement.call( this );
+class UIColor extends UIElement {
 
-	var dom = document.createElement( 'input' );
-	dom.className = 'Color';
-	dom.style.width = '32px';
-	dom.style.height = '16px';
-	dom.style.border = '0px';
-	dom.style.padding = '2px';
-	dom.style.backgroundColor = 'transparent';
+	constructor() {
 
-	try {
+		super( document.createElement( 'input' ) );
 
-		dom.type = 'color';
-		dom.value = '#ffffff';
+		this.dom.className = 'Color';
+		this.dom.style.width = '32px';
+		this.dom.style.height = '16px';
+		this.dom.style.border = '0px';
+		this.dom.style.padding = '2px';
+		this.dom.style.backgroundColor = 'transparent';
 
-	} catch ( exception ) {}
+		try {
 
-	this.dom = dom;
+			this.dom.type = 'color';
+			this.dom.value = '#ffffff';
 
-	return this;
+		} catch ( exception ) {}
 
-}
+	}
 
-UIColor.prototype = Object.create( UIElement.prototype );
-UIColor.prototype.constructor = UIColor;
+	getValue() {
 
-UIColor.prototype.getValue = function () {
+		return this.dom.value;
 
-	return this.dom.value;
+	}
 
-};
+	getHexValue() {
 
-UIColor.prototype.getHexValue = function () {
+		return parseInt( this.dom.value.substr( 1 ), 16 );
 
-	return parseInt( this.dom.value.substr( 1 ), 16 );
+	}
 
-};
+	setValue( value ) {
 
-UIColor.prototype.setValue = function ( value ) {
+		this.dom.value = value;
 
-	this.dom.value = value;
+		return this;
 
-	return this;
+	}
 
-};
+	setHexValue( hex ) {
 
-UIColor.prototype.setHexValue = function ( hex ) {
+		this.dom.value = '#' + ( '000000' + hex.toString( 16 ) ).slice( - 6 );
 
-	this.dom.value = '#' + ( '000000' + hex.toString( 16 ) ).slice( - 6 );
+		return this;
 
-	return this;
+	}
 
-};
+}
 
+class UINumber extends UIElement {
 
-// UINumber
+	constructor( number ) {
 
-function UINumber( number ) {
+		super( document.createElement( 'input' ) );
 
-	UIElement.call( this );
+		this.dom.style.cursor = 'ns-resize';
+		this.dom.className = 'Number';
+		this.dom.value = '0.00';
 
-	var scope = this;
+		this.value = 0;
 
-	var dom = document.createElement( 'input' );
-	dom.style.cursor = 'ns-resize';
-	dom.className = 'Number';
-	dom.value = '0.00';
+		this.min = - Infinity;
+		this.max = Infinity;
 
-	this.value = 0;
+		this.precision = 2;
+		this.step = 1;
+		this.unit = '';
+		this.nudge = 0.01;
 
-	this.min = - Infinity;
-	this.max = Infinity;
+		this.setValue( number );
 
-	this.precision = 2;
-	this.step = 1;
-	this.unit = '';
-	this.nudge = 0.01;
+		const scope = this;
 
-	this.dom = dom;
+		const changeEvent = document.createEvent( 'HTMLEvents' );
+		changeEvent.initEvent( 'change', true, true );
 
-	this.setValue( number );
+		let distance = 0;
+		let onMouseDownValue = 0;
 
-	var changeEvent = document.createEvent( 'HTMLEvents' );
-	changeEvent.initEvent( 'change', true, true );
+		const pointer = { x: 0, y: 0 };
+		const prevPointer = { x: 0, y: 0 };
 
-	var distance = 0;
-	var onMouseDownValue = 0;
+		function onMouseDown( event ) {
 
-	var pointer = [ 0, 0 ];
-	var prevPointer = [ 0, 0 ];
+			event.preventDefault();
 
-	function onMouseDown( event ) {
+			distance = 0;
 
-		event.preventDefault();
+			onMouseDownValue = scope.value;
 
-		distance = 0;
+			prevPointer.x = event.clientX;
+			prevPointer.y = event.clientY;
 
-		onMouseDownValue = scope.value;
+			document.addEventListener( 'mousemove', onMouseMove, false );
+			document.addEventListener( 'mouseup', onMouseUp, false );
 
-		prevPointer = [ event.clientX, event.clientY ];
+		}
 
-		document.addEventListener( 'mousemove', onMouseMove, false );
-		document.addEventListener( 'mouseup', onMouseUp, false );
+		function onMouseMove( event ) {
 
-	}
+			const currentValue = scope.value;
 
-	function onMouseMove( event ) {
+			pointer.x = event.clientX;
+			pointer.y = event.clientY;
 
-		var currentValue = scope.value;
+			distance += ( pointer.x - prevPointer.x ) - ( pointer.y - prevPointer.y );
 
-		pointer = [ event.clientX, event.clientY ];
+			let value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
+			value = Math.min( scope.max, Math.max( scope.min, value ) );
 
-		distance += ( pointer[ 0 ] - prevPointer[ 0 ] ) - ( pointer[ 1 ] - prevPointer[ 1 ] );
+			if ( currentValue !== value ) {
 
-		var value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
-		value = Math.min( scope.max, Math.max( scope.min, value ) );
+				scope.setValue( value );
+				scope.dom.dispatchEvent( changeEvent );
 
-		if ( currentValue !== value ) {
+			}
 
-			scope.setValue( value );
-			dom.dispatchEvent( changeEvent );
+			prevPointer.x = event.clientX;
+			prevPointer.y = event.clientY;
 
 		}
 
-		prevPointer = [ event.clientX, event.clientY ];
+		function onMouseUp() {
 
-	}
+			document.removeEventListener( 'mousemove', onMouseMove, false );
+			document.removeEventListener( 'mouseup', onMouseUp, false );
 
-	function onMouseUp() {
+			if ( Math.abs( distance ) < 2 ) {
 
-		document.removeEventListener( 'mousemove', onMouseMove, false );
-		document.removeEventListener( 'mouseup', onMouseUp, false );
+				scope.dom.focus();
+				scope.dom.select();
 
-		if ( Math.abs( distance ) < 2 ) {
-
-			dom.focus();
-			dom.select();
+			}
 
 		}
 
-	}
+		function onTouchStart( event ) {
 
-	function onTouchStart( event ) {
+			if ( event.touches.length === 1 ) {
 
-		if ( event.touches.length === 1 ) {
+				distance = 0;
 
-			distance = 0;
+				onMouseDownValue = scope.value;
 
-			onMouseDownValue = scope.value;
+				prevPointer.x = event.touches[ 0 ].pageX;
+				prevPointer.y = event.touches[ 0 ].pageY;
 
-			prevPointer = [ event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ];
+				document.addEventListener( 'touchmove', onTouchMove, false );
+				document.addEventListener( 'touchend', onTouchEnd, false );
 
-			document.addEventListener( 'touchmove', onTouchMove, false );
-			document.addEventListener( 'touchend', onTouchEnd, false );
+			}
 
 		}
 
-	}
+		function onTouchMove( event ) {
 
-	function onTouchMove( event ) {
+			const currentValue = scope.value;
 
-		var currentValue = scope.value;
+			pointer.x = event.touches[ 0 ].pageX;
+			pointer.y = event.touches[ 0 ].pageY;
 
-		pointer = [ event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ];
+			distance += ( pointer.x - prevPointer.x ) - ( pointer.y - prevPointer.y );
 
-		distance += ( pointer[ 0 ] - prevPointer[ 0 ] ) - ( pointer[ 1 ] - prevPointer[ 1 ] );
+			let value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
+			value = Math.min( scope.max, Math.max( scope.min, value ) );
 
-		var value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
-		value = Math.min( scope.max, Math.max( scope.min, value ) );
+			if ( currentValue !== value ) {
 
-		if ( currentValue !== value ) {
+				scope.setValue( value );
+				scope.dom.dispatchEvent( changeEvent );
 
-			scope.setValue( value );
-			dom.dispatchEvent( changeEvent );
+			}
 
-		}
+			prevPointer.x = event.touches[ 0 ].pageX;
+			prevPointer.y = event.touches[ 0 ].pageY;
 
-		prevPointer = [ event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ];
+		}
 
-	}
+		function onTouchEnd( event ) {
 
-	function onTouchEnd( event ) {
+			if ( event.touches.length === 0 ) {
 
-		if ( event.touches.length === 0 ) {
+				document.removeEventListener( 'touchmove', onTouchMove, false );
+				document.removeEventListener( 'touchend', onTouchEnd, false );
 
-			document.removeEventListener( 'touchmove', onTouchMove, false );
-			document.removeEventListener( 'touchend', onTouchEnd, false );
+			}
 
 		}
 
-	}
+		function onChange() {
 
-	function onChange() {
+			scope.setValue( scope.dom.value );
 
-		scope.setValue( dom.value );
+		}
 
-	}
+		function onFocus() {
 
-	function onFocus() {
+			scope.dom.style.backgroundColor = '';
+			scope.dom.style.cursor = '';
 
-		dom.style.backgroundColor = '';
-		dom.style.cursor = '';
+		}
 
-	}
+		function onBlur() {
 
-	function onBlur() {
+			scope.dom.style.backgroundColor = 'transparent';
+			scope.dom.style.cursor = 'ns-resize';
 
-		dom.style.backgroundColor = 'transparent';
-		dom.style.cursor = 'ns-resize';
+		}
 
-	}
+		function onKeyDown( event ) {
 
-	function onKeyDown( event ) {
+			event.stopPropagation();
 
-		event.stopPropagation();
+			switch ( event.keyCode ) {
 
-		switch ( event.keyCode ) {
+				case 13: // enter
+					scope.dom.blur();
+					break;
 
-			case 13: // enter
-				dom.blur();
-				break;
+				case 38: // up
+					event.preventDefault();
+					scope.setValue( scope.getValue() + scope.nudge );
+					scope.dom.dispatchEvent( changeEvent );
+					break;
 
-			case 38: // up
-				event.preventDefault();
-				scope.setValue( scope.getValue() + scope.nudge );
-				dom.dispatchEvent( changeEvent );
-				break;
+				case 40: // down
+					event.preventDefault();
+					scope.setValue( scope.getValue() - scope.nudge );
+					scope.dom.dispatchEvent( changeEvent );
+					break;
 
-			case 40: // down
-				event.preventDefault();
-				scope.setValue( scope.getValue() - scope.nudge );
-				dom.dispatchEvent( changeEvent );
-				break;
+			}
 
 		}
 
-	}
-
-	onBlur();
+		onBlur();
 
-	dom.addEventListener( 'keydown', onKeyDown, false );
-	dom.addEventListener( 'mousedown', onMouseDown, false );
-	dom.addEventListener( 'touchstart', onTouchStart, false );
-	dom.addEventListener( 'change', onChange, false );
-	dom.addEventListener( 'focus', onFocus, false );
-	dom.addEventListener( 'blur', onBlur, false );
+		this.dom.addEventListener( 'keydown', onKeyDown, false );
+		this.dom.addEventListener( 'mousedown', onMouseDown, false );
+		this.dom.addEventListener( 'touchstart', onTouchStart, false );
+		this.dom.addEventListener( 'change', onChange, false );
+		this.dom.addEventListener( 'focus', onFocus, false );
+		this.dom.addEventListener( 'blur', onBlur, false );
 
-	return this;
+	}
 
-}
+	getValue() {
 
-UINumber.prototype = Object.create( UIElement.prototype );
-UINumber.prototype.constructor = UINumber;
+		return this.value;
 
-UINumber.prototype.getValue = function () {
+	}
 
-	return this.value;
+	setValue( value ) {
 
-};
+		if ( value !== undefined ) {
 
-UINumber.prototype.setValue = function ( value ) {
+			value = parseFloat( value );
 
-	if ( value !== undefined ) {
+			if ( value < this.min ) value = this.min;
+			if ( value > this.max ) value = this.max;
 
-		value = parseFloat( value );
+			this.value = value;
+			this.dom.value = value.toFixed( this.precision );
 
-		if ( value < this.min ) value = this.min;
-		if ( value > this.max ) value = this.max;
+			if ( this.unit !== '' ) this.dom.value += ' ' + this.unit;
 
-		this.value = value;
-		this.dom.value = value.toFixed( this.precision );
+		}
 
-		if ( this.unit !== '' ) this.dom.value += ' ' + this.unit;
+		return this;
 
 	}
 
-	return this;
+	setPrecision( precision ) {
 
-};
+		this.precision = precision;
 
-UINumber.prototype.setPrecision = function ( precision ) {
+		return this;
 
-	this.precision = precision;
+	}
 
-	return this;
+	setStep( step ) {
 
-};
+		this.step = step;
 
-UINumber.prototype.setStep = function ( step ) {
+		return this;
 
-	this.step = step;
+	}
 
-	return this;
+	setNudge( nudge ) {
 
-};
+		this.nudge = nudge;
 
-UINumber.prototype.setNudge = function ( nudge ) {
+		return this;
 
-	this.nudge = nudge;
+	}
 
-	return this;
+	setRange( min, max ) {
 
-};
+		this.min = min;
+		this.max = max;
 
-UINumber.prototype.setRange = function ( min, max ) {
+		return this;
 
-	this.min = min;
-	this.max = max;
+	}
 
-	return this;
+	setUnit( unit ) {
 
-};
+		this.unit = unit;
 
-UINumber.prototype.setUnit = function ( unit ) {
+		return this;
 
-	this.unit = unit;
+	}
 
-	return this;
+}
 
-};
+class UIInteger extends UIElement {
 
-// UIInteger
+	constructor( number ) {
 
-function UIInteger( number ) {
+		super( document.createElement( 'input' ) );
 
-	UIElement.call( this );
+		this.dom.style.cursor = 'ns-resize';
+		this.dom.className = 'Number';
+		this.dom.value = '0';
 
-	var scope = this;
+		this.value = 0;
 
-	var dom = document.createElement( 'input' );
-	dom.style.cursor = 'ns-resize';
-	dom.className = 'Number';
-	dom.value = '0';
+		this.min = - Infinity;
+		this.max = Infinity;
 
-	this.value = 0;
+		this.step = 1;
+		this.nudge = 1;
 
-	this.min = - Infinity;
-	this.max = Infinity;
+		this.setValue( number );
 
-	this.step = 1;
-	this.nudge = 1;
+		const scope = this;
 
-	this.dom = dom;
+		const changeEvent = document.createEvent( 'HTMLEvents' );
+		changeEvent.initEvent( 'change', true, true );
 
-	this.setValue( number );
+		let distance = 0;
+		let onMouseDownValue = 0;
 
-	var changeEvent = document.createEvent( 'HTMLEvents' );
-	changeEvent.initEvent( 'change', true, true );
+		const pointer = { x: 0, y: 0 };
+		const prevPointer = { x: 0, y: 0 };
 
-	var distance = 0;
-	var onMouseDownValue = 0;
+		function onMouseDown( event ) {
 
-	var pointer = [ 0, 0 ];
-	var prevPointer = [ 0, 0 ];
+			event.preventDefault();
 
-	function onMouseDown( event ) {
+			distance = 0;
 
-		event.preventDefault();
+			onMouseDownValue = scope.value;
 
-		distance = 0;
+			prevPointer.x = event.clientX;
+			prevPointer.y = event.clientY;
 
-		onMouseDownValue = scope.value;
+			document.addEventListener( 'mousemove', onMouseMove, false );
+			document.addEventListener( 'mouseup', onMouseUp, false );
 
-		prevPointer = [ event.clientX, event.clientY ];
+		}
 
-		document.addEventListener( 'mousemove', onMouseMove, false );
-		document.addEventListener( 'mouseup', onMouseUp, false );
+		function onMouseMove( event ) {
 
-	}
+			const currentValue = scope.value;
 
-	function onMouseMove( event ) {
+			pointer.x = event.clientX;
+			pointer.y = event.clientY;
 
-		var currentValue = scope.value;
+			distance += ( pointer.x - prevPointer.x ) - ( pointer.y - prevPointer.y );
 
-		pointer = [ event.clientX, event.clientY ];
+			let value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
+			value = Math.min( scope.max, Math.max( scope.min, value ) ) | 0;
 
-		distance += ( pointer[ 0 ] - prevPointer[ 0 ] ) - ( pointer[ 1 ] - prevPointer[ 1 ] );
+			if ( currentValue !== value ) {
 
-		var value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
-		value = Math.min( scope.max, Math.max( scope.min, value ) ) | 0;
+				scope.setValue( value );
+				scope.dom.dispatchEvent( changeEvent );
 
-		if ( currentValue !== value ) {
+			}
 
-			scope.setValue( value );
-			dom.dispatchEvent( changeEvent );
+			prevPointer.x = event.clientX;
+			prevPointer.y = event.clientY;
 
 		}
 
-		prevPointer = [ event.clientX, event.clientY ];
-
-	}
+		function onMouseUp() {
 
-	function onMouseUp() {
+			document.removeEventListener( 'mousemove', onMouseMove, false );
+			document.removeEventListener( 'mouseup', onMouseUp, false );
 
-		document.removeEventListener( 'mousemove', onMouseMove, false );
-		document.removeEventListener( 'mouseup', onMouseUp, false );
+			if ( Math.abs( distance ) < 2 ) {
 
-		if ( Math.abs( distance ) < 2 ) {
+				scope.dom.focus();
+				scope.dom.select();
 
-			dom.focus();
-			dom.select();
+			}
 
 		}
 
-	}
+		function onChange() {
 
-	function onChange() {
+			scope.setValue( scope.dom.value );
 
-		scope.setValue( dom.value );
+		}
 
-	}
+		function onFocus() {
 
-	function onFocus() {
+			scope.dom.style.backgroundColor = '';
+			scope.dom.style.cursor = '';
 
-		dom.style.backgroundColor = '';
-		dom.style.cursor = '';
+		}
 
-	}
+		function onBlur() {
 
-	function onBlur() {
+			scope.dom.style.backgroundColor = 'transparent';
+			scope.dom.style.cursor = 'ns-resize';
 
-		dom.style.backgroundColor = 'transparent';
-		dom.style.cursor = 'ns-resize';
+		}
 
-	}
+		function onKeyDown( event ) {
 
-	function onKeyDown( event ) {
+			event.stopPropagation();
 
-		event.stopPropagation();
+			switch ( event.keyCode ) {
 
-		switch ( event.keyCode ) {
+				case 13: // enter
+					scope.dom.blur();
+					break;
 
-			case 13: // enter
-				dom.blur();
-				break;
+				case 38: // up
+					event.preventDefault();
+					scope.setValue( scope.getValue() + scope.nudge );
+					scope.dom.dispatchEvent( changeEvent );
+					break;
 
-			case 38: // up
-				event.preventDefault();
-				scope.setValue( scope.getValue() + scope.nudge );
-				dom.dispatchEvent( changeEvent );
-				break;
+				case 40: // down
+					event.preventDefault();
+					scope.setValue( scope.getValue() - scope.nudge );
+					scope.dom.dispatchEvent( changeEvent );
+					break;
 
-			case 40: // down
-				event.preventDefault();
-				scope.setValue( scope.getValue() - scope.nudge );
-				dom.dispatchEvent( changeEvent );
-				break;
+			}
 
 		}
 
-	}
-
-	onBlur();
+		onBlur();
 
-	dom.addEventListener( 'keydown', onKeyDown, false );
-	dom.addEventListener( 'mousedown', onMouseDown, false );
-	dom.addEventListener( 'change', onChange, false );
-	dom.addEventListener( 'focus', onFocus, false );
-	dom.addEventListener( 'blur', onBlur, false );
+		this.dom.addEventListener( 'keydown', onKeyDown, false );
+		this.dom.addEventListener( 'mousedown', onMouseDown, false );
+		this.dom.addEventListener( 'change', onChange, false );
+		this.dom.addEventListener( 'focus', onFocus, false );
+		this.dom.addEventListener( 'blur', onBlur, false );
 
-	return this;
+	}
 
-}
+	getValue() {
 
-UIInteger.prototype = Object.create( UIElement.prototype );
-UIInteger.prototype.constructor = UIInteger;
+		return this.value;
 
-UIInteger.prototype.getValue = function () {
+	}
 
-	return this.value;
+	setValue( value ) {
 
-};
+		if ( value !== undefined ) {
 
-UIInteger.prototype.setValue = function ( value ) {
+			value = parseInt( value );
 
-	if ( value !== undefined ) {
+			this.value = value;
+			this.dom.value = value;
 
-		value = parseInt( value );
+		}
 
-		this.value = value;
-		this.dom.value = value;
+		return this;
 
 	}
 
-	return this;
-
-};
-
-UIInteger.prototype.setStep = function ( step ) {
-
-	this.step = parseInt( step );
+	setStep( step ) {
 
-	return this;
+		this.step = parseInt( step );
 
-};
+		return this;
 
-UIInteger.prototype.setNudge = function ( nudge ) {
+	}
 
-	this.nudge = nudge;
+	setNudge( nudge ) {
 
-	return this;
+		this.nudge = nudge;
 
-};
+		return this;
 
-UIInteger.prototype.setRange = function ( min, max ) {
+	}
 
-	this.min = min;
-	this.max = max;
+	setRange( min, max ) {
 
-	return this;
+		this.min = min;
+		this.max = max;
 
-};
+		return this;
 
+	}
 
-// UIBreak
+}
 
-function UIBreak() {
+class UIBreak extends UIElement {
 
-	UIElement.call( this );
+	constructor() {
 
-	var dom = document.createElement( 'br' );
-	dom.className = 'Break';
+		super( document.createElement( 'br' ) );
 
-	this.dom = dom;
+		this.dom.className = 'Break';
 
-	return this;
+	}
 
 }
 
-UIBreak.prototype = Object.create( UIElement.prototype );
-UIBreak.prototype.constructor = UIBreak;
-
-
-// UIHorizontalRule
+class UIHorizontalRule extends UIElement {
 
-function UIHorizontalRule() {
+	constructor() {
 
-	UIElement.call( this );
+		super( document.createElement( 'hr' ) );
 
-	var dom = document.createElement( 'hr' );
-	dom.className = 'HorizontalRule';
+		this.dom.className = 'HorizontalRule';
 
-	this.dom = dom;
-
-	return this;
+	}
 
 }
 
-UIHorizontalRule.prototype = Object.create( UIElement.prototype );
-UIHorizontalRule.prototype.constructor = UIHorizontalRule;
+class UIButton extends UIElement {
 
+	constructor( value ) {
 
-// UIButton
+		super( document.createElement( 'button' ) );
 
-function UIButton( value ) {
+		this.dom.className = 'Button';
+		this.dom.textContent = value;
 
-	UIElement.call( this );
+	}
 
-	var dom = document.createElement( 'button' );
-	dom.className = 'Button';
+	setLabel( value ) {
 
-	this.dom = dom;
-	this.dom.textContent = value;
+		this.dom.textContent = value;
 
-	return this;
+		return this;
 
-}
+	}
 
-UIButton.prototype = Object.create( UIElement.prototype );
-UIButton.prototype.constructor = UIButton;
+}
 
-UIButton.prototype.setLabel = function ( value ) {
+class UIProgress extends UIElement {
 
-	this.dom.textContent = value;
+	constructor( value ) {
 
-	return this;
+		super( document.createElement( 'progress' ) );
 
-};
+		this.dom.value = value;
 
+	}
 
-// UIProgress
+	setValue( value ) {
 
-function UIProgress( value ) {
+		this.dom.value = value;
 
-	UIElement.call( this );
+	}
 
-	var dom = document.createElement( 'progress' );
+}
 
-	this.dom = dom;
-	this.dom.value = value;
+class UITabbedPanel extends UIDiv {
 
-	return this;
+	constructor() {
 
-}
+		super();
 
-UIProgress.prototype = Object.create( UIElement.prototype );
-UIProgress.prototype.constructor = UIProgress;
+		this.dom.className = 'TabbedPanel';
 
-UIProgress.prototype.setValue = function ( value ) {
+		this.tabs = [];
+		this.panels = [];
 
-	this.dom.value = value;
+		this.tabsDiv = new UIDiv();
+		this.tabsDiv.setClass( 'Tabs' );
 
-};
+		this.panelsDiv = new UIDiv();
+		this.panelsDiv.setClass( 'Panels' );
 
+		this.add( this.tabsDiv );
+		this.add( this.panelsDiv );
 
-// UITabbedPanel
+		this.selected = '';
 
-function UITabbedPanel( ) {
+	}
 
-	UIElement.call( this );
+	select( id ) {
 
-	var dom = document.createElement( 'div' );
+		let tab;
+		let panel;
+		const scope = this;
 
-	this.dom = dom;
+		// Deselect current selection
+		if ( this.selected && this.selected.length ) {
 
-	this.setClass( 'TabbedPanel' );
+			tab = this.tabs.find( function ( item ) {
 
-	this.tabs = [];
-	this.panels = [];
+				return item.dom.id === scope.selected;
 
-	this.tabsDiv = new UIDiv();
-	this.tabsDiv.setClass( 'Tabs' );
+			} );
+			panel = this.panels.find( function ( item ) {
 
-	this.panelsDiv = new UIDiv();
-	this.panelsDiv.setClass( 'Panels' );
+				return item.dom.id === scope.selected;
 
-	this.add( this.tabsDiv );
-	this.add( this.panelsDiv );
+			} );
 
-	this.selected = '';
+			if ( tab ) {
 
-	return this;
+				tab.removeClass( 'selected' );
 
-}
+			}
 
-UITabbedPanel.prototype = Object.create( UIElement.prototype );
-UITabbedPanel.prototype.constructor = UITabbedPanel;
+			if ( panel ) {
 
-UITabbedPanel.prototype.select = function ( id ) {
+				panel.setDisplay( 'none' );
 
-	var tab;
-	var panel;
-	var scope = this;
+			}
 
-	// Deselect current selection
-	if ( this.selected && this.selected.length ) {
+		}
 
 		tab = this.tabs.find( function ( item ) {
 
-			return item.dom.id === scope.selected;
+			return item.dom.id === id;
 
 		} );
 		panel = this.panels.find( function ( item ) {
 
-			return item.dom.id === scope.selected;
+			return item.dom.id === id;
 
 		} );
 
 		if ( tab ) {
 
-			tab.removeClass( 'selected' );
+			tab.addClass( 'selected' );
 
 		}
 
 		if ( panel ) {
 
-			panel.setDisplay( 'none' );
+			panel.setDisplay( '' );
 
 		}
 
-	}
-
-	tab = this.tabs.find( function ( item ) {
+		this.selected = id;
 
-		return item.dom.id === id;
-
-	} );
-	panel = this.panels.find( function ( item ) {
-
-		return item.dom.id === id;
-
-	} );
-
-	if ( tab ) {
-
-		tab.addClass( 'selected' );
+		return this;
 
 	}
 
-	if ( panel ) {
+	addTab( id, label, items ) {
 
-		panel.setDisplay( '' );
+		const tab = new UITab( label, this );
+		tab.setId( id );
+		this.tabs.push( tab );
+		this.tabsDiv.add( tab );
 
-	}
+		const panel = new UIDiv();
+		panel.setId( id );
+		panel.add( items );
+		panel.setDisplay( 'none' );
+		this.panels.push( panel );
+		this.panelsDiv.add( panel );
 
-	this.selected = id;
+		this.select( id );
 
-	return this;
+	}
 
-};
+}
 
-UITabbedPanel.prototype.addTab = function ( id, label, items ) {
+class UITab extends UIText {
 
-	var tab = new UITabbedPanel.Tab( label, this );
-	tab.setId( id );
-	this.tabs.push( tab );
-	this.tabsDiv.add( tab );
+	constructor( text, parent ) {
 
-	var panel = new UIDiv();
-	panel.setId( id );
-	panel.add( items );
-	panel.setDisplay( 'none' );
-	this.panels.push( panel );
-	this.panelsDiv.add( panel );
+		super( text );
 
-	this.select( id );
+		this.dom.className = 'Tab';
 
-};
+		this.parent = parent;
 
-UITabbedPanel.Tab = function ( text, parent ) {
+		const scope = this;
 
-	UIText.call( this, text );
-	this.parent = parent;
+		this.dom.addEventListener( 'click', function () {
 
-	this.setClass( 'Tab' );
+			scope.parent.select( scope.dom.id );
 
-	var scope = this;
+		} );
 
-	this.dom.addEventListener( 'click', function () {
+	}
 
-		scope.parent.select( scope.dom.id );
+}
 
-	} );
+class UIListbox extends UIDiv {
 
-	return this;
+	constructor() {
 
-};
+		super();
 
-UITabbedPanel.Tab.prototype = Object.create( UIText.prototype );
-UITabbedPanel.Tab.prototype.constructor = UITabbedPanel.Tab;
+		this.dom.className = 'Listbox';
+		this.dom.tabIndex = 0;
 
-// UIListbox
-function UIListbox( ) {
+		this.items = [];
+		this.listitems = [];
+		this.selectedIndex = 0;
+		this.selectedValue = null;
 
-	UIElement.call( this );
+	}
 
-	var dom = document.createElement( 'div' );
-	dom.className = 'Listbox';
-	dom.tabIndex = 0;
+	setItems( items ) {
 
-	this.dom = dom;
-	this.items = [];
-	this.listitems = [];
-	this.selectedIndex = 0;
-	this.selectedValue = null;
+		if ( Array.isArray( items ) ) {
 
-	return this;
+			this.items = items;
 
-}
+		}
 
-UIListbox.prototype = Object.create( UIElement.prototype );
-UIListbox.prototype.constructor = UIListbox;
+		this.render();
 
-UIListbox.prototype.setItems = function ( items ) {
+	}
 
-	if ( Array.isArray( items ) ) {
+	render( ) {
 
-		this.items = items;
+		while ( this.listitems.length ) {
 
-	}
+			const item = this.listitems[ 0 ];
 
-	this.render();
+			item.dom.remove();
 
-};
+			this.listitems.splice( 0, 1 );
 
-UIListbox.prototype.render = function ( ) {
+		}
 
-	while ( this.listitems.length ) {
+		for ( let i = 0; i < this.items.length; i ++ ) {
 
-		var item = this.listitems[ 0 ];
+			const item = this.items[ i ];
 
-		item.dom.remove();
+			const listitem = new UIListbox.ListboxItem( this );
+			listitem.setId( item.id || `Listbox-${i}` );
+			listitem.setTextContent( item.name || item.type );
+			this.add( listitem );
 
-		this.listitems.splice( 0, 1 );
+		}
 
 	}
 
-	for ( var i = 0; i < this.items.length; i ++ ) {
+	add() {
 
-		var item = this.items[ i ];
+		const items = Array.from( arguments );
 
-		var listitem = new UIListbox.ListboxItem( this );
-		listitem.setId( item.id || `Listbox-${i}` );
-		listitem.setTextContent( item.name || item.type );
-		this.add( listitem );
+		this.listitems = this.listitems.concat( items );
 
-	}
+		UIElement.prototype.add.apply( this, items );
 
-};
+	}
 
-// Assuming user passes valid list items
-UIListbox.prototype.add = function () {
+	selectIndex( index ) {
 
-	var items = Array.from( arguments );
+		if ( index >= 0 && index < this.items.length ) {
 
-	this.listitems = this.listitems.concat( items );
+			this.setValue( this.listitems[ index ].getId() );
 
-	UIElement.prototype.add.apply( this, items );
+		}
 
-};
+		this.selectedIndex = index;
 
-UIListbox.prototype.selectIndex = function ( index ) {
+	}
 
-	if ( index >= 0 && index < this.items.length ) {
+	getValue() {
 
-		this.setValue( this.listitems[ index ].getId() );
+		return this.selectedValue;
 
 	}
 
-	this.selectedIndex = index;
-
-};
+	setValue( value ) {
 
-UIListbox.prototype.getValue = function () {
+		for ( let i = 0; i < this.listitems.length; i ++ ) {
 
-	return this.selectedValue;
+			const element = this.listitems[ i ];
 
-};
+			if ( element.getId() === value ) {
 
-UIListbox.prototype.setValue = function ( value ) {
+				element.addClass( 'active' );
 
-	for ( var i = 0; i < this.listitems.length; i ++ ) {
-
-		var element = this.listitems[ i ];
+			} else {
 
-		if ( element.getId() === value ) {
+				element.removeClass( 'active' );
 
-			element.addClass( 'active' );
+			}
 
-		} else {
+		}
 
-			element.removeClass( 'active' );
+		this.selectedValue = value;
 
-		}
+		const changeEvent = document.createEvent( 'HTMLEvents' );
+		changeEvent.initEvent( 'change', true, true );
+		this.dom.dispatchEvent( changeEvent );
 
 	}
 
-	this.selectedValue = value;
+}
 
-	var changeEvent = document.createEvent( 'HTMLEvents' );
-	changeEvent.initEvent( 'change', true, true );
-	this.dom.dispatchEvent( changeEvent );
+class ListboxItem extends UIDiv {
 
-};
+	constructor( parent ) {
 
-// Listbox Item
-UIListbox.ListboxItem = function ( parent ) {
+		super();
 
-	UIElement.call( this );
+		this.dom.className = 'ListboxItem';
 
-	var dom = document.createElement( 'div' );
-	dom.className = 'ListboxItem';
+		this.parent = parent;
 
-	this.parent = parent;
-	this.dom = dom;
+		const scope = this;
 
-	var scope = this;
+		function onClick() {
 
-	function onClick() {
+			if ( scope.parent ) {
 
-		if ( scope.parent ) {
+				scope.parent.setValue( scope.getId( ) );
 
-			scope.parent.setValue( scope.getId( ) );
+			}
 
 		}
 
-	}
-
-	dom.addEventListener( 'click', onClick, false );
+		this.dom.addEventListener( 'click', onClick, false );
 
-	return this;
-
-};
+	}
 
-UIListbox.ListboxItem.prototype = Object.create( UIElement.prototype );
-UIListbox.ListboxItem.prototype.constructor = UIListbox.ListboxItem;
+}
 
-export { UIElement, UISpan, UIDiv, UIRow, UIPanel, UIText, UIInput, UITextArea, UISelect, UICheckbox, UIColor, UINumber, UIInteger, UIBreak, UIHorizontalRule, UIButton, UIProgress, UITabbedPanel, UIListbox };
+export { UIElement, UISpan, UIDiv, UIRow, UIPanel, UIText, UIInput, UITextArea, UISelect, UICheckbox, UIColor, UINumber, UIInteger, UIBreak, UIHorizontalRule, UIButton, UIProgress, UITabbedPanel, UIListbox, ListboxItem };