Add TeX preview button to Quick Reply on /sci/.

src/General/css/style.css

@@ -1245,7 +1245,10 @@ input[name="Default Volume"] {
 body:not(.board_f) #qr select[name="filetag"],
 #qr.reply-to-thread select[name="filetag"],
 body:not(.board_i) .oekaki,
-body:not(.board_jp) #sjis-toggle {
+body:not(.board_jp) #sjis-toggle,
+body:not(.board_sci) #tex-preview-button,
+#qr.tex-preview .textarea > :not(#tex-preview),
+#qr:not(.tex-preview) #tex-preview {
   display: none;
 }
 .persona button {
@@ -1258,7 +1261,7 @@ body:not(.board_jp) #sjis-toggle {
   background: linear-gradient(to bottom, #F8F8F8, #DCDCDC) no-repeat;
   color: #000;
 }
-#qr.sjis-preview #sjis-toggle {
+#qr.sjis-preview #sjis-toggle, #qr.tex-preview #tex-preview-button {
   background: #DCDCDC;
 }
 #sjis-toggle, #qr.sjis-preview textarea.field {
@@ -1266,6 +1269,12 @@ body:not(.board_jp) #sjis-toggle {
   font-size: 16px;
   line-height: 17px;
 }
+#tex-preview-button {
+  font-size: 10px;
+}
+#tex-preview {
+  white-space: pre-line;
+}
 #qr textarea.field {
   height: 14.8em;
   min-height: 9em;

src/General/css/tomorrow.css

@@ -106,7 +106,8 @@
 :root.tomorrow .persona button:focus {
   border-color: rgb(129, 162, 190);
 }
-:root.tomorrow #qr.sjis-preview #sjis-toggle {
+:root.tomorrow #qr.sjis-preview #sjis-toggle,
+:root.tomorrow #qr.tex-preview #tex-preview-button {
   background: rgb(26, 27, 29);
 }
 :root.tomorrow #qr select,

src/General/html/Features/QuickReply.html

@@ -11,6 +11,7 @@
 <form>
   <div class="persona">
     <button type="button" id="sjis-toggle" title="Toggle Mona font">∀</button>
+    <button type="button" id="tex-preview-button" title="Preview TeX">T<sub>E</sub>X</button>
     <input name="name" data-name="name" list="list-name" placeholder="Name" class="field" size="1">
     <input name="email" data-name="email" list="list-email" placeholder="Options" class="field" size="1">
     <input name="sub" data-name="sub" list="list-sub" placeholder="Subject" class="field" size="1">
@@ -18,6 +19,7 @@
   <div class="textarea">
     <textarea data-name="com" placeholder="Comment" class="field"></textarea>
     <span id="char-count"></span>
+    <div id="tex-preview"></div>
   </div>
   <div id="dump-list-container">
     <div id="dump-list"></div>

src/Posting/QR.coffee

@@ -190,6 +190,14 @@ QR =
     $.set 'sjisPreview', Conf['sjisPreview']
     QR.nodes.el.classList.toggle 'sjis-preview', Conf['sjisPreview']
 
+  texPreviewShow: ->
+    $.addClass QR.nodes.el, 'tex-preview'
+    QR.nodes.texPreview.textContent = QR.nodes.com.value
+    $.event 'mathjax', null, QR.nodes.texPreview
+
+  texPreviewHide: ->
+    $.rmClass QR.nodes.el, 'tex-preview'
+
   setCustomCooldown: (enabled) ->
     Conf['customCooldownEnabled'] = enabled
     QR.cooldown.customCooldown = enabled
@@ -468,10 +476,12 @@ QR =
     setNode 'pasteArea',     '#paste-area'
     setNode 'urlButton',     '#url-button'
     setNode 'sjisToggle',    '#sjis-toggle'
+    setNode 'texButton',     '#tex-preview-button'
     setNode 'name',          '[data-name=name]'
     setNode 'email',         '[data-name=email]'
     setNode 'sub',           '[data-name=sub]'
     setNode 'com',           '[data-name=com]'
+    setNode 'texPreview',    '#tex-preview'
     setNode 'dumpList',      '#dump-list'
     setNode 'addPost',       '#add-post'
     setNode 'charCount',     '#char-count'
@@ -546,6 +556,8 @@ QR =
     $.on nodes.spoiler,    'change', -> QR.selected.nodes.spoiler.click()
     $.on nodes.fileInput,  'change', QR.handleFiles
     $.on nodes.sjisToggle, 'click',  QR.toggleSJIS
+    $.on nodes.texButton,  'mousedown', QR.texPreviewShow
+    $.on nodes.texButton,  'mouseup',   QR.texPreviewHide
     $.on nodes.customCooldown, 'click', QR.toggleCustomCooldown
     $.on nodes.drawButton, 'click',  QR.oekakiDraw