Viewer for xchina ...
// ==UserScript==
// @name Viewer for xchina
// @namespace http://tampermonkey.net/xchina
// @version 0.0.2
// @description Viewer for xchina ...
// @author You
// @match https://xchina.co/photo/id-*
// @icon https://www.google.com/s2/favicons?domain=xchina.co
// @grant GM_xmlhttpRequest
// @grant GM_addStyle
// @grant GM_getResourceText
// @require https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.0/viewer.min.js
// @resource viewerCSS https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.0/viewer.min.css
// @license MIT
// ==/UserScript==
(function () {
'use strict';
let DEBUG_INFO = false;
let DEBUG_VERBOSE = false;
function debug_info(...data) { if (DEBUG_INFO === true) { console.log('[INFO] ', data); } }
function debug_verbose(...data) { if (DEBUG_VERBOSE === true) { console.log('[VERBOSE]', data); } }
function sleep(time) { return new Promise((resolve) => window.setTimeout(resolve, time)); }
function Random(min, max) { return Math.round(Math.random() * (max - min)) + min; }
GM_addStyle(GM_getResourceText('viewerCSS'));
// https://xchina.co/photo/id-XXXXXXXXX/1.html
var href = window.location.href;
debug_info('handle href: ' + href);
// HD img url: https://img.xchina.biz/photos2/XXXXXXXXX/0001.jpg
// thumbnail img url: https://img.xchina.biz/photos2/XXXXXXXXX/0001_600x0.webp
function thumbnail_img_url_to_hd_img_url(thumbnail_img_url) {
let last_mark_pos = thumbnail_img_url.lastIndexOf('_');
let hd_img_file_ext = ".jpg"
return thumbnail_img_url.slice(0, last_mark_pos) + hd_img_file_ext
}
function images_paragraph_node(root_document) {
let imgs = root_document.getElementsByTagName('img');
for (let img of imgs) {
if (img.getAttribute('class') != null && img.getAttribute('class').startsWith('cr_only')) {
return img.parentNode.parentNode.parentNode;
}
}
}
var new_image_viewer_ul = document.createElement('ul'); // 注册新的图片浏览器
var img_container = images_paragraph_node(document).parentNode; // 原网页图片所在的div容器
new_image_viewer_ul.setAttribute('id', 'imagesViewer');
img_container.appendChild(new_image_viewer_ul); // 注入新的图片浏览器到原图片所在的div容器
var gallery = new Viewer(new_image_viewer_ul, {
fullscreen: false,
interval: 1200,
loop: false,
transition: false,
});
// 删除原来的图片段落
images_paragraph_node(document).remove();
// @description 从网页源码中获取图片分组
// @return 每页的图片数组
function getPageImages(i, htmlDoc) {
let text = images_paragraph_node(htmlDoc).outerHTML;
// debug_verbose(text);
let template = `<div class='child${i}'>${text}</div>`;
let tempNode = document.createElement('div');
tempNode.innerHTML = template;
let imgs = Array.from(tempNode.firstChild.getElementsByTagName('img'))
.filter((img) => { return img.getAttribute('class') != null && img.getAttribute('class').startsWith('cr_only') })
.map((img) => { img.setAttribute('src', thumbnail_img_url_to_hd_img_url(img.getAttribute('src'))); return img; });
return imgs; // HTMLCollection(3)[img, img, img]
}
// index from 0
var arr = document.getElementsByClassName("prev")[0].parentNode.children;
var pages_num = Number(arr[arr.length - 2].text);
var pages_url = [];
for (let i = 1; i <= pages_num; i++) {
pages_url.push(href.slice(0, href.lastIndexOf('.')) + '/' + i + '.html');
}
var pages_map = {};
function update_img_set(page, img_set) {
pages_map[page] = img_set;
debug_verbose(
`update_img_set: 加载页面 ${page + 1} / ${pages_url.length}, 共计 ${img_set.length
} 张图片`,
);
if (Object.keys(pages_map).length === pages_url.length) {
debug_info('所有页面的信息已经加载到 pages_map 中');
let img_cnt = 0;
for (let i = 0; i < pages_url.length; i++) {
img_set = pages_map['' + i];
let img_cnt_this_page = 0;
// console.log(img_set)
for (let j = 0; j < img_set.length; j++) {
let img = img_set[j];
img.setAttribute('style', 'max-height: 1080px');
img_cnt += 1;
img_cnt_this_page += 1;
new_image_viewer_ul.appendChild(img);
}
debug_info(i, '页', img_cnt_this_page, '张');
}
debug_info('共计', img_cnt, '张');
}
gallery.update();
}
(function addBtn(text, disable) {
let btn = document.createElement('input');
let div = document.createElement('div');
let btnFarther = document.getElementsByClassName('tab-content')[0];
div.appendChild(btn);
btnFarther.appendChild(div);
div.style.textAlign = 'center';
btn.disabled = disable;
btn.type = 'submit';
btn.value = text;
btn.style.textAlign = 'center';
btn.style.verticalAlign = 'middle';
btn.style.color = '#666666';
btn.style.background = '#fff';
btn.style.width = '10rem';
btn.style.height = '2rem';
btn.style.background =
'-webkit-gradient(linear,left top, right top,from(#02fdfe),to(#d3fb42))';
btn.style.border = '1px';
btn.style.borderRadius = '3rem';
btn.onclick = function () {
gallery.show();
};
})('Play by Viewer', false);
let reset_url_map = {};
for (let i = 0; i < pages_url.length; i++) {
let durl = pages_url[i];
debug_info('采集图片自', durl);
GM_xmlhttpRequest({
url: durl,
method: 'GET',
onload: (xhr) => {
let data = xhr.response;
let htmlDoc = new DOMParser().parseFromString(data, 'text/html');
let imgs = htmlDoc.getElementsByTagName('img');
let flag = false;
for (let img of imgs) {
if (img.getAttribute('class') != null && img.getAttribute('class').startsWith('cr_only')) {
flag = true;
}
}
if (flag)
update_img_set(i, getPageImages(i, htmlDoc));
else {
reset_url_map[i] = durl;
}
},
});
}
function mysleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function do_requests(reset_url) {
debug_info('未完成', Object.keys(reset_url).length);
mysleep(5000).then(() => {
for (let key in reset_url) {
let durl = reset_url[key];
// console.log('采集图片自', durl);
GM_xmlhttpRequest({
url: durl,
method: 'GET',
onload: (xhr) => {
let data = xhr.response;
let htmlDoc = new DOMParser().parseFromString(data, 'text/html');
let imgs = htmlDoc.getElementsByTagName('img');
for (let img of imgs) {
if (img.getAttribute('class') != null && img.getAttribute('class').startsWith('cr_only')) {
update_img_set(key, getPageImages(key, htmlDoc));
delete reset_url[key]
}
}
},
});
}
if (Object.keys(reset_url).length != 0) {
do_requests(reset_url)
}
});
}
do_requests(reset_url_map);
})();