Add button to toggle Mona font in QR on /jp/.

src/General/Config.coffee

@@ -763,6 +763,7 @@ Config =
     'QR.personas': """
       #options:"sage";boards:jp;always
     """
+    sjisPreview: false
 
   captchaLanguage: ''
 

src/General/css/style.css

@@ -1246,9 +1246,35 @@ input[name="Default Volume"] {
 #qr.forced-anon input[data-name="name"]:not(.force-show),
 #qr.forced-anon input[data-name="sub"]:not(.force-show),
 #qr.reply-to-thread input[data-name="sub"]:not(.force-show),
-#qr.reply-to-thread select[name="filetag"] {
+#qr.reply-to-thread select[name="filetag"],
+body:not(.board_jp) #sjis-toggle,
+#sjis-toggle > input {
   display: none;
 }
+#sjis-toggle {
+  -webkit-align-self: stretch;
+  align-self: stretch;
+  width: 20px;
+  border: 1px solid #BBB;
+  background-color: #DCDCDC;
+  color: #000;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+}
+#sjis-toggle::after {
+  content: "∀";
+  margin: auto;
+}
+#qr:not(.sjis-preview) #sjis-toggle {
+  background: linear-gradient(to bottom, #F8F8F8, #DCDCDC) no-repeat;
+}
+#sjis-toggle, #qr.sjis-preview textarea {
+  font-family: "IPAMonaPGothic","Mona","MS PGothic",monospace;
+  font-size: 16px;
+  line-height: 17px;
+}
 #qr textarea.field {
   height: 14.8em;
   min-height: 9em;

src/General/css/tomorrow.css

@@ -87,7 +87,8 @@
 :root.tomorrow .qr-preview {
   background-color: rgba(255, 255, 255, .15);
 }
-:root.tomorrow #qr .field {
+:root.tomorrow #qr .field,
+:root.tomorrow #qr #sjis-toggle {
   background-color: rgb(26, 27, 29);
   color: rgb(197,200,198);
   border-color: rgb(40, 41, 42);
@@ -97,6 +98,9 @@
   border-color: rgb(129, 162, 190) !important;
   background-color: rgb(30,32,36);
 }
+:root.tomorrow #qr:not(.sjis-preview) #sjis-toggle {
+  background: linear-gradient(to bottom, #2E3035, #222427) no-repeat;
+}
 :root.tomorrow #qr select,
 :root.tomorrow #file-n-submit > input {
   border-color: rgb(40, 41, 42);

src/General/html/Features/QuickReply.html

@@ -10,6 +10,7 @@
 </div>
 <form>
   <div class="persona">
+    <label id="sjis-toggle" title="Toggle Mona font"><input name="sjisPreview" type="checkbox"></label>
     <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">

src/Posting/QR.coffee

@@ -445,6 +445,7 @@ QR =
     setNode 'dumpButton',    '#dump-button'
     setNode 'pasteArea',     '#paste-area'
     setNode 'urlButton',     '#url-button'
+    setNode 'sjisToggle',    '#sjis-toggle > input'
     setNode 'name',          '[data-name=name]'
     setNode 'email',         '[data-name=email]'
     setNode 'sub',           '[data-name=sub]'
@@ -498,6 +499,10 @@ QR =
     else
       nodes.spoiler.parentElement.hidden = true
 
+    if g.BOARD.ID is 'jp' and Conf['sjisPreview']
+      nodes.sjisToggle.checked = true
+      $.addClass QR.nodes.el, 'sjis-preview'
+
     if parseInt(Conf['customCooldown'], 10) > 0
       $.addClass QR.nodes.fileSubmit, 'custom-cooldown'
       $.get 'customCooldownEnabled', Conf['customCooldownEnabled'], ({customCooldownEnabled}) ->
@@ -534,6 +539,8 @@ QR =
     $.on nodes.fileRM,     'click',  -> QR.selected.rmFile()
     $.on nodes.spoiler,    'change', -> QR.selected.nodes.spoiler.click()
     $.on nodes.fileInput,  'change', QR.handleFiles
+    $.on nodes.sjisToggle, 'change', $.cb.checked
+    $.on nodes.sjisToggle, 'change', -> nodes.el.classList.toggle 'sjis-preview', @checked
     $.on nodes.customCooldown, 'click', QR.toggleCustomCooldown
 
     window.addEventListener 'focus', QR.focus, true