Get toggling between Editor and Settings working.

cms/static/coffee/src/views/module_edit.coffee

 class CMS.Views.ModuleEdit extends Backbone.View
   tagName: 'li'
   className: 'component'
+  editorMode: 'editor-mode'
 
   events:
     "click .component-editor .cancel-button": 'clickCancelButton'
@@ -27,6 +28,12 @@ class CMS.Views.ModuleEdit extends Backbone.View
           el: metadataEditor,
           model: new CMS.Models.MetadataEditor(metadataEditor.data('metadata'))
           });
+      # Need to update set "active" class on data editor if there is one.
+      # If we are only showing settings, hide the data editor controls and update settings accordingly.
+      if @hasDataEditor()
+        @selectMode(@editorMode)
+      else
+        @hideDataEditor()
 
   changedMetadata: ->
     return @metadataEditor.getModifiedMetadataValues()
@@ -86,13 +93,33 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
   clickModeButton: (event) ->
     event.preventDefault()
-    if $(this).hasClass(".is-set")
-      alert("Hi There")
+    if not @hasDataEditor()
+      return
+    @selectMode(event.currentTarget.parentElement.id)
+
+  hasDataEditor: =>
+    return @$el.find('.wrapper-comp-editor').length > 0
+
+  selectMode: (mode) =>
+    dataEditor = @$el.find('.wrapper-comp-editor')
+    settingsEditor = @$el.find('.wrapper-comp-settings')
+    editorModeButton =  @$el.find('#editor-mode').find("a")
+    settingsModeButton = @$el.find('#settings-mode').find("a")
+
+    if mode == @editorMode
+      dataEditor.addClass('is-active')
+      settingsEditor.removeClass('is-active')
+      editorModeButton.addClass('is-set')
+      settingsModeButton.removeClass('is-set')
     else
-      previousTab = @$el.find('li.active-mode .is-set')
-      previousTab.parent().siblings().find("a").addClass('is-set')
-      previousTab.removeClass('is-set')
-
-      previousTabContent = @$el.find('div.is-active')
-      previousTabContent.siblings().addClass('is-active')
-      previousTabContent.removeClass('is-active')
+      dataEditor.removeClass('is-active')
+      settingsEditor.addClass('is-active')
+      editorModeButton.removeClass('is-set')
+      settingsModeButton.addClass('is-set')
+
+  hideDataEditor: =>
+    editorModeButtonParent =  @$el.find('#editor-mode')
+    # Can it be enough to just remove active-mode?
+    editorModeButtonParent.addClass('inactive-mode')
+    editorModeButtonParent.removeClass('active-mode')
+    @$el.find('.wrapper-comp-settings').addClass('is-active')
\ No newline at end of file

cms/templates/component.html

@@ -3,11 +3,11 @@
 		<div class="component-edit-header">
   			<span class="component-name"><em>Editing:</em> Component</span>
   	  		<ul class="nav-edit-modes">
-  	  			<li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="-1">
+  	  			<li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" role="tab">
   	  				<a href="#">Editor</a>
 	  			</li>
-	  			<li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="0">
-	  				<a href="#" class="is-set">Settings</a>
+	  			<li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" role="tab">
+	  				<a href="#">Settings</a>
 	  			</li>
 	  		</ul>
 		</div> <!-- Editor Header -->