☰

Infinite scroller

2021. 1. 6. 오전 11:17:30

  1. // ==UserScript==
  2. // @name        Infinite scroller
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://*.arca.live/*
  5. // @grant       none
  6. // @version     1.0.3
  7. // @author      awk
  8. // @description 2021. 1. 6. 오전 11:17:30
  9. // ==/UserScript==
  10.  
  11. // bounce-back element size
  12. const bounceBackBuffer = 96;
  13.  
  14. // last-checked page
  15. let scrolledPage = 1;
  16. let isLoading = false;
  17.  
  18. // from Arca Refresher@LeKAKiD v2.6.8
  19. function getTimeStr(datetime) {
  20.   const date = new Date(datetime);
  21.   let hh = date.getHours();
  22.   let mm = date.getMinutes();
  23.  
  24.   if (hh.toString().length == 1) {
  25.     hh = `0${hh}`;
  26.   }
  27.  
  28.   if (mm.toString().length == 1) {
  29.     mm = `0${mm}`;
  30.   }
  31.  
  32.   return `${hh}:${mm}`;
  33. }
  34.  
  35. function in24(datetime) {
  36.   const target = new Date(datetime);
  37.   const criteria = new Date();
  38.   criteria.setHours(criteria.getHours() - 24);
  39.   if (target > criteria) return true;
  40.   return false;
  41. }
  42.  
  43. const bounceBack = () => {
  44.   if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  45.     scrollBy({
  46.       'top': -bounceBackBuffer,
  47.       'left': 0,
  48.       'behavior': 'smooth'
  49.     });
  50.   }
  51. };
  52.  
  53. const getArticleId = elem => ~~elem.href.match(/\/b\/[^/]+\/(\d+)/)[1];
  54.  
  55. const loadMore = async () => {
  56.   if(isLoading) return;
  57.   isLoading = true;
  58.   
  59.   // true if scrolledPage value is reached to unread page
  60.   let reached = false;
  61.   
  62.   const currentArticles = [...document.querySelectorAll('.vrow')];
  63.   const currentLastArticleId = getArticleId(currentArticles[currentArticles.length - 1]);
  64.   
  65.   // determine if current page doesn't include any article
  66.   if(!currentLastArticleId) {
  67.     isLoading = false;
  68.     return;
  69.   }
  70.   
  71.   while(!reached) {
  72.     
  73.     ++scrolledPage;
  74.     // get next-page url
  75.     const nextPage = (() => {
  76.       // determine if current url includes page information
  77.       if(location.href.match(/[&?]p=(\d+)/)) {
  78.         return location.href.replace(/[&?]p=\d+/, pageString => {
  79.           return pageString.replace(/\d+/, scrolledPage);
  80.         });
  81.       }
  82.       // determine if current url includes query string
  83.       else if(location.href.match(/\?.+?=.+?/)){
  84.         return `${location.href}&p=${scrolledPage}`;
  85.       }
  86.       // it might be first-page of the board
  87.       else {
  88.         return `${location.href}?p=${scrolledPage}`;
  89.       }
  90.     })();
  91.     
  92.     console.log(nextPage);
  93.  
  94.     // fetch and parse next-page DOM
  95.     const nextPageDOM = await fetch(nextPage)
  96.       .then(res => res.text())
  97.       .then(pageText => new DOMParser().parseFromString(pageText, 'text/html'));
  98.  
  99.     const nextPageArticles = [...nextPageDOM.querySelectorAll('.vrow:last-child')];
  100.     const nextPageLastArticle = nextPageArticles[nextPageArticles.length - 1];
  101.     // determine if reached to end
  102.     if(!nextPageLastArticle || nextPageLastArticle.classList.length != 1) {
  103.       // reached to end
  104.       bounceBack();
  105.       break;
  106.     }
  107.     
  108.     // determine if reached to unread page
  109.     const nextPageLastArticleId = getArticleId(nextPageLastArticle);
  110.     if(currentLastArticleId > nextPageLastArticleId) {
  111.       // filter unread articles
  112.       const unreadArticles = [...nextPageDOM.querySelectorAll('.vrow')].filter(article => {
  113.         // filter out notices
  114.         if(article.classList.length != 1) return false;
  115.         return getArticleId(article) < currentLastArticleId;
  116.       });
  117.       
  118.       // attach unread articles with applying <time> js
  119.       const articleList = document.querySelector('.list-table');
  120.       unreadArticles.forEach(article => {
  121.         const time = article.querySelector('time');
  122.  
  123.         if (time && in24(time.dateTime)) {
  124.           time.innerText = getTimeStr(time.dateTime);
  125.         }
  126.         articleList.appendChild(article)
  127.       });
  128.       break;
  129.     }
  130.   }
  131.   
  132.   document.dispatchEvent(new Event('ar_article'));
  133.   isLoading = false;
  134.   return;
  135. }
  136.  
  137. window.addEventListener('load', e => {
  138.   // load current page
  139.   const pageMatch = location.href.match(/[&?]p=(\d+)/);
  140.   console.log(location.href);
  141.   scrolledPage = pageMatch ? ~~pageMatch[1] : 1;
  142.   
  143.   // attach bounce-back element
  144.   const bounceBackElement = document.createElement('div');
  145.   bounceBackElement.style.width = 'inherit';
  146.   bounceBackElement.style.height = `${bounceBackBuffer}px`;
  147.   // center-align text
  148.   bounceBackElement.style.textAlign = 'center';
  149.   bounceBackElement.style.lineHeight = `${bounceBackBuffer}px`;
  150.   // element color
  151.   bounceBackElement.style.backgroundColor = 'grey';
  152.   bounceBackElement.style.color = 'white';
  153.   // element text
  154.   bounceBackElement.innerText = 'Loading next page...';
  155.   bounceBackElement.fontWeight = 'bold';
  156.   document.body.appendChild(bounceBackElement);
  157.   
  158.   // apply smooth-scroll for bounce-back
  159.   document.body.style.scrollBehavior = 'smooth';
  160. });
  161.  
  162. window.addEventListener('scroll', e => {
  163.   if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  164.     loadMore();
  165.   }
  166. });