From 9538fa5cd75d0f958bb75b0a02854ba9af95a112 Mon Sep 17 00:00:00 2001
From: ccd0 <admin@containerchan.org>
Date: Sat, 20 Jun 2015 11:30:46 -0700
Subject: [PATCH] Allow clicking the image in noscript captcha rather than the
 checkbox.

---
 src/General/Config.coffee        |  2 +-
 src/General/Main.coffee          |  7 +++---
 src/Posting/Captcha.fixes.coffee | 38 ++++++++++++++++++++++++++++++--
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/General/Config.coffee b/src/General/Config.coffee
index 40f51a4fe..ab0677396 100755
--- a/src/General/Config.coffee
+++ b/src/General/Config.coffee
@@ -478,7 +478,7 @@ Config =
       ]
       'Captcha Fixes': [
         true
-        'Make captcha more keyboard-navigable.'
+        'Make captcha easier to use, especially with the keyboard.'
       ]
 
     'Quote Links':
diff --git a/src/General/Main.coffee b/src/General/Main.coffee
index c5a6fdf47..f9d849fe6 100755
--- a/src/General/Main.coffee
+++ b/src/General/Main.coffee
@@ -3,10 +3,9 @@ Main =
     if location.hostname is 'www.google.com'
       if location.pathname is '/recaptcha/api/fallback'
         $.ready -> Captcha.noscript.initFrame()
-      else
-        $.get 'Captcha Fixes', true, ({'Captcha Fixes': enabled}) ->
-          if enabled
-            $.ready -> Captcha.fixes.init()
+      $.get 'Captcha Fixes', true, ({'Captcha Fixes': enabled}) ->
+        if enabled
+          $.ready -> Captcha.fixes.init()
       return
 
     if location.hostname is 'www.4chan.org'
diff --git a/src/Posting/Captcha.fixes.coffee b/src/Posting/Captcha.fixes.coffee
index ae81a6fd6..7d2df4acd 100644
--- a/src/Posting/Captcha.fixes.coffee
+++ b/src/Posting/Captcha.fixes.coffee
@@ -8,10 +8,29 @@ Captcha.fixes =
     }
   '''
 
+  cssNoscript: '''
+    .fbc-payload-imageselect {
+      position: relative;
+    }
+    .fbc-payload-imageselect > label {
+      position: absolute;
+      display: block;
+      height: 93.3px;
+      width: 93.3px;
+    }
+    label[data-row="0"] {top: 0px;}
+    label[data-row="1"] {top: 93.3px;}
+    label[data-row="2"] {top: 186.6px;}
+    label[data-col="0"] {left: 0px;}
+    label[data-col="1"] {left: 93.3px;}
+    label[data-col="2"] {left: 186.6px;}
+  '''
+
   init: ->
     switch location.pathname.split('/')[3]
-      when 'anchor' then @initMain()
-      when 'frame'  then @initPopup()
+      when 'anchor'   then @initMain()
+      when 'frame'    then @initPopup()
+      when 'fallback' then @initNoscript()
 
   initMain: ->
     $.onExists d.body, '#recaptcha-anchor', true, (checkbox) ->
@@ -28,12 +47,27 @@ Captcha.fixes =
     new MutationObserver(=> @fixImages()).observe d.body, {childList: true, subtree: true}
     $.on d, 'keydown', @keybinds.bind(@)
 
+  initNoscript: ->
+    $.addStyle @cssNoscript
+    @addLabels()
+
   fixImages: ->
     @images = $$ '.rc-imageselect-target > div'
     for img in @images
       img.tabIndex = 0
     return
 
+  addLabels: ->
+    imageSelect = $ '.fbc-payload-imageselect'
+    labels = for checkbox, i in $$ 'input', imageSelect
+      checkbox.id = "checkbox-#{i}"
+      label = $.el 'label',
+        htmlFor: checkbox.id
+      label.dataset.row = i // 3
+      label.dataset.col = i % 3
+      label
+    $.add imageSelect, labels
+
   keybinds: (e) ->
     return unless @images and doc.contains(@images[0]) and d.activeElement
     reload = $.id 'recaptcha-reload-button'