ショートカットキーでScrapCalcを動かす
Ctrl-Cを押すと計算結果が表示される
もう一度押すと元に戻る
すごく気持ち良い!
ふだんは式が見えてて、計算を指示したときだけ値が表示されるみたいな
たしかに

というか式をまとめて見る方法自体無いのが辛い

トグルせずに常に結果も見えていて良い気がする

読みにくくなることを危惧している?
以下のUserCSSとUserScriptで
ScrapCalcをショートカットキーで呼ぶことができます

サンプル
a = 10 b = 20
a × b = a * b
応用例
電卓みたいにちょっとした計算に使う
√2 = Math.sqrt(2)
今日 = Date()
東京オリンピックまで
Math.floor((new Date('2021-7-23') - Date.now()) / (24 * 60 * 60 * 1000)) 日
使い方
以下のUserCSSとUserScriptを自分のページに貼ると使えます
style.css .deco-\= {
color: #111;
background-color: #ffddff;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.scrapcalc_result {
font-style:italic;
font-weight:bold;
background-color:yellow;
}
strict
の制限を回避
script.jsfunction scrapcalc_commands(){
const commands = [];
let count = 0;
for(let expr of document.querySelectorAll('.scrapcalc_result')){
expr.remove();
}
for(let expr of document.querySelectorAll('.deco-\\=')){
let text = expr.innerText;
if(text.match(/=/)){
commands.push(decodeURI(text) + ';');
}
else {
let id = `scrapcalc_element_id_${count}`;
var span = document.createElement('span');
span.id = id;
span.classList.add("scrapcalc_result");
expr.parentNode.appendChild(span)
expr.classList.add("scrapcalc_exp")
expr.style.display = 'none';
commands.push(`document.getElementById("${id}").innerText = ${decodeURI(text)};`);
count += 1;
}
}
return commands.join("\n");
}
ショートカットキー(Ctrl-C)でScrapCalcを呼び出す
何かクリックされたらもとに戻す
トグルする
script.jsfunction scrapcalc_reset(){
for(let expr of document.querySelectorAll('.scrapcalc_result')){
expr.remove();
}
for(let expr of document.querySelectorAll('.scrapcalc_exp')){
expr.style.display = 'inline';
}
}
document.addEventListener('keypress', e => {
if (e.key == 'c' && e.ctrlKey){
if(document.querySelectorAll('.scrapcalc_result').length == 0){
const scrapcalc_func = Function(`(() => {${scrapcalc_commands()}})();`);
scrapcalc_func();
}
else {
scrapcalc_reset();
}
}
})
/*
document.addEventListener('click', e => {
scrapcalc_reset();
})
*/