Add Custom CSS ricing. #932

css/style.css

@@ -277,6 +277,9 @@ a[href="javascript:;"] {
 .section-sauce textarea {
   height: 350px;
 }
+.section-rice textarea {
+  height: 150px;
+}
 #fourchanx-settings textarea {
   font-family: monospace;
   min-width: 100%;

src/config.coffee

@@ -10,6 +10,7 @@ Config =
       'Comment Expansion':            [true,  'Can expand too long comments.']
       'Thread Expansion':             [true,  'Can expand threads to view all replies.']
       'Index Navigation':             [false, 'Navigate to previous / next thread.']
+      'Custom CSS':                   [false, 'Apply custom CSS to 4chan.']
       'Check for Updates':            [true,  'Check for updated versions of <%= meta.name %>.']
     'Filtering':
       'Anonymize':                    [false, 'Turn everyone Anonymous.']
@@ -129,6 +130,7 @@ Config =
   backlink: '>>%id'
   fileInfo: '%l (%p%s, %r)'
   favicon: 'ferongr'
+  usercss: ''
   hotkeys:
     # QR & Options
     'Open empty QR':      ['q',       'Open QR without post number inserted.']

src/features.coffee

@@ -496,18 +496,23 @@ Settings =
         <option value=Original>Original</option>
       </select>
       <span class=favicon-preview></span>
+      <div>Custom CSS</div>
+      <div class=warning #{if Conf['Custom CSS'] then 'hidden' else ''}><code>Custom CSS</code> is disabled.</div>
+      <button id=apply-css>Apply CSS</button>
+      <textarea name=usercss class=field></textarea>
     """
-    for name in ['time', 'backlink', 'fileInfo', 'favicon']
+    for name in ['time', 'backlink', 'fileInfo', 'favicon', 'usercss']
       input = $ "[name=#{name}]", section
       input.value = $.get name, Conf[name]
-      event = if input.nodeName is 'SELECT'
+      event = if name in ['favicon', 'usercss']
         'change'
       else
         'input'
       $.on input, event, $.cb.value
-      $.on input, event, Settings[name]
-      Settings[name].call input
-    return
+      unless name in ['usercss']
+        $.on input, event, Settings[name]
+        Settings[name].call input
+    $.on $.id('apply-css'), 'click', Settings.usercss
   time: ->
     funk = Time.createFunc @value
     @nextElementSibling.textContent = funk Time, new Date()
@@ -530,6 +535,11 @@ Settings =
     Favicon.switch()
     Unread.update() if g.VIEW is 'thread' and Conf['Unread Tab Icon']
     @nextElementSibling.innerHTML = "<img src=#{Favicon.unreadSFW}> <img src=#{Favicon.unreadNSFW}> <img src=#{Favicon.unreadDead}>"
+  usercss: ->
+    if Conf['Custom CSS']
+      CustomCSS.update()
+    else
+      CustomCSS.rmStyle()
 
   keybinds: (section) ->
     section.innerHTML = """
@@ -598,6 +608,21 @@ Fourchan =
       offset: offset
       limit: limit
 
+CustomCSS =
+  init: ->
+    return if !Conf['Custom CSS']
+    @addStyle()
+  addStyle: ->
+    @style = $.addStyle Conf['usercss']
+  rmStyle: ->
+    if @style
+      $.rm @style
+      delete @style
+  update: ->
+    unless @style
+      @addStyle()
+    @style.textContent = Conf['usercss']
+
 Filter =
   filters: {}
   init: ->

src/main.coffee

@@ -314,6 +314,7 @@ Main =
     initFeature 'Header',                   Header
     initFeature 'Settings',                 Settings
     initFeature 'Fourchan thingies',        Fourchan
+    initFeature 'Custom CSS',               CustomCSS
     initFeature 'Resurrect Quotes',         Quotify
     initFeature 'Filter',                   Filter
     initFeature 'Thread Hiding',            ThreadHiding