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. } //end userScript