Rethink Emoji.

src/General/Config.coffee

@@ -455,14 +455,6 @@ Config =
         'The positioning of 4chan\'s image banner.'
         ['at sidebar top', 'at sidebar bottom', 'under post form', 'at top', 'hide']
       ]
-      '4chan Banner Reflection': [
-        false
-        'Adds reflection effects to 4chan\'s image banner.'
-      ]
-      'Faded 4chan Banner': [
-        true
-        'Make 4chan\'s image banner translucent.'
-      ]
       'Icon Orientation': [
         'horizontal'
         'Change the orientation of the appchan x icons.'
@@ -495,16 +487,6 @@ Config =
         'The position of backlinks in relation to the post.'
         ['default', 'lower left', 'lower right']
       ]
-      'Sage Highlighting': [
-        'image'
-        'Icons or text to highlight saged posts.'
-        ['text', 'image', 'none']
-      ]
-      'Sage Highlight Position': [
-        'after'
-        'Position of Sage Highlighting'
-        ['before', 'after']
-      ]
       'Filtered Backlinks': [
         true
         'Hide backlinks to filtered posts.'
@@ -544,10 +526,6 @@ Config =
         false
         'Hides lines between threads.'
       ]
-      'Images Overlap Post Form': [
-        true
-        'Images expand over the post form and sidebar content, usually used with "Expand images" set to "full".'
-      ]
 
     Aesthetics:
       '4chan SS Navigation': [
@@ -558,6 +536,14 @@ Config =
         false
         'Try to emulate the appearance of 4chan SS\'s Sidebar.'
       ]
+      '4chan Banner Reflection': [
+        false
+        'Adds reflection effects to 4chan\'s image banner.'
+      ]
+      'Faded 4chan Banner': [
+        true
+        'Make 4chan\'s image banner translucent.'
+      ]
       'Hide Ads': [
         false
         'Block advertisements. It\'s probably better to use AdBlock for this.'
@@ -582,21 +568,6 @@ Config =
         false
         'Make checkboxes circular.'
       ]
-      'Emoji': [
-        'enabled'
-        'Enable emoji'
-        ['enabled', 'disable ponies', 'only ponies', 'disable']
-      ]
-      'Emoji Position': [
-        'before'
-        'Position of emoji icons, like sega and neko.'
-        ['before', 'after']
-      ]
-      'Emoji Spacing': [
-        '5'
-        'Add some spacing between emoji and text.'
-        'text'
-      ]
       'Font': [
         'sans-serif'
         'The font used by all elements of 4chan.'
@@ -731,6 +702,42 @@ Config =
         true
         'Intelligent name field hiding.'
       ]
+      'Images Overlap Post Form': [
+        true
+        'Images expand over the post form and sidebar content, usually used with "Expand images" set to "full".'
+      ]
+
+    Indicators:
+      'Emoji': [
+        'enabled'
+        'Add icons besides usernames with triggered e-mails, like sega and neko.'
+        ['enabled', 'disable ponies', 'only ponies', 'disable']
+      ]
+      'Emoji Position': [
+        'before'
+        'Position of emoji icons.'
+        ['before', 'after']
+      ]
+      'Emoji Spacing': [
+        '5'
+        'Add some spacing between emoji and text.'
+        'text'
+      ]
+      'Sage Highlighting': [
+        'image'
+        'Icons or text to highlight saged posts.'
+        ['text', 'image', 'none']
+      ]
+      'Sage Image': [
+        'appchan'
+        'Image to use for sage highlighting.'
+        ['4chan SS', 'appchan']
+      ]
+      'Sage Highlight Position': [
+        'after'
+        'Position of Sage Highlighting'
+        ['before', 'after']
+      ]
 
   filter:
     name: """
@@ -795,9 +802,6 @@ http://iqdb.org/?url=%TURL
 #//archive.foolz.us/%board/search/image/%MD5/;text:View same on foolz /%board/
 #//archive.installgentoo.net/%board/image/%MD5;text:View same on installgentoo /%board/
 """
-  'sageEmoji': 'appchan'
-  
-  'emojiPos': 'before'
 
   'Custom CSS': false
 

src/General/Settings.coffee

@@ -278,11 +278,11 @@ Settings =
     section.innerHTML = """<%= grunt.file.read('src/General/html/Settings/Advanced.html').replace(/>\s+</g, '><').trim() %>"""
     items = {}
     inputs = {}
-    for name in ['boardnav', 'time', 'backlink', 'fileInfo', 'favicon', 'emojiPos', 'sageEmoji', 'usercss']
+    for name in ['boardnav', 'time', 'backlink', 'fileInfo', 'favicon', 'usercss']
       input = $ "[name='#{name}']", section
       items[name]  = Conf[name]
       inputs[name] = input
-      event = if ['favicon', 'usercss', 'sageEmoji', 'emojiPos'].contains name
+      event = if ['favicon', 'usercss'].contains name
         'change'
       else
         'input'
@@ -296,7 +296,6 @@ Settings =
 
     $.get items, (items) ->
       for key, val of items
-        continue if ['emojiPos'].contains key
         input = inputs[key]
         input.value = val
         continue if key is 'usercss'
@@ -419,11 +418,6 @@ Settings =
       <img src=#{Favicon.unreadDead}>
       """
 
-  sageEmoji: ->
-    $.id('sageicon-preview').innerHTML = """
-      <img src=data:image/png;base64,#{Emoji.sage[@value]}>
-      """
-
   togglecss: ->
     if $('textarea', @parentNode.parentNode).disabled = !@checked
       CustomCSS.rmStyle()

src/General/css/dynamic.css

@@ -60,4 +60,3 @@ a.useremail:last-of-type::after {
 #mascot {
   opacity: #{Conf['Mascot Opacity']};
 }
-#{unless _conf["Emoji"] is "disable" then Emoji.css _conf["Emoji Position"] else ""}

src/General/css/emoji.css

@@ -0,0 +1,8 @@
+.emoji-position-after:not(.emoji-disabled):not(.emoji-#{if key is "pony" then 'disable-ponies' else 'only-ponies'}) a.useremail[href*='#{name}']:last-of-type::after,
+.emoji-position-after:not(.emoji-disabled):not(.emoji-#{if key is "pony" then 'disable-ponies' else 'only-ponies'}) a.useremail[href*='#{name.toLowerCase()}']:last-of-type::after,
+.emoji-position-after:not(.emoji-disabled):not(.emoji-#{if key is "pony" then 'disable-ponies' else 'only-ponies'}) a.useremail[href*='#{name.toUpperCase()}']:last-of-type::after,
+.emoji-position-before:not(.emoji-disabled):not(.emoji-#{if key is "pony" then 'disable-ponies' else 'only-ponies'}) a.useremail[href*='#{name}']:last-of-type::before,
+.emoji-position-before:not(.emoji-disabled):not(.emoji-#{if key is "pony" then 'disable-ponies' else 'only-ponies'}) a.useremail[href*='#{name.toLowerCase()}']:last-of-type::before,
+.emoji-position-before:not(.emoji-disabled):not(.emoji-#{if key is "pony" then 'disable-ponies' else 'only-ponies'}) a.useremail[href*='#{name.toUpperCase()}']:last-of-type::before {
+  content: url('data:image/png;base64,#{icon}');
+}\n

src/General/css/emoji.sage.css

@@ -0,0 +1,16 @@
+.sage-highlighting-image.sage-image-appchan.sage-highlight-position-after a.useremail[href*='sage']:last-of-type::after,
+.sage-highlighting-image.sage-image-appchan.sage-highlight-position-after a.useremail[href*='SAGE']:last-of-type::after,
+.sage-highlighting-image.sage-image-appchan.sage-highlight-position-after a.useremail[href*='Sage']:last-of-type::after,
+.sage-highlighting-image.sage-image-appchan.sage-highlight-position-before a.useremail[href*='sage']:last-of-type::before,
+.sage-highlighting-image.sage-image-appchan.sage-highlight-position-before a.useremail[href*='SAGE']:last-of-type::before,
+.sage-highlighting-image.sage-image-appchan.sage-highlight-position-before a.useremail[href*='Sage']:last-of-type::before {
+  content: url('data:image/png;base64,<%= grunt.file.read("src/General/img/emoji/appchan-sage.png", {encoding: "base64"}) %>');
+}
+.sage-highlighting-image.sage-image-4chan-ss.sage-highlight-position-after a.useremail[href*='sage']:last-of-type::after,
+.sage-highlighting-image.sage-image-4chan-ss.sage-highlight-position-after a.useremail[href*='SAGE']:last-of-type::after,
+.sage-highlighting-image.sage-image-4chan-ss.sage-highlight-position-after a.useremail[href*='Sage']:last-of-type::after,
+.sage-highlighting-image.sage-image-4chan-ss.sage-highlight-position-before a.useremail[href*='sage']:last-of-type::before,
+.sage-highlighting-image.sage-image-4chan-ss.sage-highlight-position-before a.useremail[href*='SAGE']:last-of-type::before,
+.sage-highlighting-image.sage-image-4chan-ss.sage-highlight-position-before a.useremail[href*='Sage']:last-of-type::before {
+  content: url('data:image/png;base64,<%= grunt.file.read("src/General/img/emoji/SS-sage.png",      {encoding: "base64"}) %>');
+}

src/General/css/layout.css

@@ -966,6 +966,10 @@ th {
 s {
   text-decoration: none;
 }
+/* Emoji */
+a.useremail:last-of-type {
+  vertical-align: top;
+}
 /* Reply Clearfix */
 .reply.post .postMessage {
   clear: right;

src/General/css/theme.css

@@ -400,15 +400,6 @@ a .name {
   content: " (sage) ";
   color: #{theme["Sage"]};
 }
-.sage-highlighting-image.sage-highlight-position-before a.useremail[href*="sage"]:last-of-type::before,
-.sage-highlighting-image.sage-highlight-position-before a.useremail[href*="Sage"]:last-of-type::before,
-.sage-highlighting-image.sage-highlight-position-before a.useremail[href*="SAGE"]:last-of-type::before,
-.sage-highlighting-image.sage-highlight-position-after a.useremail[href*="sage"]:last-of-type::after,
-.sage-highlighting-image.sage-highlight-position-after a.useremail[href*="Sage"]:last-of-type::after,
-.sage-highlighting-image.sage-highlight-position-after a.useremail[href*="SAGE"]:last-of-type::after{
-  content: url("data:image/png;base64,<%= grunt.file.read("src/General/img/emoji/sage.png", {encoding: "base64"}) %>");
-  vertical-align: top;
-}
 .announcements-slideout #globalMessage {
   background: #{theme["Dialog Background"]};
   border: 1px solid #{theme["Dialog Border"]};

src/General/html/Settings/Advanced.html

@@ -95,23 +95,6 @@
   </div>
 </fieldset>
 
-<fieldset>
-  <legend>Emoji <span class=warning #{if Conf['Emoji'] then 'hidden' else ''}>is disabled.</span></legend>
-  <div>
-    Sage Icon: <select name=sageEmoji>
-      <option value="4chan SS">4chan SS</option>
-      <option value="appchan">appchan</option>
-    </select>
-    <span id=sageicon-preview></span>
-  </div>
-  <div>
-    Position: <select name=emojiPos>
-      <option value="before">Before</option>
-      <option value="after">After</option>
-    </select>
-  </div>
-</fieldset>
-
 <fieldset>
   <legend>Thread Updater <span class=warning #{if Conf['Thread Updater'] then 'hidden' else ''}>is disabled.</span></legend>
   <div>

src/Monitoring/ThreadWatcher.coffee

@@ -8,7 +8,6 @@ ThreadWatcher =
     $.on d, 'QRPostSuccessful',   @cb.post
     $.sync  'WatchedThreads',     @refresh
 
-
     $.ready ->
       ThreadWatcher.refresh()
       $.add d.body, ThreadWatcher.dialog

src/Theming/Emoji.coffee

@@ -1,34 +1,19 @@
 Emoji =
   init: ->
     Emoji.icons['PlanNine'] = Emoji.icons['Plan9']
-    Emoji.icons['Sage']     = Emoji.sage[Conf['sageEmoji']]
 
-  css: (position) ->
+  css: ->
     _conf = Conf
-    css = ["""
+    css = []
-a.useremail[href]:last-of-type::#{position} {
-  vertical-align: top;
-  margin-#{if position is "before" then "right" else "left"}: 5px;
-}\n
-  """]
     
     for key, category of Emoji.icons
       continue unless Emoji.icons.hasOwnProperty key
-      if (_conf['Emoji'] isnt "disable ponies" and key is "pony") or (_conf['Emoji'] isnt "only ponies" and key is "not")
+      for name, icon of category
-        for name, icon of category
+        continue unless category.hasOwnProperty name
-          continue unless category.hasOwnProperty name
+        css.push """<%= grunt.file.read('src/General/css/emoji.css') %>"""
-          css.push """
-a.useremail[href*='#{name}']:last-of-type::#{position},
-a.useremail[href*='#{name.toLowerCase()}']:last-of-type::#{position},
-a.useremail[href*='#{name.toUpperCase()}']:last-of-type::#{position} {
-  content: url('data:image/png;base64,#{icon}');
-}\n
-"""
-    css.join ""
 
-  sage:
+    css.push """<%= grunt.file.read('src/General/css/emoji.sage.css') %>"""
-    '4chan SS': '<%= grunt.file.read("src/General/img/emoji/SS-sage.png",      {encoding: "base64"}) %>'
+    css.join ""
-    'appchan':  '<%= grunt.file.read("src/General/img/emoji/appchan-sage.png", {encoding: "base64"}) %>'
 
   icons:
     pony:

src/Theming/Style.coffee

@@ -78,6 +78,7 @@ Style =
     $.extend Style,
       layoutCSS:    $.addStyle Style.layout,       'layout'
       themeCSS:     $.addStyle Style.theme(theme), 'theme'
+      emojiCSS:     $.addStyle Emoji.css(),        'emoji'
       dynamicCSS:   $.addStyle Style.dynamic(),    'dynamic'
       icons:        $.addStyle "",                 'icons'
       paddingSheet: $.addStyle "",                 'padding'