Revert "Keep the same orders in keybinds switch, change the next/prev replies to reply navigation."

This reverts commit 1c9a0a641291cacdc7d4f0084a611d606a861ffb.

4chan_x.user.js

@@ -136,7 +136,7 @@
       expandThread: 'e',
       watch: 'w',
       hide: 'x',
-      expandImage: 'm',
+      expandImages: 'm',
       expandAllImages: 'M',
       update: 'u'
     },
@@ -739,7 +739,7 @@
       keybinds.expandThread = $.getValue('key/expandThread', config.hotkeys.expandThread);
       keybinds.watch = $.getValue('key/watch', config.hotkeys.watch);
       keybinds.hide = $.getValue('key/hide', config.hotkeys.hide);
-      keybinds.expandImage = $.getValue('key/expandImage', config.hotkeys.expandImage);
+      keybinds.expandImages = $.getValue('key/expandImages', config.hotkeys.expandImages);
       keybinds.expandAllImages = $.getValue('key/expandAllImages', config.hotkeys.expandAllImages);
       keybinds.update = $.getValue('key/update', config.hotkeys.update);
       return $.bind(d, 'keydown', keybinds.cb.keydown);
@@ -781,31 +781,51 @@
             range = valStart.length + valMid.length;
             ta.setSelectionRange(range, range);
             break;
-          case keybinds.openQR:
+          case keybinds.zero:
-            keybinds.qr(thread, true);
+            window.location = "/" + g.BOARD + "/0#0";
             break;
           case keybinds.openEmptyQR:
             keybinds.qr(thread);
             break;
-          case keybinds.submit:
-            if (qr = $('#qr_form')) {
-              qr.submit();
-            } else {
-              $('.postarea form').submit();
-            }
-            break;
           case keybinds.nextReply:
             keybinds.hl.next(thread);
             break;
           case keybinds.previousReply:
             keybinds.hl.prev(thread);
             break;
+          case keybinds.expandAllImages:
+            keybinds.img(thread, true);
+            break;
+          case keybinds.openThread:
+            keybinds.open(thread);
+            break;
+          case keybinds.expandThread:
+            expandThread.toggle(thread);
+            break;
+          case keybinds.openQR:
+            keybinds.qr(thread, true);
+            break;
+          case keybinds.expandImages:
+            keybinds.img(thread);
+            break;
           case keybinds.nextThread:
             nav.next();
             break;
+          case keybinds.openThreadTab:
+            keybinds.open(thread, true);
+            break;
           case keybinds.previousThread:
             nav.prev();
             break;
+          case keybinds.update:
+            updater.update();
+            break;
+          case keybinds.watch:
+            watcher.toggle(thread);
+            break;
+          case keybinds.hide:
+            threadHiding.toggle(thread);
+            break;
           case keybinds.nextPage:
             if ((_ref2 = $('input[value=Next]')) != null) {
               _ref2.click();
@@ -816,32 +836,12 @@
               _ref3.click();
             }
             break;
-          case keybinds.zero:
+          case keybinds.submit:
-            window.location = "/" + g.BOARD + "/0#0";
+            if (qr = $('#qr_form')) {
-            break;
+              qr.submit();
-          case keybinds.openThreadTab:
+            } else {
-            keybinds.open(thread, true);
+              $('.postarea form').submit();
-            break;
+            }
-          case keybinds.openThread:
-            keybinds.open(thread);
-            break;
-          case keybinds.expandThread:
-            expandThread.toggle(thread);
-            break;
-          case keybinds.watch:
-            watcher.toggle(thread);
-            break;
-          case keybinds.hide:
-            threadHiding.toggle(thread);
-            break;
-          case keybinds.expandImage:
-            keybinds.img(thread);
-            break;
-          case keybinds.expandAllImages:
-            keybinds.img(thread, true);
-            break;
-          case keybinds.update:
-            updater.update();
             break;
           default:
             return;
@@ -878,8 +878,8 @@
     },
     qr: function(thread, quote) {
       var qrLink;
-      if (!(qrLink = $('.replyhl .quotejs + a', thread))) {
+      if (!(qrLink = $('td.replyhl span[id] a:not(:first-child)', thread))) {
-        qrLink = $('.op .quotejs + a', thread);
+        qrLink = $("span[id^=nothread] a:not(:first-child)", thread);
       }
       if (quote) {
         return qr.quote(qrLink);
@@ -902,32 +902,53 @@
     },
     hl: {
       next: function(thread) {
-        var next, td;
+        var next, rect, replies, reply, td, top, _i, _len;
         if (td = $('td.replyhl', thread)) {
-          if (next = $.x('following::td[@class="reply"]', td)) {
           td.className = 'reply';
+          rect = td.getBoundingClientRect();
+          if (rect.top > 0 && rect.bottom < d.body.clientHeight) {
+            next = $.x('following::td[@class="reply"]', td);
+            rect = next.getBoundingClientRect();
+            if (rect.top > 0 && rect.bottom < d.body.clientHeight) {
               next.className = 'replyhl';
-            return location.hash = "#" + next.id;
             }
-        } else {
+            return;
-          td = $('td.reply', thread);
+          }
-          td.className = 'replyhl';
+        }
-          return window.location.hash = "#" + td.id;
+        replies = $$('td.reply', thread);
+        for (_i = 0, _len = replies.length; _i < _len; _i++) {
+          reply = replies[_i];
+          top = reply.getBoundingClientRect().top;
+          if (top > 0) {
+            reply.className = 'replyhl';
+            return;
+          }
         }
       },
       prev: function(thread) {
-        var prev, replies, td;
+        var bot, height, prev, rect, replies, reply, td, _i, _len;
         if (td = $('td.replyhl', thread)) {
-          if (prev = $.x('preceding::td[@class="reply"]', td)) {
           td.className = 'reply';
+          rect = td.getBoundingClientRect();
+          if (rect.top > 0 && rect.bottom < d.body.clientHeight) {
+            prev = $.x('preceding::td[@class="reply"][1]', td);
+            rect = prev.getBoundingClientRect();
+            if (rect.top > 0 && rect.bottom < d.body.clientHeight) {
               prev.className = 'replyhl';
-            return location.hash = "#" + prev.id;
             }
-        } else {
+            return;
+          }
+        }
         replies = $$('td.reply', thread);
         replies.reverse();
-          replies[0].className = 'replyhl';
+        height = d.body.clientHeight;
-          return window.location.hash = "#" + replies[0].id;
+        for (_i = 0, _len = replies.length; _i < _len; _i++) {
+          reply = replies[_i];
+          bot = reply.getBoundingClientRect().bottom;
+          if (bot < height) {
+            reply.className = 'replyhl';
+            return;
+          }
         }
       }
     }
@@ -1028,7 +1049,7 @@
       var arr, checked, description, dialog, hiddenNum, hiddenThreads, html, input, key, li, link, main, obj, overlay, ul, _i, _j, _k, _len, _len2, _len3, _ref, _ref2, _ref3, _ref4;
       hiddenThreads = $.getValue("hiddenThreads/" + g.BOARD + "/", {});
       hiddenNum = Object.keys(g.hiddenReplies).length + Object.keys(hiddenThreads).length;
-      html = "      <div class='reply dialog'>        <div id=optionsbar>          <div id=floaty>            <a name=main>main</a> | <a name=flavors>sauce</a> | <a name=time>time</a> | <a name=keybinds>keybinds</a>          </div>          <div id=credits>            <a href=http://chat.now.im/x/aeos>support throd</a> |            <a href=https://github.com/aeosynth/4chan-x/issues>github</a> |            <a href=http://userscripts.org/scripts/show/51412>uso</a> |            <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted>donate</a>          </div>        </div>        <hr>        <div id=content>          <div id=main>          </div>          <textarea style='display: none;' name=flavors id=flavors>" + ($.config('flavors')) + "</textarea>          <div style='display: none;' id=time>            <div><input type=text name=time value='" + ($.config('time')) + "'> <span id=timePreview></span></div>            <table>              <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>              <tbody>                <tr><th>Specifier</th><th>Description</th><th>Values/Example</th></tr>                <tr><td>%a</td><td>weekday, abbreviated</td><td>Sat</td></tr>                <tr><td>%A</td><td>weekday, full</td><td>Saturday</td></tr>                <tr><td>%b</td><td>month, abbreviated</td><td>Jun</td></tr>                <tr><td>%B</td><td>month, full length</td><td>June</td></tr>                <tr><td>%d</td><td>day of the month, zero padded</td><td>03</td></tr>                <tr><td>%H</td><td>hour (24 hour clock) zero padded</td><td>13</td></tr>                <tr><td>%I (uppercase i)</td><td>hour (12 hour clock) zero padded</td><td>02</td></tr>                <tr><td>%m</td><td>month, zero padded</td><td>06</td></tr>                <tr><td>%M</td><td>minutes, zero padded</td><td>54</td></tr>                <tr><td>%p</td><td>upper case AM or PM</td><td>PM</td></tr>                <tr><td>%P</td><td>lower case am or pm</td><td>pm</td></tr>                <tr><td>%y</td><td>two digit year</td><td>00-99</td></tr>              </tbody>            </table>          </div>          <div style='display: none;' id=keybinds>            <table>              <tbody>                <tr><th>Actions</th><th>Keybinds</th></tr>                <tr><td>Close Options or QR</td><td><input type=text name=close></td></tr>                <tr><td>Quick spoiler</td><td><input type=text name=spoiler></td></tr>                <tr><td>Open QR with post number inserted</td><td><input type=text name=openQR></td></tr>                <tr><td>Open QR without post number inserted</td><td><input type=text name=openEmptyQR></td></tr>                <tr><td>Submit post</td><td><input type=text name=submit></td></tr>                <tr><td>Select next reply</td><td><input type=text name=nextReply ></td></tr>                <tr><td>Select previous reply</td><td><input type=text name=previousReply></td></tr>                <tr><td>See next thread</td><td><input type=text name=nextThread></td></tr>                <tr><td>See previous thread</td><td><input type=text name=previousThread></td></tr>                <tr><td>Jump to the next page</td><td><input type=text name=nextPage></td></tr>                <tr><td>Jump to the previous page</td><td><input type=text name=previousPage></td></tr>                <tr><td>Jump to page 0</td><td><input type=text name=zero></td></tr>                <tr><td>Open thread in current tab</td><td><input type=text name=openThread></td></tr>                <tr><td>Open thread in new tab</td><td><input type=text name=openThreadTab></td></tr>                <tr><td>Expand thread</td><td><input type=text name=expandThread></td></tr>                <tr><td>Watch thread</td><td><input type=text name=watch></td></tr>                <tr><td>Hide thread</td><td><input type=text name=hide></td></tr>                <tr><td>Expand selected image</td><td><input type=text name=expandImage></td></tr>                <tr><td>Expand all images</td><td><input type=text name=expandAllImages></td></tr>                <tr><td>Update now</td><td><input type=text name=update></td></tr>              </tbody>            </table>          </div>        </div>      </div>    ";
+      html = "      <div class='reply dialog'>        <div id=optionsbar>          <div id=floaty>            <a name=main>main</a> | <a name=flavors>sauce</a> | <a name=time>time</a> | <a name=keybinds>keybinds</a>          </div>          <div id=credits>            <a href=http://chat.now.im/x/aeos>support throd</a> |            <a href=https://github.com/aeosynth/4chan-x/issues>github</a> |            <a href=http://userscripts.org/scripts/show/51412>uso</a> |            <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted>donate</a>          </div>        </div>        <hr>        <div id=content>          <div id=main>          </div>          <textarea style='display: none;' name=flavors id=flavors>" + ($.config('flavors')) + "</textarea>          <div style='display: none;' id=time>            <div><input type=text name=time value='" + ($.config('time')) + "'> <span id=timePreview></span></div>            <table>              <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>              <tbody>                <tr><th>Specifier</th><th>Description</th><th>Values/Example</th></tr>                <tr><td>%a</td><td>weekday, abbreviated</td><td>Sat</td></tr>                <tr><td>%A</td><td>weekday, full</td><td>Saturday</td></tr>                <tr><td>%b</td><td>month, abbreviated</td><td>Jun</td></tr>                <tr><td>%B</td><td>month, full length</td><td>June</td></tr>                <tr><td>%d</td><td>day of the month, zero padded</td><td>03</td></tr>                <tr><td>%H</td><td>hour (24 hour clock) zero padded</td><td>13</td></tr>                <tr><td>%I (uppercase i)</td><td>hour (12 hour clock) zero padded</td><td>02</td></tr>                <tr><td>%m</td><td>month, zero padded</td><td>06</td></tr>                <tr><td>%M</td><td>minutes, zero padded</td><td>54</td></tr>                <tr><td>%p</td><td>upper case AM or PM</td><td>PM</td></tr>                <tr><td>%P</td><td>lower case am or pm</td><td>pm</td></tr>                <tr><td>%y</td><td>two digit year</td><td>00-99</td></tr>              </tbody>            </table>          </div>          <div style='display: none;' id=keybinds>            <table>              <tbody>                <tr><th>Actions</th><th>Keybinds</th></tr>                <tr><td>Close Options or QR</td><td><input type=text name=close></td></tr>                <tr><td>Quick spoiler</td><td><input type=text name=spoiler></td></tr>                <tr><td>Open QR with post number inserted</td><td><input type=text name=openQR></td></tr>                <tr><td>Open QR without post number inserted</td><td><input type=text name=openEmptyQR></td></tr>                <tr><td>Submit post</td><td><input type=text name=submit></td></tr>                <tr><td>Select next reply</td><td><input type=text name=nextReply ></td></tr>                <tr><td>Select previous reply</td><td><input type=text name=previousReply></td></tr>                <tr><td>See next thread</td><td><input type=text name=nextThread></td></tr>                <tr><td>See previous thread</td><td><input type=text name=previousThread></td></tr>                <tr><td>Jump to the next page</td><td><input type=text name=nextPage></td></tr>                <tr><td>Jump to the previous page</td><td><input type=text name=previousPage></td></tr>                <tr><td>Jump to page 0</td><td><input type=text name=zero></td></tr>                <tr><td>Open thread in current tab</td><td><input type=text name=openThread></td></tr>                <tr><td>Open thread in new tab</td><td><input type=text name=openThreadTab></td></tr>                <tr><td>Expand thread</td><td><input type=text name=expandThread></td></tr>                <tr><td>Watch thread</td><td><input type=text name=watch></td></tr>                <tr><td>Hide thread</td><td><input type=text name=hide></td></tr>                <tr><td>Expand selected image</td><td><input type=text name=expandImages></td></tr>                <tr><td>Expand all images</td><td><input type=text name=expandAllImages></td></tr>                <tr><td>Update now</td><td><input type=text name=update></td></tr>              </tbody>            </table>          </div>        </div>      </div>    ";
       dialog = $.el('div', {
         id: 'options',
         innerHTML: html

script.coffee

@@ -72,7 +72,7 @@ config =
     expandThread:    'e'
     watch:           'w'
     hide:            'x'
-    expandImage:     'm'
+    expandImages:    'm'
     expandAllImages: 'M'
     update:          'u'
   updater:
@@ -532,7 +532,7 @@ keybinds =
     keybinds.expandThread    = $.getValue 'key/expandThread',    config.hotkeys.expandThread
     keybinds.watch           = $.getValue 'key/watch',           config.hotkeys.watch
     keybinds.hide            = $.getValue 'key/hide',            config.hotkeys.hide
-    keybinds.expandImage     = $.getValue 'key/expandImage',     config.hotkeys.expandImage
+    keybinds.expandImages    = $.getValue 'key/expandImages',    config.hotkeys.expandImages
     keybinds.expandAllImages = $.getValue 'key/expandAllImages', config.hotkeys.expandAllImages
     keybinds.update          = $.getValue 'key/update',          config.hotkeys.update
 
@@ -567,45 +567,45 @@ keybinds =
           ta.value = valStart + valMid + valEnd
           range = valStart.length + valMid.length
           ta.setSelectionRange range, range
-        when keybinds.openQR
+        when keybinds.zero
-          keybinds.qr thread, true
+          window.location = "/#{g.BOARD}/0#0"
         when keybinds.openEmptyQR
           keybinds.qr thread
+        when keybinds.nextReply
+          keybinds.hl.next thread
+        when keybinds.previousReply
+          keybinds.hl.prev thread
+        when keybinds.expandAllImages
+          keybinds.img thread, true
+        when keybinds.openThread
+          keybinds.open thread
+        when keybinds.expandThread
+          expandThread.toggle thread
+        when keybinds.openQR
+          keybinds.qr thread, true
+        when keybinds.expandImages
+          keybinds.img thread
+        when keybinds.nextThread
+          nav.next()
+        when keybinds.openThreadTab
+          keybinds.open thread, true
+        when keybinds.previousThread
+          nav.prev()
+        when keybinds.update
+          updater.update()
+        when keybinds.watch
+          watcher.toggle thread
+        when keybinds.hide
+          threadHiding.toggle thread
+        when keybinds.nextPage
+          $('input[value=Next]')?.click()
+        when keybinds.previousPage
+          $('input[value=Previous]')?.click()
         when keybinds.submit
           if qr = $('#qr_form')
             qr.submit()
           else
             $('.postarea form').submit()
-        when keybinds.nextReply
-          keybinds.hl.next thread
-        when keybinds.previousReply
-          keybinds.hl.prev thread
-        when keybinds.nextThread
-          nav.next()
-        when keybinds.previousThread
-          nav.prev()
-        when keybinds.nextPage
-          $('input[value=Next]')?.click()
-        when keybinds.previousPage
-          $('input[value=Previous]')?.click()
-        when keybinds.zero
-          window.location = "/#{g.BOARD}/0#0"
-        when keybinds.openThreadTab
-          keybinds.open thread, true
-        when keybinds.openThread
-          keybinds.open thread
-        when keybinds.expandThread
-          expandThread.toggle thread
-        when keybinds.watch
-          watcher.toggle thread
-        when keybinds.hide
-          threadHiding.toggle thread
-        when keybinds.expandImage
-          keybinds.img thread
-        when keybinds.expandAllImages
-          keybinds.img thread, true
-        when keybinds.update
-          updater.update()
         else
           return
       e.preventDefault()
@@ -633,8 +633,8 @@ keybinds =
       imgExpand.toggle thumb.parentNode
 
   qr: (thread, quote) ->
-    unless qrLink = $ '.replyhl .quotejs + a', thread
+    unless qrLink = $ 'td.replyhl span[id] a:not(:first-child)', thread
-      qrLink = $ '.op .quotejs + a', thread
+      qrLink = $ "span[id^=nothread] a:not(:first-child)", thread
 
     if quote
       qr.quote qrLink
@@ -654,26 +654,41 @@ keybinds =
   hl:
     next: (thread) ->
       if td = $ 'td.replyhl', thread
-        if next = $.x 'following::td[@class="reply"]', td
         td.className = 'reply'
+        rect = td.getBoundingClientRect()
+        if rect.top > 0 and rect.bottom < d.body.clientHeight #you're fully visible
+          next = $.x 'following::td[@class="reply"]', td
+          rect = next.getBoundingClientRect()
+          if rect.top > 0 and rect.bottom < d.body.clientHeight #and so is the next
             next.className = 'replyhl'
-          location.hash = "##{next.id}"
+          return
-      else
+
-        td = $ 'td.reply', thread
+      replies = $$ 'td.reply', thread
-        td.className = 'replyhl'
+      for reply in replies
-        window.location.hash = "##{td.id}"
+        top = reply.getBoundingClientRect().top
+        if top > 0
+          reply.className = 'replyhl'
+          return
 
     prev: (thread) ->
       if td = $ 'td.replyhl', thread
-        if prev = $.x 'preceding::td[@class="reply"]', td
         td.className = 'reply'
+        rect = td.getBoundingClientRect()
+        if rect.top > 0 and rect.bottom < d.body.clientHeight #you're fully visible
+          prev = $.x 'preceding::td[@class="reply"][1]', td
+          rect = prev.getBoundingClientRect()
+          if rect.top > 0 and rect.bottom < d.body.clientHeight #and so is the prev
             prev.className = 'replyhl'
-          location.hash = "##{prev.id}"
+          return
-      else
+
       replies = $$ 'td.reply', thread
       replies.reverse()
-        replies[0].className = 'replyhl'
+      height = d.body.clientHeight
-        window.location.hash = "##{replies[0].id}"
+      for reply in replies
+        bot = reply.getBoundingClientRect().bottom
+        if bot < height
+          reply.className = 'replyhl'
+          return
 
 nav =
   # ◀ ▶
@@ -821,7 +836,7 @@ options =
                 <tr><td>Expand thread</td><td><input type=text name=expandThread></td></tr>
                 <tr><td>Watch thread</td><td><input type=text name=watch></td></tr>
                 <tr><td>Hide thread</td><td><input type=text name=hide></td></tr>
-                <tr><td>Expand selected image</td><td><input type=text name=expandImage></td></tr>
+                <tr><td>Expand selected image</td><td><input type=text name=expandImages></td></tr>
                 <tr><td>Expand all images</td><td><input type=text name=expandAllImages></td></tr>
                 <tr><td>Update now</td><td><input type=text name=update></td></tr>
               </tbody>