Add some more commands to commands palette.

Some refactoring also. Move palette events to commands.js.

src/commandPaletteService.js

@@ -1,18 +1,9 @@
-import { deferred } from './deferred';
-import { log } from 'util';
-
-export const SWITCH_FILE_EVENT = 'switchFileEvent';
-export const OPEN_SAVED_CREATIONS_EVENT = 'openSavedCreationsEvent';
-export const SAVE_EVENT = 'saveEvent';
-
 export const commandPaletteService = {
 	subscriptions: {},
 	subscribe(eventName, callback) {
-		console.log('subscribed for ', eventName);
 		this.subscriptions[eventName] = this.subscriptions[eventName] || [];
 		this.subscriptions[eventName].push(callback);
 		return () => {
-			console.log('Unsubscribing ', eventName);
 			this.subscriptions[eventName].splice(
 				this.subscriptions[eventName].indexOf(callback),
 				1
@@ -20,7 +11,6 @@ export const commandPaletteService = {
 		};
 	},
 	publish(eventName, ...args) {
-		console.log('published ', eventName, args);
 		const callbacks = this.subscriptions[eventName] || [];
 		callbacks.forEach(callback => {
 			callback.apply(null, args);

src/commands.js

@@ -1,9 +1,15 @@
-import {
+export const SWITCH_FILE_EVENT = 'switchFileEvent';
-	OPEN_SAVED_CREATIONS_EVENT,
+export const NEW_CREATION_EVENT = 'newCreationEvent';
-	SAVE_EVENT
+export const OPEN_SAVED_CREATIONS_EVENT = 'openSavedCreationsEvent';
-} from './commandPaletteService';
+export const SAVE_EVENT = 'saveEvent';
+export const OPEN_SETTINGS_EVENT = 'openSettingsEvent';
 
 export const commands = [
+	{
+		name: 'Start New Creation',
+		event: NEW_CREATION_EVENT,
+		keyboardShortcut: ''
+	},
 	{
 		name: 'Open Creation',
 		event: OPEN_SAVED_CREATIONS_EVENT,
@@ -15,8 +21,8 @@ export const commands = [
 		keyboardShortcut: 'Cmd+S'
 	},
 	{
-		name: 'Add Library',
+		name: 'Open Settings',
-		run: '',
+		event: OPEN_SETTINGS_EVENT,
-		keyboardShortcut: 'Cmd+F'
+		keyboardShortcut: ''
 	}
 ];

src/components/CommandPalette.jsx

@@ -1,11 +1,9 @@
 import { h, Component } from 'preact';
 import Modal from './Modal';
 import { AutoFocusInput } from './common';
-import { commands } from '../commands';
+import { commands, SWITCH_FILE_EVENT } from '../commands';
-import {
+
-	commandPaletteService,
+import { commandPaletteService } from '../commandPaletteService';
-	SWITCH_FILE_EVENT
-} from '../commandPaletteService';
 import { FileIcon } from './FileIcon';
 import { UP_KEY, DOWN_KEY, ENTER_KEY } from '../keyboardKeys';
 

src/components/ContentWrapFiles.jsx

@@ -17,10 +17,8 @@ import 'codemirror/mode/meta';
 import { deferred } from '../deferred';
 import { SidePane } from './SidePane';
 import { Console } from './Console';
-import {
+import { SWITCH_FILE_EVENT } from '../commands';
-	commandPaletteService,
+import { commandPaletteService } from '../commandPaletteService';
-	SWITCH_FILE_EVENT
-} from '../commandPaletteService';
 
 const minCodeWrapSize = 33;
 

src/components/Modal.jsx

@@ -32,7 +32,12 @@ export default class Modal extends Component {
 			if (this.props.show) {
 				// HACK: refs will evaluate on next tick due to portals
 				setTimeout(() => {
-					this.overlayEl.querySelector('.js-modal__close-btn').focus();
+					const closeButton = this.overlayEl.querySelector(
+						'.js-modal__close-btn'
+					);
+					if (closeButton) {
+						closeButton.focus();
+					}
 				}, 0);
 
 				/* We insert a dummy hidden input which will take focus as soon as focus

src/components/app.jsx

@@ -57,9 +57,12 @@ import { Icons } from './Icons';
 import JSZip from 'jszip';
 import { CommandPalette } from './CommandPalette';
 import {
-	commandPaletteService,
+	OPEN_SAVED_CREATIONS_EVENT,
-	OPEN_SAVED_CREATIONS_EVENT
+	SAVE_EVENT,
-} from '../commandPaletteService';
+	OPEN_SETTINGS_EVENT,
+	NEW_CREATION_EVENT
+} from '../commands';
+import { commandPaletteService } from '../commandPaletteService';
 
 if (module.hot) {
 	require('preact/debug');
@@ -497,6 +500,10 @@ export default class App extends Component {
 			this.editorWithFocus.focus();
 		}
 	}
+	openSettings() {
+		this.setState({ isSettingsModalOpen: true });
+	}
+
 	componentDidMount() {
 		document.body.style.height = `${window.innerHeight}px`;
 
@@ -560,10 +567,26 @@ export default class App extends Component {
 				}
 			}
 		});
-
+		const commandPalleteHooks = {
-		commandPaletteService.subscribe(OPEN_SAVED_CREATIONS_EVENT, () => {
+			[NEW_CREATION_EVENT]: () => {
+				this.openNewCreationModal();
+			},
+			[OPEN_SAVED_CREATIONS_EVENT]: () => {
 				this.openSavedItemsPane();
-		});
+			},
+			[SAVE_EVENT]: () => {
+				this.saveItem();
+			},
+			[OPEN_SETTINGS_EVENT]: () => {
+				this.openSettings();
+			}
+		};
+		for (let eventName in commandPalleteHooks) {
+			commandPaletteService.subscribe(
+				eventName,
+				commandPalleteHooks[eventName]
+			);
+		}
 	}
 
 	closeAllOverlays() {
@@ -931,8 +954,7 @@ export default class App extends Component {
 			this.forkItem(item);
 		}, 350);
 	}
-	newBtnClickHandler() {
+	openNewCreationModal() {
-		trackEvent('ui', 'newBtnClick');
 		if (this.state.unsavedEditCount) {
 			var shouldDiscard = confirm(
 				'You have unsaved changes. Do you still want to create something new?'
@@ -948,6 +970,10 @@ export default class App extends Component {
 			});
 		}
 	}
+	newBtnClickHandler() {
+		trackEvent('ui', 'newBtnClick');
+		this.openNewCreationModal();
+	}
 	openBtnClickHandler() {
 		trackEvent('ui', 'openBtnClick');
 		this.openSavedItemsPane();
@@ -1412,9 +1438,7 @@ export default class App extends Component {
 						prefs={this.state.prefs}
 						layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}
 						helpBtnClickHandler={() => this.setState({ isHelpModalOpen: true })}
-						settingsBtnClickHandler={() =>
+						settingsBtnClickHandler={this.openSettings.bind(this)}
-							this.setState({ isSettingsModalOpen: true })
-						}
 						notificationsBtnClickHandler={this.notificationsBtnClickHandler.bind(
 							this
 						)}