fixed html tab; started adding upload within widget

cms/static/js/html-editor.js

@@ -33,6 +33,9 @@ function initHTMLEditor($editor, $prev) {
             image : '/static/img/visual-editor-image-icon.png',
             onclick : function() {
               $assetWidget = $($('#asset-library-widget').html());
+              $assetWidget.find('.close-button').bind('click', closeAssetWidget);
+              $modalCover.unbind('click');
+              $modalCover.bind('click', closeAssetWidget);
               $modalCover.css('z-index', '99999');
               $('.insert-asset-button', $assetWidget).bind('click', { editor: ed }, insertAsset);
               $body.append($assetWidget);
@@ -41,30 +44,30 @@ function initHTMLEditor($editor, $prev) {
       }
     });
   }, 100);
-
+  
   htmlEditor = CodeMirror.fromTextArea($editor.find('.html-box')[0], {
     lineWrapping: true,
     mode: 'text/html',
     lineNumbers: true
   });
 
-  $(htmlEditor.getWrapperElement()).hide();
-  $(htmlEditor.getWrapperElement()).bind('click', function() {
-    $(htmlEditor).focus();
-  });
-
-  $editor.find('.save-button, .cancel-button').bind('click', updatePreview);
+  $editor.find('.save-button, .cancel-button').bind('click', updateHTMLPreview);
 }
 
 function insertAsset(e) {
-  $assetWidget.remove();
-  $modalCover.css('z-index', '1000');
+  closeAssetWidget();
   var editor = e.data.editor;
   editor.focus();
   editor.selection.setContent($(this).attr('data-markup'));
 }
 
+function closeAssetWidget(e) {
+  $assetWidget.remove();
+  $modalCover.css('z-index', '1000');
+}
+
 function convertVisualToHTML() {
+  console.log('convert');
   htmlEditor.setValue($visualEditor.html());
 }
 
@@ -72,6 +75,10 @@ function convertHTMLToVisual() {
   $visualEditor.html(htmlEditor.getValue());
 }
 
-function updatePreview() {
-  $htmlPreview.html($visualEditor.html());
+function updateHTMLPreview() {
+  if(currentEditor == htmlEditor) {
+    $htmlPreview.html(htmlEditor.getValue());
+  } else {
+    $htmlPreview.html($visualEditor.html());
+  }
 }

cms/static/js/speed-editor.js

@@ -84,6 +84,7 @@ function setFocus(e) {
 }
 
 function onSimpleEditorUpdate() {
+  console.log('update');
   updatePreview();
   updateXML();
 }

cms/static/sass/_assets.scss

@@ -111,7 +111,8 @@
   display: block;
 
   &.widget {
-    position: absolute;
+    position: fixed;
+    top: 40px;
     left: 50%;
     z-index: 99999;
     width: 900px;
@@ -190,6 +191,14 @@
     th {
       padding: 5px 20px;
     }
+
+    th a {
+      color: #3c3c3c;
+    }
+
+    .upload-form {
+      display: none;
+    }
   }
 
   table {
@@ -246,7 +255,7 @@
     }
 
     .insert-col {
-      width: 80px;
+      width: 100px;
     }
 
     .insert-asset-button {

cms/static/sass/_graphics.scss

@@ -317,7 +317,18 @@
 	background: url(../img/problem-settings-icon.png) no-repeat;
 }
 
-
+.sort-icon {
+	font-size: 7px;
+	vertical-align: middle;
+
+	&.down:before {
+		content: '▼';
+	}
+
+	&.up:before {
+		content: '▲';
+	}
+}
 
 
 

cms/static/sass/_unit.scss

@@ -384,15 +384,14 @@
       position: relative;
     }
 
-    textarea {
-      display: none;
-    }
-
     .CodeMirror {
+      display: none;
       position: absolute;
       top: 47px;
       width: 100%;
       height: 378px;
+      background: #fff;
+      color: #3c3c3c;
       @include box-sizing(border-box);
     }
 

cms/templates/unit.html

@@ -20,7 +20,6 @@
       e.preventDefault();
       $('.editor-tabs .current').removeClass('current');
       $(this).addClass('current');
-      console.log($(this).attr('data-tab'));
       switch($(this).attr('data-tab')) {
         case 'simple':
           currentEditor = simpleEditor;
@@ -34,6 +33,7 @@
           $(simpleEditor.getWrapperElement()).hide();
           $(xmlEditor.getWrapperElement()).show();
           $(xmlEditor).focus();
+          xmlEditor.refresh();
           break;
         case 'visual':
           currentEditor = visualEditor;
@@ -43,10 +43,11 @@
           break;
         case 'html':
           currentEditor = htmlEditor;
-          convertVisualToHTML();
           $('table.mceToolbar').hide();
           $(htmlEditor.getWrapperElement()).show();
           $(htmlEditor).focus();
+          convertVisualToHTML();
+          htmlEditor.refresh();
           break;
       }      
     }
@@ -62,16 +63,33 @@
       <a href="#" class="close-button">
         <span class="close-icon"></span>
       </a>
+
+      <div class="upload-form">
+        <h1>Upload New File</h1>
+        <p class="file-name"></p>
+        <div class="progress-bar">
+          <div class="progress-fill"></div>
+        </div>
+        <div class="embeddable">
+          <label>Embeddable XML:</label>
+          <input type="text" class="embeddable-xml-input" value="&lt;img src=&quot;&quot;/&gt;">
+        </div>
+        <form class="file-chooser" action="/Giannattasio/313/course/Photoshop_for_Monkeys/upload_asset" method="post" enctype="multipart/form-data">
+          <a href="#" class="choose-file-button">Choose File</a>
+          <input type="file" class="file-input" name="file">
+        </form>
+      </div>
+
       <header>
         <a href="#" class="upload-button">Upload New File</a>
         <input type="text" class="search">
       </header>
-      <table>
+      <table class="library-list">
         <thead>
           <tr>
             <th class="thumb-col"></th>
-            <th class="name-col">Name</th>
-            <th class="date-col">Date Added</th>
+            <th class="name-col"><a href="#">Name <span class="sort-icon down"></span></a></th>
+            <th class="date-col"><a href="#">Date Added</a></th>
             <th class="insert-col"></th>
           </tr>
         </thead>