input mode UserScript
編集モードを追加し、切り替えない限りページの編集をできなくするUserScript。
右のボタンをクリックするか、
i キーを押すことで編集モードに入れる。読み込み専用モードに戻るには、再度ボタンをクリックするか
Esc キーを押そう。使い方もここを参照。
CSSを書き換えたかったので勝手に改造しました。すいません。
script.js
スクリプトの本体。
Classの追加・削除のやり方はここを参照した -> jQuery classの追加・削除 - Qiita
style.css
編集モードを有効化している時のアイコンのCSS。
黒：入力モード
青：編集モード
赤：エラー（もう一度ボタンを押してください）
色の変更方法は以下のサイトを参考にした。
色を変えたければ
hue-rotate を、明るさを変えたければ brightness を変えるといいです。トップページに遷移後、再度記事を開いたときにアイコンの状態が変わってしまう問題がある。
Scrapbox自体が勝手にアイコンを初期化してしまうので対処できない。
あと、僕自身がそこまでjavascriptに詳しくない。
その状況時にはアイコンが赤くなるようにした。
呼び出し例
script.jsimport '/api/code/Mijinko/input_mode_UserScript/script.js';style.css@import url('/api/code/Mijinko/input_mode_UserScript/style.css');スクリプト本体
script.jslet isInputMode = true;
const enterInputMode = (e) => {
if (!isInputMode) {
if (e) {
e.preventDefault();
}
$("#text-input").prop('disabled', false);
$("#text-input").focus();
$('#InputMode img').removeClass("disable");
$('#InputMode img').addClass("enable");
isInputMode = !isInputMode;
}
}
const exitInputMode = (e) => {
if (isInputMode) {
$("#text-input").prop('disabled', true);
$('#InputMode img').removeClass("enable");
$('#InputMode img').addClass("disable");
isInputMode = !isInputMode;
}
}
const modeSelectors = {
true: exitInputMode,
false: enterInputMode,
}
scrapbox.PageMenu.addMenu({
title: 'InputMode',
image: 'https://i.gyazo.com/5f2de2133ef5d9a35ac16b3b8aa1c6aa.png',
onClick: () => {
modeSelectors[isInputMode]();
},
});
$(window).keydown((e) => {
if (e.keyCode === 73) { // key code of "i"
enterInputMode(e);
}
if (e.keyCode === 27) { // key code of Esc
exitInputMode(e);
}
});
exitInputMode();style.css#InputMode img.extension-btn {
transition: 0.3s;
filter: sepia(95%) saturate(6932%) hue-rotate(360deg) brightness(65%) contrast(112%);
}
#InputMode img.disable {
filter: sepia(0%) saturate(0%) hue-rotate(200deg) brightness(100%) contrast(112%);
}
#InputMode img.enable {
filter: sepia(95%) saturate(6932%) hue-rotate(200deg) brightness(120%) contrast(112%);
}
メモ
div:not(.open) を使おうとしたけど、これサブメニュー用だった・・・。（やりたいことと関係なかった）