diff --git a/spec/app/config-view-spec.coffee b/spec/app/config-view-spec.coffee new file mode 100644 index 000000000..1e476b25d --- /dev/null +++ b/spec/app/config-view-spec.coffee @@ -0,0 +1,24 @@ +ConfigView = require 'config-view' +{$$} = require 'space-pen' + +describe "ConfigView", -> + configView = null + + beforeEach -> + configView = new ConfigView + + describe ".addPanel(name, view)", -> + fit "adds a menu entry to the left and a panel that can be activated by clicking it", -> + configView.addPanel('Panel 1', $$ -> @div id: 'panel-1') + configView.addPanel('Panel 2', $$ -> @div id: 'panel-2') + + expect(configView.panelMenu.find('li:contains(Panel 1)')).toExist() + expect(configView.panelMenu.find('li:contains(Panel 1)')).toHaveClass('active') + expect(configView.panelMenu.find('li:contains(Panel 2)')).toExist() + + configView.attachToDom() + expect(configView.panels.find('#panel-1')).toBeVisible() + expect(configView.panels.find('#panel-2')).toBeHidden() + configView.panelMenu.find('li:contains(Panel 2)').click() + expect(configView.panels.find('#panel-2')).toBeVisible() + expect(configView.panels.find('#panel-1')).toBeHidden() diff --git a/src/app/config-view.coffee b/src/app/config-view.coffee index c45cef0f3..dab7297e4 100644 --- a/src/app/config-view.coffee +++ b/src/app/config-view.coffee @@ -1,9 +1,30 @@ -{View} = require 'space-pen' +{View, $$} = require 'space-pen' +$ = require 'jquery' +_ = require 'underscore' module.exports = class ConfigView extends View @content: -> - @div id: 'config-view', "Config View" + @div id: 'config-view', => + @ol id: 'panel-menu', outlet: 'panelMenu' + @div id: 'panels', outlet: 'panels' initialize: -> + @panelsByName = {} document.title = "Atom Configuration" + @on 'click', '#panel-menu li', (e) => + @showPanel($(e.target).attr('name')) + + addPanel: (name, panel) -> + panelItem = $$ -> @li name: name, name + @panelMenu.append(panelItem) + panel.hide() + @panelsByName[name] = panel + @panels.append(panel) + @showPanel(name) if _.values(@panelsByName).length == 1 + + showPanel: (name) -> + @panels.children().hide() + @panelMenu.children('.active').removeClass('active') + @panelsByName[name].show() + @panelMenu.children("[name='#{name}']").addClass('active')