Allow clicking the image in noscript captcha rather than the checkbox.

This commit is contained in:
ccd0 2015-06-20 11:30:46 -07:00
parent e10b485895
commit 9538fa5cd7
3 changed files with 40 additions and 7 deletions

View File

@ -478,7 +478,7 @@ Config =
]
'Captcha Fixes': [
true
'Make captcha more keyboard-navigable.'
'Make captcha easier to use, especially with the keyboard.'
]
'Quote Links':

View File

@ -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'

View File

@ -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'