☰

Pixiv Infinite Scroll/Download Links

Adds infinite scroll and inline expansion on the search page and artists' works pages. For manga mode a two-step expansion is used.

当前为 2014-07-07 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Pixiv Infinite Scroll/Download Links
  3. // @description Adds infinite scroll and inline expansion on the search page and artists' works pages. For manga mode a two-step expansion is used.
  4. // @namespace   https://github.com/an-electric-sheep/userscripts
  5. // @match       *://www.pixiv.net/search*
  6. // @match       *://www.pixiv.net/member_illust*
  7. // @version     0.2
  8. // @grant       none
  9. // @run-at      document-start
  10. // ==/UserScript==
  11.  
  12. "use strict";
  13.  
  14. var Maybe = function (wrapped) {
  15.   if (typeof this !== "object" || Object.getPrototypeOf(this) !== Maybe.prototype) {
  16.     var o = Object.create(Maybe.prototype);
  17.     o.constructor.apply(o, arguments);
  18.     return o;
  19.   }
  20.   
  21.   this.wrapped = wrapped;
  22. }
  23.  
  24. Maybe.prototype.isEmpty = function(){return null == this.wrapped}
  25. Maybe.prototype.orElse = function(other){return this.isEmpty() ? Maybe(other) : this}
  26. Maybe.prototype.apply = function(f){if(!this.isEmpty()){f.apply(null, [this.wrapped].concat(Array.slice(arguments, 1)))};return this;}
  27. Maybe.prototype.map = function(f){return this.isEmpty() ? this :  Maybe(f.apply(null, [this.wrapped].concat(Array.slice(arguments,1))));}
  28. Maybe.prototype.get = function(){return this.wrapped;}
  29.  
  30. var paginator; 
  31. var loading = false;
  32.  
  33. var imgContainerSelector = ".image-items, .display_works > ul";
  34.  
  35. document.addEventListener("DOMContentLoaded", function() {
  36.   for(var e of document.querySelectorAll("iframe, .ad-printservice, .popular-introduction")){e.remove()}
  37.   var sheet = document.querySelector("head").appendChild(document.createElement("style")).sheet;
  38.   
  39.   [
  40.     // global
  41.     "#wrapper {width: unset;}",
  42.     // search page
  43.     ".layout-body {width: 85vw;}",
  44.     // member page
  45.     ".layout-a {width: unset;}",
  46.     ".layout-a .layout-column-2 {width: calc(100vw - 190px);}",
  47.     // member works list
  48.     ".display_works {width: unset;}",
  49.     ".display_works .image-item {float: none; }",
  50.     // search and member works list
  51.     ".image-items, .display_works > ul {display: flex;flex-wrap: wrap;}",
  52.     ".image-item img {padding: 0px; border: none;}",
  53.     ".inline-expandable {cursor: pointer;}",
  54.     ".image-item.expanded {width: 100%; height: unset;}",
  55.     ".image-item.expanded img {max-width: -moz-available;}",
  56.     ".manga-item {background-color: #f3f3f3 !important;}",
  57.     ".image-item img.manga-medium {max-width: 156px; max-height: 230px; cursor: pointer;}"
  58.   ].forEach(r => sheet.insertRule(r,0))
  59.  
  60.   paginator = Maybe(document.querySelectorAll(".pager-container")).map(paginators => paginators[paginators.length-1]).get();
  61.   
  62.   window.addEventListener("scroll", isNextNeeded)
  63.   window.addEventListener("resize", isNextNeeded)
  64.   for(var e of document.querySelectorAll(".image-item")){customizeImageItem(e)}
  65.   isNextNeeded();
  66. })
  67.  
  68.  
  69.  
  70. function inViewport (el) {
  71.  
  72.     var rect = el.getBoundingClientRect();
  73.  
  74.     return (
  75.         rect.top >= 0 &&
  76.         rect.left >= 0 &&
  77.         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
  78.         rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  79.     );
  80. }
  81.  
  82.  
  83. function insertMangaSubItem(parentItem,url) {   
  84.   var req = new XMLHttpRequest
  85.   req.open("get", url)
  86.   req.onload = function() {
  87.     var rsp = this.responseXML
  88.     
  89.     var nextItem = parentItem.nextSibling
  90.     
  91.     for(var e of rsp.querySelectorAll(".item-container")) {
  92.       let mediumImg = e.querySelector(".image")
  93.       let bigUrl = e.querySelector(".full-size-container").href
  94.         
  95.       let item = document.createElement("li")
  96.       item.className = "image-item manga-item"
  97.       let img = document.createElement("img")
  98.       img.src = mediumImg.dataset.src
  99.       img.className = "manga-medium"
  100.       img.addEventListener("click",function(){
  101.           this.parentElement.classList.add("expanded");
  102.           this.className = "manga"
  103.           this.src = this.src.replace(/(_p\d+)/, "_big$1")
  104.       })
  105.       
  106.       item.appendChild(img)
  107.       
  108.       
  109.       parentItem.parentNode.insertBefore(item, nextItem)
  110.     }
  111.   }
  112.   req.responseType = "document"
  113.   req.send()
  114.   
  115. }
  116.  
  117.  
  118. function listItemExpand() {
  119.   var container = this.parentNode
  120.   var mediumLink = container.querySelector("a.work").href
  121.   var req = new XMLHttpRequest
  122.   req.open("get", mediumLink)
  123.   req.onload = function() {
  124.     var rsp = this.responseXML;
  125.     var modeLinkUrl = rsp.querySelector(".works_display a").href
  126.     var mediumSrc = rsp.querySelector(".works_display img").src
  127.     
  128.     var mode = modeLinkUrl.match(/mode=(\w+)/)[1]
  129.     if(mode == "big") {
  130.       var img = container.querySelector("img")
  131.       img.src = mediumSrc.replace("_m.", ".");
  132.       container.classList.add("expanded")
  133.     }
  134.       
  135.     if(mode == "manga"){
  136.       insertMangaSubItem(container, modeLinkUrl)
  137.     }
  138.   }
  139.   req.responseType = "document"
  140.   req.send()
  141.   this.removeEventListener("click", listItemExpand)
  142. }
  143.  
  144. const greasedImageItems = new WeakMap;
  145.  
  146. function customizeImageItem(e) {
  147.   if(greasedImageItems.has(e))
  148.    return;
  149.   greasedImageItems.set(e, true);
  150.   var workLink = e.querySelector("a.work")
  151.   // it's an animation, currently no autoexpand support for that
  152.   if(workLink.classList.contains("ugoira-thumbnail"))
  153.     return;
  154.   var img = workLink.querySelector("img")
  155.   img.classList.add("inline-expandable")
  156.   img.dataset.thumbSrc = img.src
  157.   e.insertBefore(img, workLink)
  158.   img.addEventListener("click", listItemExpand)
  159. }
  160.  
  161. function loadNext() {
  162.   if(loading)
  163.     return;
  164.   loading = true;
  165.   var nextLink = paginator.querySelector("a[rel=next]")
  166.   if(nextLink) {
  167.     var req = new XMLHttpRequest();
  168.     req.open("get", nextLink.href)
  169.     req.onload = function() {
  170.       var rsp = this.responseXML;
  171.       var container = document.querySelector(imgContainerSelector)
  172.       for(var e of rsp.querySelectorAll(".image-item")){
  173.         var imageItem = document.importNode(e, true)
  174.         container.appendChild(imageItem)
  175.         customizeImageItem(imageItem)
  176.       }
  177.       while(paginator.hasChildNodes())
  178.         paginator.firstChild.remove()
  179.       for(var e of rsp.querySelector(".pager-container").childNodes){paginator.appendChild(document.importNode(e, true) )}
  180.       loading = false;
  181.       isNextNeeded();
  182.     }
  183.     req.responseType = "document"
  184.     req.send()
  185.   }
  186. }
  187.  
  188. function isNextNeeded() {
  189.   if(loading)
  190.     return;
  191.  
  192.   if(paginator && inViewport(document.querySelector(".image-item:last-child"))) {
  193.     loadNext();
  194.   }
  195. }