改造#テーブル#モーダル#起動係#ボタン注入
cosenseのtableをmodalできれいにみるuserScript
ページ内のテーブルの横に虫眼鏡ボタンが付き、押すとそのテーブルを画面いっぱいの大きなビューでじっくり見られます。Cosense上では窮屈になりがちな大きな表も、これなら全体を広々と確認できます。
行が多い表や列の多いデータを扱うときに、毎回スクロールに苦労せずに済むのが便利です。ボタンを押すと「テーブルを大きく見るビュー」（table-viewer）が呼び出されて開く仕組みなので、この2つはセットで使います。
デモ
インストール
設定ページの code:script.js に貼る
import "/api/code/cosense-toolbox/cosenseのtableをmodalできれいにみるuserScript/script.js";
ソースコード全文を見る（JS）
(function () {
function createTablePreviewButton(href) {
const button = document.createElement("span");
button.className = "button table-viewer-button";
button.style.marginRight = ".25rem";
button.style.cursor = "pointer";
button.innerHTML = `<i class="fas fa-search-plus"></i>`;
const openModal = async () => {
const { CSVTableModal } = await import(
"/api/code/cosense-toolbox/cosense-table-viewer/module.js"
);
const csvModal = new CSVTableModal();
await csvModal.displayTable(href);
};
button.addEventListener("click", openModal);
onDestroy(button, () => button.removeEventListener("click", openModal));
return button;
}
function addTablePreviewButtonToAllTableLinks() {
const tableAnchors = document.querySelectorAll(
".table-block-start:not(:has(.table-viewer-button))",
);
tableAnchors.forEach((node) => {
const anchorNode = node.querySelector("a");
if (!anchorNode) return;
URL.canParse(anchorNode.href) &&
insertBeforeSelf(anchorNode, createTablePreviewButton(new URL(anchorNode.href).pathname));
});
}
function onDestroy(element, callback) {
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const removed of mutation.removedNodes) {
if (removed === element || removed.contains(element)) {
observer.disconnect();
callback();
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function insertBeforeSelf(referenceNode, newNode) {
referenceNode.parentNode?.insertBefore(newNode, referenceNode);
}
addTablePreviewButtonToAllTableLinks();
cosense.on("lines:changed", () => addTablePreviewButtonToAllTableLinks());
cosense.on("page:changed", () => {
if (cosense.Layout !== "page") return;
addTablePreviewButtonToAllTableLinks();
});
})();