## 経緯
https://github.com/tadashi-aikawa/obsidian-questions/issues/13
## TODO
- [x] ファイルを切り替えたときに実行するスクリプトの作成
- [[📅Show floating date properties automatically]]
- `hoge`と通知するだけ
- [x] ファイルを切り替えたときに処理を実行する処理に書き換え
- [x] 作成日と更新日を取得
- [x] UIをいじってみる
- [x] 作成日と更新日を表示
- [x] 実行の前に既に存在したら消す
- [x] 作成日と更新日でDOMを分ける
- [x] 作成日と更新日にリンク
- [x] クリックイベントの追加
- [x] propertyからデイリーノートのパスを生成
- [x] Noticeでパスを表示
- [x] クリックでデイリーノートを開く
- [x] Ctrl押しながらで新しいタブで開く
- [[Windows]]のみ
- [x] 更新日が存在しない場合のハンドリング
- [x] [[Obsidian]]起動時に実行するスクリプトの定義
- [x] 現在のリーフに表示が固定される問題の解消
## スクリプトの最終成果物
```js
<%*
const className = "additional-date-properties"
/**
/ 日付文字列からデイリーノートのパスを生成する
/ @param dateStr (ex: 2023-10-09)
*/
function toDailyNotePath(dateStr) {
// TODO: Vaultのデイリーノートのパスになるよう設定が必要
return `_Privates/Daily Notes/${dateStr}.md`
}
/**
/ 内部リンクのDOMを作成する
/ @param fileBasename (ex: 2023-10-09)
/ @param title (ex: 作成: 2023-10-09)
*/
function createInternalLinkElement(fileBasename, title) {
const el = createDiv({
text: title,
cls: "additional-date-properties__date-button"
});
// クリックしたときにファイルへ移動する
// macOSならCmd、WindowsならCtrl押しながらで新しいタブで開く
el.addEventListener("click", (ev) => {
const openAsNewTab = tp.obsidian.Platform.isMacOS ? ev.metaKey : ev.ctrlKey;
app.workspace.openLinkText("", toDailyNotePath(fileBasename), openAsNewTab);
});
return el;
}
/**
/ 追加UIを追加する
*/
function addAdditionalUI(file) {
// 現在のファイルからフロントマターを取得
const frontmatter = app.metadataCache.getFileCache(file).frontmatter
// フロントマターがなければ中断
if (!frontmatter) {
return
}
// フロントマターから作成日と更新日を取得
const { created, updated } = frontmatter;
// 作成日と更新日がなければ中断
if (!(created && updated)) {
return
}
// 作成日と更新日のDOMを作成する
const createdEl = createInternalLinkElement(created, `作成日: ${created}`);
const updatedEl = createInternalLinkElement(updated, `更新日: ${updated}`);
// 差し込み用DOMを構築する
const additionalEl = createDiv({ cls: className});
additionalEl.appendChild(createdEl);
additionalEl.appendChild(updatedEl);
// DOMをヘッダの手前に挿入する
app.workspace.getActiveFileView().containerEl
.find(".view-header")
.insertAdjacentElement("afterend", additionalEl);
}
/**
/ 追加UIを削除する (存在しない場合は何もしない)
*/
function removeAdditionalUI(file) {
app.workspace.getActiveFileView().containerEl.find(`.${className}`)?.remove();
}
// ファイルを開いた時に自動で実行する処理
app.workspace.on("file-open", (file) => {
removeAdditionalUI(file);
addAdditionalUI(file);
});
// Propertyが変更されたときに自動で実行する処理
app.metadataCache.on("changed", (file, _, cache) => {
removeAdditionalUI(file);
if (cache.frontmatter?.created && cache.frontmatter?.updated) {
addAdditionalUI(file);
}
});
// 初回だけはイベントが発生しないので明示的に実行
addAdditionalUI(app.workspace.getActiveFile());
%>
```
## メモ
切り替え時の処理。
```js
<%*
app.workspace.on("file-open", (file) => {
new Notice(file.name);
});
%>
```
作成日(created)と更新日(updated)の取得。
```json
app.workspace.on("file-open", (file) => {
const frontmatter = app.metadataCache.getFileCache(file).frontmatter
new Notice(JSON.stringify(frontmatter));
});
```
コマンドを実行したらタイトルの上に差し込む形。
```json
<%*
function addFloatingArea(file) {
const frontmatter = app.metadataCache.getFileCache(file).frontmatter
const el = createDiv({ text: frontmatter.created, cls: "floating-date-properties" });
const markdownView = app.workspace.getActiveFileView()
markdownView.containerEl
.find(".view-header")
.insertAdjacentElement("beforebegin", el);
new Notice(JSON.stringify(frontmatter));
}
const f = app.workspace.getActiveFile();
addFloatingArea(f);
//app.workspace.on("file-open", (file) => {
//});
%>
```
CSS
```css
.floating-date-properties {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
```