Lazy-merge Mayhem's captcha fixes

now back to skyrim.

LICENSE

@@ -1,5 +1,5 @@
 /*
-* appchan x - Version 2.8.8 - 2014-01-30
+* appchan x - Version 2.8.8 - 2014-02-09
 *
 * Licensed under the MIT license.
 * https://github.com/zixaphir/appchan-x/blob/master/LICENSE

builds/appchan-x.user.js

@@ -23,7 +23,7 @@
 // ==/UserScript==
 
 /*
-* appchan x - Version 2.8.8 - 2014-01-30
+* appchan x - Version 2.8.8 - 2014-02-09
 *
 * Licensed under the MIT license.
 * https://github.com/zixaphir/appchan-x/blob/master/LICENSE
@@ -8327,15 +8327,10 @@
       return QR.status();
     },
     focusin: function() {
-      return $.addClass(QR.nodes.el, 'has-focus');
+      return $.addClass(QR.nodes.el, 'focus');
     },
     focusout: function() {
-      return $.queueTask(function() {
+      return $.rmClass(QR.nodes.el, 'focus');
-        if ($.x('ancestor::div[@id="qr"]', d.activeElement)) {
-          return;
-        }
-        return $.rmClass(QR.nodes.el, 'has-focus');
-      });
     },
     hide: function() {
       d.activeElement.blur();
@@ -8665,8 +8660,6 @@
         $.on(elm, 'blur', QR.focusout);
         $.on(elm, 'focus', QR.focusin);
       }
-      $.on(dialog, 'focusin', QR.focusin);
-      $.on(dialog, 'focusout', QR.focusout);
       $.on(nodes.autohide, 'change', QR.toggleHide);
       $.on(nodes.close, 'click', QR.close);
       $.on(nodes.dumpButton, 'click', function() {
@@ -9035,64 +9028,74 @@
 
   QR.captcha = {
     init: function() {
+      var container, imgContainer, input;
       if (d.cookie.indexOf('pass_enabled=1') >= 0) {
         return;
       }
-      if (!(this.isEnabled = !!$.id('captchaFormPart'))) {
+      container = $.id('captchaContainer');
+      if (!(this.isEnabled = !!container)) {
         return;
       }
-      return $.asap((function() {
-        return $.id('recaptcha_challenge_field_holder');
-      }), this.ready.bind(this));
-    },
-    ready: function() {
-      var imgContainer, input, setLifetime,
-        _this = this;
-      setLifetime = function(e) {
-        return _this.lifetime = e.detail;
-      };
-      $.on(window, 'captcha:timeout', setLifetime);
-      $.globalEval('window.dispatchEvent(new CustomEvent("captcha:timeout", {detail: RecaptchaState.timeout}))');
-      $.off(window, 'captcha:timeout', setLifetime);
       imgContainer = $.el('div', {
         className: 'captcha-img',
         title: 'Reload reCAPTCHA',
-        innerHTML: '<div><img></div>'
+        innerHTML: '<img>',
+        hidden: true
       });
       input = $.el('input', {
         className: 'captcha-input field',
         title: 'Verification',
+        placeholder: 'Focus to load reCAPTCHA',
         autocomplete: 'off',
-        spellcheck: false,
+        spellcheck: false
-        tabIndex: 45
       });
       this.nodes = {
-        challenge: $.id('recaptcha_challenge_field_holder'),
+        img: imgContainer.firstChild,
-        img: $('img', imgContainer),
         input: input
       };
-      new MutationObserver(this.load.bind(this)).observe(this.nodes.challenge, {
+      $.on(input, 'focus', this.setup);
-        childList: true
-      });
-      $.on(imgContainer, 'click', this.reload.bind(this));
-      $.on(input, 'keydown', this.keydown.bind(this));
-      $.on(input, 'focus', function() {
-        return $.addClass(QR.nodes.el, 'focus');
-      });
-      $.on(input, 'blur', function() {
-        return $.rmClass(QR.nodes.el, 'focus');
-      });
-      $.get('captchas', [], function(_arg) {
-        var captchas;
-        captchas = _arg.captchas;
-        return _this.sync(captchas);
-      });
-      $.sync('captchas', this.sync);
-      this.reload();
       $.on(input, 'blur', QR.focusout);
       $.on(input, 'focus', QR.focusin);
       $.addClass(QR.nodes.el, 'has-captcha');
-      return $.after(QR.nodes.com.parentElement, [imgContainer, input]);
+      $.after(QR.nodes.com.parentNode, [imgContainer, input]);
+      this.setupObserver = new MutationObserver(this.afterSetup);
+      this.setupObserver.observe(container, {
+        childList: true
+      });
+      return this.afterSetup();
+    },
+    setup: function() {
+      return $.globalEval('loadRecaptcha()');
+    },
+    afterSetup: function() {
+      var challenge, img, input, setLifetime, _ref;
+      if (!(challenge = $.id('recaptcha_challenge_field_holder'))) {
+        return;
+      }
+      QR.captcha.setupObserver.disconnect();
+      delete QR.captcha.setupObserver;
+      setLifetime = function(e) {
+        return QR.captcha.lifetime = e.detail;
+      };
+      $.on(window, 'captcha:timeout', setLifetime);
+      $.globalEval('window.dispatchEvent(new CustomEvent("captcha:timeout", {detail: RecaptchaState.timeout}))');
+      $.off(window, 'captcha:timeout', setLifetime);
+      _ref = QR.captcha.nodes, img = _ref.img, input = _ref.input;
+      img.parentNode.hidden = false;
+      $.off(input, 'focus', QR.captcha.setup);
+      $.on(input, 'keydown', QR.captcha.keydown.bind(QR.captcha));
+      $.on(img.parentNode, 'click', QR.captcha.reload.bind(QR.captcha));
+      $.get('captchas', [], function(_arg) {
+        var captchas;
+        captchas = _arg.captchas;
+        return QR.captcha.sync(captchas);
+      });
+      $.sync('captchas', QR.captcha.sync);
+      QR.captcha.nodes.challenge = challenge;
+      new MutationObserver(QR.captcha.load.bind(QR.captcha)).observe(challenge, {
+        childList: true
+      });
+      return QR.captcha.load();
     },
     sync: function(captchas) {
       QR.captcha.captchas = captchas;

builds/crx/script.js

@@ -1,6 +1,6 @@
 // Generated by CoffeeScript
 /*
-* appchan x - Version 2.8.8 - 2014-01-30
+* appchan x - Version 2.8.8 - 2014-02-09
 *
 * Licensed under the MIT license.
 * https://github.com/zixaphir/appchan-x/blob/master/LICENSE
@@ -8363,10 +8363,10 @@
       return QR.status();
     },
     focusin: function() {
-      return $.addClass(QR.nodes.el, 'has-focus');
+      return $.addClass(QR.nodes.el, 'focus');
     },
     focusout: function() {
-      return $.rmClass(QR.nodes.el, 'has-focus');
+      return $.rmClass(QR.nodes.el, 'focus');
     },
     hide: function() {
       d.activeElement.blur();
@@ -8635,7 +8635,7 @@
       }
     },
     dialog: function() {
-      var check, dialog, event, i, items, key, mimeTypes, name, node, nodes, save, value, _ref;
+      var check, dialog, elm, event, i, items, key, mimeTypes, name, node, nodes, save, value, _ref;
       QR.nodes = nodes = {
         el: dialog = UI.dialog('qr', 'top:0;right:0;', "<div id=qrtab class=move><input type=checkbox id=autohide title=Auto-hide><div id=qr-thread-select><select data-name=thread title='Create a new thread / Reply'><option value=new>New thread</option></select></div><a href=javascript:; class='close fa' title=Close>\uf00d</a></div><form><div class=persona><input name=name  data-name=name  list=\"list-name\" placeholder=Name    class=field size=1 tabindex=10><input name=email data-name=email list=\"list-email\" placeholder=E-mail  class=field size=1 tabindex=20><input name=sub   data-name=sub   list=\"list-sub\" placeholder=Subject class=field size=1 tabindex=30> </div><div class=textarea><textarea data-name=com placeholder=Comment class=field tabindex=40></textarea><span id=char-count></span></div><div id=dump-list-container><div id=dump-list></div><a id=add-post href=javascript:; title=\"Add a post\" tabindex=50>+</a></div><div id=file-n-submit><span id=qr-filename-container class=field tabindex=60><span id=qr-no-file>No selected file</span><input id=\"qr-filename\" data-name=\"filename\" spellcheck=\"false\"><span id=qr-extras-container><label id=qr-spoiler-label><input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=70></label><span class=description>Spoiler</span><a id=dump-button title='Dump list'>+</a><span class=description>Dump</span><a id=qr-filerm href=javascript:; title='Remove file' class=fa>\uf00d</a><span class=description>Remove File</span></span></span><input type=submit tabindex=80></div><input type=file multiple></form><datalist id=\"list-name\"></datalist><datalist id=\"list-email\"></datalist><datalist id=\"list-sub\"></datalist>")
       };
@@ -8699,8 +8699,12 @@
       }
       QR.flagsInput();
       $.on(nodes.filename.parentNode, 'click keydown', QR.openFileInput);
-      $.on(dialog, 'focusin', QR.focusin);
+      items = $$('*', QR.nodes.el);
-      $.on(dialog, 'focusout', QR.focusout);
+      i = 0;
+      while (elm = items[i++]) {
+        $.on(elm, 'blur', QR.focusout);
+        $.on(elm, 'focus', QR.focusin);
+      }
       $.on(nodes.autohide, 'change', QR.toggleHide);
       $.on(nodes.close, 'click', QR.close);
       $.on(nodes.dumpButton, 'click', function() {
@@ -9058,62 +9062,74 @@
 
   QR.captcha = {
     init: function() {
+      var container, imgContainer, input;
       if (d.cookie.indexOf('pass_enabled=1') >= 0) {
         return;
       }
-      if (!(this.isEnabled = !!$.id('captchaFormPart'))) {
+      container = $.id('captchaContainer');
+      if (!(this.isEnabled = !!container)) {
         return;
       }
-      return $.asap((function() {
-        return $.id('recaptcha_challenge_field_holder');
-      }), this.ready.bind(this));
-    },
-    ready: function() {
-      var imgContainer, input, setLifetime,
-        _this = this;
-      setLifetime = function(e) {
-        return _this.lifetime = e.detail;
-      };
-      $.on(window, 'captcha:timeout', setLifetime);
-      $.globalEval('window.dispatchEvent(new CustomEvent("captcha:timeout", {detail: RecaptchaState.timeout}))');
-      $.off(window, 'captcha:timeout', setLifetime);
       imgContainer = $.el('div', {
         className: 'captcha-img',
         title: 'Reload reCAPTCHA',
-        innerHTML: '<div><img></div>'
+        innerHTML: '<img>',
+        hidden: true
       });
       input = $.el('input', {
         className: 'captcha-input field',
         title: 'Verification',
+        placeholder: 'Focus to load reCAPTCHA',
         autocomplete: 'off',
-        spellcheck: false,
+        spellcheck: false
-        tabIndex: 45
       });
       this.nodes = {
-        challenge: $.id('recaptcha_challenge_field_holder'),
+        img: imgContainer.firstChild,
-        img: $('img', imgContainer),
         input: input
       };
-      new MutationObserver(this.load.bind(this)).observe(this.nodes.challenge, {
+      $.on(input, 'focus', this.setup);
+      $.on(input, 'blur', QR.focusout);
+      $.on(input, 'focus', QR.focusin);
+      $.addClass(QR.nodes.el, 'has-captcha');
+      $.after(QR.nodes.com.parentNode, [imgContainer, input]);
+      this.setupObserver = new MutationObserver(this.afterSetup);
+      this.setupObserver.observe(container, {
         childList: true
       });
-      $.on(imgContainer, 'click', this.reload.bind(this));
+      return this.afterSetup();
-      $.on(input, 'keydown', this.keydown.bind(this));
+    },
-      $.on(input, 'focus', function() {
+    setup: function() {
-        return $.addClass(QR.nodes.el, 'focus');
+      return $.globalEval('loadRecaptcha()');
-      });
+    },
-      $.on(input, 'blur', function() {
+    afterSetup: function() {
-        return $.rmClass(QR.nodes.el, 'focus');
+      var challenge, img, input, setLifetime, _ref;
-      });
+      if (!(challenge = $.id('recaptcha_challenge_field_holder'))) {
+        return;
+      }
+      QR.captcha.setupObserver.disconnect();
+      delete QR.captcha.setupObserver;
+      setLifetime = function(e) {
+        return QR.captcha.lifetime = e.detail;
+      };
+      $.on(window, 'captcha:timeout', setLifetime);
+      $.globalEval('window.dispatchEvent(new CustomEvent("captcha:timeout", {detail: RecaptchaState.timeout}))');
+      $.off(window, 'captcha:timeout', setLifetime);
+      _ref = QR.captcha.nodes, img = _ref.img, input = _ref.input;
+      img.parentNode.hidden = false;
+      $.off(input, 'focus', QR.captcha.setup);
+      $.on(input, 'keydown', QR.captcha.keydown.bind(QR.captcha));
+      $.on(img.parentNode, 'click', QR.captcha.reload.bind(QR.captcha));
       $.get('captchas', [], function(_arg) {
         var captchas;
         captchas = _arg.captchas;
-        return _this.sync(captchas);
+        return QR.captcha.sync(captchas);
       });
-      $.sync('captchas', this.sync);
+      $.sync('captchas', QR.captcha.sync);
-      this.reload();
+      QR.captcha.nodes.challenge = challenge;
-      $.addClass(QR.nodes.el, 'has-captcha');
+      new MutationObserver(QR.captcha.load.bind(QR.captcha)).observe(challenge, {
-      return $.after(QR.nodes.com.parentElement, [imgContainer, input]);
+        childList: true
+      });
+      return QR.captcha.load();
     },
     sync: function(captchas) {
       QR.captcha.captchas = captchas;

src/Posting/QR.captcha.coffee

@@ -1,53 +1,63 @@
 QR.captcha =
   init: ->
     return if d.cookie.indexOf('pass_enabled=1') >= 0
-    return unless @isEnabled = !!$.id 'captchaFormPart'
+    container = $.id 'captchaContainer'
-    $.asap (-> $.id 'recaptcha_challenge_field_holder'), @ready.bind @
+    return unless @isEnabled = !!container
-
-  ready: ->
-    setLifetime = (e) => @lifetime = e.detail
-    $.on  window, 'captcha:timeout', setLifetime
-    $.globalEval 'window.dispatchEvent(new CustomEvent("captcha:timeout", {detail: RecaptchaState.timeout}))'
-    $.off window, 'captcha:timeout', setLifetime
 
     imgContainer = $.el 'div',
       className: 'captcha-img'
       title: 'Reload reCAPTCHA'
-      innerHTML: '<div><img></div>'
+      innerHTML: '<img>'
+      hidden: true
     input = $.el 'input',
-      className:    'captcha-input field'
+      className: 'captcha-input field'
-      title:        'Verification'
+      title: 'Verification'
+      placeholder: 'Focus to load reCAPTCHA'
       autocomplete: 'off'
-      spellcheck:   false
+      spellcheck: false
-      tabIndex:     45
     @nodes =
-      challenge: $.id 'recaptcha_challenge_field_holder'
+      img:   imgContainer.firstChild
-      img:       $ 'img', imgContainer
+      input: input
-      input:     input
 
-    new MutationObserver(@load.bind @).observe @nodes.challenge,
+    $.on input, 'focus', @setup
-      childList: true
 
-    $.on imgContainer, 'click',   @reload.bind @
-    $.on input,        'keydown', @keydown.bind @
-    $.on input,        'focus',   -> $.addClass QR.nodes.el, 'focus'
-    $.on input,        'blur',    -> $.rmClass  QR.nodes.el, 'focus'
-
-    $.get 'captchas', [], ({captchas}) =>
-      @sync captchas
-
-    $.sync 'captchas', @sync
-    # start with an uncached captcha
-    @reload()
-
-    <% if (type === 'userscript') { %>
-    # XXX Firefox lacks focusin/focusout support.
     $.on input, 'blur',  QR.focusout
     $.on input, 'focus', QR.focusin
-    <% } %>
 
     $.addClass QR.nodes.el, 'has-captcha'
-    $.after QR.nodes.com.parentElement, [imgContainer, input]
+    $.after QR.nodes.com.parentNode, [imgContainer, input]
+
+    @setupObserver = new MutationObserver @afterSetup
+    @setupObserver.observe container, childList: true
+    @afterSetup() # reCAPTCHA might have loaded before the QR.
+
+  setup: ->
+    $.globalEval 'loadRecaptcha()'
+
+  afterSetup: ->
+    return unless challenge = $.id 'recaptcha_challenge_field_holder'
+    QR.captcha.setupObserver.disconnect()
+    delete QR.captcha.setupObserver
+
+    setLifetime = (e) -> QR.captcha.lifetime = e.detail
+    $.on  window, 'captcha:timeout', setLifetime
+    $.globalEval 'window.dispatchEvent(new CustomEvent("captcha:timeout", {detail: RecaptchaState.timeout}))'
+    $.off window, 'captcha:timeout', setLifetime
+
+    {img, input} = QR.captcha.nodes
+    img.parentNode.hidden = false
+    $.off input,         'focus',  QR.captcha.setup
+    $.on input,          'keydown', QR.captcha.keydown.bind QR.captcha
+    $.on img.parentNode, 'click',   QR.captcha.reload.bind  QR.captcha
+
+    $.get 'captchas', [], ({captchas}) ->
+      QR.captcha.sync captchas
+    $.sync 'captchas', QR.captcha.sync
+
+    QR.captcha.nodes.challenge = challenge
+    new MutationObserver(QR.captcha.load.bind QR.captcha).observe challenge,
+      childList: true
+    QR.captcha.load()
 
   sync: (captchas) ->
     QR.captcha.captchas = captchas

src/Posting/QR.coffee

@@ -113,16 +113,11 @@ QR =
     QR.status()
 
   focusin: ->
-    $.addClass QR.nodes.el, 'has-focus'
+    $.addClass QR.nodes.el, 'focus'
 
   focusout: ->
-    <% if (type === 'crx') { %>
+    $.rmClass QR.nodes.el, 'focus'
-    $.rmClass QR.nodes.el, 'has-focus'
+
-    <% } else { %>
-    $.queueTask ->
-      return if $.x 'ancestor::div[@id="qr"]', d.activeElement
-      $.rmClass QR.nodes.el, 'has-focus'
-    <% } %>
   hide: ->
     d.activeElement.blur()
     $.addClass QR.nodes.el, 'autohide'
@@ -415,17 +410,11 @@ QR =
 
     $.on nodes.filename.parentNode, 'click keydown', QR.openFileInput
 
-    <% if (type === 'userscript') { %>
-    # XXX Firefox lacks focusin/focusout support.
     items = $$ '*', QR.nodes.el
     i = 0
     while elm = items[i++]
       $.on elm, 'blur',  QR.focusout
       $.on elm, 'focus', QR.focusin
-    <% } %>
-
-    $.on dialog, 'focusin',  QR.focusin
-    $.on dialog, 'focusout', QR.focusout
 
     $.on nodes.autohide,   'change', QR.toggleHide
     $.on nodes.close,      'click',  QR.close