Editor: WIP Menubar.File.

editor/index.html

@@ -37,13 +37,14 @@
 		<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/Menubar.File.js"></script>
 		<script src="js/ui/Sidebar.js"></script>
 		<script src="js/ui/Sidebar.Outliner.js"></script>
 		<script src="js/ui/Sidebar.Properties.js"></script>
 		<script src="js/ui/Sidebar.Properties.Object3D.js"></script>
 		<script src="js/ui/Sidebar.Properties.Geometry.js"></script>
 		<script src="js/ui/Sidebar.Properties.Material.js"></script>
+		<script src="js/ui/Viewport.js"></script>
 
 		<script>
 
@@ -67,6 +68,12 @@
 
 			//
 
+			var viewport = new Viewport( signals );
+			viewport.setTop( '32px' );
+			viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
+			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
+			document.body.appendChild( viewport.dom );
+
 			var menubar = new Menubar( signals );
 			menubar.setWidth( '100%' );
 			menubar.setHeight( '32px' );
@@ -78,12 +85,6 @@
 			sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
 			document.body.appendChild( sidebar.dom );
 
-			var viewport = new Viewport( signals );
-			viewport.setTop( '32px' );
-			viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
-			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
-			document.body.appendChild( viewport.dom );
-
 			document.addEventListener( 'keydown', function ( event ) {
 
 				switch ( event.keyCode ) {

editor/js/UI.js

@@ -4,6 +4,8 @@ UI.Element = function () {};
 
 UI.Element.prototype = {
 
+	// styles
+
 	setStyle: function ( style, array ) {
 
 		for ( var i = 0; i < array.length; i ++ ) {
@@ -62,7 +64,7 @@ UI.Element.prototype = {
 
 	},
 
-	// border
+	//
 
 	setBorder: function () {
 
@@ -104,7 +106,7 @@ UI.Element.prototype = {
 
 	},
 
-	// margin
+	//
 
 	setMargin: function () {
 
@@ -146,7 +148,7 @@ UI.Element.prototype = {
 
 	},
 
-	// padding
+	//
 
 	setPadding: function () {
 
@@ -206,8 +208,33 @@ UI.Element.prototype = {
 
 		return this;
 
-	}
+	},
+
+	// events
+
+	onMouseOver: function ( callback ) {
+
+		this.dom.addEventListener( 'mouseover', callback, false );
+
+		return this;
+
+	},
 
+	onMouseOut: function ( callback ) {
+
+		this.dom.addEventListener( 'mouseout', callback, false );
+
+		return this;
+
+	},
+
+	onClick: function ( callback ) {
+
+		this.dom.addEventListener( 'click', callback, false );
+
+		return this;
+
+	}
 
 }
 
@@ -254,6 +281,7 @@ UI.Text = function ( position ) {
 
 	var dom = document.createElement( 'span' );
 	dom.style.position = position || 'relative';
+	dom.style.cursor = 'default';
 
 	this.dom = dom;
 

editor/js/ui/Menubar.File.js

@@ -0,0 +1,16 @@
+Menubar.File = function ( signals ) {
+
+	var container = new UI.Panel( 'absolute' );
+	container.setBackgroundColor( '#eee' );
+	container.setWidth( '120px' );
+	container.setPadding( '10px' );
+
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Open' ).setColor( '#666' ) ) );
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Reset' ).setColor( '#666' ) ) );
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export Geometry' ).setColor( '#666' ) ) );
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export Scene' ).setColor( '#666' ) ) );
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export OBJ' ).setColor( '#666' ) ) );
+
+	return container;
+
+}

editor/js/ui/Menubar.js

@@ -5,12 +5,82 @@ var Menubar = function ( signals ) {
 
 	var options = new UI.Panel();
 	options.setMargin( '8px' );
-	options.add( new UI.Text().setValue( 'File' ).setColor( '#666' ).setMarginRight( '20px' ) );
-	options.add( new UI.Text().setValue( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ) );
-	options.add( new UI.Text().setValue( 'Add' ).setColor( '#666' ).setMarginRight( '20px' ) );
-	options.add( new UI.Text().setValue( 'Help' ).setColor( '#666' ).setMarginRight( '20px' ) );
+
+	// File
+
+	var optionFile = new UI.Text().setValue( 'File' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionFileClick );
+	options.add( optionFile );
+
+	var optionFileMenu = new Menubar.File().setTop( '32px' ).setDisplay( 'none' ).onMouseOut( closeAll );
+	container.add( optionFileMenu );
+
+	// Edit
+
+	var optionEdit = new UI.Text().setValue( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionEditClick );
+	options.add( optionEdit );
+
+	var optionEditMenu = new Menubar.File().setTop( '32px' ).setLeft( '50px' ).setDisplay( 'none' ).onMouseOut( closeAll );
+	container.add( optionEditMenu );
+
+	// Add
+
+	var optionAdd = new UI.Text().setValue( 'Add' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionAddClick );
+	options.add( optionAdd );
+
+	var optionAddMenu = new Menubar.File().setTop( '32px' ).setLeft( '90px' ).setDisplay( 'none' ).onMouseOut( closeAll );
+	container.add( optionAddMenu );
+
+
+	// Help
+
+	var optionHelp = new UI.Text().setValue( 'Help' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionHelpClick );
+	options.add( optionHelp );
+
+	var optionHelpMenu = new Menubar.File().setTop( '32px' ).setLeft( '140px' ).setDisplay( 'none' ).onMouseOut( closeAll );
+	container.add( optionHelpMenu );
+
+
+	//
+
 	container.add( options );
 
+	function closeAll() {
+
+		optionFileMenu.setDisplay( 'none' );
+		optionEditMenu.setDisplay( 'none' );
+		optionAddMenu.setDisplay( 'none' );
+		optionHelpMenu.setDisplay( 'none' );
+
+	}
+
+	function onOptionFileClick() {
+
+		closeAll();
+		optionFileMenu.setDisplay( '' );
+
+	}
+
+	function onOptionEditClick() {
+
+		closeAll();
+		optionEditMenu.setDisplay( '' );
+
+	}
+
+	function onOptionAddClick() {
+
+		closeAll();
+		optionAddMenu.setDisplay( '' );
+
+	}
+
+	function onOptionHelpClick() {
+
+		closeAll();
+		optionHelpMenu.setDisplay( '' );
+
+	}
+
 	return container;
 
 }