add explanation for 'your email' and move JS to separate script file

learning-unlimited · May 29, 2018 · 06a548b · 06a548b
1 parent b06685e
commit 06a548b
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 36 deletions.
diff --git a/esp/templates/program/modules/commmodule/commpanel_step2.js b/esp/templates/program/modules/commmodule/commpanel_step2.js
@@ -0,0 +1,38 @@
+
+function showEmailExplanation() {
+    document.getElementById("from-help").style.display = '';
+}
+
+function hideEmailExplanation() {
+    document.getElementById("from-help").style.display = 'none';
+    document.getElementById("from").focus();
+}
+
+
+function validateMsgLang() {
+  var msgTypes = document.getElementsByName("msglang");
+  var containsTag = /<(\/?((.)|(br ?\/?)))>|(<img)/i.test(
+    document.getElementById("emailbody").value);
+  var containsHTag = /<\/?html>/i.test(
+    document.getElementById("emailbody").value);
+
+  if(containsHTag) {
+      return confirm("Didn't we say not to include <html> tags?!? "
+                + "If you're sure you know what you're doing, "
+                + "click 'OK' to continue.");
+  } else if(msgTypes[1].checked && !containsTag) {
+      return confirm('You selected "HTML" but included no HTML tags. '
+                + 'Continuing might squash your formatting. '
+                + 'Would you still like to proceed?');
+  } else if(msgTypes[0].checked && containsTag) {
+      return confirm('You selected "Plain Text" but have HTML tags '
+                + '(such as <p>) in your message. '
+                + 'Continuing will leave your tags in your message '
+                + '(so you might see "<b>hello</b>" instead of '
+                + 'a bold "hello"). '
+                + 'Would you still like to proceed?');
+  }
+  else {
+      return true;
+  }
+}
diff --git a/esp/templates/program/modules/commmodule/step2.html b/esp/templates/program/modules/commmodule/step2.html
@@ -10,34 +10,8 @@
   <link rel="stylesheet" href="/resources/demos/style.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-  <script>
-    function validateMsgLang() {
-      var msgTypes = document.getElementsByName("msglang");
-      var containsTag = /<(\/?((.)|(br ?\/?)))>|(<img)/i.test(
-        document.getElementById("emailbody").value)
-      var containsHTag = /<\/?html>/i.test(
-        document.getElementById("emailbody").value)
-
-      if(containsHTag) {
-          return confirm("Didn't we say not to include <html> tags?!? "
-                    + "If you're sure you know what you're doing, "
-                    + "click 'OK' to continue.");
-      } else if(msgTypes[1].checked && !containsTag) {
-          return confirm('You selected "HTML" but included no HTML tags. '
-                    + 'Continuing might squash your formatting. '
-                    + 'Would you still like to proceed?');
-      } else if(msgTypes[0].checked && containsTag) {
-          return confirm('You selected "Plain Text" but have HTML tags '
-                    + '(such as <p>) in your message. '
-                    + 'Continuing will leave your tags in your message '
-                    + '(so you might see "<b>hello</b>" instead of '
-                    + 'a bold "hello"). '
-                    + 'Would you still like to proceed?');
-      }
-      else {
-          return true;
-      }
-    }
+  <script type="text/javascript">
+    {% include "program/modules/commmodule/commpanel_step2.js" %}
   </script>
 {% endblock %}
 {% block stylesheets %}
@@ -73,27 +47,37 @@ <h2>Step 2:</h2>
 <a href="/admin/utils/templateoverride/?name=default_email_html.txt">here</a>)
 is automatically wrapped around your message below.
 You can choose to write the body in either plain text or HTML.
-If you choose to use HTML, there is no need for &lt;html&gt; and &lt;/html&gt;
-tags because they're are included in the wrapper template.
-If you choose plain text, do <b>not</b> use any HTML tags for
+If you choose to use HTML, there is no need for <tt>&lt;html&gt;</tt>
+and <tt>&lt;/html&gt;</tt> tags because they're are included in the wrapper
+template. If you choose plain text, do <b>not</b> use any HTML tags for
 whitespace.</p>
 
 <form action="/manage/{{program.getUrlBase}}/commprev"
   onsubmit="return validateMsgLang()" name="comm2" method="post">
 
 <table border="0" cellspacing="0" width="100%">
 <tr>
-  <input type="radio" name="msglang" id="msglang" value="plaintext">Plain Text
+  <input type="radio" name="msglang" value="plaintext">Plain Text
   <br />
-  <input type="radio" name="msglang" id="msglang" value="html" required> HTML
-<tr>
+  <input type="radio" name="msglang" value="html" required> HTML
+
   <td>
   <label for="from">
   <strong>From:</strong>
-  <small>(If blank: your email,
-    <script type="text/javascript">document.write(esp_user.cur_username);</script>@{{ settings.SITE_INFO.1 }})</small>
+  <small>(If blank: your email <span class="glyphicon glyphicon-info-sign"
+                          onclick="showEmailExplanation()"></span>)</small>
   </label><br />
   <input type="text" size="30" name="from" id="from" value="{{from}}" />
+    <p class="help-block" id="from-help" style="display:none;"><small>"Your email"
+    is an alias,
+    <span onclick="hideEmailExplanation()" style="float:right;">&times;</span>
+    <script type="text/javascript">
+    document.write(esp_user.cur_username);</script>@{{ settings.SITE_INFO.1 }},
+    for your listed email (<script type="text/javascript">
+                            document.write(esp_user.cur_email);</script>),
+    which will receive all replies from and be visible to all
+    recipients.</small>
+    </p>
   <br />
   <label for="replyto">
   <strong>Reply-To:</strong>