improved_gist_pager

You can move on page by pressing the left and right key.

คุณจะต้องติดตั้งส่วนขยาย เช่น Tampermonkey, Greasemonkey หรือ Violentmonkey เพื่อติดตั้งสคริปต์นี้

You will need to install an extension such as Tampermonkey to install this script.

คุณจะต้องติดตั้งส่วนขยาย เช่น Tampermonkey หรือ Violentmonkey เพื่อติดตั้งสคริปต์นี้

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         improved_gist_pager
// @name:ja      gistページネーション
// @namespace    https://greasyfork.org/ja/users/570127
// @version      0.2.6
// @description  You can move on page by pressing the left and right key.
// @description:ja ページャーをつけ、十字キーの左右で1ページ移動できます。
// @author       universato
// @license      MIT
// @match        https://gist.github.com/*
// @supportURL   https://twitter.com/universato
// ==/UserScript==

addPager();

const observer = new MutationObserver(() => {
    const pager = document.querySelector('.pagination');
    if (!pager) { return; }

    if (!document.getElementById('pager_first')) {
        addPager();
    }
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

function addPager(){

  const maxPagerElementCount = 9; // Odd number

  const displayCount = 10; // the max number of gists per page
  const pager = document.querySelector('.pagination');
  const firstPath = location.pathname.split('/')[1];
  const secondPath = "/" + (location.pathname.split('/')[2] || '');
  const counters = document.getElementsByClassName('Counter');

  if(!pager){ return false; }

  let gistsCount = -1;
  if(['discover', 'forked', 'starred'].includes(firstPath)){
      gistsCount = displayCount * 100; // 1000 gists = 10 gists/page * 100 page
  }else if(secondPath === '/forked'){
      gistsCount = counters[1].innerText;
  }else if(secondPath === '/starred'){
      gistsCount = counters[2].innerText;
  }else{
      gistsCount = counters[0].innerText;
  }

  const pageCount = Math.ceil(gistsCount / displayCount);
  const pagerElementCount = Math.min(pageCount, maxPagerElementCount);

  const params = new URLSearchParams(location.search);
  const currentPageNumber = Number(params.get('page') || 1);

  let firstHTML = '';
  if(currentPageNumber <= 1){
      firstHTML = '<span id="pager_first" class="disabled">First</span>';
  }else{
      const firstParams = new URLSearchParams(location.search);
      firstParams.delete('page'); // ★ 常に1ページ目へ
      const query = firstParams.toString();
      firstHTML = `<a id="pager_first" href="${location.pathname}${query ? '?' + query : ''}">First</a>`;
  }

  let lastHTML = '';
  if(currentPageNumber === pageCount || pageCount <= 1){
      lastHTML = '<span id="pager_last" class="disabled">Last</span>';
  }else{
      params.set('page', pageCount);
      lastHTML = `<a id="pager_last" href="${location.pathname}?${params}">Last</a>`;
  }

  pager.innerHTML = firstHTML + pager.innerHTML + lastHTML;

  const startNumber = Math.max(1,
                                Math.min(pageCount - maxPagerElementCount + 1,
                                        currentPageNumber - Math.ceil((maxPagerElementCount - 1) / 2)
                                        )
                              );
  const endNumber = startNumber + pagerElementCount - 1;

  // Insert pager elements
  let anchorElement;
  for (let pagerIndex = endNumber; pagerIndex >= startNumber; pagerIndex--){
      if(pagerIndex === currentPageNumber){
          anchorElement = document.createElement('span');
          anchorElement.setAttribute('class', 'disabled');
      }else{
          anchorElement = document.createElement('a');
          params.set('page', pagerIndex);
          anchorElement.setAttribute('href', location.pathname + '?' + params);
      }
      anchorElement.textContent = pagerIndex;
      pager.insertBefore(anchorElement, pager.childNodes[2]);
  }

  return true;
}

// Add shortcuts to turn page by left and right kye
(function() {
    document.addEventListener('keydown', function (event) {
        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
           return;
        }

        const activeTagName = document.activeElement.tagName;
        if (['TEXTAREA', 'INPUT'].includes(activeTagName)){ return; }

        const pager_elements = document.querySelectorAll('.pagination a');
        if (pager_elements.length === 0) { return; }

        for (let element of pager_elements) {
            if(event.key === 'ArrowLeft' && element.innerText === 'Newer'){ element.click(); return; }
            if(event.key === 'ArrowRight' && element.innerText === 'Older'){ element.click(); return; }
        }
    }, false);
})();