Merge pull request #488 from learn-co/scroll

Reintroduce terminal scrolling via keymaps

keymaps/learn-ide.json

@@ -0,0 +1,29 @@
+{
+  ".platform-darwin": {
+    "cmd-i": "learn-ide:toggle-terminal",
+    "cmd-;": "learn-ide:toggle-focus",
+    "cmd-:": "learn-ide:toggle-popout"
+  },
+  ".platform-win32, .platform-linux": {
+    "ctrl-U": "learn-ide:toggle-terminal",
+    "ctrl-;": "learn-ide:toggle-focus",
+    "ctrl-:": "learn-ide:toggle-popout"
+  },
+  ".platform-darwin .terminal": {
+    "cmd-=": "learn-ide:increase-font-size",
+    "cmd--": "learn-ide:decrease-font-size",
+    "cmd-0": "learn-ide:reset-font-size",
+    "cmd-up": "learn-ide:scroll-up",
+    "cmd-down": "learn-ide:scroll-down"
+  },
+  ".platform-win32 .terminal, .platform-linux .terminal": {
+    "ctrl-=": "learn-ide:increase-font-size",
+    "ctrl--": "learn-ide:decrease-font-size",
+    "ctrl-0": "learn-ide:reset-font-size",
+    "ctrl-C": "core:copy",
+    "ctrl-V": "core:paste",
+    "ctrl-up": "learn-ide:scroll-up",
+    "ctrl-down": "learn-ide:scroll-down"
+  }
+}
+

lib/learn-ide.js

@@ -112,6 +112,8 @@ export default {
       'learn-ide:reset-font-size': () => this.termView.resetFontSize(),
       'learn-ide:increase-font-size': () => this.termView.increaseFontSize(),
       'learn-ide:decrease-font-size': () => this.termView.decreaseFontSize(),
+      'learn-ide:scroll-up': () => this.termView.scrollUp(),
+      'learn-ide:scroll-down': () => this.termView.scrollDown(),
       'learn-ide:clear-terminal': () => this.term.send('')
     }));
 

lib/popout-emulator.js

@@ -22,10 +22,10 @@ class PopoutEmulator {
 
     document.body.style.height = `${window.innerHeight}px`
     document.body.style.fontSize = `${localStore.get('popout-emulator:font-size')}px`
-    this.emulator.open(document.body)
+    this.emulator.open(document.body, true)
 
     this.emulator.toggleFullscreen(true)
-    this.emulator.fit()
+    this.setFontFamily(localStore.get('popout-emulator:font-family'))
   }
 
   get container() {
@@ -34,7 +34,13 @@ class PopoutEmulator {
 
   subscribe() {
     this.emulator.attachCustomKeydownHandler((e) => {
-      this.handleShortcuts(e)
+      var callbackName = this.callbackNameForKeyEvent(e);
+
+      if (callbackName != null) {
+        e.preventDefault()
+        this[callbackName](e)
+        return false
+      }
     })
 
     this.emulator.on('data', (data) => {
@@ -59,87 +65,52 @@ class PopoutEmulator {
     bus.emit('popout-emulator:data', data)
   }
 
-  handleShortcuts(e) {
-    var wasHandled = false
-    var {which, metaKey, shiftKey, ctrlKey} = e
-
-    if ((process.platform === 'darwin') && metaKey) {
-      wasHandled = this.handleCommandKey(which)
+  callbackNameForKeyEvent({keyCode, metaKey, shiftKey, ctrlKey}) {
+    var keyCodeCallbacks = {
+      // Mac only
+        cmd: {
+          187: 'increaseFontSize', // cmd-=
+          189: 'decreaseFontSize', // cmd--
+          48: 'resetFontSize',     // cmd-0
+          38: 'scrollUp',          // cmd-up
+          40: 'scrollDown',        // cmd-down
+          67: 'clipboardCopy',     // cmd-c
+          86: 'clipboardPaste'     // cmd-v
+        },
+      // Windows & Linux only
+        ctrl: {
+          187: 'increaseFontSize', // ctrl-=
+          189: 'decreaseFontSize', // ctrl--
+          48: 'resetFontSize',     // ctrl-0
+          38: 'scrollUp',          // ctrl-up
+          40: 'scrollDown'         // ctrl-down
+        },
+        ctrlShift: {
+          67: 'clipboardCopy',     // ctrl-C
+          86: 'clipboardPaste'     // ctrl-V
+        }
+      }
+
+    var isMac = process.platform === 'darwin';
+
+    var callbackGroup;
+    if (isMac && metaKey) {
+      callbackGroup = keyCodeCallbacks.cmd
+    } else if (!isMac && ctrlKey) {
+      callbackGroup = shiftKey ? keyCodeCallbacks.ctrlShift : keyCodeCallbacks.ctrl
     }
 
-    if ((process.platform !== 'darwin') && ctrlKey) {
-      wasHandled = this.handleCtrlKey(which, shiftKey)
-    }
+    if (!callbackGroup) { return }
 
-    if (wasHandled) { event.preventDefault() }
+    return callbackGroup[keyCode]
   }
 
-  handleCommandKey(which) {
-    if (which === 187) {
-      // cmd-=
-      this.increaseFontSize()
-      return true
-    }
-
-    if (which === 189) {
-      // cmd--
-      this.decreaseFontSize()
-      return true
-    }
-
-    if (which === 48) {
-      // cmd-0
-      this.resetFontSize()
-      return true
-    }
-
-    if (which === 67) {
-      // cmd-c
-      this.clipboardCopy()
-      return true
-    }
-
-    if (which === 86) {
-      // cmd-v
-      this.clipboardPaste()
-      return true
-    }
-
-    return false
+  scrollUp() {
+    this.emulator.scrollDisp(-1);
   }
 
-  handleCtrlKey(which, shiftKey) {
-    if (which === 187) {
-      // cmd-=
-      this.increaseFontSize()
-      return true
-    }
-
-    if (which === 189) {
-      // cmd--
-      this.decreaseFontSize()
-      return true
-    }
-
-    if (which === 48) {
-      // cmd-0
-      this.resetFontSize()
-      return true
-    }
-
-    if (shiftKey && (which === 67)) {
-      // ctrl-C
-      this.clipboardCopy()
-      return true
-    }
-
-    if (shiftKey && (which === 86)) {
-      // ctrl-V
-      this.clipboardPaste()
-      return true
-    }
-
-    return false
+  scrollDown() {
+    this.emulator.scrollDisp(1);
   }
 
   clipboardCopy() {
@@ -183,8 +154,18 @@ class PopoutEmulator {
 
   setFontSize(sizeInt) {
     this.container.style.fontSize = `${sizeInt}px`
+    this.fit()
+  }
+
+  setFontFamily(fontFamily) {
+    if (fontFamily && fontFamily.length) {
+      this.emulator.element.style.fontFamily = fontFamily
+      this.fit()
+    }
+  }
 
-    // Two calls are necessary to properly fit after the font-size has changed
+  fit() {
+    // Two calls are necessary to properly fit
     this.emulator.fit()
     this.emulator.fit()
   }

lib/terminal-view.js

@@ -43,27 +43,30 @@ class TerminalView extends View {
   }
 
   subscribe() {
-    this.emulator.attachCustomKeydownHandler(e => {
-      this.catchSaveShortcutOnWindowsOrLinux(e);
+    this.emulator.attachCustomKeydownHandler((e) => {
+      if (this.isAttemptToScroll(e) || this.isAttemptToSave(e)) {
+        e.preventDefault()
+        return false
+      }
     })
 
-    this.emulator.on('data', data => {
+    this.emulator.on('data', (data) => {
       this.sendToTerminal(data, event);
     });
 
-    this.terminal.on('message', msg => {
+    this.terminal.on('message', (msg) => {
       this.writeToEmulator(msg);
     });
 
-    bus.on('popout-emulator:data', data => {
+    bus.on('popout-emulator:data', (data) => {
       this.sendToTerminal(data);
     });
 
-    this.on('mousedown', '.terminal-resize-handle', e => {
+    this.on('mousedown', '.terminal-resize-handle', (e) => {
       this.resizeByDragStarted(e);
     });
 
-    this.on('mouseup', '.terminal-resize-handle', e => {
+    this.on('mouseup', '.terminal-resize-handle', (e) => {
       this.resizeByDragStopped(e);
     });
   }
@@ -80,22 +83,25 @@ class TerminalView extends View {
     }
   }
 
-  catchSaveShortcutOnWindowsOrLinux(e) {
-    var {which, ctrlKey} = e;
+  isAttemptToSave({keyCode, ctrlKey}) {
+    // ctrl-s on windows and linux
+    return ctrlKey && (keyCode === 83) && (process.platform !== 'darwin')
+  }
 
-    if (ctrlKey && (which === 83) && (process.platform !== 'darwin')) {
-      // ctrl-s on win32 or linux
-      var view = atom.views.getView(atom.workspace);
-      atom.commands.dispatch(view, 'learn-ide:save');
+  isAttemptToScroll({keyCode, ctrlKey, metaKey}) {
+    var isUpOrDown = [38, 40].includes(keyCode);
 
-      e.preventDefault()
-    }
+    if (!isUpOrDown) { return false }
+
+    // cmd-up/down on mac, or ctrl-up/down on windows and linux
+    return process.platform === 'darwin' ? metaKey : ctrlKey
   }
 
   loadPopoutEmulator() {
     return new Promise((resolve) => {
       localStorage.set('popout-emulator:css', colors.getCSS());
       localStorage.set('popout-emulator:font-size', this.currentFontSize())
+      localStorage.set('popout-emulator:font-family', $(this.emulator.element).css('font-family'))
 
       this.popout = new BrowserWindow({title: 'Learn IDE Terminal', show: false, autoHideMenuBar: true});
       this.popout.loadURL(`file://${popoutEmulatorFile}`);
@@ -151,6 +157,14 @@ class TerminalView extends View {
     this.emulator.focus();
   }
 
+  scrollUp() {
+    this.emulator.scrollDisp(-1);
+  }
+
+  scrollDown() {
+    this.emulator.scrollDisp(1);
+  }
+
   setFontFamily(fontFamily) {
     var value = 'courier-new, courier, monospace';