From faf31d972868311602616b0a04a2923d536e1824 Mon Sep 17 00:00:00 2001
From: cahrens <christina@edx.org>
Date: Wed, 15 May 2013 11:34:49 -0400
Subject: [PATCH 1/2] Get toggling between Editor and Settings working.

---
 .../coffee/src/views/module_edit.coffee       | 45 +++++++++++++++----
 cms/templates/component.html                  |  6 +--
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/cms/static/coffee/src/views/module_edit.coffee b/cms/static/coffee/src/views/module_edit.coffee
index d5b6ef1b52..c5869fa9b9 100644
--- a/cms/static/coffee/src/views/module_edit.coffee
+++ b/cms/static/coffee/src/views/module_edit.coffee
@@ -1,6 +1,7 @@
 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")
-    else
-      previousTab = @$el.find('li.active-mode .is-set')
-      previousTab.parent().siblings().find("a").addClass('is-set')
-      previousTab.removeClass('is-set')
+    if not @hasDataEditor()
+      return
+    @selectMode(event.currentTarget.parentElement.id)
 
-      previousTabContent = @$el.find('div.is-active')
-      previousTabContent.siblings().addClass('is-active')
-      previousTabContent.removeClass('is-active')
+  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
+      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
diff --git a/cms/templates/component.html b/cms/templates/component.html
index 3aa8c322df..cfdd40403d 100644
--- a/cms/templates/component.html
+++ b/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 -->

From a16740691f37f0f545124890c82ea14b4c9c640e Mon Sep 17 00:00:00 2001
From: cahrens <christina@edx.org>
Date: Wed, 15 May 2013 11:39:07 -0400
Subject: [PATCH 2/2] Minor update.

---
 cms/static/coffee/src/views/module_edit.coffee | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/cms/static/coffee/src/views/module_edit.coffee b/cms/static/coffee/src/views/module_edit.coffee
index c5869fa9b9..04d99299d2 100644
--- a/cms/static/coffee/src/views/module_edit.coffee
+++ b/cms/static/coffee/src/views/module_edit.coffee
@@ -122,4 +122,5 @@ class CMS.Views.ModuleEdit extends Backbone.View
     # 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
+    @$el.find('.wrapper-comp-settings').addClass('is-active')
+    @$el.find('#settings-mode').find("a").addClass('is-set')
\ No newline at end of file