addPane takes a Pane. turn project and tab plugins into Panes

plugins/project/index.coffee

@@ -1 +1,3 @@
-exports.Project = require('project/project').init()
+exports.Project = Project = require 'project/project'
+
+new Project

plugins/project/project.coffee

@@ -3,47 +3,52 @@ _ = require 'underscore'
 
 {activeWindow} = require 'app'
 File = require 'fs'
+Pane = require 'pane'
 
-{bindKey} = require 'keybinder'
+module.exports =
+class Project extends Pane
+  showing: false
 
-exports.init = ->
-  @html = require "project/project.html"
+  position: 'left'
+  html: require "project/project.html"
 
-  bindKey 'toggleProjectDrawer', 'Command-Ctrl-N', =>
-    @toggle()
+  keymap:
+    'Command-Ctrl-N': 'toggle'
 
-  activeWindow.document.ace.on 'open', =>
-    @reload() if @dir? and File.workingDirectory() isnt @dir
+  initialize: ->
+    activeWindow.document.ace.on 'open', =>
+      @reload() if @dir? and File.workingDirectory() isnt @dir
 
-  $('#project .cwd').live 'click', (event) =>
-    activeWindow.open @dir.replace _.last(@dir.split '/'), ''
+    $('#project .cwd').live 'click', (event) =>
+      activeWindow.open @dir.replace _.last(@dir.split '/'), ''
 
-  $('#project li').live 'click', (event) =>
-    $('#project .active').removeClass 'active'
-    el = $(event.currentTarget)
-    el.addClass 'active'
-    path = decodeURIComponent el.attr 'path'
-    activeWindow.open path
+    $('#project li').live 'click', (event) =>
+      $('#project .active').removeClass 'active'
+      el = $(event.currentTarget)
+      el.addClass 'active'
+      path = decodeURIComponent el.attr 'path'
+      activeWindow.open path
 
-exports.toggle = ->
-  if @showing
-    $('#project').parent().remove()
-  else
-    activeWindow.addPane 'left', @html
-    @reload()
+  toggle: ->
+    if @showing
+      $('#project').parent().remove()
+    else
+      activeWindow.addPane this
+      @reload()
 
-  @showing = not @showing
+    @showing = not @showing
 
-exports.reload = ->
-  @dir = dir = File.workingDirectory()
-  $('#project .cwd').text _.last dir.split '/'
+  reload: ->
+    @dir = dir = File.workingDirectory()
+    $('#project .cwd').text _.last dir.split '/'
 
-  $('#project li').remove()
+    $('#project li').remove()
 
-  files = File.list dir
-  listItems = _.map files, (path) ->
-    filename = path.replace(dir, "").substring 1
-    type = if File.isDirectory(path) then 'dir' else 'file'
-    "<li class='#{type}' path='#{encodeURIComponent path}'>#{filename}</li>"
+    files = File.list dir
+    listItems = _.map files, (path) ->
+      filename = path.replace(dir, "").substring 1
+      type = if File.isDirectory(path) then 'dir' else 'file'
+      path = encodeURIComponent path
+      "<li class='#{type}' path='#{path}'>#{filename}</li>"
 
-  $('#project .files').append listItems.join '\n'
+    $('#project .files').append listItems.join '\n'

plugins/tabs/index.coffee

@@ -1 +1,3 @@
 exports.Tabs = Tabs = require 'tabs/tabs'
+
+new Tabs

plugins/tabs/tabs.coffee

@@ -1,31 +1,37 @@
 $ = require 'jquery'
 _ = require 'underscore'
 
+Pane = require 'pane'
 {activeWindow} = require 'app'
-{bindKey} = require 'keybinder'
 
+module.exports =
+class Tabs extends Pane
+  position: 'top'
+  html: require 'tabs/tabs.html'
 
-# click tab
-$(document).delegate '#tabs ul li:not(.add) a', 'click', ->
-  tabs.switchToTab this
-  false
+  keymap:
+    'Command-Ctrl-T': 'toggle'
 
-# click 'add' tab
-$(document).delegate '#tabs .add a', 'click', ->
-  tabs.addTab()
-  false
+  initialize: ->
+    tab = this
+    # click tab
+    $(document).delegate '#tabs ul li:not(.add) a', 'click', ->
+      tab.switchToTab this
+      false
 
-# toggle
-bindKey 'toggleTabs', 'Command-Ctrl-T', ->
-  if $('#tabs').length
-    tabs.hideTabs()
-  else
-    tabs.showTabs()
+    # click 'add' tab
+    $(document).delegate '#tabs .add a', 'click', ->
+      tab.addTab()
+      false
 
+  toggle: ->
+    if $('#tabs').length
+      @hideTabs()
+    else
+      @showTabs()
 
-module.exports = tabs =
   showTabs: ->
-    activeWindow.addPane 'top', require 'tabs/tabs.html'
+    activeWindow.addPane this
     $('#tabs').parents('.pane').css height: 'inherit'
     css = $('<style id="tabs-style"></style>').html require 'tabs/tabs.css'
     $('head').append css

src/editor.coffee

@@ -11,6 +11,9 @@ module.exports =
 class Editor extends Pane
   filename: null
 
+  position: 'main'
+  html: '<div id="editor"></div>'
+
   keymap:
     'Command-S'       : 'save'
     'Command-Shift-S' : 'saveAs'