インデント毎に背景色を変える
※ Scrapbox研究会に一度投稿しましたが、カスタマイズコレクションに引っ越しました。tenfu2tea.icon
対訳を書いています。英文・和文をインデント（レベル）で区別して、背景色を変えるのが、よさそうです。 tenfu2tea.icon
現在試用中
第1レベルは、英文
第2レベルは、和文（翻訳文）
直下のインデントレベルに翻訳結果を挿入するボタンが欲しい
第3レベルは、数式やコード
第4レベルは、メモ
その先の目論見（希望）
インデントレベル毎に可視・不可視を選べるボタンを作る
あるインデントレベルを表示すると、和訳のみ表示される、とか
和訳を textlint に喰わせる、とか
→ 快適な翻訳環境になると思う
動作例
https://gyazo.com/136bd4703c82a57f89f851e2feaa9089
原理
インデントレベル n の行 (.lineクラス) に .indent-level-n というクラス名を追加する
.indent-level-n の背景色を指定する
UserCSSを使う
参考
Scrapboxのインデントレベルを取得する
DOMやCSSセレクタで選択
jQuery 特定の子を持つ要素の親を取得する
.has( selector )
UserScript第1バージョンは、↑ こちら
style="margin-left: ___em;" の値を読む
UserScript第3バージョンは、↑ こちら
.indent-mark span[class^="c-"]の数を読む
UserScript第4バージョンは、↑ こちら
Scrapbox.Page.lines をパースして取得
マッチする \s の文字数でインデントレベルとする
UserScript第2バージョンは、↑ こちら
UserScript第4バージョンtakker.icon
基本は第3バージョンとほぼ同じ
.indent-mark span[class^="c-"]の数でインデントレベルを調べている
任意の数のインデントレベルを取得できるようになった
UserScript第3バージョン tenfu2tea.icon
私の利用法には合わない →「マッチする \s の文字数でインデントレベルとする」
\sの文字数でインデントレベルを調べるのがtenfu2tea.iconさんの利用法に合わない理由は何でしょうか？takker.icon
\sを数えると不都合が生じる場面が思いつかないので、純粋に疑問に感じました
単純にコーディングスタイルに合わないとか？
.indent-level-n を付与する関数を書き換えた
style="margin-left: ___em; でインデントレベルを調べる
yuta0801.icon さん方式
もう少しスマートに書きたいところ
.indent-level-n を付与する関数：第3版
code:script.js
function addIndentLevels() {
scrapbox.Page.lines.filter(l => {
}).map(l => {
return {id: l.id, indent: l.text.match(/^\s+/)}
}).forEach((l) => {
let e;
e=document.getElementById(L${l.id});
e.classList.add(indent-level-1);
e.classList.add(indent-level-2);
e.classList.add(indent-level-3);
e.classList.add(indent-level-4);
e.classList.add(indent-level-5);
e.classList.add(indent-level-6);
e.classList.add(indent-level-7);
} else {
e.classList.add(indent-level-0);
}
})
}
UserScript第2バージョン tenfu2tea.icon
.indent-level-n を付与する関数を用意した
コード例をありがとうございます
.indent-level-n が付与された行をスキップ する処理を追加した
セレクタの書き方が不安
takker.icon さん、ヒントをありがとうございます
どういたしましてtakker.icon
変化を検出したら、上と同じ関数を呼び出して .indent-level-n を再び付与する
行にカーソルをおくと .indent-level-n が外れてしまう（ようだ）
でも、行を確定(?)すれば .indent-level-n が再び付与される
ページ再読込は不要となった。うれしい
.indent-level-n を付与する関数：第2版
code:script-2.js
function addIndentLevels() {
scrapbox.Page.lines.filter(l => {
}).map(l => {
return {id: l.id, indent: l.text.match(/^\s+/)}
}).forEach((l) => {
let indent;
if(l.indent == null) {
indent = 0;
} else {
indent = l.indent0.length; }
document.getElementById(L${l.id}).classList.add(indent-level-${indent})
})
}
.indent-level-n 付与の実行とDOM変更の監視：第2版以降
code:script.js
// DOM読み込み後の処理
addIndentLevels();
// DOM監視
(function () {
const target = document.getElementById('app-container')
const observer = new MutationObserver(records => addIndentLevels() )
observer.observe(target, {
childList: true,
subtree: true
})
})()
.indent-level-n を付与する関数：第1版
code:script-1.js
$('.line').has('.indent-mark .c-0').addClass("indent-level-0");
$('.line').has('.indent-mark .c-1').addClass("indent-level-1");
$('.line').has('.indent-mark .c-2').addClass("indent-level-2");
$('.line').has('.indent-mark .c-3').addClass("indent-level-3");
$('.line').has('.indent-mark .c-4').addClass("indent-level-4");
$('.line').has('.indent-mark .c-5').addClass("indent-level-5");
$('.line').has('.indent-mark .c-6').addClass("indent-level-6");
第1バージョンの問題点 tenfu2tea.icon
まずは、動作確認的な扱いです。
行を編集すると背景色が消える（ページを更新すれば復活）
ページを新規作成時にしか、クラス名を付加しないので
編集中も動作するとうれしいです。
UserScriptの例が scrapbox.PopupMenu.addButton や scrapbox.PopupMenu.addItem を用いたものばかりなので、他の実例が見たい
ありがとうございます（VanillaJS初心者なので）
.line クラスからではなくて .text クラスからを選択する方がよいかもしれない？ tenfu2tea.icon
テキスト出現までの直近の主要構造が、次のようになっているので
.lineだと、テロメアも含んでしまう
code:page.html
<div class="line">
<div class="teromere">...</div>
<span class="text">
<span>
<span class="indent-mark" style="width: 1.5em;"></span>
<span class="indent" style="margin-left: 1.5em;">
<span class="c-1">現</span>
<span class="c-2">在</span>
<span class="c-3">試</span>
</span>
</span>
</span>
</div>
.lineにCSSをあてる運用でよさそうですtakker.icon
テロメアを上書きしない
jQueryを使わずにCSSだけでも実現できそうですyuta0801.icon
.lineの中に入っている.indentと.indent-markにインデントごとのstyleが属性がついているので、これを属性セレクタを使うことでこんな感じで選択することができます
ありがとうございます。tenfu2tea.icon
code:css
background: lightblue;
}
.indent-markのほうはheight: 1rem;が指定されていてテキストと高さが合わないのでheight: unset;で解除しちゃうのがよさそうです
ただ.lineそのものではなくて子要素になってしまうので、折り返しがあったときに白い部分が出来てしまうのが少し気にはなりますが
CSSで .has セレクタが早く使えるようになるとよいですね
CSSだとブラウザ側が処理してくれるので編集中もすぐ反映されるようになると思います
スタイルシートは、そのまま tenfu2tea.icon
code:style.css
.indent-level-0 {
}
.indent-level-1 {
}
.indent-level-2 {
}
.indent-level-3 {
background-color: #DDEEAA; /* 透きとおった緑みの黄 */ }
.indent-level-4 {
}
.indent-level-5 {
background-color: #AADDAA; /* 透きとおった緑 */ }
.indent-level-6 {
}
UserScript.icon
UserCSS.icon