GUI: Renamed Panel to SideBar. Plus some modularisation.

gui/index.html

@@ -25,7 +25,8 @@
 
 		<script type="text/javascript" src="js/UI.js"></script>
 		<script type="text/javascript" src="js/ui/Viewport.js"></script>
-		<script type="text/javascript" src="js/ui/Panel.js"></script>
+		<script type="text/javascript" src="js/ui/SideBar.js"></script>
+		<script type="text/javascript" src="js/ui/SideBar.Properties.js"></script>
 		<script type="text/javascript" src="js/ui/MenuBar.js"></script>
 
 		<script>
@@ -49,11 +50,11 @@
 			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
 			document.body.appendChild( viewport.dom );
 
-			var panel = new Panel( signals );
-			panel.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
-			panel.setTop( '32px' );
-			panel.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
-			document.body.appendChild( panel.dom );
+			var sidebar = new SideBar( signals );
+			sidebar.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
+			sidebar.setTop( '32px' );
+			sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
+			document.body.appendChild( sidebar.dom );
 
 			var menubar = new MenuBar( signals );
 			menubar.setWidth( '100%' );

gui/js/ui/MenuBar.js

+var MenuBar = function ( signals ) {
+
+	var container = new UI.Panel( 'absolute' );
+	container.setBackgroundColor( '#eee' );
+
+	var options = new UI.Panel();
+	options.setMargin( '8px' );
+	options.add( new UI.Text().setText( 'File' ).setColor( '#666' ).setMarginRight( '10px' ) );
+	options.add( new UI.Text().setText( 'About' ).setColor( '#666' ).setMarginRight( '10px' ) );
+	container.add( options );
+
+	return container;
+
+}

gui/js/ui/Panel.js → gui/js/ui/SideBar.Properties.js

-var Panel = function ( signals ) {
-
-	var container = new UI.Panel( 'absolute' );
-	container.setWidth( '300px' ).setHeight( '100%' );
-	container.setBackgroundColor( '#eee' );
+var Properties = function ( signals ) {
 
 	var selected = null;
 
-	// Properties
-
-	var properties = new UI.Panel();
-	properties.setPadding( '8px' );
-	properties.setBorderTop( '1px solid #ccc' );
+	var container = new UI.Panel();
+	container.setPadding( '8px' );
+	container.setBorderTop( '1px solid #ccc' );
 
-	properties.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) );
 
-	properties.add( new UI.Break() );
-	properties.add( new UI.Break() );
+	container.add( new UI.Break() );
+	container.add( new UI.Break() );
 
-	properties.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
 
 	var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
 	var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
 	var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
 
-	properties.add( positionX, positionY, positionZ );
+	container.add( positionX, positionY, positionZ );
 
-	properties.add( new UI.HorizontalRule() );
+	container.add( new UI.HorizontalRule() );
 
-	properties.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
 
 	var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
 	var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
 	var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
 
-	properties.add( rotationX, rotationY, rotationZ );
+	container.add( rotationX, rotationY, rotationZ );
 
-	properties.add( new UI.HorizontalRule() );
+	container.add( new UI.HorizontalRule() );
 
-	properties.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
 
 	var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).onChanged( update );
 	var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).onChanged( update );
 	var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).onChanged( update );
 
-	properties.add( scaleX, scaleY, scaleZ );
+	container.add( scaleX, scaleY, scaleZ );
 
-	properties.add( new UI.Break() );
-	properties.add( new UI.Break() );
-
-	container.add( properties );
+	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
 
 
 	// Geometry
 
-	var properties = new UI.Panel();
-	properties.setMargin( '8px' );
-
-	properties.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
-
-	properties.add( new UI.Break() );
-	properties.add( new UI.Break() );
-
-	container.add( properties );
+	container.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
 
+	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
 
 	// Material
 
-	var properties = new UI.Panel();
-	properties.setMargin( '8px' );
-
-	properties.add( new UI.Text().setText( 'MATERIAL' ).setColor( '#666' ) );
-
-	properties.add( new UI.Break() );
-	properties.add( new UI.Break() );
+	container.add( new UI.Text().setText( 'MATERIAL' ).setColor( '#666' ) );
 
-	container.add( properties );
+	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
 
 
 	// Events

gui/js/ui/SideBar.js

+var SideBar = function ( signals ) {
+
+	var container = new UI.Panel( 'absolute' );
+	container.setWidth( '300px' ).setHeight( '100%' );
+	container.setBackgroundColor( '#eee' );
+
+	var properties = new Properties( signals );
+	container.add( properties );
+
+	return container;
+
+}