discussion editor and preview added; string response glitch fixed

cms/static/coffee/src/views/unit.coffee

@@ -98,6 +98,9 @@ class CMS.Views.UnitEdit extends Backbone.View
         @$editor = $($('#html-editor').html())
         $preview = $('<div class="html-preview">')
         initHTMLEditor(@$editor, $preview)
+      when 'discussion'
+        @$editor = $($('#discussion-editor').html())
+        $preview = $($('#discussion-preview').html())        
 
     @$editor.find('.save-button, .cancel-button').bind('click', =>
       @$componentItem.removeClass('editing')
@@ -108,6 +111,7 @@ class CMS.Views.UnitEdit extends Backbone.View
 
     @$componentItem.append(@$editor)
     @$componentItem.append($preview)
+
     @$componentItem.append($componentActions)
     @$componentItem.hide()
     @$newComponentItem.before(@$componentItem)

cms/static/js/html-editor.js

@@ -5,7 +5,6 @@ var htmlEditor;
 
 function initHTMLEditor($editor, $prev) {
   $htmlEditor = $editor;
-  console.log($editor.find('.edit-box'));
   htmlEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
     lineWrapping: true,
     mode: 'xml',
@@ -15,9 +14,13 @@ function initHTMLEditor($editor, $prev) {
 
   currentEditor = htmlEditor;
 
-  $(htmlEditor.getWrapperElement()).css('background', '#fff');
-
-  $(htmlEditor.getWrapperElement()).bind('click', setFocus);
+  $(htmlEditor.getWrapperElement()).css({
+    'background': '#fff'
+  });
+  $(htmlEditor.getWrapperElement()).bind('click', function() {
+    $(htmlEditor).focus();
+  });
+  $(htmlEditor).focus();
   $htmlPreview = $prev;
 }
 

cms/static/js/speed-editor.js

@@ -155,7 +155,7 @@ function updateXML() {
   xml = xml.replace(/\{\{video\s(.*)\}\}/g, '<video youtube="1.0:$1" />\n\n');
 
   // replace string and numerical
-  xml = xml.replace(/\=\s*(.*)/g, function(match, p) {
+  xml = xml.replace(/(?:\n|^)\=\s*(.*)/g, function(match, p) {
     var string;
     var params = /(.*)\+\-\s*(.*)/.exec(p);
     if(parseFloat(p)) {      
@@ -251,7 +251,7 @@ function updatePreview() {
     return groupString;
   });
 
-  html = html.replace(/\=\s*(.*)/g, function(match, p) {
+  html = html.replace(/(?:\n|^)\=\s*(.*)/g, function(match, p) {
     var value = p.replace(/\+\-.*/g, '');
     var string = '<input type="text" name="" id="" value="' + value + '" size="20">\n';
     return string;

cms/static/sass/_unit.scss

@@ -374,10 +374,79 @@
     }
   }
 
-  .html-preview {
+  .html-preview,
+  .discussion-preview {
     padding: 20px 30px;
   }
 
+  .discussion-id-field {
+    width: 350px;
+  }
+
+  .discussion-module {
+    position: relative;
+    margin: 20px 0;
+    padding: 20px;
+    height: 40px;
+    background: #f6f6f6 !important;
+    border-radius: 3px;
+
+    .discussion-show {
+      position: relative;
+      top: 3px;
+      font-size: 14px;
+      text-align: center;
+      color: #3c3c3c;
+
+      &.shown {
+        .show-hide-discussion-icon {
+          background-position: 0 0;
+        }
+      }
+
+      .show-hide-discussion-icon {
+        display: inline-block;
+        position: relative;
+        top: 5px;
+        margin-right: 6px;
+        width: 21px;
+        height: 19px;
+        background: url(../img/show-hide-discussion-icon.png) no-repeat;
+        background-position: -21px 0;
+      }
+    }
+
+    .new-post-btn {
+      display: inline-block;
+      float: right;
+      height: 35px;
+      padding: 0 15px;
+      border-radius: 3px;
+      border: 1px solid #2d81ad;
+      @include linear-gradient(top, #6dccf1, #38a8e5);
+      font-size: 13px;
+      font-weight: 700;
+      line-height: 32px;
+      color: #fff;
+      text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
+      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+
+      &:hover {
+        border-color: #297095;
+        @include linear-gradient(top, #4fbbe4, #2090d0);
+      }
+    }
+
+    .new-post-icon {
+      display: block;
+      float: left;
+      width: 16px;
+      height: 17px;
+      margin: 7px 7px 0 0;
+      background: url(../img/new-post-icon.png) no-repeat;
+    }
+  }  
+
   .component-editor {
     @include edit-box;
     display: none;

cms/templates/unit.html

@@ -155,6 +155,27 @@
     </div>    
   </script>
 
+  <script type="text/template" id="discussion-editor">
+    <div class="discussion-editor editor">
+      <div class="row">
+        <label>Category Name:</label>
+        <input type="text" value="Discussion Topic" class="discussion-id-field">
+      </div>     
+      <div class="row">
+        <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
+      </div>
+    </div>
+  </script>
+
+  <script type="text/template" id="discussion-preview">
+    <div class="discussion-preview">
+      <div class="discussion-module" data-discussion-id="">
+        <a class="discussion-show control-button" href="#" data-discussion-id=""><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
+        <a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a>
+      </div>
+    </div>
+  </script>
+
   <script type="text/template" id="video-editor">
     <div class="video-editor editor">
       <div class="row">