Editor: Sidebar.Controls to Sidebar.Settings.Shortcuts. Clean up.

editor/index.html

@@ -106,6 +106,7 @@
 		<script src="js/Sidebar.Scene.js"></script>
 		<script src="js/Sidebar.Project.js"></script>
 		<script src="js/Sidebar.Settings.js"></script>
+		<script src="js/Sidebar.Settings.Shortcuts.js"></script>
 		<script src="js/Sidebar.Properties.js"></script>
 		<script src="js/Sidebar.Object.js"></script>
 		<script src="js/Sidebar.Geometry.js"></script>
@@ -127,7 +128,6 @@
 		<script src="js/Sidebar.Animation.js"></script>
 		<script src="js/Sidebar.Script.js"></script>
 		<script src="js/Sidebar.History.js"></script>
-		<script src="js/Sidebar.Controls.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
 		<script src="js/Viewport.Info.js"></script>

editor/js/Config.js

@@ -21,10 +21,10 @@ var Config = function ( name ) {
 
 		'settings/history': false,
 
-		'settings/controls/translate': 'w',
-		'settings/controls/rotate': 'e',
-		'settings/controls/scale': 'r',
-		'settings/controls/undo': 'z'
+		'settings/shortcuts/translate': 'w',
+		'settings/shortcuts/rotate': 'e',
+		'settings/shortcuts/scale': 'r',
+		'settings/shortcuts/undo': 'z'
 	};
 
 	if ( window.localStorage[ name ] === undefined ) {

editor/js/Sidebar.Controls.js

@@ -1,154 +0,0 @@
-/**
- * @author TyLindberg / https://github.com/TyLindberg
- */
-
-Sidebar.Controls = function ( editor ) {
-
-	var config = editor.config;
-	var signals = editor.signals;
-
-	const IS_MAC = navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
-
-	var isValidKeyBinding = function ( key ) {
-
-		return key.match( /^[A-Za-z0-9]$/i ); // Can't use z currently due to undo/redo
-
-	};
-
-	var container = new UI.Panel();
-	container.add( new UI.Text( 'CONTROLS' ) );
-
-	// Use this to add a line break above the panel
-	container.add( new UI.Break(), new UI.Break() );
-
-	var controlNames = [
-		'translate',
-		'rotate',
-		'scale',
-		'undo'
-	];
-
-	for ( var i = 0; i < controlNames.length; i ++ ) {
-
-		let name = controlNames[ i ];
-		let configName = 'settings/controls/' + name;
-		let controlRow = new UI.Row();
-
-		let controlInput = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
-
-			if ( isValidKeyBinding( controlInput.getValue() ) ) {
-
-				config.setKey( configName, controlInput.getValue()[ 0 ] );
-
-			}
-
-		} );
-
-		// Automatically highlight when selecting an input field
-		controlInput.dom.addEventListener( 'focus', function () {
-
-			controlInput.dom.select();
-
-		} );
-
-		// If the value of the input field is invalid, revert the input field
-		// to contain the key binding stored in config
-		controlInput.dom.addEventListener( 'blur', function () {
-
-			if ( ! isValidKeyBinding( controlInput.getValue() ) ) {
-
-				controlInput.setValue( config.getKey( configName ) );
-
-			}
-
-		} );
-
-		// If a valid key binding character is entered, blur the input field
-		controlInput.dom.addEventListener( 'keyup', function ( event ) {
-
-			if ( isValidKeyBinding( event.key ) ) {
-
-				controlInput.dom.blur();
-
-			}
-
-		} );
-
-		if ( config.getKey( configName ) !== undefined ) {
-
-			controlInput.setValue( config.getKey( configName ) );
-
-		}
-
-		controlInput.dom.maxLength = 1;
-		controlRow.add( new UI.Text( name.charAt( 0 ).toUpperCase() + name.slice( 1 ) ).setWidth( '90px' ) );
-		controlRow.add( controlInput );
-		container.add( controlRow );
-
-	}
-
-	document.addEventListener( 'keydown', function ( event ) {
-
-		switch ( event.key ) {
-
-			case 'Backspace':
-
-				event.preventDefault(); // prevent browser back
-
-			case 'Delete':
-
-				var object = editor.selected;
-
-				if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
-
-				var parent = object.parent;
-				if ( parent !== null ) editor.execute( new RemoveObjectCommand( object ) );
-
-				break;
-
-			case editor.config.getKey( 'settings/controls/translate' ): // Translation transform mode
-
-				editor.signals.transformModeChanged.dispatch( 'translate' );
-
-				break;
-
-			case editor.config.getKey( 'settings/controls/rotate' ): // Rotation transform mode
-
-				editor.signals.transformModeChanged.dispatch( 'rotate' );
-
-				break;
-
-			case editor.config.getKey( 'settings/controls/scale' ): // Scaling transform mode
-
-				editor.signals.transformModeChanged.dispatch( 'scale' );
-
-				break;
-
-			case editor.config.getKey( 'settings/controls/undo' ).toLowerCase(): // Register Ctrl/Command-Z for Undo and Ctrl/Command-Shift-Z for Redo
-			case editor.config.getKey( 'settings/controls/undo' ).toUpperCase(): // Safari and Firefox register lowercase z when Ctrl-Shift-Z is pressed
-
-				if ( IS_MAC ? event.metaKey : event.ctrlKey ) {
-
-					event.preventDefault(); // Prevent browser specific hotkeys
-
-					if ( event.shiftKey ) {
-
-						editor.redo();
-
-					} else {
-
-						editor.undo();
-
-					}
-
-				}
-
-				break;
-
-		}
-
-	}, false );
-
-	return container;
-
-};

editor/js/Sidebar.Settings.Shortcuts.js

@@ -0,0 +1,154 @@
+/**
+ * @author TyLindberg / https://github.com/TyLindberg
+ */
+
+Sidebar.Settings.Shortcuts = function ( editor ) {
+
+	const IS_MAC = navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
+
+	function isValidKeyBinding( key ) {
+
+		return key.match( /^[A-Za-z0-9]$/i ); // Can't use z currently due to undo/redo
+
+	}
+
+	var config = editor.config;
+	var signals = editor.signals;
+
+	var container = new UI.Div();
+	container.add( new UI.Break() );
+
+	var shortcuts = [ 'translate', 'rotate', 'scale', 'undo' ];
+
+	for ( var i = 0; i < shortcuts.length; i ++ ) {
+
+		let name = shortcuts[ i ];
+
+		let configName = 'settings/shortcuts/' + name;
+		let shortcutRow = new UI.Row();
+
+		let shortcutInput = new UI.Input().setWidth( '150px' ).setFontSize( '12px' );
+		shortcutInput.setTextTransform( 'lowercase' );
+		shortcutInput.onChange( function () {
+
+			var value = shortcutInput.getValue().toLowerCase();
+
+			if ( isValidKeyBinding( value ) ) {
+
+				config.setKey( configName, value );
+
+			}
+
+		} );
+
+		// Automatically highlight when selecting an input field
+		shortcutInput.dom.addEventListener( 'focus', function () {
+
+			shortcutInput.dom.select();
+
+		} );
+
+		// If the value of the input field is invalid, revert the input field
+		// to contain the key binding stored in config
+		shortcutInput.dom.addEventListener( 'blur', function () {
+
+			if ( ! isValidKeyBinding( shortcutInput.getValue() ) ) {
+
+				shortcutInput.setValue( config.getKey( configName ) );
+
+			}
+
+		} );
+
+		// If a valid key binding character is entered, blur the input field
+		shortcutInput.dom.addEventListener( 'keyup', function ( event ) {
+
+			if ( isValidKeyBinding( event.key ) ) {
+
+				shortcutInput.dom.blur();
+
+			}
+
+		} );
+
+		if ( config.getKey( configName ) !== undefined ) {
+
+			shortcutInput.setValue( config.getKey( configName ) );
+
+		}
+
+		shortcutInput.dom.maxLength = 1;
+		shortcutRow.add( new UI.Text( name ).setTextTransform( 'capitalize' ).setWidth( '90px' ) );
+		shortcutRow.add( shortcutInput );
+
+		container.add( shortcutRow );
+
+	}
+
+	document.addEventListener( 'keydown', function ( event ) {
+
+		switch ( event.key.toLowerCase() ) {
+
+			case 'Backspace':
+
+				event.preventDefault(); // prevent browser back
+
+				break;
+
+			case 'Delete':
+
+				var object = editor.selected;
+
+				if ( object === null ) return;
+				if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
+
+				var parent = object.parent;
+				if ( parent !== null ) editor.execute( new RemoveObjectCommand( object ) );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/translate' ):
+
+				signals.transformModeChanged.dispatch( 'translate' );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/rotate' ):
+
+				signals.transformModeChanged.dispatch( 'rotate' );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/scale' ):
+
+				signals.transformModeChanged.dispatch( 'scale' );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/undo' ):
+
+				if ( IS_MAC ? event.metaKey : event.ctrlKey ) {
+
+					event.preventDefault(); // Prevent browser specific hotkeys
+
+					if ( event.shiftKey ) {
+
+						editor.redo();
+
+					} else {
+
+						editor.undo();
+
+					}
+
+				}
+
+				break;
+
+		}
+
+	}, false );
+
+	return container;
+
+};

editor/js/Sidebar.Settings.js

@@ -42,6 +42,8 @@ Sidebar.Settings = function ( editor ) {
 
 	container.add( themeRow );
 
+	container.add( new Sidebar.Settings.Shortcuts( editor ) );
+
 	return container;
 
 };

editor/js/Sidebar.js

@@ -41,8 +41,7 @@ var Sidebar = function ( editor ) {
 
 	var settings = new UI.Span().add(
 		new Sidebar.Settings( editor ),
-		new Sidebar.History( editor ),
-		new Sidebar.Controls( editor )
+		new Sidebar.History( editor )
 	);
 	container.add( settings );