From c7dbdc1242e0a4b322ce144eba9b7883d578b3f0 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Fri, 16 Nov 2012 11:43:21 -0500
Subject: [PATCH] added asset button to visual editor

---
 cms/static/coffee/src/views/unit.coffee       |   4 +-
 cms/static/img/visual-editor-image-icon.png   | Bin 0 -> 1175 bytes
 cms/static/js/html-editor.js                  | 108 ++++++++----------
 cms/static/js/speed-editor.js                 |  20 ----
 .../themes/advanced/skins/studio/ui.css       |  16 +++
 cms/static/sass/_unit.scss                    |  53 +++++++++
 cms/templates/unit.html                       |  44 ++++++-
 7 files changed, 161 insertions(+), 84 deletions(-)
 create mode 100644 cms/static/img/visual-editor-image-icon.png

diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee
index 3ca2876b1b..f711d5eb5a 100644
--- a/cms/static/coffee/src/views/unit.coffee
+++ b/cms/static/coffee/src/views/unit.coffee
@@ -96,6 +96,7 @@ class CMS.Views.UnitEdit extends Backbone.View
         initProblemEditors(@$editor, $preview)
       when 'html'
         @$editor = $($('#html-editor').html())
+        $preview = $('<div class="html-preview"></div>')
         initHTMLEditor(@$editor, $preview)
       when 'discussion'
         @$editor = $($('#discussion-editor').html())
@@ -109,8 +110,7 @@ class CMS.Views.UnitEdit extends Backbone.View
     $componentActions = $($('#component-actions').html())
 
     @$componentItem.append(@$editor)
-    if $preview
-      @$componentItem.append($preview)
+    @$componentItem.append($preview)
 
     @$componentItem.append($componentActions)
     @$componentItem.hide()
diff --git a/cms/static/img/visual-editor-image-icon.png b/cms/static/img/visual-editor-image-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..17f8a5bfb4850e890062cf6155724bc78e1ed887
GIT binary patch
literal 1175
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE;=WQl7;NpOBzNqJ&XDuZK6ep0G}
zXKrG8YEWuoN@d~6R2v2cW|hp4h>{3jAFJg2T)jk)8oi3#0-$aN1{?c|g2d$P)DnfH
z)bz|eTc!8A_bVx6rr0WloBA5~7C5J7WO`H;r3P2|g(O#HCtIc{+1n}DR9FEG$W1Lt
zRH(?!$t$+1uvG$^YXxM3g!Ppaz)DK8ZIvL7itr6kaLzAERWQ{v)=f4rG*mD%(=#+N
zH8V5RQ7|$vG}1Q!A~Rh>6Dw0QD<g9SC{P00R+N%v73AUuwF}6zRmvzSDX`MlFE20G
zD>v55FG|-pw6wGYnPFt43sj+7T$xvrSfQI&tPC^3CAB!YD6^m>Ge1uOWMX1cerbuV
z640d(FXR@$jm;~D1`{yA^eYkz^bPe4Kwg3=^!3HBG&dKny0|1L72#g21{a4^7NqJ2
zr55Lx79|5CE=?I^Re_arQEFmIeo;t%ehw@Y12XbU@{2R_3lyA#%@j0z6O%LZKmwXz
z9lpL+o_WP3iFwJXo-VdZKr{3*GgGWAjLe<PP2DVvj10{U4PA{aEnO^}ER3DZT-*#S
z%w1ezdR_99OLJ56N?>|Z5PB_f>IEf++ybD@E~!PCWvMA{Mftf3U{70R;&zJ}PV=C8
zQ*gV*9H(A=pkwqwQHvDSFd<<20WskT7s!Dp{nR{QdM^Sd?8vLnpD-{ma(cQrhE&{2
z`t$$4J+mpJF!NMKZlT#i%Z-wZCnTQkyQ?z$$>WD!v!+j96T!T^f4+@xox~xYO&d*;
zD?WS>oKgGzpYw(tebd-7*_uogrCE$6rYWt9+3i@VBX3tG<a6AmML_m+!S#bCin}LF
z6cn1+J$*gf<&6^;9@)8J@k+KF4ILiQCr=-&W3H4;G2m$CIVLvE=Y{8jMeA74*%$p0
zi4i`bB*AMO;piu3?5LD#YoV;9I5+WV(@dU+A2SQyAL3zToFKEVrT3~s3WIUU(?gLi
zPenwSm!Fx_ZQho<_Ke|^qDzwtr8z!nSv6FO-aLJR;Z^OMO3Cm*HevN;E0iVLrc5#G
iY2MVZbXOw-BO60yPlNxn38!X)iV9CxKbLh*2~7Z#bcYN8

literal 0
HcmV?d00001

diff --git a/cms/static/js/html-editor.js b/cms/static/js/html-editor.js
index aaed73f9ec..a3c2f15dd1 100644
--- a/cms/static/js/html-editor.js
+++ b/cms/static/js/html-editor.js
@@ -1,74 +1,62 @@
 var $body;
 var $htmlPreview;
 var $htmlEditor;
+var $visualEditor;
+var visualEditor;
 var htmlEditor;
 
 function initHTMLEditor($editor, $prev) {
-  /*
   $htmlEditor = $editor;
-  htmlEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
+  $htmlPreview = $prev;
+
+  // there's a race condition here. wait a bit, then init tiny
+  setTimeout(function() {
+    $editor.find('.edit-box.tinymce').tinymce({
+      script_url : '/static/js/tiny_mce/tiny_mce.js',
+      theme : "advanced",
+      skin: 'studio',
+      plugins : "autolink,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
+      
+      // we may want to add "styleselect" when we collect all styles used throught the lms
+      theme_advanced_buttons1 : "formatselect,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,studio.asset,link,unlink",
+      theme_advanced_toolbar_location : "top",
+      theme_advanced_toolbar_align : "left",
+      theme_advanced_statusbar_location : "none",
+      theme_advanced_resizing : true,
+      theme_advanced_blockformats : "p,code,h2,h3,h4,h5,h6,blockquote",
+      content_css : "/static/css/html-editor.css",
+      width: '100%',
+      height: '400px',
+      setup : function(ed) {
+        ed.addButton('studio.asset', {
+            title : 'Add Asset',
+            image : '/static/img/visual-editor-image-icon.png',
+            onclick : function() {
+              ed.focus();
+              ed.selection.setContent('This should open the studio asset picker.');
+            }
+        });
+      }
+    });
+  }, 100);
+
+  htmlEditor = CodeMirror.fromTextArea($editor.find('.html-box')[0], {
     lineWrapping: true,
-    mode: 'xml',
-    lineNumbers: true,
-    onChange: onHTMLEditorUpdate
-  });
-
-  currentEditor = htmlEditor;
-
-  $(htmlEditor.getWrapperElement()).css({
-    'background': '#fff'
-  });
-  $(htmlEditor.getWrapperElement()).bind('click', function() {
-    $(htmlEditor).focus();
-  });
-  $(htmlEditor).focus();
-  */
-
-  /*
-  $htmlEditor = $editor;
-  $htmlPreview = $prev;
-
-  $('.edit-box', $editor).ckeditor();
-  var $newEditor = $('.edit-box', $editor).ckeditorGet();
-  console.log($newEditor);
-  $newEditor.on('setData.ckeditor', function() {
-    console.log('change');
-  });
-  */
-
-  $htmlEditor = $editor;
-  $htmlPreview = $prev;
-  
-  $editor.find('.edit-box.tinymce').tinymce({
-    // Location of TinyMCE script
-    script_url : '/static/js/tiny_mce/tiny_mce.js',
-
-    // General options
-    theme : "advanced",
-    skin: 'studio',
-    plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
-
-    // Theme options
-    // we may want to add "styleselect" when we collect all styles used throught the lms
-    theme_advanced_buttons1 : "bold,italic,underline,formatselect,bullist,numlist,outdent,indent,blockquote,link,unlink,code",
-    theme_advanced_toolbar_location : "top",
-    theme_advanced_toolbar_align : "left",
-    theme_advanced_statusbar_location : "none",
-    theme_advanced_resizing : true,
-    theme_advanced_blockformats : "p,code,h2,h3,h4,h5,h6,blockquote",
-
-    // Example content CSS (should be your site CSS)
-    content_css : "/static/css/html-editor.css",
-    width: '100%',
-    height: '400px'
+    mode: 'text/html',
+    lineNumbers: true
   });
 
+  $editor.find('.save-button, .cancel-button').bind('click', updatePreview);
 }
 
-function onHTMLEditorUpdate(e) {
-  // codemirror
-  // $htmlPreview.html(htmlEditor.getValue());
+function convertVisualToHTML() {
+  htmlEditor.setValue($('.edit-box', visualEditor).html());
+}
 
-  // tiny
-  $htmlPreview.html($('.edit-box', htmlEditor).html());
+function convertHTMLToVisual() {
+  $('.edit-box', visualEditor).html(htmlEditor.getValue());
+}
+
+function updatePreview() {
+  $htmlPreview.html($('.edit-box', visualEditor).html());
 }
\ No newline at end of file
diff --git a/cms/static/js/speed-editor.js b/cms/static/js/speed-editor.js
index cfd2b96419..449296f15d 100644
--- a/cms/static/js/speed-editor.js
+++ b/cms/static/js/speed-editor.js
@@ -11,9 +11,7 @@ var commandDown;
 
 
 (function() {
-  $body = $('body');
   $body.on('click', '.editor-bar a', onEditorButton);
-  $body.on('click', '.editor-tabs .tab', setEditorTab);
   $body.on('click', '.cheatsheet-toggle', toggleCheatsheet);
   $body.on('click', '.problem-settings-button', toggleProblemSettings);
   $(document).bind('keyup', onKeyboard);
@@ -82,24 +80,6 @@ function toggleCheatsheet(e) {
   }, 10);
 }
 
-function setEditorTab(e) {
-  e.preventDefault();
-  $('.editor-tabs .current').removeClass('current');
-  $(this).addClass('current');
-  if($(this).hasClass('simple-tab')) {
-    currentEditor = simpleEditor;
-    $(simpleEditor.getWrapperElement()).show();          
-    $(xmlEditor.getWrapperElement()).hide();
-    $(simpleEditor).focus();
-  } else {
-    currentEditor = xmlEditor;
-    $(simpleEditor.getWrapperElement()).hide();
-    $(xmlEditor.getWrapperElement()).show();
-    $(xmlEditor).focus();
-  }
-  onSimpleEditorUpdate();
-}
-
 function setFocus(e) {
   $(simpleEditor).focus();
 }
diff --git a/cms/static/js/tiny_mce/themes/advanced/skins/studio/ui.css b/cms/static/js/tiny_mce/themes/advanced/skins/studio/ui.css
index 78f23cc4ce..b2d3e494aa 100644
--- a/cms/static/js/tiny_mce/themes/advanced/skins/studio/ui.css
+++ b/cms/static/js/tiny_mce/themes/advanced/skins/studio/ui.css
@@ -1,5 +1,9 @@
 .studioSkin * {
   -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
+  transition: none;
 }
 
 /* Reset */
@@ -26,6 +30,10 @@
 .studioSkin table.mceToolbar, .studioSkin tr.mceFirst .mceToolbar tr td, .studioSkin tr.mceLast .mceToolbar tr td {border:0; margin:0; padding:0;}
 .studioSkin td.mceToolbar {
   background: -webkit-linear-gradient(top, #d4dee8, #c9d5e2);
+  background: -moz-linear-gradient(top, #d4dee8, #c9d5e2);
+  background: -ms-linear-gradient(top, #d4dee8, #c9d5e2);
+  background: -o-linear-gradient(top, #d4dee8, #c9d5e2);
+  background: linear-gradient(top, #d4dee8, #c9d5e2);
   border: 1px solid #3c3c3c;
   border-bottom-color: #a5aaaf;
   border-radius: 3px 3px 0 0;
@@ -64,6 +72,10 @@
 /* ListBox */
 .studioSkin .mceListBox {
   background: -webkit-linear-gradient(top, #dbe5ef, #cfdce9);
+  background: -moz-linear-gradient(top, #dbe5ef, #cfdce9);
+  background: -ms-linear-gradient(top, #dbe5ef, #cfdce9);
+  background: -o-linear-gradient(top, #dbe5ef, #cfdce9);
+  background: linear-gradient(top, #dbe5ef, #cfdce9);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 2px;
   padding: 3px;
@@ -71,6 +83,10 @@
 }
 .studioSkin .mceListBox:hover {
   background: -webkit-linear-gradient(top, #e6eff8, #d9e8f6);
+  background: -moz-linear-gradient(top, #e6eff8, #d9e8f6);
+  background: -ms-linear-gradient(top, #e6eff8, #d9e8f6);
+  background: -o-linear-gradient(top, #e6eff8, #d9e8f6);
+  background: linear-gradient(top, #e6eff8, #d9e8f6);
 }
 .studioSkin .mceListBox, .studioSkin .mceListBox a {display:block}
 .studioSkin .mceListBox .mceText {padding-left:4px; width:70px; text-align:left; font-size:11px; height:20px; line-height:20px; overflow:hidden}
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index 43900ef9b4..1e06ed7bf1 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -83,6 +83,10 @@
         .component-actions {
           display: none;
         }
+
+        .html-preview {
+          display: none;
+        }
       }
 
       &.component-placeholder {
@@ -375,6 +379,55 @@
     }
   }
 
+  .html-editor {
+    .row {
+      position: relative;
+    }
+
+    textarea {
+      display: none;
+    }
+
+    .CodeMirror {
+      display: none;
+      position: absolute;
+      top: 47px;
+      width: 100%;
+      height: 378px;
+      @include box-sizing(border-box);
+    }
+
+    .editor-tabs {
+      position: absolute;
+      top: 31px;
+      right: 30px;
+      z-index: 99;
+
+      li {
+        float: left;
+      }
+
+      .tab {
+        display: block;
+        height: 24px;
+        padding: 7px 20px 3px;
+        margin-left: 7px;
+        border: 1px solid #a5aaaf;          
+        border-radius: 3px 3px 0 0;
+        @include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
+        background-color: #e5ecf3;
+        font-size: 13px;
+        color: #3c3c3c;
+        box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
+
+        &.current {
+          background: #fff;
+          border-bottom-color: #fff;
+        }
+      }
+    }
+  }
+
   .html-preview,
   .discussion-preview {
     padding: 20px 30px;
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index 20652bf07a..d5b86b97e4 100644
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -12,10 +12,45 @@
         state: '${unit_state}'
       })
     });
+
+    $body = $('body');
+    $body.on('click', '.editor-tabs .tab', setEditorTab);
+
+    function setEditorTab(e) {
+      e.preventDefault();
+      $('.editor-tabs .current').removeClass('current');
+      $(this).addClass('current');
+      switch($(this).attr('data-tab')) {
+        case 'simple':
+          currentEditor = simpleEditor;
+          $(simpleEditor.getWrapperElement()).show();          
+          $(xmlEditor.getWrapperElement()).hide();
+          $(simpleEditor).focus();
+          break;
+        case 'xml':
+          currentEditor = xmlEditor;
+          $(simpleEditor.getWrapperElement()).hide();
+          $(xmlEditor.getWrapperElement()).show();
+          $(xmlEditor).focus();
+          break;
+        case 'visual':
+          $('table.mceToolbar').show();
+          $(htmlEditor.getWrapperElement()).hide();
+          convertHTMLToVisual();
+          break;
+        case 'html':
+          $('table.mceToolbar').hide();
+          $(htmlEditor.getWrapperElement()).show();
+          convertVisualToHTML();
+          break;
+      }
+      onSimpleEditorUpdate();
+    }
   </script>
 
   <script src="/static/js/speed-editor.js"></script>
   <script src="/static/js/html-editor.js"></script>
+  <script src="/static/js/tiny_mce/tiny_mce.js"></script>
   <script src="/static/js/tiny_mce/jquery.tinymce.js"></script>
 
   <script type="text/template" id="simple-editor-cheatsheet">
@@ -94,8 +129,8 @@
             <li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li>
           </ul>
           <ul class="editor-tabs">
-            <li><a href="#" class="simple-tab tab current">Simple</a></li>
-            <li><a href="#" class="xml-tab tab">XML</a></li>
+            <li><a href="#" class="simple-tab tab current" data-tab="simple">Simple</a></li>
+            <li><a href="#" class="xml-tab tab" data-tab="xml">XML</a></li>
             <li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
           </ul>
         </div>
@@ -147,8 +182,13 @@
 
   <script type="text/template" id="html-editor">
     <div class="html-editor editor">
+      <ul class="editor-tabs">
+        <li><a href="#" class="visual-tab tab current" data-tab="visual">Visual</a></li>
+        <li><a href="#" class="html-tab tab" data-tab="html">HTML</a></li>
+      </ul>
       <div class="row">
         <textarea class="edit-box tinymce"></textarea>
+        <textarea class="html-box"></textarea>
       </div>      
       <div class="row">
         <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>