psmuler
commented
1 year ago マウスオーバー時にコミットの差分を表示する機能を追加するために、showCommitList()関数を以下のように書き換えます。
renderer.js:
async function showCommitList() {
// コミットリストを取得
const commitList = await getCommitList();
// コミットリストを表示
const commitListContainer = document.getElementById('commit-list');
commitListContainer.innerHTML = '';
commitList.forEach((commit) => {
const commitItem = document.createElement('li');
commitItem.textContent = `${commit.shortHash} - ${commit.message}`;
// マウスオーバー時に差分を表示するイベントリスナーを追加
commitItem.addEventListener('mouseover', async () => {
const diff = await getCommitDiff(commit.hash);
showDiff(diff);
});
commitListContainer.appendChild(commitItem);
});
}
async function getCommitDiff(commitHash) {
return new Promise((resolve, reject) => {
exec(`git -C "${folderPath}" show "${commitHash}"`, (error, stdout, stderr) => {
if (error && error.code !== 0) {
console.error(`Error: ${error.message}`);
reject(error);
return;
}
if (stderr) {
console.error(`Stderr: ${stderr}`);
}
resolve(stdout);
});
});
}
function showDiff(diff) {
const diffContainer = document.getElementById('diff-container');
diffContainer.textContent = diff;
}このコード変更により、showCommitList()関数でコミット一覧を表示する際に、各コミット要素にマウスオーバー時のイベントリスナーを追加します。このイベントリスナーは、マウスオーバー時にgetCommitDiff()関数を呼び出し、コミットの差分を取得します。差分が取得できたら、showDiff()関数で差分を表示します。
この変更を適用するために、HTMLファイルにdiff-container要素を追加してください。
index.html:
<!-- 他の要素は省略 -->
<div id="diff-container"></div>これで、コミットリスト上の各コミットにマウスオーバーすると、そのコミットの差分が表示されるようになります。
コミットリスト上の各コミットにマウスオーバーすると差分を表示するようにしましょう。コミット一覧はshowcommitlist()関数で定義されています