Split problem metadata out from problem editing contents when rendering

cms/djangoapps/contentstore/views.py

 from mitxmako.shortcuts import render_to_response
 from keystore.django import keystore
-from django.contrib.auth.decorators import login_required
-from django.http import HttpResponse
 
 
 def index(request):
@@ -20,4 +18,5 @@ def edit_item(request):
     return render_to_response('unit.html', {
         'contents': item.get_html(),
         'type': item.type,
+        'name': item.name,
     })

cms/static/sass/_problem.scss

-section.problem-new,
-section.problem-edit,
-section.html-edit {
+section#unit-wrapper {
   > header {
     border-bottom: 2px solid #333;
     @include clearfix();
@@ -17,54 +15,56 @@ section.html-edit {
       float: right;
     }
   }
-
   > section {
     padding: 20px;
-
-    textarea {
-      @include box-sizing(border-box);
-      display: block;
-      width: 100%;
+    a.save-update {
+      @extend .button;
+      @include inline-block();
+      margin-top: 20px;
     }
+  }
+}
 
+section.problem-new,
+section.problem-edit,
+section.html-edit {
+  textarea {
+    @include box-sizing(border-box);
+    display: block;
+    width: 100%;
+  }
 
-    div.preview {
-      background: #eee;
-      @include box-sizing(border-box);
-      min-height: 40px;
-      padding: 10px;
-      width: 100%;
-      margin-top: 10px;
 
-      h1 {
-        font-size: 24px;
-        margin-bottom: 1em;
-      }
+  div.preview {
+    background: #eee;
+    @include box-sizing(border-box);
+    min-height: 40px;
+    padding: 10px;
+    width: 100%;
+    margin-top: 10px;
 
-      h2 {
-        font-size: 20px;
-        margin-bottom: 1em;
-      }
+    h1 {
+      font-size: 24px;
+      margin-bottom: 1em;
+    }
 
-      h3 {
-        font-size: 18;
-        margin-bottom: 1em;
-      }
+    h2 {
+      font-size: 20px;
+      margin-bottom: 1em;
+    }
 
-      ul {
-        padding-left: 20px;
-        margin-bottom: 1em;
-      }
+    h3 {
+      font-size: 18;
+      margin-bottom: 1em;
+    }
 
-      p {
-        margin-bottom: 1em;
-      }
+    ul {
+      padding-left: 20px;
+      margin-bottom: 1em;
     }
 
-    a.save-update {
-      @extend .button;
-      @include inline-block();
-      margin-top: 20px;
+    p {
+      margin-bottom: 1em;
     }
   }
 }

cms/templates/unit.html

-<div id="unit-wrapper" class="${type}">
+<section id="unit-wrapper" class="${type}">
+  <header>
+    <h1 class="editable">${name}</h1>
+    <p>Unit type: ${type}</p>
+    <!-- <div class="actions"> -->
+    <!--   <a href="#" class="cancel">Cancel</a> -->
+    <!--   <a href="#" class="save-update">Save &amp; Update</a> -->
+    <!-- </div> -->
+  </header>
+  <section>
     ${contents}
-</div>
+  </section>
+  <section>
+    <div class="actions">
+      <a href="" class="save-update">Save &amp; Update</a>
+      <a href="#" class="cancel">Cancel</a>
+    </div>
+  </section>
+</section>

cms/templates/widgets/html-edit.html

-<%namespace name='static' file='../static_content.html'/>
-
 <section class="html-edit">
-  <header>
-    <h1 class="editable">${module.name}</h1>
-    <p>Unit type: HTML</p>
-    <!-- <div class="actions"> -->
-    <!--   <a href="#" class="cancel">Cancel</a> -->
-    <!--   <a href="#" class="save-update">Save &amp; Update</a> -->
-    <!-- </div> -->
-  </header>
-
-  <section>
-    <header>
-    </header>
-
-    <section>
-      <textarea name="" id="edit-box" rows="8" cols="40">${module.definition['data']['text']}</textarea>
-      <div id="edit-preview" class="preview">${module.definition['data']['text']}</div>
-    </section>
-
-    <div class="actions">
-      <a href="" class="save-update">Save &amp; Update</a>
-      <a href="#" class="cancel">Cancel</a>
-    </div>
-  </section>
+  <textarea name="" class="edit-box" rows="8" cols="40">${module.definition['data']['text']}</textarea>
+  <div class="preview">${module.definition['data']['text']}</div>
 </section>

common/lib/xmodule/js/module/html.coffee

 class @HTML
-    constructor: (id) ->
-        $('#' + id + " #edit-box").on('input', ->
-            $('#' + id + ' #edit-preview').empty().append($(this).val())
+    constructor: (@id) ->
+        id = @id
+        $("##{id} .edit-box").on('input', ->
+            $("##{id} .preview").empty().append($(this).val())
         )
+
+    save: -> $("##{@id} .edit-box").val()