☰

dc-paginate

dc 글을 페이지로 보기기

当前为 2023-12-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         dc-paginate
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  dc 글을 페이지로 보기기
  6. // @author       fienestar
  7. // @match        https://gall.dcinside.com/board/view*
  8. // @match        https://gall.dcinside.com/mgallery/board/view*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=dcinside.com
  10. // @grant        none
  11.  // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.     const SINGLE_PAGE = true;
  17.     const RIGHT_IS_NEXT = true;
  18.     const CONTROL_RIGHT_IS_NEXT = true;
  19.  
  20.     const write_div = document.getElementsByClassName('write_div')[0]
  21.  
  22.     function is_image_p(p){
  23.         return p.getElementsByClassName('imgwrap').length
  24.     }
  25.  
  26.     function is_space_p(p){
  27.         return p.children.length === 0 || (p.children.length === 1 && p.children[0].tagName.toUpperCase() === 'BR')
  28.     }
  29.  
  30.     let page_list = [[]]
  31.     for(const child of write_div.children){
  32.         if(is_image_p(child)){
  33.             child.getElementsByTagName('img')[0].style.maxHeight = '90vh';
  34.             page_list.push([child], []);
  35.         }
  36.         else page_list.at(-1).push(child);
  37.     }
  38.  
  39.     const removed = [];
  40.  
  41.     page_list.forEach(page => {
  42.         while(page.length !== 0 && is_space_p(page.at(0))) removed.push(page.shift());
  43.         while(page.length !== 0 && is_space_p(page.at(-1))) removed.push(page.pop());
  44.     })
  45.  
  46.     page_list = page_list.filter(page => page.length !== 0);
  47.  
  48.     let paginated = false;
  49.     function pagenate()
  50.     {
  51.         if(paginated) return;
  52.         paginated = true;
  53.  
  54.         removed.forEach(element => element.remove());
  55.  
  56.         const page_element_list = page_list.map(page => {
  57.             const div = document.createElement('div');
  58.             div.style.margin = '0 auto';
  59.             div.style.width = 'fit-content';
  60.             page.forEach(element => div.appendChild(element));
  61.             return div;
  62.         });
  63.         const page_count = page_element_list.length
  64.  
  65.         const placeholder = document.createElement('p');
  66.         const left = document.createElement('p');
  67.         const right = document.createElement('p');
  68.  
  69.         for(const element of [placeholder, left, right])
  70.             element.style.height = '90vh';
  71.  
  72.         placeholder.style.width = '100%';
  73.         const p = document.createElement('p');
  74.         const br = document.createElement('br');
  75.         p.append(br);
  76.         write_div.prepend(placeholder, br);
  77.  
  78.         const placeholder_rect = placeholder.getBoundingClientRect();
  79.         const top = placeholder_rect.y - document.body.getBoundingClientRect().y
  80.  
  81.         if(SINGLE_PAGE)
  82.             left.style.right = '27.5vw';
  83.         else
  84.             left.style.right = '50vw';
  85.         right.style.left = '50vw';
  86.         for(const page of [left, right]){
  87.             page.style.position = 'absolute';
  88.             page.style.top = top + 'px';
  89.             page.style.height = '90vh';
  90.             page.style.maxHeight = '90vh';
  91.             page.style.width = placeholder_rect.width + 'px';
  92.             page.style.maxWidth = '45vw';
  93.             page.style.zIndex = '256';
  94.             document.body.prepend(page);
  95.         }
  96.  
  97.         function setPage(page)
  98.         {
  99.             location.hash = `#page-${page}`
  100.  
  101.             let a = SINGLE_PAGE ? 1 : 2;
  102.  
  103.             // RIGHT_IS_NEXT
  104.             left.children[0]?.remove();
  105.             left.append(page_element_list[page + (!SINGLE_PAGE) * (!RIGHT_IS_NEXT)] ?? '');
  106.             if(!SINGLE_PAGE){
  107.                 right.children[0]?.remove();
  108.                 right.append(page_element_list[page + RIGHT_IS_NEXT] ?? '');
  109.             }
  110.             // console.log(page_element_list[page], page_element_list[page+1]);
  111.         }
  112.  
  113.         let page = 0;
  114.  
  115.         function applyHash()
  116.         {
  117.             if(location.hash.startsWith('#page-')){
  118.                 page = +location.hash.slice('#page-'.length)
  119.                 setPage(page);
  120.             }
  121.         }
  122.         applyHash();
  123.         window.addEventListener("hashchange", applyHash);
  124.         setPage(page);
  125.  
  126.         document.addEventListener('keydown', e => {
  127.             let a = CONTROL_RIGHT_IS_NEXT ? 1 : -1
  128.             if(!SINGLE_PAGE) a *= 2;
  129.             if(e.key === 'ArrowRight') page += a;
  130.             if(e.key === 'ArrowLeft') page -= a;
  131.  
  132.             page = Math.min(page, page_count-1);
  133.             page = Math.max(page, 0);
  134.  
  135.             setPage(page);
  136.         })
  137.     }
  138.  
  139.     if(page_list.length > 4 && !paginated){
  140.         const button = document.createElement('button')
  141.         button.innerText = '페이지로 보기'
  142.         button.addEventListener('click', () => {
  143.             button.remove();
  144.             pagenate();
  145.         });
  146.         write_div.prepend(button)
  147.     }
  148. })();