Editor: Adding file selector for material.map.

Well, that input type="file" is much more uglier than I thought...

editor/index.html

@@ -33,6 +33,7 @@
 		<script src="js/libs/signals.min.js"></script>
 
 		<script src="js/UI.js"></script>
+		<script src="js/UI.three.js"></script>
 		<script src="js/ui/Menubar.js"></script>
 		<script src="js/ui/Viewport.js"></script>
 		<script src="js/ui/Sidebar.js"></script>

editor/js/UI.three.js

@@ -0,0 +1,60 @@
+// Texture
+
+UI.Texture = function ( position ) {
+
+	UI.Element.call( this );
+
+	var scope = this;
+
+	this.texture = new THREE.Texture();
+
+	this.dom = document.createElement( 'input' );
+	this.dom.type = 'file';
+	this.dom.style.position = position || 'relative';
+	this.dom.style.marginTop = '-2px';
+	this.dom.style.marginLeft = '-2px';
+
+	this.onChangeCallback = null;
+
+	this.dom.addEventListener( 'change', function ( event ) {
+
+		var file = event.target.files[ 0 ];
+
+		if ( file.type.match( 'image.*' ) ) {
+
+			var reader = new FileReader();
+			reader.addEventListener( 'load', function ( event ) {
+
+				var image = document.createElement( 'img' );
+				image.src = event.target.result;
+
+				scope.texture.image = image;
+
+				if ( scope.onChangeCallback ) scope.onChangeCallback();
+
+			}, false );
+			reader.readAsDataURL( file );
+
+		}
+
+	}, false );
+
+	return this;
+
+};
+
+UI.Texture.prototype = Object.create( UI.Element.prototype );
+
+UI.Texture.prototype.getValue = function () {
+
+	return this.texture;
+
+};
+
+UI.Texture.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};

editor/js/ui/Sidebar.Properties.Material.js

@@ -109,7 +109,7 @@ Sidebar.Properties.Material = function ( signals ) {
 
 	var materialMapRow = new UI.Panel();
 	var materialMapEnabled = new UI.Checkbox( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialMap = new UI.Text( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
+	var materialMap = new UI.Texture( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
 
 	materialMapRow.add( new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
 	materialMapRow.add( materialMapEnabled );
@@ -259,6 +259,13 @@ Sidebar.Properties.Material = function ( signals ) {
 
 			}
 
+			if ( material.map !== undefined ) {
+
+				material.map = materialMapEnabled.getValue() === true ? materialMap.getValue() : null;
+				material.needsUpdate = true;
+
+			}
+
 			if ( material.opacity !== undefined ) {
 
 				material.opacity = materialOpacity.getValue();
@@ -374,13 +381,11 @@ Sidebar.Properties.Material = function ( signals ) {
 
 			}
 
-			/*
 			if ( material.map !== undefined ) {
 
-				materialMap.setValue( material.map );
+				materialMapEnabled.setValue( material.map !== null );
 
 			}
-			*/
 
 			if ( material.opacity !== undefined ) {