Browse Source

Add emoji picker to BBCode toolbar

spaghetti 1 year ago
parent
commit
c856f9e4c5

+ 39
- 2
static/functions/bbcode.js View File

@@ -25,6 +25,41 @@ function wrapSelected(box, wrap, offset) {
25 25
   box.selectionEnd = (offset!==undefined?s+offset:e+wrap[0].length)
26 26
 }
27 27
 
28
+function EmojiBox(box) {
29
+  let opened = false
30
+  let emojis = ['๐Ÿ˜€','๐Ÿ˜','๐Ÿ˜‚','๐Ÿคฃ','๐Ÿ˜ƒ','๐Ÿ˜„','๐Ÿ˜…','๐Ÿ˜†','๐Ÿ˜‰','๐Ÿ˜Š','๐Ÿ˜‹','๐Ÿ˜Ž','๐Ÿ˜','๐Ÿ˜˜','๐Ÿ˜—','๐Ÿ˜™','๐Ÿ˜š','๐Ÿ™‚','๐Ÿค—','๐Ÿค”','๐Ÿ˜','๐Ÿ˜‘','๐Ÿ˜ถ','๐Ÿ™„','๐Ÿ˜','๐Ÿ˜ฃ','๐Ÿ˜ฅ','๐Ÿ˜ฎ','๐Ÿค','๐Ÿ˜ฏ','๐Ÿ˜ช','๐Ÿ˜ซ','๐Ÿ˜ด','๐Ÿ˜Œ','๐Ÿ˜›','๐Ÿ˜œ','๐Ÿ˜','๐Ÿคค','๐Ÿ˜’','๐Ÿ˜“','๐Ÿ˜”','๐Ÿ˜•','๐Ÿ™ƒ','๐Ÿค‘','๐Ÿ˜ฒ','๐Ÿ™','๐Ÿ˜–','๐Ÿ˜ž','๐Ÿ˜Ÿ','๐Ÿ˜ค','๐Ÿ˜ข','๐Ÿ˜ญ','๐Ÿ˜ฆ','๐Ÿ˜ง','๐Ÿ˜จ','๐Ÿ˜ฉ','๐Ÿ˜ฌ','๐Ÿ˜ฐ','๐Ÿ˜ฑ','๐Ÿ˜ณ','๐Ÿ˜ต','๐Ÿ˜ก','๐Ÿ˜ ','๐Ÿ˜ท','๐Ÿค’','๐Ÿค•','๐Ÿคข','๐Ÿคง','๐Ÿ˜‡','๐Ÿค ','๐Ÿคก','๐Ÿคฅ','๐Ÿค“','\n','๐Ÿ˜ˆ','๐Ÿ‘ฟ','๐Ÿ‘น','๐Ÿ‘บ','๐Ÿ’€','๐Ÿ‘ป','๐Ÿ‘ฝ','๐Ÿค–','๐Ÿ’ฉ','๐Ÿ˜บ','๐Ÿ˜ธ','๐Ÿ˜น','๐Ÿ˜ป','๐Ÿ˜ผ','๐Ÿ˜ฝ','๐Ÿ™€','๐Ÿ˜ฟ','๐Ÿ˜พ','\n','๐Ÿ‡','๐Ÿˆ','๐Ÿ‰','๐ŸŠ','๐Ÿ‹','๐ŸŒ','๐Ÿ','๐ŸŽ','๐Ÿ','๐Ÿ','๐Ÿ‘','๐Ÿ’','๐Ÿ“','๐Ÿฅ','๐Ÿ…','๐Ÿฅ‘','๐Ÿ†','๐Ÿฅ”','๐Ÿฅ•','๐ŸŒฝ','๐ŸŒถ','๐Ÿฅ’','๐Ÿ„','๐Ÿฅœ','๐ŸŒฐ','๐Ÿž','๐Ÿฅ','๐Ÿฅ–','๐Ÿฅž','๐Ÿง€','๐Ÿ–','๐Ÿ—','๐Ÿฅ“','๐Ÿ”','๐ŸŸ','๐Ÿ•','๐ŸŒญ','๐ŸŒฎ','๐ŸŒฏ','๐Ÿณ','๐Ÿฒ','๐Ÿฅ—','๐Ÿฟ','๐Ÿฑ','๐Ÿ˜','๐Ÿ™','๐Ÿš','๐Ÿ›','๐Ÿœ','๐Ÿ','๐Ÿ ','๐Ÿข','๐Ÿฃ','๐Ÿค','๐Ÿฅ','๐Ÿก','๐Ÿฆ','๐Ÿง','๐Ÿจ','๐Ÿฉ','๐Ÿช','๐ŸŽ‚','๐Ÿฐ','๐Ÿซ','๐Ÿฌ','๐Ÿญ','๐Ÿฎ','๐Ÿฏ','๐Ÿผ','๐Ÿฅ›','๐Ÿต','๐Ÿถ','๐Ÿพ','๐Ÿท','๐Ÿธ','๐Ÿน','๐Ÿบ','๐Ÿป','๐Ÿฅ‚','๐Ÿฅƒ','๐Ÿฝ','๐Ÿด','๐Ÿฅ„','\n','๐Ÿ›€','๐Ÿ›Œ','๐Ÿ’Œ','๐Ÿ’ฃ','๐Ÿ•ณ','๐Ÿ›','๐Ÿ“ฟ','๐Ÿ’Ž','๐Ÿ”ช','๐Ÿบ','๐Ÿ—บ','๐Ÿ’ˆ','๐Ÿ›ข','๐Ÿ›Ž','โŒ›','โณ','โŒš','โฐ','โฑ','โฒ','๐Ÿ•ฐ','๐ŸŒก','โ›ฑ','๐ŸŽˆ','๐ŸŽ‰','๐ŸŽŠ','๐ŸŽŽ','๐ŸŽ','๐ŸŽ','๐ŸŽ€','๐ŸŽ','๐Ÿ”ฎ','๐Ÿ•น','๐Ÿ–ผ','๐Ÿ“ฏ','๐ŸŽ™','๐ŸŽš','๐ŸŽ›','๐Ÿ“ป','๐Ÿ“ฑ','๐Ÿ“ฒ','๐Ÿ“ž','๐Ÿ“Ÿ','๐Ÿ“ ','๐Ÿ”‹','๐Ÿ”Œ','๐Ÿ’ป','๐Ÿ–ฅ','๐Ÿ–จ','๐Ÿ–ฑ','๐Ÿ–ฒ','๐Ÿ’ฝ','๐Ÿ’พ','๐Ÿ’ฟ','๐Ÿ“€','๐ŸŽฅ','๐ŸŽž','๐Ÿ“ฝ','๐Ÿ“บ','๐Ÿ“ท','๐Ÿ“ธ','๐Ÿ“น','๐Ÿ“ผ','๐Ÿ”','๐Ÿ”Ž','๐Ÿ•ฏ','๐Ÿ’ก','๐Ÿ”ฆ','๐Ÿฎ','๐Ÿ“”','๐Ÿ“•','๐Ÿ“–','๐Ÿ“—','๐Ÿ“˜','๐Ÿ“™','๐Ÿ“š','๐Ÿ““','๐Ÿ“ƒ','๐Ÿ“œ','๐Ÿ“„','๐Ÿ“ฐ','๐Ÿ—ž','๐Ÿ“‘','๐Ÿ”–','๐Ÿท','๐Ÿ’ฐ','๐Ÿ’ด','๐Ÿ’ต','๐Ÿ’ถ','๐Ÿ’ท','๐Ÿ’ธ','๐Ÿ’ณ','๐Ÿ“ง','๐Ÿ“จ','๐Ÿ“ฉ','๐Ÿ“ค','๐Ÿ“ฅ','๐Ÿ“ฆ','๐Ÿ“ซ','๐Ÿ“ช','๐Ÿ“ฌ','๐Ÿ“ญ','๐Ÿ“ฎ','๐Ÿ—ณ','๐Ÿ–‹','๐Ÿ–Š','๐Ÿ–Œ','๐Ÿ–','๐Ÿ“','๐Ÿ“','๐Ÿ“‚','๐Ÿ—‚','๐Ÿ“…','๐Ÿ“†','๐Ÿ—’','๐Ÿ—“','๐Ÿ“‡','๐Ÿ“ˆ','๐Ÿ“‰','๐Ÿ“Š','๐Ÿ“‹','๐Ÿ“Œ','๐Ÿ“','๐Ÿ“Ž','๐Ÿ–‡','๐Ÿ“','๐Ÿ“','๐Ÿ—ƒ','๐Ÿ—„','๐Ÿ—‘','๐Ÿ”’','๐Ÿ”“','๐Ÿ”','๐Ÿ”','๐Ÿ”‘','๐Ÿ—','๐Ÿ”จ','โ›','๐Ÿ› ','๐Ÿ—ก','๐Ÿ”ซ','๐Ÿ›ก','๐Ÿ”ง','๐Ÿ”ฉ','๐Ÿ—œ','๐Ÿ”—','โ›“','๐Ÿ”ฌ','๐Ÿ”ญ','๐Ÿ“ก','๐Ÿ’‰','๐Ÿ’Š','๐Ÿšช','๐Ÿ›','๐Ÿ›‹','๐Ÿšฝ','๐Ÿšฟ','๐Ÿ›','๐Ÿšฌ','๐Ÿ—ฟ','๐Ÿšฐ','\n','๐Ÿ’ช','๐Ÿ‘ˆ','๐Ÿ‘‰','๐Ÿ‘†','๐Ÿ–•','๐Ÿ‘‡','๐Ÿคž','๐Ÿ––','๐Ÿค˜','๐Ÿ–','โœ‹','๐Ÿ‘Œ','๐Ÿ‘','๐Ÿ‘Ž','โœŠ','๐Ÿ‘Š','๐Ÿค›','๐Ÿคœ','๐Ÿคš','๐Ÿ‘‹','๐Ÿ‘','๐Ÿ‘','๐Ÿ™Œ','๐Ÿ™','๐Ÿค']
31
+
32
+
33
+  let ebox = document.createElement('div')
34
+  ebox.className = 'emoji_box border'
35
+  for (let emoji of emojis) {
36
+    if (emoji === '\n') {
37
+      let br = document.createElement('br')
38
+      ebox.appendChild(br)
39
+      continue;
40
+    }
41
+    let a = document.createElement('a')
42
+    a.innerHTML = emoji
43
+    a.addEventListener('click', e => {
44
+      wrapSelected(box, [emoji,''])
45
+      e.stopPropagation()
46
+    })
47
+    ebox.appendChild(a)
48
+  }
49
+  return event => {
50
+    if (!opened) {
51
+      event.target.parentElement.appendChild(ebox)
52
+      let f = e => {
53
+        event.target.nextSibling.remove()
54
+        opened = false
55
+        document.removeEventListener('click', f)
56
+      }
57
+      window.setTimeout(_ => document.addEventListener('click', f), 1)
58
+      opened = true
59
+    }
60
+  }
61
+}
62
+
28 63
 function BBEditor(box) {
29 64
   if (box.previousSibling && box.previousSibling.className == 'bbcode_bar') return
30 65
   let buttons = [
@@ -47,7 +82,8 @@ function BBEditor(box) {
47 82
     {short:'Img', name:'Image', wrap:['[img]','[/img]']},
48 83
     {short:'Vid', name:'Video', wrap:['[embed]','[/embed]']},
49 84
     {short:'Link', name:'Link', wrap:['[url]','[/url]']},
50
-    {short:'Torr', name:'Torrent', wrap:['[torrent]','[/torrent]']}
85
+    {short:'Torr', name:'Torrent', wrap:['[torrent]','[/torrent]']},
86
+    {short:'๐Ÿ˜ƒ', name:'Emoji', func:EmojiBox(box)}
51 87
   ]
52 88
   let bar = document.createElement('ul')
53 89
   bar.className = "bbcode_bar"
@@ -62,7 +98,8 @@ function BBEditor(box) {
62 98
     b = document.createElement('a')
63 99
     b.setAttribute('title', button.name)
64 100
     b.innerHTML = button.short
65
-    b.addEventListener('click', e=>wrapSelected(box, button.wrap, button.offset))
101
+    if (button.wrap) b.addEventListener('click', e=>wrapSelected(box, button.wrap, button.offset))
102
+    else if (button.func) b.addEventListener('click', button.func)
66 103
     li.appendChild(b)
67 104
     bar.appendChild(li)
68 105
   }

+ 4
- 0
static/styles/beluga/style.css View File

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

+ 7
- 14
static/styles/genaviv/style.css View File

@@ -1074,16 +1074,11 @@ h2,h3 {
1074 1074
 .forum_post td a img {
1075 1075
   display:inline-block;vertical-align:middle
1076 1076
 }
1077
-#quickreplytext div.bbcode-btntoolbar {
1078
-  text-align:center;
1079
-}
1080
-.torrent_info_row .linkbox,.torrent_info_row div#subtitle_manager a,.torrent_info_first_block.movie-page__torrent__panel a[href="#"] {
1077
+.torrent_info_row .linkbox {
1081 1078
   font-family:'Proxima Nova','Lato','Segoe UI',sans-serif;font-size:0.75rem
1082 1079
 }
1083 1080
 .torrent_info_row .bbcode-table-guard a {
1084 1081
   width:100%;
1085
-}
1086
-.torrent_info_row .bbcode-table-guard a,.torrent_info_first_block.movie-page__torrent__panel {
1087 1082
   text-align:center;
1088 1083
 }
1089 1084
 .torrent_info_row>td {
@@ -1095,12 +1090,9 @@ h2,h3 {
1095 1090
 .forum_post td.body {
1096 1091
   padding-right:10px;padding-bottom:10px
1097 1092
 }
1098
-.movie-tooltip__title-row,.movie-tooltip__tags,.movie-tooltip__ratings,.movie-tooltip__director-list,.movie-tooltip__trailer,.movie-tooltip__synopsis,.linkbox a.brackets {
1093
+.linkbox a.brackets {
1099 1094
   padding-bottom:5px
1100 1095
 }
1101
-.movie-tooltip__ratings div {
1102
-  margin-right:4px
1103
-}
1104 1096
 .linkbox a.brackets {
1105 1097
   display:inline-block;
1106 1098
 }
@@ -1117,9 +1109,6 @@ span.user_title {
1117 1109
 body {
1118 1110
   background:#e1e3e4;color:#313131;
1119 1111
 }
1120
-.thin>h2>a[href*="series.php"]:after,#header .new-subscriptions a:hover {
1121
-  color:#313131
1122
-}
1123 1112
 .torrent td,pre,blockquote {
1124 1113
   color:#777!important
1125 1114
 }
@@ -1165,7 +1154,7 @@ td a {
1165 1154
 #torrents .torrent_table a[onclick*=toggle] strong {
1166 1155
   color:#000
1167 1156
 }
1168
-#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 {
1157
+#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 {
1169 1158
   color:#777
1170 1159
 }
1171 1160
 .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 {
1470 1459
   box-shadow: 0px 0px 0px 3px #5aada5;
1471 1460
   position: relative;
1472 1461
 }
1462
+.bbcode_bar .emoji_box {
1463
+  background-color: #e1e3e4;
1464
+  border: 1px solid #d0d0d0;
1465
+}
1473 1466
 
1474 1467
 /* Fixed Header addition */
1475 1468
 body.style_fixed_header #menu, body.style_fixed_header .main-menu {

+ 16
- 0
static/styles/global.css View File

@@ -282,6 +282,22 @@ div#AddArtists a {
282 282
   min-width: 20px;
283 283
   margin: 0px 4px;
284 284
 }
285
+.bbcode_bar .emoji_box {
286
+  position: absolute;
287
+  width: 200px;
288
+  height: 100px;
289
+  overflow-y: scroll;
290
+  padding: 8px;
291
+  font-size: 20px;
292
+}
293
+.bbcode_bar .emoji_box > a {
294
+  cursor: pointer;
295
+}
296
+.bbcode_bar .emoji_box > br {
297
+  content: "";
298
+  display: block;
299
+  margin-bottom: 15px;
300
+}
285 301
 
286 302
 td.label, .valign_top {
287 303
   vertical-align: top;

+ 3
- 0
static/styles/oppai/style.css View File

@@ -1079,6 +1079,9 @@ input.inputtext:focus {
1079 1079
   border: 1px solid #c7c7c7;
1080 1080
   border-bottom: none;
1081 1081
 }
1082
+.bbcode_bar .emoji_box {
1083
+  background-color: #EEE;
1084
+}
1082 1085
 
1083 1086
 .collage_images .collage_image {
1084 1087
   margin: 1px;

Loadingโ€ฆ
Cancel
Save