Introduce working popout-terminal alternative

learn-co · Mar 28, 2017 · 7132081 · 7132081
1 parent db23667
commit 7132081
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 3 deletions.
diff --git a/keymaps/learn-ide.cson b/keymaps/learn-ide.cson
@@ -1,6 +1,7 @@
 '.platform-darwin':
-  'cmd-I': 'learn-ide:toggle-terminal'
+  'cmd-i': 'learn-ide:toggle-terminal'
   'cmd-;': 'learn-ide:toggle-focus'
+  'cmd-I': 'learn-ide:toggle-popout'
 
 '.platform-win32, .platform-linux':
   'ctrl-I': 'learn-ide:toggle-terminal'

diff --git a/lib/colors.coffee b/lib/colors.coffee
@@ -38,6 +38,7 @@ helper =
     css = """
       .terminal {
         color: #{foreground.toRGBAString()};
+        background-color: #{background.toRGBAString()};
       }
 
       .terminal .xterm-viewport {

diff --git a/lib/event-bus.js b/lib/event-bus.js
@@ -1,6 +1,6 @@
 var pageBus = require('page-bus');
 
-module.exports = (function() {
+module.exports = bus = (function() {
   return pageBus({key: 'learn-ide'})
 })()
 
diff --git a/lib/learn-ide.coffee b/lib/learn-ide.coffee
@@ -93,6 +93,7 @@ module.exports =
     @subscriptions.add atom.commands.add 'atom-workspace',
       'learn-ide:open': (e) => @learnOpen(e.detail.path)
       'learn-ide:toggle-terminal': () => @termView.toggle()
+      'learn-ide:toggle-popout': () => @termView.popout()
       'learn-ide:toggle-focus': => @termView.toggleFocus()
       'learn-ide:focus': => @termView.focusEmulator()
       'learn-ide:toggle:debugger': => @term.toggleDebugger()

diff --git a/lib/local-storage.js b/lib/local-storage.js
@@ -1,4 +1,4 @@
-module.exports = {
+module.exports = local = {
   get(key) {
     return localStorage.getItem(key)
   },

diff --git a/lib/terminal-view.coffee b/lib/terminal-view.coffee
@@ -1,7 +1,13 @@
 {$, View} = require 'atom-space-pen-views'
 {clipboard} = require 'electron'
+{BrowserWindow} = require 'remote'
 TerminalEmulator = require 'xterm'
 TerminalEmulator.loadAddon 'fit'
+path = require 'path'
+bus = require './event-bus'
+localStorage = require './local-storage'
+
+POPOUT_WINDOW = path.resolve( __dirname, '..', 'static', 'popout-terminal.html')
 
 module.exports =
 class TerminalView extends View
@@ -24,6 +30,8 @@ class TerminalView extends View
 
     @terminal.on 'message', (msg) =>
       @emulator.write(msg)
+      if @popoutPresent
+        bus.emit('popout-terminal:message', msg)
 
     @on 'mousedown', '.terminal-resize-handle', (e) =>
       @resizeByDragStarted(e)
@@ -55,6 +63,24 @@ class TerminalView extends View
     atom.workspace.addBottomPanel({item: this})
     @emulator.open(@emulatorContainer[0])
 
+  popout: ->
+    @hide()
+    @popoutPresent = true
+
+    win = new BrowserWindow()
+    win.loadURL("file://#{POPOUT_WINDOW}")
+    win.once 'ready-to-show', => win.show()
+    win.openDevTools()
+    win.on 'closed', =>
+      @show()
+      @popoutPresent = false
+
+    bus.on 'popout-terminal:data', (data) =>
+      if not event?
+        @terminal.send(data)
+      else
+        @parseTerminalDataEvent(event, data)
+
   copyText: ->
     selection = document.getSelection()
     rawText = selection.toString()

diff --git a/static/popout-terminal.html b/static/popout-terminal.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+	<head>
+    <link rel="stylesheet" href="../node_modules/xterm/dist/xterm.css" />
+    <link rel="stylesheet" href="../styles/terminal-colors.css" />
+    <script src="../node_modules/xterm/dist/xterm.js"></script>
+
+    <script src="../node_modules/xterm/dist/addons/fit/fit.js"></script>
+
+    <link rel="stylesheet" href="../node_modules/xterm/dist/addons/fullscreen/fullscreen.css" />
+    <script src="../node_modules/xterm/dist/addons/fullscreen/fullscreen.js"></script>
+
+    <script src="../lib/event-bus.js"></script>
+    <script src="../lib/local-storage.js"></script>
+  </head>
+	<body>
+		<div id="terminal"></div>
+    <script>
+      var el = document.getElementById('terminal')
+      var term = new Terminal({cursorBlink: true})
+
+      term.open(el)
+      term.toggleFullscreen()
+
+      term.on('data', (data) => {
+        bus.emit('popout-terminal:data', data)
+      })
+
+      bus.on('popout-terminal:message', (msg) => {
+        term.write(msg)
+      })
+
+      bus.emit('popout-terminal:data', 'clear\r')
+    </script>
+	</body>
+</html>