Fix #561.

4chan_x.user.js

@@ -1415,7 +1415,7 @@
 
   QR = {
     init: function() {
-      if (!$.id('recaptcha_challenge_field_holder')) {
+      if (!$.id('postForm')) {
         return;
       }
       Main.callbacks.push(this.node);
@@ -1870,9 +1870,37 @@
     captcha: {
       init: function() {
         var _this = this;
-        this.img = $('.captcha > img', QR.el);
+        if (!(QR.captchaIsEnabled = !!$.id('captchaFormPart'))) {
-        this.input = $('[autocomplete]', QR.el);
+          return;
-        this.challenge = $.id('recaptcha_challenge_field_holder');
+        }
+        if ($.id('recaptcha_challenge_field_holder')) {
+          return this.ready();
+        } else {
+          this.onready = function() {
+            return _this.ready();
+          };
+          return $.on($.id('recaptcha_widget_div'), 'DOMNodeInserted', this.onready);
+        }
+      },
+      ready: function() {
+        var _this = this;
+        if (this.challenge = $.id('recaptcha_challenge_field_holder')) {
+          $.off($.id('recaptcha_widget_div'), 'DOMNodeInserted', this.onready);
+          delete this.onready;
+        } else {
+          return;
+        }
+        $.after($('.textarea', QR.el), $.el('div', {
+          className: 'captchaimg',
+          title: 'Reload',
+          innerHTML: '<img>'
+        }));
+        $.after($('.captchaimg', QR.el), $.el('div', {
+          className: 'captchainput',
+          innerHTML: '<input title=Verification class=field autocomplete=off size=1>'
+        }));
+        this.img = $('.captchaimg > img', QR.el);
+        this.input = $('.captchainput > input', QR.el);
         $.on(this.img.parentNode, 'click', this.reload);
         $.on(this.input, 'keydown', this.keydown);
         $.on(this.challenge, 'DOMNodeInserted', function() {
@@ -1952,9 +1980,7 @@
 <form>\
   <div><input id=dump type=button title="Dump list" value=+ class=field><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div>\
   <div id=replies><div><a id=addReply href=javascript:; title="Add a reply">+</a></div></div>\
-  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea><span id=charCount></span></div>\
+  <div class=textarea><textarea name=com title=Comment placeholder=Comment class=field></textarea><span id=charCount></span></div>\
-  <div class=captcha title=Reload><img></div>\
-  <div><input title=Verification class=field autocomplete=off size=1></div>\
   <div><input type=file title="Shift+Click to remove the selected file." multiple size=16><input type=submit></div>\
   <label id=spoilerLabel><input type=checkbox id=spoiler> Spoiler Image</label>\
   <div class=warning></div>\
@@ -2062,7 +2088,7 @@
       threadID = g.THREAD_ID || $('select', QR.el).value;
       if (!(threadID === 'new' && reply.file || threadID !== 'new' && (reply.com || reply.file))) {
         err = 'No file selected.';
-      } else {
+      } else if (QR.captchaIsEnabled) {
         captchas = $.get('captchas', []);
         while ((captcha = captchas[0]) && captcha.time < Date.now()) {
           captchas.shift();
@@ -4392,7 +4418,7 @@
           return;
       }
       $.ready(Options.init);
-      if (Conf['Quick Reply'] && Conf['Hide Original Post Form'] && g.BOARD !== 'f') {
+      if (Conf['Quick Reply'] && Conf['Hide Original Post Form']) {
         Main.css += '#postForm { display: none; }';
       }
       Main.addStyle();
@@ -4738,7 +4764,7 @@ h1 {\
 #qr > .move > span {\
   float: right;\
 }\
-#autohide, .close, #qr select, #dump, .remove, .captcha, #qr div.warning {\
+#autohide, .close, #qr select, #dump, .remove, .captchaimg, #qr div.warning {\
   cursor: pointer;\
 }\
 #qr select,\
@@ -4895,7 +4921,7 @@ h1 {\
   min-height: 120px;\
   min-width: 100%;\
 }\
-#qr > form > div:nth-child(3) {\
+.textarea {\
   position: relative;\
 }\
 #charCount {\
@@ -4908,16 +4934,16 @@ h1 {\
 #charCount.warning {\
   color: red;\
 }\
-.captcha + div > .field {\
+.captchainput > .field {\
   min-width: 100%;\
 }\
-.captcha {\
+.captchaimg {\
   background: #FFF;\
   outline: 1px solid #CCC;\
   outline-offset: -1px;\
   text-align: center;\
 }\
-.captcha > img {\
+.captchaimg > img {\
   display: block;\
   height: 57px;\
   width: 300px;\

changelog

@@ -1,4 +1,7 @@
 master
+- Mayhem
+  Fix QR with the new captcha loading method.
+  The QR will now work on /f/ too.
 
 2.33.3
 - Mayhem

script.coffee

@@ -1045,7 +1045,7 @@ Nav =
 
 QR =
   init: ->
-    return unless $.id 'recaptcha_challenge_field_holder'
+    return unless $.id 'postForm'
     Main.callbacks.push @node
     setTimeout @asyncInit
 
@@ -1389,9 +1389,27 @@ QR =
 
   captcha:
     init: ->
-      @img       = $ '.captcha > img', QR.el
+      return unless QR.captchaIsEnabled = !!$.id 'captchaFormPart'
-      @input     = $ '[autocomplete]', QR.el
+      if $.id 'recaptcha_challenge_field_holder'
-      @challenge = $.id 'recaptcha_challenge_field_holder'
+        @ready()
+      else
+        @onready = => @ready()
+        $.on $.id('recaptcha_widget_div'), 'DOMNodeInserted', @onready
+    ready: ->
+      if @challenge = $.id 'recaptcha_challenge_field_holder'
+        $.off $.id('recaptcha_widget_div'), 'DOMNodeInserted', @onready
+        delete @onready
+      else
+        return
+      $.after $('.textarea', QR.el), $.el 'div',
+        className: 'captchaimg'
+        title: 'Reload'
+        innerHTML: '<img>'
+      $.after $('.captchaimg', QR.el), $.el 'div',
+        className: 'captchainput'
+        innerHTML: '<input title=Verification class=field autocomplete=off size=1>'
+      @img       = $ '.captchaimg > img', QR.el
+      @input     = $ '.captchainput > input', QR.el
       $.on @img.parentNode, 'click',              @reload
       $.on @input,          'keydown',            @keydown
       $.on @challenge,      'DOMNodeInserted', => @load()
@@ -1453,9 +1471,7 @@ QR =
 <form>
   <div><input id=dump type=button title="Dump list" value=+ class=field><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div>
   <div id=replies><div><a id=addReply href=javascript:; title="Add a reply">+</a></div></div>
-  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea><span id=charCount></span></div>
+  <div class=textarea><textarea name=com title=Comment placeholder=Comment class=field></textarea><span id=charCount></span></div>
-  <div class=captcha title=Reload><img></div>
-  <div><input title=Verification class=field autocomplete=off size=1></div>
   <div><input type=file title="Shift+Click to remove the selected file." multiple size=16><input type=submit></div>
   <label id=spoilerLabel><input type=checkbox id=spoiler> Spoiler Image</label>
   <div class=warning></div>
@@ -1547,7 +1563,7 @@ QR =
     # prevent errors
     unless threadID is 'new' and reply.file or threadID isnt 'new' and (reply.com or reply.file)
       err = 'No file selected.'
-    else
+    else if QR.captchaIsEnabled
       # get oldest valid captcha
       captchas = $.get 'captchas', []
       # remove old captchas
@@ -3396,7 +3412,7 @@ Main =
 
     $.ready Options.init
 
-    if Conf['Quick Reply'] and Conf['Hide Original Post Form'] and g.BOARD isnt 'f'
+    if Conf['Quick Reply'] and Conf['Hide Original Post Form']
       Main.css += '#postForm { display: none; }'
 
     Main.addStyle()
@@ -3682,7 +3698,7 @@ h1 {
 #qr > .move > span {
   float: right;
 }
-#autohide, .close, #qr select, #dump, .remove, .captcha, #qr div.warning {
+#autohide, .close, #qr select, #dump, .remove, .captchaimg, #qr div.warning {
   cursor: pointer;
 }
 #qr select,
@@ -3839,7 +3855,7 @@ h1 {
   min-height: 120px;
   min-width: 100%;
 }
-#qr > form > div:nth-child(3) {
+.textarea {
   position: relative;
 }
 #charCount {
@@ -3852,16 +3868,16 @@ h1 {
 #charCount.warning {
   color: red;
 }
-.captcha + div > .field {
+.captchainput > .field {
   min-width: 100%;
 }
-.captcha {
+.captchaimg {
   background: #FFF;
   outline: 1px solid #CCC;
   outline-offset: -1px;
   text-align: center;
 }
-.captcha > img {
+.captchaimg > img {
   display: block;
   height: 57px;
   width: 300px;