From f8732a8b3d9b3cbed2b3a0e5bfaa1dbd42918dac Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Thu, 16 Jan 2014 14:03:48 -0500
Subject: [PATCH] Internationalize the forums post Markdown editor

This includes removing the "PREVIEW" label for the preview pane from CSS
and adding it to the generated DOM.
---
 .../views/thread_response_view.coffee         |   4 +-
 lms/static/coffee/src/customwmd.coffee        |   7 +-
 lms/static/js/Markdown.Editor.js              |  50 +++---
 lms/static/sass/_discussion.scss              | 144 ++++++------------
 4 files changed, 78 insertions(+), 127 deletions(-)

diff --git a/common/static/coffee/src/discussion/views/thread_response_view.coffee b/common/static/coffee/src/discussion/views/thread_response_view.coffee
index 0b2647bdbf..3f15791c84 100644
--- a/common/static/coffee/src/discussion/views/thread_response_view.coffee
+++ b/common/static/coffee/src/discussion/views/thread_response_view.coffee
@@ -35,7 +35,7 @@ if Backbone?
 
     hideEditorChrome: ->
       @$('.wmd-button-row').hide()
-      @$('.wmd-preview').hide()
+      @$('.wmd-preview-container').hide()
       @$('.wmd-input').css({
         height: '35px',
         padding: '5px'
@@ -44,7 +44,7 @@ if Backbone?
 
     showEditorChrome: ->
       @$('.wmd-button-row').show()
-      @$('.wmd-preview').show()
+      @$('.wmd-preview-container').show()
       @$('.comment-post-control').show()
       @$('.wmd-input').css({
         height: '125px',
diff --git a/lms/static/coffee/src/customwmd.coffee b/lms/static/coffee/src/customwmd.coffee
index 2dabc3ed15..8307ecd396 100644
--- a/lms/static/coffee/src/customwmd.coffee
+++ b/lms/static/coffee/src/customwmd.coffee
@@ -132,11 +132,14 @@ $ ->
         $elem.empty()
         _append = appended_id || ""
         wmdInputId = "wmd-input#{_append}"
+        $wmdPreviewContainer = $("<div>").addClass("wmd-preview-container")
+            .append($("<div>").addClass("wmd-preview-label").text(gettext("Preview")))
+            .append($("<div>").attr("id", "wmd-preview#{_append}").addClass("wmd-panel wmd-preview"))
         $wmdPanel = $("<div>").addClass("wmd-panel")
                    .append($("<div>").attr("id", "wmd-button-bar#{_append}"))
-                   .append($("<label>").addClass("sr").attr("for", wmdInputId).text("Post body"))
+                   .append($("<label>").addClass("sr").attr("for", wmdInputId).text(gettext("Post body")))
                    .append($("<textarea>").addClass("wmd-input").attr("id", wmdInputId).html(initialText))
-                   .append($("<div>").attr("id", "wmd-preview#{_append}").addClass("wmd-panel wmd-preview"))
+                   .append($wmdPreviewContainer)
         $elem.append($wmdPanel)
 
       converter = Markdown.getMathCompatibleConverter(postProcessor)
diff --git a/lms/static/js/Markdown.Editor.js b/lms/static/js/Markdown.Editor.js
index 3a2fb24f8b..7bb498741f 100644
--- a/lms/static/js/Markdown.Editor.js
+++ b/lms/static/js/Markdown.Editor.js
@@ -27,15 +27,15 @@
 
     // The text that appears on the upper part of the dialog box when
     // entering links.
-    var linkDialogText = "<p><b>Insert Hyperlink</b></p><p>http://example.com/ \"optional title\"</p>";
-    var imageDialogText = "<p><b>Insert Image (upload file or type url)</b></p><p>http://example.com/images/diagram.jpg \"optional title\"<br><br></p>";
+    var linkDialogText = gettext("<p><b>Insert Hyperlink</b></p><p>http://example.com/ \"optional title\"</p>");
+    var imageDialogText = gettext("<p><b>Insert Image (upload file or type url)</b></p><p>http://example.com/images/diagram.jpg \"optional title\"<br><br></p>");
 
     // The default text that appears in the dialog input box when entering
     // links.
     var imageDefaultText = "http://";
     var linkDefaultText = "http://";
 
-    var defaultHelpHoverTitle = "Markdown Editing Help";
+    var defaultHelpHoverTitle = gettext("Markdown Editing Help");
 
     // -------------------------------------------------------------------
     //  END OF YOUR CHANGES
@@ -1444,33 +1444,33 @@
                 xPosition += 25;
             }
 
-            buttons.bold = makeButton("wmd-bold-button", "Bold (Ctrl+B)", "0px", bindCommand("doBold"));
-            buttons.italic = makeButton("wmd-italic-button", "Italic (Ctrl+I)", "-20px", bindCommand("doItalic"));
+            buttons.bold = makeButton("wmd-bold-button", gettext("Bold (Ctrl+B)"), "0px", bindCommand("doBold"));
+            buttons.italic = makeButton("wmd-italic-button", gettext("Italic (Ctrl+I)"), "-20px", bindCommand("doItalic"));
             makeSpacer(1);
-            buttons.link = makeButton("wmd-link-button", "Hyperlink (Ctrl+L)", "-40px", bindCommand(function (chunk, postProcessing) {
+            buttons.link = makeButton("wmd-link-button", gettext("Hyperlink (Ctrl+L)"), "-40px", bindCommand(function (chunk, postProcessing) {
                 return this.doLinkOrImage(chunk, postProcessing, false);
             }));
-            buttons.quote = makeButton("wmd-quote-button", "Blockquote (Ctrl+Q)", "-60px", bindCommand("doBlockquote"));
-            buttons.code = makeButton("wmd-code-button", "Code Sample (Ctrl+K)", "-80px", bindCommand("doCode"));
-            buttons.image = makeButton("wmd-image-button", "Image (Ctrl+G)", "-100px", bindCommand(function (chunk, postProcessing) {
+            buttons.quote = makeButton("wmd-quote-button", gettext("Blockquote (Ctrl+Q)"), "-60px", bindCommand("doBlockquote"));
+            buttons.code = makeButton("wmd-code-button", gettext("Code Sample (Ctrl+K)"), "-80px", bindCommand("doCode"));
+            buttons.image = makeButton("wmd-image-button", gettext("Image (Ctrl+G)"), "-100px", bindCommand(function (chunk, postProcessing) {
                 return this.doLinkOrImage(chunk, postProcessing, true, imageUploadHandler);
             }));
             makeSpacer(2);
-            buttons.olist = makeButton("wmd-olist-button", "Numbered List (Ctrl+O)", "-120px", bindCommand(function (chunk, postProcessing) {
+            buttons.olist = makeButton("wmd-olist-button", gettext("Numbered List (Ctrl+O)"), "-120px", bindCommand(function (chunk, postProcessing) {
                 this.doList(chunk, postProcessing, true);
             }));
-            buttons.ulist = makeButton("wmd-ulist-button", "Bulleted List (Ctrl+U)", "-140px", bindCommand(function (chunk, postProcessing) {
+            buttons.ulist = makeButton("wmd-ulist-button", gettext("Bulleted List (Ctrl+U)"), "-140px", bindCommand(function (chunk, postProcessing) {
                 this.doList(chunk, postProcessing, false);
             }));
-            buttons.heading = makeButton("wmd-heading-button", "Heading (Ctrl+H)", "-160px", bindCommand("doHeading"));
-            buttons.hr = makeButton("wmd-hr-button", "Horizontal Rule (Ctrl+R)", "-180px", bindCommand("doHorizontalRule"));
+            buttons.heading = makeButton("wmd-heading-button", gettext("Heading (Ctrl+H)"), "-160px", bindCommand("doHeading"));
+            buttons.hr = makeButton("wmd-hr-button", gettext("Horizontal Rule (Ctrl+R)"), "-180px", bindCommand("doHorizontalRule"));
             makeSpacer(3);
-            buttons.undo = makeButton("wmd-undo-button", "Undo (Ctrl+Z)", "-200px", null);
+            buttons.undo = makeButton("wmd-undo-button", gettext("Undo (Ctrl+Z)"), "-200px", null);
             buttons.undo.execute = function (manager) { if (manager) manager.undo(); };
 
             var redoTitle = /win/.test(nav.platform.toLowerCase()) ?
-                "Redo (Ctrl+Y)" :
-                "Redo (Ctrl+Shift+Z)"; // mac and other non-Windows platforms
+                gettext("Redo (Ctrl+Y)") :
+                gettext("Redo (Ctrl+Shift+Z)"); // mac and other non-Windows platforms
 
             buttons.redo = makeButton("wmd-redo-button", redoTitle, "-220px", null);
             buttons.redo.execute = function (manager) { if (manager) manager.redo(); };
@@ -1537,11 +1537,11 @@
     };
 
     commandProto.doBold = function (chunk, postProcessing) {
-        return this.doBorI(chunk, postProcessing, 2, "strong text");
+        return this.doBorI(chunk, postProcessing, 2, gettext("strong text"));
     };
 
     commandProto.doItalic = function (chunk, postProcessing) {
-        return this.doBorI(chunk, postProcessing, 1, "emphasized text");
+        return this.doBorI(chunk, postProcessing, 1, gettext("emphasized text"));
     };
 
     // chunk: The selected region that will be enclosed with */**
@@ -1744,10 +1744,10 @@
 
                     if (!chunk.selection) {
                         if (isImage) {
-                            chunk.selection = "enter image description here";
+                            chunk.selection = gettext("enter image description here");
                         }
                         else {
-                            chunk.selection = "enter link description here";
+                            chunk.selection = gettext("enter link description here");
                         }
                     }
                 }
@@ -1828,7 +1828,7 @@
             });
 
         chunk.selection = chunk.selection.replace(/^(\s|>)+$/, "");
-        chunk.selection = chunk.selection || "Blockquote";
+        chunk.selection = chunk.selection || gettext("Blockquote");
 
         // The original code uses a regular expression to find out how much of the
         // text *directly before* the selection already was a blockquote:
@@ -1985,7 +1985,7 @@
 
             if (!chunk.selection) {
                 chunk.startTag = "    ";
-                chunk.selection = "enter code here";
+                chunk.selection = gettext("enter code here");
             }
             else {
                 if (/^[ ]{0,3}\S/m.test(chunk.selection)) {
@@ -2008,7 +2008,7 @@
             if (!chunk.startTag && !chunk.endTag) {
                 chunk.startTag = chunk.endTag = "`";
                 if (!chunk.selection) {
-                    chunk.selection = "enter code here";
+                    chunk.selection = gettext("enter code here");
                 }
             }
             else if (chunk.endTag && !chunk.startTag) {
@@ -2102,7 +2102,7 @@
             });
 
         if (!chunk.selection) {
-            chunk.selection = "List item";
+            chunk.selection = gettext("List item");
         }
 
         var prefix = getItemPrefix();
@@ -2134,7 +2134,7 @@
         // make a level 2 hash header around some default text.
         if (!chunk.selection) {
             chunk.startTag = "## ";
-            chunk.selection = "Heading";
+            chunk.selection = gettext("Heading");
             chunk.endTag = " ##";
             return;
         }
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 929d1b376b..5bac0d1ee9 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -71,19 +71,37 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
 }
 
-@mixin discussion-wmd-preview {
+@mixin discussion-wmd-preview-container {
   width: 100%;
-  min-height: 40px;
-  padding: 25px 20px 10px 20px;
   @include box-sizing(border-box);
   border: 1px solid #aaa;
   border-top: none;
   border-radius: 0 0 3px 3px;
   background: #eee;
-  color: #333;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
 }
 
+@mixin discussion-new-post-wmd-preview-container {
+  @include discussion-wmd-preview-container;
+  border-color: #333;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
+}
+
+@mixin discussion-wmd-preview-label {
+  width: 100%;
+  padding-top: 3px;
+  padding-left: 5px;
+  color: #bbb;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+@mixin discussion-wmd-preview {
+  width: 100%;
+  padding: 10px 20px;
+  color: #333;
+}
+
 @-webkit-keyframes fadeIn {
   0% { opacity: 0.0; }
   100% { opacity: 1.0; }
@@ -354,28 +372,16 @@ body.discussion {
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
     }
 
-    .new-post-body .wmd-preview {
-      @include discussion-wmd-preview;
-      position: relative;
-      width: 100%;
-      //height: 50px;
-      margin-top: -1px;
-      padding: 25px 20px 10px 20px;
-      @include box-sizing(border-box);
-      border: 1px solid #333;
-      border-radius: 0 0 3px 3px;
-      background: #e6e6e6;
-      color: #333;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
+    .new-post-body .wmd-preview-container {
+      @include discussion-new-post-wmd-preview-container;
     }
 
-    .new-post-preview-label {
-      position: absolute;
-      top: 4px;
-      left: 4px;
-      color: #aaa;
-      text-transform: uppercase;
-      font-size: 11px;
+    .new-post-body .wmd-preview-label {
+      @include discussion-wmd-preview-label;
+    }
+
+    .new-post-body .wmd-preview {
+      @include discussion-wmd-preview;
     }
 
     .new-post-title {
@@ -501,33 +507,6 @@ body.discussion {
     }
   }
 
-  .wmd-preview {
-    @include box-sizing(border-box);
-    @include transition(all .2s ease-out 0s);
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 5px;
-    padding: 25px $baseline $baseline/2 $baseline;
-    border: 1px solid #c8c8c8;
-    border-top-width: 0;
-    border-radius: 0 0 3px 3px;
-    font-family: $sans-serif;
-
-    &:before {
-      content: 'PREVIEW';
-      position: absolute;
-      top: 3px;
-      left: 5px;
-      font-size: 11px;
-      color: #bbb;
-    }
-
-    p {
-      font-family: $sans-serif;
-    }
-    background-color: #fafafa;
-  }
-
   .wmd-button-row {
     @include transition(all .2s ease-out 0s);
     position: relative;
@@ -1822,6 +1801,14 @@ body.discussion {
     @include discussion-wmd-input;
   }
 
+  .wmd-preview-container {
+    @include discussion-wmd-preview-container;
+  }
+
+  .wmd-preview-label {
+    @include discussion-wmd-preview-label;
+  }
+
   .wmd-preview {
     @include discussion-wmd-preview;
   }
@@ -2102,28 +2089,16 @@ body.discussion {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
       }
 
-      .new-post-body .wmd-preview {
-        @include discussion-wmd-preview;
-        position: relative;
-        width: 100%;
-        //height: 50px;
-        margin-top: -1px;
-        padding: 25px $baseline $baseline/2 $baseline;
-        @include box-sizing(border-box);
-        border: 1px solid #333;
-        border-radius: 0 0 3px 3px;
-        background: #e6e6e6;
-        color: #333;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
+      .new-post-body .wmd-preview-container {
+        @include discussion-new-post-wmd-preview-container;
       }
 
-      .new-post-preview-label {
-        position: absolute;
-        top: 4px;
-        left: 4px;
-        font-size: 11px;
-        color: #aaa;
-        text-transform: uppercase;
+      .new-post-body .wmd-preview-label {
+        @include discussion-wmd-preview-label;
+      }
+
+      .new-post-body .wmd-preview {
+        @include discussion-wmd-preview;
       }
 
       .new-post-title{
@@ -2262,33 +2237,6 @@ body.discussion {
       }
     }
 
-    .wmd-preview {
-      position: relative;
-      font-family: $sans-serif;
-      padding: 25px $baseline $baseline/2 $baseline;
-      margin-bottom: 5px;
-      @include box-sizing(border-box);
-      border: 1px solid #c8c8c8;
-      border-top-width: 0;
-      border-radius: 0 0 3px 3px;
-      overflow: hidden;
-      @include transition(all .2s ease-out 0s);
-
-      &:before {
-        content: 'PREVIEW';
-        position: absolute;
-        top: 3px;
-        left: 5px;
-        font-size: 11px;
-        color: #bbb;
-      }
-
-      p {
-        font-family: $sans-serif;
-      }
-      background-color: #fafafa;
-    }
-
     .wmd-button-row {
       position: relative;
       margin-left: 5px;