add functional view toggle logic

Author: kiddkai

lib/functional-view.coffee

@@ -1,14 +1,27 @@
-{View} = require 'atom'
+{View, $} = require 'atom'
 
 module.exports =
 class FunctionalView extends View
   @content: ->
-    @div class: "functional-view", =>
+    @div class: "functional-view console", =>
       @div class: 'block', =>
         @div class: 'btn-group', =>
-          @button class: 'btn selected', 'Console'
-          @button class: 'btn', 'Debug'
-          @button class: 'btn', 'Frame'
+          @button class: 'btn selected', 'data-functional': 'console', 'Console'
+          @button class: 'btn', 'data-functional': 'debug','Debug'
+          @button class: 'btn', 'data-functional': 'frames','Frame'
 
         @div class: 'btn-group pull-right', =>
           @button class: 'btn btn-error', 'x'
+
+  initialize: ->
+    self = this
+    @on 'click', '[data-functional]', (e) => @toggleFunctional(e)
+
+  toggleFunctional: (e) ->
+    $prevSelected = @find('.selected')
+    @removeClass($prevSelected.data('functional'))
+    $prevSelected.removeClass('selected')
+
+    $selected = $(e.target)
+    @addClass($selected.data('functional'))
+    $selected.addClass('selected')

spec/functional-view-spec.coffee

@@ -0,0 +1,34 @@
+FunctionalView = require '../lib/functional-view'
+
+describe 'Functional View', ->
+
+  functionalView = null
+
+  beforeEach ->
+    functionalView = new FunctionalView
+
+  it 'should be able to toggle to different classes', ->
+    expect(functionalView.hasClass('console')).toBeTruthy()
+
+    functionalView.find('[data-functional=debug]').click()
+    expect(functionalView.hasClass('debug')).toBeTruthy()
+    expect(functionalView.hasClass('console')).toBeFalsy()
+
+    functionalView.find('[data-functional=frames]').click()
+    expect(functionalView.hasClass('debug')).toBeFalsy()
+    expect(functionalView.hasClass('console')).toBeFalsy()
+    expect(functionalView.hasClass('frames')).toBeTruthy()
+
+    functionalView.find('[data-functional=console]').click()
+    expect(functionalView.hasClass('console')).toBeTruthy()
+
+
+  it 'should be able to toggle the selected', ->
+    functionalView.find('[data-functional=debug]').click()
+    expect(functionalView.find('.selected').data('functional')).toBe('debug')
+
+    functionalView.find('[data-functional=frames]').click()
+    expect(functionalView.find('.selected').data('functional')).toBe('frames')
+
+    functionalView.find('[data-functional=console]').click()
+    expect(functionalView.find('.selected').data('functional')).toBe('console')