Add emoji picker to BBCode toolbar

static/functions/bbcode.js

@@ -25,6 +25,41 @@ function wrapSelected(box, wrap, offset) {
   box.selectionEnd = (offset!==undefined?s+offset:e+wrap[0].length)
 }
 
+function EmojiBox(box) {
+  let opened = false
+  let emojis = ['😀','😁','😂','🤣','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘','😗','😙','😚','🙂','🤗','🤔','😐','😑','😶','🙄','😏','😣','😥','😮','🤐','😯','😪','😫','😴','😌','😛','😜','😝','🤤','😒','😓','😔','😕','🙃','🤑','😲','🙁','😖','😞','😟','😤','😢','😭','😦','😧','😨','😩','😬','😰','😱','😳','😵','😡','😠','😷','🤒','🤕','🤢','🤧','😇','🤠','🤡','🤥','🤓','\n','😈','👿','👹','👺','💀','👻','👽','🤖','💩','😺','😸','😹','😻','😼','😽','🙀','😿','😾','\n','🍇','🍈','🍉','🍊','🍋','🍌','🍍','🍎','🍏','🍐','🍑','🍒','🍓','🥝','🍅','🥑','🍆','🥔','🥕','🌽','🌶','🥒','🍄','🥜','🌰','🍞','🥐','🥖','🥞','🧀','🍖','🍗','🥓','🍔','🍟','🍕','🌭','🌮','🌯','🍳','🍲','🥗','🍿','🍱','🍘','🍙','🍚','🍛','🍜','🍝','🍠','🍢','🍣','🍤','🍥','🍡','🍦','🍧','🍨','🍩','🍪','🎂','🍰','🍫','🍬','🍭','🍮','🍯','🍼','🥛','🍵','🍶','🍾','🍷','🍸','🍹','🍺','🍻','🥂','🥃','🍽','🍴','🥄','\n','🛀','🛌','💌','💣','🕳','🛍','📿','💎','🔪','🏺','🗺','💈','🛢','🛎','⌛','⏳','⌚','⏰','⏱','⏲','🕰','🌡','⛱','🎈','🎉','🎊','🎎','🎏','🎐','🎀','🎁','🔮','🕹','🖼','📯','🎙','🎚','🎛','📻','📱','📲','📞','📟','📠','🔋','🔌','💻','🖥','🖨','🖱','🖲','💽','💾','💿','📀','🎥','🎞','📽','📺','📷','📸','📹','📼','🔍','🔎','🕯','💡','🔦','🏮','📔','📕','📖','📗','📘','📙','📚','📓','📃','📜','📄','📰','🗞','📑','🔖','🏷','💰','💴','💵','💶','💷','💸','💳','📧','📨','📩','📤','📥','📦','📫','📪','📬','📭','📮','🗳','🖋','🖊','🖌','🖍','📝','📁','📂','🗂','📅','📆','🗒','🗓','📇','📈','📉','📊','📋','📌','📍','📎','🖇','📏','📐','🗃','🗄','🗑','🔒','🔓','🔏','🔐','🔑','🗝','🔨','⛏','🛠','🗡','🔫','🛡','🔧','🔩','🗜','🔗','⛓','🔬','🔭','📡','💉','💊','🚪','🛏','🛋','🚽','🚿','🛁','🚬','🗿','🚰','\n','💪','👈','👉','👆','🖕','👇','🤞','🖖','🤘','🖐','✋','👌','👍','👎','✊','👊','🤛','🤜','🤚','👋','👏','👐','🙌','🙏','🤝']
+
+
+  let ebox = document.createElement('div')
+  ebox.className = 'emoji_box border'
+  for (let emoji of emojis) {
+    if (emoji === '\n') {
+      let br = document.createElement('br')
+      ebox.appendChild(br)
+      continue;
+    }
+    let a = document.createElement('a')
+    a.innerHTML = emoji
+    a.addEventListener('click', e => {
+      wrapSelected(box, [emoji,''])
+      e.stopPropagation()
+    })
+    ebox.appendChild(a)
+  }
+  return event => {
+    if (!opened) {
+      event.target.parentElement.appendChild(ebox)
+      let f = e => {
+        event.target.nextSibling.remove()
+        opened = false
+        document.removeEventListener('click', f)
+      }
+      window.setTimeout(_ => document.addEventListener('click', f), 1)
+      opened = true
+    }
+  }
+}
+
 function BBEditor(box) {
   if (box.previousSibling && box.previousSibling.className == 'bbcode_bar') return
   let buttons = [
@@ -47,7 +82,8 @@ function BBEditor(box) {
     {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]']}
+    {short:'Torr', name:'Torrent', wrap:['[torrent]','[/torrent]']},
+    {short:'😃', name:'Emoji', func:EmojiBox(box)}
   ]
   let bar = document.createElement('ul')
   bar.className = "bbcode_bar"
@@ -62,7 +98,8 @@ function BBEditor(box) {
     b = document.createElement('a')
     b.setAttribute('title', button.name)
     b.innerHTML = button.short
-    b.addEventListener('click', e=>wrapSelected(box, button.wrap, button.offset))
+    if (button.wrap) b.addEventListener('click', e=>wrapSelected(box, button.wrap, button.offset))
+    else if (button.func) b.addEventListener('click', button.func)
     li.appendChild(b)
     bar.appendChild(li)
   }

static/styles/beluga/style.css

@@ -1532,6 +1532,10 @@ div.contenth #quickpost {
 .bbcode_bar > li > a {
   min-width: 15px;
 }
+.bbcode_bar .emoji_box {
+  border: 1px solid #5b5e63;
+  background-color: #373a42 !important;
+}
 
 #friends table[width="100%"] td {
   text-align: center

static/styles/genaviv/style.css

@@ -1074,16 +1074,11 @@ h2,h3 {
 .forum_post td a img {
   display:inline-block;vertical-align:middle
 }
-#quickreplytext div.bbcode-btntoolbar {
-  text-align:center;
-}
-.torrent_info_row .linkbox,.torrent_info_row div#subtitle_manager a,.torrent_info_first_block.movie-page__torrent__panel a[href="#"] {
+.torrent_info_row .linkbox {
   font-family:'Proxima Nova','Lato','Segoe UI',sans-serif;font-size:0.75rem
 }
 .torrent_info_row .bbcode-table-guard a {
   width:100%;
-}
-.torrent_info_row .bbcode-table-guard a,.torrent_info_first_block.movie-page__torrent__panel {
   text-align:center;
 }
 .torrent_info_row>td {
@@ -1095,12 +1090,9 @@ h2,h3 {
 .forum_post td.body {
   padding-right:10px;padding-bottom:10px
 }
-.movie-tooltip__title-row,.movie-tooltip__tags,.movie-tooltip__ratings,.movie-tooltip__director-list,.movie-tooltip__trailer,.movie-tooltip__synopsis,.linkbox a.brackets {
+.linkbox a.brackets {
   padding-bottom:5px
 }
-.movie-tooltip__ratings div {
-  margin-right:4px
-}
 .linkbox a.brackets {
   display:inline-block;
 }
@@ -1117,9 +1109,6 @@ span.user_title {
 body {
   background:#e1e3e4;color:#313131;
 }
-.thin>h2>a[href*="series.php"]:after,#header .new-subscriptions a:hover {
-  color:#313131
-}
 .torrent td,pre,blockquote {
   color:#777!important
 }
@@ -1165,7 +1154,7 @@ td a {
 #torrents .torrent_table a[onclick*=toggle] strong {
   color:#000
 }
-#torrents .torrent_table a[onclick*=toggle],a.episode,tr.recentinternalrow>td:first-child,a[href*="torrents.php?id"],a[href*="torrents.php?id"][title="View Torrent"].season:hover,a[href*="torrents.php?id"][title="View Torrent"].episode {
+#torrents .torrent_table a[onclick*=toggle],tr.recentinternalrow>td:first-child,a[href*="torrents.php?id"],a[href*="torrents.php?id"][title="View Torrent"].season:hover,a[href*="torrents.php?id"][title="View Torrent"].episode {
   color:#777
 }
 .ui-tabs .ui-tabs-nav li.ui-state-default,div.ui-tabs-vertical .ui-tabs-nav li.ui-state-default {
@@ -1470,6 +1459,10 @@ div.pad#threadpoll p strong {
   box-shadow: 0px 0px 0px 3px #5aada5;
   position: relative;
 }
+.bbcode_bar .emoji_box {
+  background-color: #e1e3e4;
+  border: 1px solid #d0d0d0;
+}
 
 /* Fixed Header addition */
 body.style_fixed_header #menu, body.style_fixed_header .main-menu {

static/styles/global.css

@@ -282,6 +282,22 @@ div#AddArtists a {
   min-width: 20px;
   margin: 0px 4px;
 }
+.bbcode_bar .emoji_box {
+  position: absolute;
+  width: 200px;
+  height: 100px;
+  overflow-y: scroll;
+  padding: 8px;
+  font-size: 20px;
+}
+.bbcode_bar .emoji_box > a {
+  cursor: pointer;
+}
+.bbcode_bar .emoji_box > br {
+  content: "";
+  display: block;
+  margin-bottom: 15px;
+}
 
 td.label, .valign_top {
   vertical-align: top;

static/styles/oppai/style.css

@@ -1079,6 +1079,9 @@ input.inputtext:focus {
   border: 1px solid #c7c7c7;
   border-bottom: none;
 }
+.bbcode_bar .emoji_box {
+  background-color: #EEE;
+}
 
 .collage_images .collage_image {
   margin: 1px;