☰

Wallhaven 壁纸网站增强

Wallhaven 是最酷的壁纸网站，本脚本为该网站提供了额外的功能，能让你更畅快的寻找到喜欢的图片。

当前为 2018-08-22 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name                Wallhaven Enhance
  3. // @name:zh-CN          Wallhaven 壁纸网站增强
  4. // @description         The script for the coolest wallpaper site provides additional features, can make you more fun to find favorite pictures.
  5. // @description:zh-CN   Wallhaven 是最酷的壁纸网站，本脚本为该网站提供了额外的功能，能让你更畅快的寻找到喜欢的图片。
  6.  
  7. // @author              Moshel
  8. // @namespace           https://hzy.pw
  9. // @homepageURL         https://hzy.pw/
  10. // @supportURL          https://github.com/h2y/link-fix
  11. // @icon                https://alpha.wallhaven.cc/favicon.ico
  12. // @license             GPL-3.0
  13.  
  14. // require             https://cdn.staticfile.org/lightgallery/1.6.11/css/lightgallery.min.css
  15. // require             https://cdn.staticfile.org/lightgallery/1.6.11/js/lightgallery-all.min.js
  16. // @include             https://alpha.wallhaven.cc/*
  17. // @grant               none
  18. // @run-at              document-end
  19.  
  20. // @date                05/02/2017
  21. // @modified            08/22/2018
  22. // @version             2.0.0
  23. // ==/UserScript==
  24.  
  25.  
  26. {
  27.     class Pic {
  28.         constructor(elem, wallhavenScript) {
  29.             this.elem = elem;
  30.             this.wallhavenScript = wallhavenScript
  31.  
  32.             const $pic = $(elem);
  33.  
  34.             this.favs = parseInt( $pic.find('.wall-favs')[0].innerHTML );
  35.             this.seen = $pic.find('figure').hasClass('thumb-seen');
  36.             this.id = $pic.find('figure').data('wallpaper-id');
  37.             this.picUrl = `/wallpapers/full/wallhaven-${this.id}.jpg`;
  38.             this.picSmallUrl = $pic.find('img')[0].src;
  39.  
  40.             // this.getPicUrl();
  41.         }
  42.  
  43.         desalt() {
  44.             const opacity = this.wallhavenScript.desaltPicsOpacity;
  45.             this.elem.style.opacity = opacity;
  46.         }
  47.  
  48.         addDownload() {
  49.             let dlDom = $(`<a class="jsDownload" href="javascript:;"> <i class="fa fa-fw fa-cloud-download"></i></a>`)[0];
  50.             dlDom.onclick = this.download.bind(this);
  51.             $(this.elem).find('.thumb-info').append(dlDom);
  52.         }
  53.  
  54.         download() {
  55.             let aDom = document.createElement('a');
  56.             aDom.href = this.picUrl;
  57.             aDom.download = "";
  58.             aDom.click();
  59.         }
  60.  
  61.         // 异步获取图片的真实地址
  62.         getPicUrl() {
  63.             let xhr = new XMLHttpRequest();
  64.             xhr.onreadystatechange = ()=>{
  65.                 if (xhr.readyState == 2) {
  66.                     if(xhr.status != 200)
  67.                         this.picUrl = this.picUrl.replace('.jpg', '.png');
  68.                     xhr.abort();
  69.                 }
  70.             };
  71.  
  72.             xhr.open("GET", this.picUrl, true);
  73.             xhr.send();
  74.         }
  75.  
  76.         initGallery() {
  77.             let $pic = $(this.elem).find('figure');
  78.  
  79.             $pic.data('data-src', this.picUrl)
  80.                 .data('data-sub-html-url', 'https://alpha.wallhaven.cc/wallpaper/'+this.id );
  81.  
  82.             $pic.click( this.showGallery );
  83.         }
  84.  
  85.         showGallery(e) {
  86.             $('ul').lightGallery({
  87.                 selector: 'figure'
  88.             });
  89.             return false;
  90.         }
  91.     }
  92.  
  93.  
  94.     class WallhavenScript {
  95.         constructor() {
  96.             // 部分页面中淡化对未达到点赞数量的图片
  97.             this.desaltPics = true;
  98.             this.desaltPicsByFavs = 10;  // 需要达到的点赞数量
  99.             this.desaltPicsOpacity = 0.2;  // 淡化后的透明度
  100.  
  101.             // 淡化看过的图片
  102.             this.desaltSeen = true;
  103.  
  104.             // 显示一键下载按钮
  105.             this.download = true;
  106.  
  107.             // 图片灯箱浏览
  108.             this.gallery = false;  // 开发中
  109.  
  110.             // 当前登录状态
  111.             this.isLogined = ($('#userpanel > a > span.username').length > 0)
  112.         }
  113.  
  114.         workList() {
  115.             this.workListMain();
  116.             new MutationObserver( this.workListMain.bind(this) ).observe(document.body, {
  117.                 attributes: false,
  118.                 childList: true,
  119.                 subtree: true
  120.             });
  121.         }
  122.  
  123.         workListMain() {
  124.             let pics = this.getPics();
  125.             let newPics = this.filterNewPics(pics);
  126.  
  127.             for(let pic of newPics) {
  128.                 // 淡化对未达到点赞数量的图片
  129.                 if(this.desaltPics && pic.favs < this.desaltPicsByFavs)
  130.                     pic.desalt();
  131.  
  132.                 // 淡化看过的图片
  133.                 if(this.desaltSeen && pic.seen)
  134.                     pic.desalt();
  135.  
  136.                 // 显示一键下载按钮
  137.                 if(this.download)
  138.                     pic.addDownload();
  139.  
  140.                 // Gallery
  141.                 if(this.gallery)
  142.                     pic.initGallery();
  143.             }
  144.  
  145.             this.pics = pics;
  146.         }
  147.  
  148.         // 单图页面
  149.         workSingle() {
  150.             if(this.download)
  151.                 this.addDownloadForSingle();
  152.         }
  153.  
  154.         addDownloadForSingle() {
  155.             const src = $('img#wallpaper').attr('src').replace('//wallpapers.wallhaven.cc', '');
  156.  
  157.             let dlDom = $(`<a id="fav-button" class="button add-button" href="${src}" download></a>`)[0];
  158.             dlDom.innerHTML = `<a class="add-fav"><i class="fa fa-fw fa-download"></i> Download</a>`;
  159.  
  160.             $('div.sidebar-content')[0].insertBefore(dlDom, $('.sidebar-content > #fav-button')[0] );
  161.         }
  162.  
  163.         getPics() {
  164.             let elems = $('.thumb-listing-page li');
  165.             let ret = [];
  166.  
  167.             for(let elem of elems)
  168.                 ret.push( new Pic(elem, this) )
  169.  
  170.             return ret;
  171.         }
  172.  
  173.         filterNewPics(pics) {
  174.             let ret = [];
  175.             const oldElems = this.pics.map(pic=>pic.elem);
  176.  
  177.             return pics.filter( pic => {
  178.                 return (oldElems.indexOf(pic.elem) < 0);
  179.             });
  180.         }
  181.  
  182.  
  183.         /*
  184.             根据当前页面选择需要运行的功能，返回对应的 work 函数
  185.          */
  186.         run() {
  187.             if(!this.isLogined) {
  188.                 this.desaltSeen = false;
  189.             }
  190.  
  191.             // 单图页面
  192.             if(location.pathname.indexOf('/wallpaper/')==0)
  193.                 return this.workSingle();
  194.  
  195.             // latest pics
  196.             else if(location.pathname == '/latest' || location.search.indexOf('sorting=date_added')>0) {
  197.                 this.desaltPics = false;
  198.             }
  199.  
  200.             // up 主页面
  201.             else if(location.pathname.indexOf('/user/')>=0)
  202.                 this.desaltPics = false;
  203.  
  204.             this.pics = [];
  205.             return this.workList();
  206.         }
  207.  
  208.     }
  209.  
  210.  
  211.     new WallhavenScript().run();
  212.     
  213. } //end userScript