Add BBCode editor toolbar

design/views/generic/textarea/textarea.phtml

@@ -1,4 +1,4 @@
 
 <div id="textarea_wrap_<?=$NID?>" class="field_div textarea_wrap">
-  <textarea name="<?=$Name?>" id="<?=$ID?>" cols="<?=$Cols?>" rows="<?=$Rows?>" <?=$Attributes?>><?=$Value?></textarea>
+  <textarea name="<?=$Name?>" id="<?=$ID?>" class="bbcode_editor" cols="<?=$Cols?>" rows="<?=$Rows?>" <?=$Attributes?>><?=$Value?></textarea>
 </div>

sections/forums/newthread.php

@@ -88,7 +88,7 @@ View::show_header('Forums > '.$Forum['Name'].' > New Topic', 'comments,bbc
         </tr>
         <tr>
           <td class="label">Body:</td>
-          <td><textarea id="posttext" class="required" style="width: 98%;" onkeyup="resize('posttext');" name="body" cols="90" rows="8"></textarea></td>
+          <td><textarea id="posttext" class="required bbcode_editor" style="width: 98%;" onkeyup="resize('posttext');" name="body" cols="90" rows="8"></textarea></td>
         </tr>
         <tr>
           <td></td>

static/functions/bbcode.js

@@ -15,3 +15,54 @@ var BBCode = {
     }
   }
 };
+
+function wrapSelected(box, wrap, offset) {
+  if (!Array.isArray(wrap)) wrap = [wrap, wrap]
+  if (wrap.length < 2) wrap[1] = wrap[0]
+  let s = box.selectionStart
+  let e = box.selectionEnd
+  let v = box.value
+  box.value = v.slice(0,s)+wrap[0]+v.slice(s,e)+wrap[1]+v.slice(e)
+  box.focus()
+  box.selectionEnd = (offset!==undefined?s+offset:e+wrap[0].length)
+}
+
+function BBEditor(box) {
+  let buttons = [
+    {short:'B', name:'Bold', wrap:['[b]','[/b]']},
+    {short:'I', name:'Italic', wrap:['[i]','[/i]']},
+    {short:'U', name:'Underline', wrap:['[u]','[/u]']},
+    {short:'S', name:'Strikethrough', wrap:['[s]','[/s]']},
+    {short:'Left', name:'Align Left', wrap:['[align=left]','[/align]']},
+    {short:'Center', name:'Align Center', wrap:['[align=center]','[/align]']},
+    {short:'Right', name:'Align Right', wrap:['[align=right]','[/align]']},
+    {short:'Pre', name:'Preformatted', wrap:['[pre]','[/pre]']},
+    {short:'H1', name:'Subheading 1', wrap:'=='},
+    {short:'H2', name:'Subheading 2', wrap:'==='},
+    {short:'H3', name:'Subheading 3', wrap:'===='},
+    {short:'Color', name:'Color', wrap:['[color=]','[/color]'], offset:7},
+    {short:'TeX', name:'LaTeX', wrap:['[tex]','[/tex]']},
+    {short:'Quote', name:'Quote', wrap:['[quote]','[/quote]']},
+    {short:'List', name:'List', wrap:['[*]','']},
+    {short:'Hide', name:'Spoiler', wrap:['[spoiler]','[/spoiler]']},
+    {short:'Img', name:'Image', wrap:['[img]','[/img]']},
+    {short:'Vid', name:'Video', wrap:['[embed]','[/embed]']},
+    {short:'Link', name:'Link', wrap:['[url]','[/url]']},
+    {short:'Torr', name:'Torrent', wrap:['[torrent]','[/torrent]']}
+  ]
+  let bar = document.createElement('ul')
+  bar.className = "bbcode_bar"
+  bar.style.width = box.offsetWidth+'px'
+  for (let button of buttons) {
+    li = document.createElement('li')
+    b = document.createElement('a')
+    b.setAttribute('title', button.name)
+    b.innerHTML = button.short
+    b.addEventListener('click', e=>wrapSelected(box, button.wrap, button.offset))
+    li.appendChild(b)
+    bar.appendChild(li)
+  }
+  box.parentNode.insertBefore(bar, box)
+}
+
+$('.bbcode_editor').each(function(i, el) { BBEditor(el) })

static/styles/beluga/style.css

@@ -1005,7 +1005,10 @@ ul.navigation a.selected {
 td.label {
   font-weight: 300;
   text-align: right;
-  width: 260px
+  width: 180px
+}
+.filter_torrents td.label {
+  width: 260px;
 }
 
 table.slice {
@@ -1496,7 +1499,7 @@ pre {
 }
 
 #forums .box.pad {
-  padding: 0!important;
+  padding: 1em 0;
   background-color: #23252a;
 }
 
@@ -1518,13 +1521,17 @@ pre {
   height: 387px
 }
 
+.textarea_wrap {
+  padding-top: 15px;
+}
+
 #quickpost {
   color: #eee!important;
   font-size: 1.1em!important
 }
 
 #quickpostform {
-  background-color: transparent
+  background-color: transparent;
 }
 
 #quickreplybuttons input[value=Editor] {
@@ -1535,8 +1542,10 @@ div.contenth #quickpost {
   right: -2px
 }
 
-#user .bbcode-btntoolbar,#user .bbcode-smileys {
-  background-color: #2c2f36!important
+.bbcode_bar {
+  background: #373a42;
+  border: 1px solid #5b5e64;
+  border-bottom: none;
 }
 
 #friends table[width="100%"] td {

static/styles/global.css

@@ -217,6 +217,7 @@ pre {
 
 form textarea, form input {
   max-width: 100%;
+  box-sizing: border-box;
 }
 
 textarea {
@@ -268,7 +269,27 @@ div#AddArtists a {
 }
 
 #forums #quickpost {
-  width: 95%
+  width: 95%;
+}
+
+.bbcode_bar {
+  list-style: none;
+  margin: 0px 0px -4px;
+  box-sizing: border-box;
+  text-align: center;
+  display: inline-block;
+}
+.bbcode_bar > li {
+  display: inline-block;
+  margin: 0px;
+}
+.bbcode_bar > li > a {
+  display: inline-block;
+  height: 26px;
+  line-height: 26px;
+  cursor: pointer;
+  min-width: 20px;
+  margin: 0px 4px;
 }
 
 td.label, .valign_top {

static/styles/oppai/style.css

@@ -1066,6 +1066,13 @@ input.inputtext {
 input.inputtext:focus {
   border-bottom: 1px solid #E197E5;
 }
+
+.bbcode_bar {
+  background: white;
+  border: 1px solid #c7c7c7;
+  border-bottom: none;
+}
+
 .collage_images .collage_image {
   margin: 1px;
   width: 121px;