☰

Wallhaven 壁纸网站增强

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

当前为 2019-06-06 提交的版本，查看 最新版本。

  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.12/css/lightgallery.min.css
  15. // require             https://cdn.staticfile.org/lightgallery/1.6.12/js/lightgallery-all.min.js
  16. // @include             https://wallhaven.cc/*
  17. // @grant               none
  18. // @run-at              document-end
  19.  
  20. // @date                05/02/2017
  21. // @modified            06/06/2019
  22. // @version             2.1.0
  23. // ==/UserScript==
  24.  
  25.  
  26. {
  27.     // 图片类 特指列表中的图片
  28.     class Pic {
  29.         constructor(elem, wallhavenScript) {
  30.             this.elem = elem;
  31.             this.wallhavenScript = wallhavenScript;
  32.  
  33.             const $pic = $(elem);
  34.  
  35.             this.favs = parseInt( $pic.find('.wall-favs')[0].innerHTML );
  36.             this.seen = $pic.find('figure').hasClass('thumb-seen');
  37.             this.id = $pic.find('figure').data('wallpaper-id');
  38.             this.isPNG = ($pic.find('span.png').length > 0);
  39.  
  40.             this.picUrl = `https://w.wallhaven.cc/full/zm/wallhaven-${this.id}.jpg`;
  41.             if(this.isPNG)
  42.                 this.picUrl = this.picUrl.replace('.jpg', '.png');
  43.         }
  44.  
  45.         desalt() {
  46.             const opacity = this.wallhavenScript.desaltPicsOpacity;
  47.             this.elem.style.opacity = opacity;
  48.         }
  49.  
  50.         addDownload() {
  51.             let dlDom = $(`<a class="jsDownload" href="javascript:;"> <i class="fa fa-fw fa-cloud-download"></i></a>`)[0];
  52.             dlDom.onclick = this.download.bind(this);
  53.             $(this.elem).find('.thumb-info').append(dlDom);
  54.         }
  55.  
  56.         download() {
  57.             let aDom = document.createElement('a');
  58.             aDom.href = this.picUrl;
  59.             aDom.download = "download";
  60.             aDom.click();
  61.         }
  62.  
  63.         initGallery() {
  64.             let $pic = $(this.elem).find('figure');
  65.  
  66.             $pic.data('data-src', this.picUrl)
  67.                 .data('data-sub-html-url', 'https://wallhaven.cc/w/'+this.id );
  68.  
  69.             $pic.click( this.showGallery );
  70.         }
  71.  
  72.         showGallery(e) {
  73.             $('ul').lightGallery({
  74.                 selector: 'figure'
  75.             });
  76.             return false;
  77.         }
  78.     }
  79.  
  80.  
  81.     class WallhavenScript {
  82.         constructor() {
  83.             // 部分页面中淡化对未达到点赞数量的图片
  84.             this.desaltPics = true;
  85.             this.desaltPicsByFavs = 10;  // 需要达到的点赞数量
  86.             this.desaltPicsOpacity = 0.2;  // 淡化后的透明度
  87.  
  88.             // 淡化看过的图片
  89.             this.desaltSeen = true;
  90.  
  91.             // 显示一键下载按钮
  92.             this.download = true;
  93.  
  94.             // 图片灯箱浏览
  95.             this.gallery = true;  // 开发中
  96.  
  97.             // 单图页面尽可能扩大图片的可视空间
  98.             this.maxView = true;
  99.  
  100.             // 当前登录状态
  101.             this.isLogined = ($('#userpanel > a > span.username').length > 0)
  102.             if(!this.isLogined)
  103.                 this.desaltSeen = false;
  104.         }
  105.  
  106.         workList() {
  107.             this.workListMain();
  108.             new MutationObserver( this.workListMain.bind(this) ).observe(document.body, {
  109.                 attributes: false,
  110.                 childList: true,
  111.                 subtree: true
  112.             });
  113.         }
  114.  
  115.         workListMain() {
  116.             let pics = this.getPics();
  117.             let newPics = this.filterNewPics(pics);
  118.  
  119.             for(let pic of newPics) {
  120.                 // 淡化对未达到点赞数量的图片
  121.                 if(this.desaltPics && pic.favs < this.desaltPicsByFavs)
  122.                     pic.desalt();
  123.  
  124.                 // 淡化看过的图片
  125.                 if(this.desaltSeen && pic.seen)
  126.                     pic.desalt();
  127.  
  128.                 // 显示一键下载按钮
  129.                 if(this.download)
  130.                     pic.addDownload();
  131.  
  132.                 // Gallery
  133.                 if(this.gallery)
  134.                     pic.initGallery();
  135.             }
  136.  
  137.             this.pics = pics;
  138.         }
  139.  
  140.         // 单图页面
  141.         workSingle() {
  142.             /* 单图页面一键下载还存在问题
  143.             if(this.download) {
  144.                 const src = $('img#wallpaper').attr('src');
  145.  
  146.                 let dlDom = $(`<a id="fav-button" class="button add-button" href="${src}" download></a>`)[0];
  147.                 dlDom.innerHTML = `<a class="add-fav"><i class="fa fa-fw fa-download"></i> Download</a>`;
  148.  
  149.                 $('div.sidebar-content')[0].insertBefore(dlDom, $('.sidebar-content > #fav-button')[0] );
  150.             } */
  151.  
  152.             if(this.maxView) {
  153.                 $('#header, #searchbar').hide('fast');
  154.                 $('#showcase-sidebar').animate({top:0}, 'fast');
  155.                 $('#main').animate({borderTopWidth:0}, 'fast');
  156.                 $('#wallpaper').animate({maxWidth:'99%', maxHight:'99%'}, 'fast');
  157.             }
  158.         }
  159.  
  160.         getPics() {
  161.             let elems = $('.thumb-listing-page li');
  162.             let ret = [];
  163.  
  164.             for(let elem of elems)
  165.                 ret.push( new Pic(elem, this) );
  166.  
  167.             return ret;
  168.         }
  169.  
  170.         filterNewPics(pics) {
  171.             let ret = [];
  172.             const oldElems = this.pics.map(pic=>pic.elem);
  173.  
  174.             return pics.filter( pic => {
  175.                 return (oldElems.indexOf(pic.elem) < 0);
  176.             });
  177.         }
  178.  
  179.  
  180.         /*
  181.             根据当前页面选择需要运行的功能，返回对应的 work 函数
  182.          */
  183.         run() {
  184.             // A: 单图页面
  185.             if(location.pathname.indexOf('/w/')==0)
  186.                 return this.workSingle();
  187.  
  188.             // B: 列表页面
  189.  
  190.             // latest pics
  191.             else if(location.pathname == '/latest' || location.search.indexOf('sorting=date_added')>0) {
  192.                 this.desaltPics = false;
  193.             }
  194.  
  195.             // up 主页面
  196.             else if(location.pathname.indexOf('/user/')>=0)
  197.                 this.desaltPics = false;
  198.  
  199.             this.pics = [];
  200.             return this.workList();
  201.         }
  202.  
  203.     }
  204.  
  205.  
  206.     new WallhavenScript().run();
  207.  
  208. } //end userScript