Some minor tweaks to help enable and preserve reader mode on Space Battles.
当前为
// ==UserScript==
// @name SpaceBattles Reader Mode
// @namespace ultrabenosaurus.SpaceBattles
// @version 1.4
// @description Some minor tweaks to help enable and preserve reader mode on Space Battles.
// @author Ultrabenosaurus
// @license GNU AGPLv3
// @source https://greasyfork.org/en/users/437117-ultrabenosaurus?sort=name
// @match https://forums.spacebattles.com/threads/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=spacebattles.com
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @grant GM_addValueChangeListener
// @run-at document-idle
// ==/UserScript==
var _set_showTM = GM_registerMenuCommand( "Toggle Mini ToC (experimental)", function(event) {
GM_setValue( "UBshowThreadmarkMenu", !GM_getValue( "UBshowThreadmarkMenu", false ) );
});
var _listen_TM = GM_addValueChangeListener( "UBshowThreadmarkMenu", function(key, oldValue, newValue, remote) {
// reset menu command
// GM_unregisterMenuCommand( _set_showTM );
// _set_showTM = GM_registerMenuCommand( "Toggle Mini ToC (experimental)", function(event) {
// GM_setValue( "UBshowThreadmarkMenu", !GM_getValue( "UBshowThreadmarkMenu", false ) );
// });
// add or remove the menu
if( false == newValue ) {
if( 0 != document.querySelectorAll( 'div.UB-tm-container' ) ) {
document.querySelector( 'div.p-body' ).removeChild(document.querySelector( 'div.UB-tm-container' ));
}
} else {
UBbuildThreadmarkMenu();
}
});
(function() {
'use strict';
var _chapterPosts = document.querySelectorAll( 'article.hasThreadmark' );
if( 0 != _chapterPosts.length ) {
_chapterPosts.forEach( function( _post, _i, _chaps ) {
var _postID = _post.getAttribute( 'data-content' );
if( "reader" == document.location.href.split('/')[5] || "reader" == document.location.href.split('/')[6] ) {
// if in reader mode, fix post number links
UBfixReaderPostLinks( _postID, _post.querySelectorAll( 'div.message-inner header.message-attribution ul.message-attribution-opposite li:has(a[aria-label="Share"])+li > a' ) );
} else {
// if not in reader mode, bring button up to top of chapter where it's actually useful
var _btn = document.querySelector( 'article#js-' + _postID + ' div.message-cell li.reader a.threadmark-control' );
document.querySelector( 'article#js-' + _postID + ' div.message-cell span.primary:has(span.threadmarkLabel)' ).insertAdjacentHTML( "afterend", _btn.outerHTML.replace( _btn.href.split('#')[1], _postID ) );
}
});
window.addEventListener( 'scroll', UBupdateLocationAnchor);
if( GM_getValue( "UBshowThreadmarkMenu", false ) ) {
UBbuildThreadmarkMenu();
}
}
})();
function UBfixReaderPostLinks( _postID, _postLinks ) {
_postLinks.forEach( function( _link, _i, _posts ) {
_link.setAttribute( 'href', document.location.href.split('#')[0] + '#' + _postID );
});
}
function UBupdateLocationAnchor(){
if( history.pushState ) {
var _chapterPosts = document.querySelectorAll( 'article.hasThreadmark' );
if( 0 != _chapterPosts.length ) {
// if browser has 'history.pushState' and page has chapters, loop them to check position
_chapterPosts.forEach( function( _post, _i, _chaps ) {
if( 50 > _post.getBoundingClientRect().top && 50 < _post.getBoundingClientRect().bottom ){
//console.log( _post.getBoundingClientRect() );
if( _post.getAttribute( 'id' ) != 'js-' + document.location.hash.substr( 1 ) ) {
// if current chapter is at or past the top of the screen, update page title and history state
var _title = document.querySelector( 'h1.p-title-value' ).innerHTML.trim() + " - " + _post.querySelector( 'div.message-cell span.primary span.threadmarkLabel' ).innerHTML.trim();
//console.log( _post.getAttribute( 'id' ).replace( 'js-', '' ), _title );
document.title = _title;
history.pushState( {}, _title, '#' + _post.getAttribute( 'data-content' ) );
} else {
return;
}
}
});
}
}
}
function UBbuildThreadmarkMenu(){
// add our CSS to the <head>
document.getElementsByTagName('head')[0].insertAdjacentHTML( 'beforeend', '<style>' + UBgetThreadmarkMenuCSS() + '</style>' );
// add main pagination to bottom of menu
var _menuHTML = UBgetThreadmarkMenuHTML().replace( '$pagination$', document.querySelectorAll('div.block-outer-main nav.pageNavWrapper')[0].outerHTML );
var _chapterPosts = document.querySelectorAll( 'article.hasThreadmark' );
if( 0 != _chapterPosts.length ) {
// if chapter posts on page, loop them to build the list of links
_chapterPosts.forEach( function( _post, _i, _chaps ) {
var _postID = _post.getAttribute( 'data-content' );
var _title = _post.querySelector( 'div.message-cell span.primary span.threadmarkLabel' ).innerHTML.trim();
_menuHTML = _menuHTML.replace( '$menuitems$', '<li><a href="#' + _postID + '">' + _title + '</a></li>\n\t\t\t$menuitems$' );
});
// clean up the list of links
_menuHTML = _menuHTML.replace( '$menuitems$', '' );
}
// insert menu into the page
document.querySelector('div.p-body').insertAdjacentHTML( 'beforeend', _menuHTML );
}
function UBgetThreadmarkMenuHTML(){
return `<div class="UB-tm-container">
<input type="checkbox" id="UB-tm-toggle" />
<label class="UB-tm-button" for="UB-tm-toggle"><span>T</span></label>
<nav class="UB-tm-nav">
<ul>
<li><span>Threadmarks on Page</span></li>
$menuitems$
<li><span>$pagination$</span></li>
</ul>
</nav>
</div>`;
}
function UBgetThreadmarkMenuCSS(){
return `#UB-tm-toggle {
-webkit-appearance: none;
}
.UB-tm-button {
position: fixed;
z-index: 999;
display: flex;
cursor: pointer;
width: 50px;
height: 50px;
bottom: 20px;
left: 20px;
align-items: center;
background-color: #60646f;
border-radius: 50px;
}
.UB-tm-button span {
width: 100%;
text-align: center;
font-family: Bookerly, serif;
font-size: 18px;
font-weight: bold;
color: #ff8c10;
line-height: 0;
}
#UB-tm-toggle:checked ~ .UB-tm-nav {
opacity: 1;
/* display: revert;*/
visibility: visible;
transform: translateY(-10%);
}
#UB-tm-toggle:checked ~ .UB-tm-button {
background-color: #333844;
}
.UB-tm-nav {
opacity: 0;
/* display: none;*/
visibility: hidden;
transition: all 0.4s ease-in-out;
background: #60646f;
min-width: 200px;
max-width: 400px;
border-radius: 10px;
transform: translateY(0%);
position: fixed;
bottom: 10px;
left: 45px;
max-height: 520px;
overflow: scroll;
}
@media only screen and (max-width: 900px) {
.UB-tm-nav {
width: calc(100vw - 90px);
max-height: 80vh;
}
}
.UB-tm-nav > ul {
margin: 0;
padding: 0;
width: 100%;
position: relative;
display: table;
}
.UB-tm-nav > ul > li {
text-align: center;
display: table-row;
list-style-type: none;
/* font-weight: bold;*/
font-family: Bookerly, serif;
font-size: 10pt;
}
.UB-tm-nav > ul > li:first-child {
font-weight: bold;
}
.UB-tm-nav > ul > li:first-child,
.UB-tm-nav > ul > li:last-child {
color: #ff8c10;
background-color: #333844;
}
.UB-tm-nav > ul > li:nth-child(2) > a {
border-top: 1px solid #333844;
}
.UB-tm-nav > ul > li:not(:first-child) > a {
border-bottom: 1px solid #333844;
}
.UB-tm-nav > ul > li > a {
display: table-cell;
vertical-align: middle;
padding: 10px 10px 12px 10px;
color: #0f0;
text-decoration: none;
}
.UB-tm-nav > ul > li > a:hover {
text-decoration: underline;
background-color: #333844;
}
.UB-tm-nav > ul > li > span {
display: table-cell;
vertical-align: middle;
padding: 10px 5px;
}`;
}