显示模式切换按钮，点击后可切换cocos2d播放器为纯图片滚动浏览
// ==UserScript==
// @name 灰机汉化 滚动浏览
// @namespace http://weibo.com/unluckyninja
// @version 1.1.1
// @description 显示模式切换按钮，点击后可切换cocos2d播放器为纯图片滚动浏览
// @author UnluckyNinja
// @include http://smp*.yoedge.com/smp-app/*
// @require https://greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js?version=6349
// @require https://code.jquery.com/jquery-3.2.1.min.js
// @require https://greasyfork.org/scripts/34959-eisbehr-jquery-lazy/code/eisbehr%20jquery%20lazy.js?version=229001
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
// Your code here...
var button = '<div id="scroll-button" style="position: fixed;top: 5px;right:5px;z-index:1000;">' +
'<div class="settings-button" style="height:auto; padding: 2px;line-height: 1.3em">' +
'<div id="enable-scrolling" class="tool-item" style="text-align: center;width:auto;">滚动浏览</div>' +
'<hr>' +
'<div id="image-width-drop" class="tool-item" style="text-align: center;width:auto">▼</div>' +
'</div>' +
'<div id="width-setting" class="tool-container" style="margin-top: 10px;padding: 2px;display:none;">' +
'<label for="image-width" style="color: #111111;">宽度</label>' +
'<input id="image-width" class="tool-item" type="number" placeholder="1080" min=480 max=4096 style="box-sizing: border-box;width: 100%;">' +
'<div class="arrow" style="border-color: transparent transparent #E9E5E5 transparent;margin: auto;top: -14px;left: 0;right: 0;"></div>' +
'</div>' +
'</div>';
GM_addStyle("input[type=number]::-webkit-inner-spin-button, " +
"input[type=number]::-webkit-outer-spin-button { " +
" -webkit-appearance: none; " +
"}" +
".lazy {" +
" background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcNCiAgd2lkdGg9IjEwMCUiDQogIGhlaWdodD0iMTAwJSINCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIg0KICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayINCiAgdmlld0JveD0iMCAwIDEwMCAxMDAiDQogIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIg0KICBzdHlsZT0iaW5saW5lLXNpemU6IDIwMHB4OyBoZWlnaHQ6IDIwMHB4OyINCiAgPg0KICA8c3ZnDQogICAgdmVyc2lvbj0iMS4xIg0KICAgIGlkPSJsYXllcl8xIg0KICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayINCiAgICB4PSIwcHgiDQogICAgeT0iMHB4Ig0KICAgIHZpZXdCb3g9IjAgMCAxMDAgMTAwIg0KICAgIHhtbDpzcGFjZT0icHJlc2VydmUiDQogICAgPg0KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGNhbGNNb2RlPSJzcGxpbmUiIHZhbHVlcz0iLTEwOzEwOy0xMCIga2V5VGltZXM9IjA7MC41OzEiIGR1cj0iNSIga2V5U3BsaW5lcz0iMC41IDAgMC41IDE7MC41IDAgMC41IDEiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCiAgICA8ZyBzdHlsZT0idHJhbnNmb3JtLW9yaWdpbjogNTBweCA1MHB4O3RyYW5zZm9ybTogbWF0cml4KDAuNiwgMCwgMCwgMC42LCAwLCAwKTsiPg0KICAgICAgPGcgY2xhc3M9ImxkICIgPg0KICAgICAgICA8ZyA+DQogICAgICAgICAgPHBvbHlnb24gY2xhc3M9InN0NSIgcG9pbnRzPSI4OC4xLDE1IDI3LjQsNTUuOCAxMS45LDQ3LjMgIiBmaWxsPSIjZWVlZWVlIiA+PC9wb2x5Z29uPg0KICAgICAgICA8L2c+DQogICAgICAgIDxnID4NCiAgICAgICAgICA8cG9seWdvbiBjbGFzcz0ic3Q1IiBwb2ludHM9Ijg4LjEsMTUgNzEuMiw4MC4xIDUxLjUsNjkuMSAzOS40LDg1IDM5LjQsNjIuNSAiIGZpbGw9IiNlZWVlZWUiID48L3BvbHlnb24+DQogICAgICAgIDwvZz4NCiAgICAgICAgPGcgPg0KICAgICAgICAgIDxwYXRoDQogICAgICAgICAgICBjbGFzcz0ic3QyIg0KICAgICAgICAgICAgZD0iTTI5LjgsNTYuNWw3LjcsMTguN1Y2Mi41YzAtMC41LDAuMi0xLDAuNi0xLjRsMzMuNC0zMi42TDI5LjgsNTYuNXoiDQogICAgICAgICAgICBmaWxsPSIjYTBhMGEwIg0KICAgICAgICAgICAgPjwvcGF0aD4NCiAgICAgICAgPC9nPg0KICAgICAgICA8ZyA+DQogICAgICAgICAgPHBhdGgNCiAgICAgICAgICAgIGQ9Ik05MCwxNC44YzAtMC4yLTAuMS0wLjQtMC4xLTAuNWMwLDAsMC0wLjEsMC0wLjFjMCwwLDAtMC4xLTAuMS0wLjFjLTAuMS0wLjEtMC4xLTAuMi0wLjItMC4zYzAsMCwwLDAsMCwwIGMtMC4xLTAuMS0wLjMtMC4zLTAuNC0wLjRjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDBjLTAuMi0wLjEtMC40LTAuMi0wLjUtMC4yYzAsMCwwLDAtMC4xLDBjLTAuMiwwLTAuNCwwLTAuNSwwYzAsMC0wLjEsMC0wLjEsMCBjLTAuMiwwLTAuMywwLjEtMC41LDAuMUwxMS4yLDQ1LjVjLTAuNywwLjMtMS4xLDAuOS0xLjIsMS43czAuMywxLjQsMSwxLjhsMTQuOCw4LjJsMTEuOCwyOC41bDAsMGMwLjIsMC41LDAuNiwwLjksMS4yLDEuMSBjMC4yLDAuMSwwLjQsMC4xLDAuNiwwLjFjMC42LDAsMS4yLTAuMywxLjUtMC44bDExLTE0LjVsMTguMywxMC4xYzAuNSwwLjMsMS4yLDAuMywxLjcsMC4xYzAuNi0wLjIsMS0wLjcsMS4xLTEuM2wxNi45LTY1IGMwLDAsMCwwLDAsMEM5MCwxNS4zLDkwLDE1LjEsOTAsMTQuOEM5MCwxNC45LDkwLDE0LjksOTAsMTQuOHogTTE2LjQsNDcuNWw1My44LTIyLjhMMjcuMyw1My41TDE2LjQsNDcuNXogTTM4LjEsNjEuMSBjLTAuNCwwLjQtMC42LDAuOS0wLjYsMS40djEyLjdsLTcuNy0xOC43bDQxLjctMjhMMzguMSw2MS4xeiBNNDEuNCw2NS44bDcuMiw0bC03LjIsOS41VjY1Ljh6IE03MCw3Ny4xbC0xNy42LTkuN0w0Mi43LDYyIGw0MS44LTQwLjhMNzAsNzcuMXoiDQogICAgICAgICAgICBmaWxsPSJyZ2IoMCwgMCwgMCkiDQogICAgICAgICAgICA+PC9wYXRoPg0KICAgICAgICA8L2c+DQogICAgICA8L2c+DQogICAgPC9nPg0KICA8L3N2Zz4NCjwvc3ZnPg==')" +
" no-repeat center/30%;" +
"}");
function buildImages(){
var width = GM_getValue('imageWidth', 1080);
var htmlList = '<div id="image-list" style="margin:0 auto;padding:0;width:fit-content;position:absolute;top:5px;left:0;right:0;display: none"></div>';
var htmlImage = '<img class="lazy" style="margin:0;padding:0;display:block;width:'+width+'px;min-height: 200px;" data-src="" />';
var list = $(htmlList);
var imageTemplate = $(htmlImage);
var pages = smp.config.pages.page;
var orders = smp.config.pages.order;
var len = orders.length;
var order = null;
var url = null;
for (var i = 0; i < len; i++) {
order = orders[i];
url = pages[order];
list.append(imageTemplate.clone(true).attr('data-src', url));
list.append('<p style="margin-top: 5px; margin-bottom: 15px; color: white; text-align: center;">'+(i+1)+'</p>');
}
list.insertAfter('#Cocos2dGameContainer');
$(function() {
$('.lazy').lazy({
enableThrottle: true,
throttle: 100
});
});
}
// 准备按钮
var showButton = function(){
var target = $('div#toolbar');
if(!target.length){
return;
}
$(button).appendTo(target);
$('#enable-scrolling').click(function(){
if(!$('#image-list').length){
buildImages();
}
$('#gameCanvas').toggle();
$('#image-list').toggle();
});
// 显示宽度输入框
$('#image-width-drop').click(function(){
$('#width-setting').show();
$('#image-width').attr('placeholder',GM_getValue('imageWidth', 1080)).focus();
});
// 失去焦点时自动切换宽度 保存数值
$('#image-width').blur(function(){
$('#width-setting').hide();
var value = $('#image-width').val();
if(!value){
return;
}
value = Math.min(Math.max(parseInt(value), 480), 4096);
$('#image-list img').css('width', value);
GM_setValue('imageWidth', value);
$('#image-width').val('');
});
};
waitForKeyElements ("div#normal-button", showButton);
})();