☰

AO3: Use Arrow-Keys to Navigate

use the left/right arrow keys to jump between pages

  1. // ==UserScript==
  2. // @name         AO3: Use Arrow-Keys to Navigate
  3. // @namespace    https://greasyfork.org/en/users/906106-escctrl
  4. // @version      2.0
  5. // @description  use the left/right arrow keys to jump between pages
  6. // @author       escctrl
  7. // @match        https://*.archiveofourown.org/*
  8. // @grant        none
  9. // @require      https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function($) {
  14.     'use strict';
  15.  
  16.     // this uses the first of whichever is encountered:
  17.     // (A) the "jump to page" links at the top of lists, like on works/bookmarks listings, tag search results, etc
  18.     // (B) then the chapters in a work
  19.     // (C) and finally the works in a series
  20.     // meaning that if you're on chapter 1 of work #3 in a series, pressing the left-arrow key will take you to work #2 in the series
  21.     // if a work is in multiple series, it's not quite reliable because it will use the first one that shows up in the metadata
  22.     let page_prev = $('.pagination .previous a, .work.navigation .chapter.previous a, .work.meta .series a.previous');
  23.     let page_next = $('.pagination .next a, .work.navigation .chapter.next a, .work.meta .series a.next');
  24.  
  25.     // if this is a bin and we're on a page without tags
  26.     if ($('#main').hasClass('tags-wrangle') && $('#wrangulator').length == 0) {
  27.         let search = new URLSearchParams(window.location.search);
  28.         let page = parseInt(search.get('page')) || 0;
  29.  
  30.         // if we're not on the first page, create a button to jump to the previous page
  31.         if (page > 1) {
  32.             search.set('page', page-1);
  33.             $('.notes')
  34.                 .text($('.notes').text().replace(/(.*tags) (in.*)/i, "$1 on page "+page+" $2"))
  35.                 .after(`<p><a href="${window.location.pathname}?${search.toString()}" class="action">Go to Page ${page-1}</a></p>`);
  36.             page_prev = $('.notes ~ p a');
  37.         }
  38.     }
  39.  
  40.     $(document).keydown(function(event){
  41.         var key = event.which;
  42.         // don't do anything if we're holding down ctrl/shift/alt as well, as we might be highlighting text
  43.         if (event.ctrlKey || event.shiftKey || event.altKey) return;
  44.         // don't do anything if we're inside a textarea or textfield where the cursor might need to move left/right
  45.         if (event.target.nodeName.toUpperCase() == "TEXTAREA" || event.target.nodeName.toUpperCase() == "INPUT") return;
  46.         switch(key) {
  47.             case 37: // key left
  48.                 if (page_prev.length > 0) window.location.assign(page_prev[0].href);
  49.                 break;
  50.             case 39: // key right
  51.                 if (page_next.length > 0) window.location.assign(page_next[0].href);
  52.                 break;
  53.             default:
  54.                 break;
  55.         }
  56.     });
  57.  
  58. })(jQuery);