アクティブ読書用settings

アクティブ読書用settings

使っている

code:script.js

import '/api/code/gosyujin/関連リスト部分までジャンプするUserScript/script.js';

code:script.js

import '/api/code/gosyujin/Scrapbox APIにリンクからアクセスするUserScript/script.js';

code:script.js

import '/api/code/gosyujin/ポップアップメニューをキーボードで移動するUserScript/script.js';

初期位置調整用のUserScript Event

code:script.js

function hiddenHeader() {

// プロジェクトルートの場合は何もしない

if (scrapbox.Page.title === null) return;

// :で分けられないタイトルは何もしない

if (scrapbox.Page.title.split(':').length === 1) return;

}

hiddenHeader();

ページ遷移用UserScript

code:script.js

//const PREV_MOUSE_WHICH = [];

const statusDom = document.createElement('div');

document.querySelector('.status-bar').appendChild(statusDom);

function movePage(e) {

// プロジェクトルートの場合は何もしない

if (scrapbox.Page.title === null) return;

// 本のindexページの場合はPREVもNEXTも1ページ目(0001:～～)に飛ばす

if (scrapbox.Page.title.includes('_index')) {

if (PREV_KEYS.includes(e.key) || NEXT_KEYS.includes(e.key)

|| NEXT_MOUSE_WHICH.includes(e.which)) {

const INIT_PAGE_NUMBER = '0001';

Array.from(document.querySelectorAll('div.links-1-hop a')).map(m => {

m.click();

return;

}

});

console.warn('関連ページに1ページ目が見当たらないので直接遷移します(Titleでソートすれば動く)');

}

return;

}

// ページ指定で移動する場合はlocation.hrefで移動する

if (JUMP_KEYS.includes(e.key)) {

let result = window.prompt('移動するページを入力してください', '');

if (result === null) return;

let page;

// 全角数字を半角へ

s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0)

).trimEnd();

// +か-があればページ移動じゃなくてページ増減、それ以外ならそのページに移動

if (r.includes('+')) {

} else if (r.includes('-')) {

} else {

page = r;

}

// 4桁0埋め

page = ('0000' + Number(page)).slice('-4');

if (page === CURRENT_PAGE_NUMBER) return;

const tmp = scrapbox.Page.title.split(':');

tmp.shift();

location.href = href;

return;

}

// 1ページずつ移動する場合は1-hopリンクから移動する

if (NEXT_KEYS.includes(e.key) | NEXT_MOUSE_WHICH.includes(e.which)) {

const NEXT_PAGE_NUMBER = ('0000' + (Number(CURRENT_PAGE_NUMBER) + 1)).slice('-4');

Array.from(document.querySelectorAll('div.links-1-hop a')).map(m => {

});

return;

} else if (PREV_KEYS.includes(e.key)) {

const PREV_PAGE_NUMBER = ('0000' + (Number(CURRENT_PAGE_NUMBER) - 1)).slice('-4');

Array.from(document.querySelectorAll('div.links-1-hop a')).map(m => {

});

return;

} else if (PARENT_KEYS.includes(e.key)) {

// indexに移動

Array.from(document.querySelectorAll('div.links-1-hop a')).map(m => {

if (m.textContent.includes('_index')) m.click();

});

return;

}

}

document.querySelector('.status-bar').appendChild(statusDom);

document.addEventListener('mouseup', e => { movePage(e); });

document.addEventListener('keyup', e => { movePage(e); });

statusDom.innerText = 'OK';

エディター自体に触れないように、編集する場合はこれをはずす(普段はカーソル位置の強調)

code:style.css_

.editor {

pointer-events: none;

}

.cursor {

width: 200px !important;

height: 700px !important;

background-color: crimson;

color: crimson;

}

.cursor-line {

background-color: rgba(140, 140, 255, .7);

box-shadow: inset 0 -5px 5px -5px rgba(150, 150, 255, .3);

}

.shared-cursors .cursor {

animation: none;

}

カードにフォーカスが当たった時に拡大したい

code:style.css

/* imgを貫通させるためにoverflow: hiddenを切る */

.related-page-list,

.grid li.page-list-item a,

.grid li.page-list-item a .content,

.list li.page-list-item a

.list li.page-list-item a .icon

{

overflow: initial;

}

/* opacity: 1になると見づらいので切る */

{

opacity: 0;

}

/* imgを貫通させるためにz-indexを上げる */

{

z-index: 101;

}

/* 画像を全部見えるように */

{

max-height: fit-content;

max-width: fit-content;

position: fixed;

inset: 0;

zoom: 150%;

}

{

max-height: fit-content;

max-width: fit-content;

position: fixed;

inset: 0;

margin: 0 auto; /* .gridと比べて左に寄ってるので中央に */

zoom: 150%;

}

code:style.css_

/* text中の画像 */

/*

max-width: 100%;

max-height: 100%;

position: fixed;

inset: 0;

margin: auto;

z-index:1;

}

*/

TamperMonkey適用時に画像の上辺がページトップになるように修正

code:style.css

.container {

margin-top: -70px;

}

グリッド一覧に表示しなくてよいページ

code:style.css

/* 関連リスト */

/* トップページ */

display: none;

}

エディタを触れなくしてもリンクやコピーは触れるように

code:style.css

.editor .modal-image a .strong-image {

pointer-events: none;

}

.editor .modal-image a .image,

.editor .modal-image a .strong-image,

.editor .code-block-start a,

.editor .telomere,

i {

pointer-events: all;

}

ピンの有無でリストを折り返し

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}

スクロールバーがあるページとないページを遷移するとレイアウトがカクつくので必ず表示させる

code:style.css

html {

overflow-y:scroll;

}

カードの高さを伸ばす

code:style.css_

.page-list .grid li,

.related-page-list .grid li {

height: 305px;

}

.grid li.page-list-item a .title {

max-height: 60px;

min-height: 60px;

}

画像を中央寄せ

code:style.css

.line .strong-image {

display: block;

margin: 0 auto;

max-width: 100%;

}

navbar回りのパーツを非表示に

code:style.css

.new-button {

display: none;

}

.navbar {

backdrop-filter: blur(0);

box-shadow: 0 0 0;

}

.navbar-default {

background-color: rgba(255, 255 ,255, 0);

}

.search-form .form-group input {

background-color: rgba(255, 255, 255, 0.35);

}

.search-form .form-group input:focus {

background-color: white;

}

画像サイズと表示場所の調整

code:style.css

.grid li.page-list-item a .content {

align-items: center;

}

.grid li.page-list-item a .icon {

position: relative;

padding: 0;

margin: 0;

}

.grid li.page-list-item a .icon img {

position: relative;

width: auto;

max-height: 110px;

max-width: 100%;

vertical-align: middle;

}

.line .strong-image {

/*height: 105vmin;*/

height: 100% !important;

object-fit: contain;

}

タイトルを一行に

code:style.css

.grid li.page-list-item a .title {

display: inherit;

white-space: nowrap;

}

.line.line-title.section-title {

text-overflow: ellipsis;

white-space: pre;

overflow: hidden;

}

タイトルを選択した時はすべて表示する

code:style.css__

.line.line-title.section-title.cursor-line {

white-space: initial;

overflow: initial;

}

.line.line-title.section-title .text {

display: initial;

}

検索結果の強調

code:style.css

.page-list-item a .description strong {

background-color: orange;

}