以前にプリザンターの編集画面で過去verとの差分を表示するというスクリプトを作りました。
今回は、前回と現在の差分だけでなく更新verを選択指定して差分を表示できるようにしてみました！
必要なライブラリ
使用するのは以前のと同じなのでそちらを参照。
「必要なライブラリ」、「ファイルを保存、拡張htmlへの設定」という所です。
スクリプト全体
この内容をスクリプトに追加して「編集」のみにチェックする。
編集画面を開いた時に処理されるようになります。
var responseData = "";
$p.events.on_editor_load = function () {
$p.apiGet({
id: $p.id(),
data: {
// 条件絞りたい場合は追記する
// View: {
// ColumnFilterHash:{
// Ver: "[\"1\",\"2\"]"
// }
// },
// 現在と変更履歴のレコードを取得するようにこの指定
TableType: "NormalAndHistory",
},
done: function (ret) {
// レコードが一つより多ければそれぞれ取得
if (ret.Response.Data.length > 1) {
// 結果のデータ部分をグローバル変数へ
responseData = ret.Response.Data;
initializeDiff2html();
}
},
fail: function (data) {
console.log("API取得失敗");
},
});
};
// APIで取得した内容からその差分を表示する
function initializeDiff2html() {
$("#diff2html").remove();
$("#Editor").after(
'<div id="diff2html" style="display:inline-block;"></div>'
);
$("#diff2html").css("width", "calc(100% - 250px)");
// セレクトボックスを二つ置く
appendSelect =
'<div id="verSelect"><laber>更新前 </laber><select id="beforeSelect"></select><laber> → 更新後 </laber><select id="afterSelect"></select></div>';
$("#diff2html").append(appendSelect);
// セレクトボックスにver番号を入れる
// 更新前の方は現在の分は入れない
for (let i = 1; i < responseData.length; i++) {
$("#beforeSelect").append(
$("<option>")
.val(responseData[i].Ver)
.text("Ver " + responseData[i].Ver)
);
}
// セレクトボックスにver番号を入れる
// 更新後の方
for (let i = 0; i < responseData.length; i++) {
$("#afterSelect").append(
$("<option>")
.val(responseData[i].Ver)
.text("Ver " + responseData[i].Ver)
);
}
html = '<div id="app">';
$("#diff2html").append(html);
changeDiff2html();
// 選択を変更したら表示内容変更を呼ぶ
document.getElementById("beforeSelect").onchange = function () {
changeDiff2html();
};
document.getElementById("afterSelect").onchange = function () {
changeDiff2html();
};
}
function changeDiff2html() {
// 選択されているverを更新前と後それぞれ取得
let beforeSelectValue =
responseData.length - Number(document.getElementById("beforeSelect").value);
let afterSelectValue =
responseData.length - Number(document.getElementById("afterSelect").value);
// 差分の対象をタイトル_Titleと内容_Bodyにしている。
// 他の項目も追加したい時はここで追加する。
// responseData[beforeSelectValue].xxxx
unifiedDiff = Diff.createPatch(
"更新",
responseData[beforeSelectValue].Title +
responseData[beforeSelectValue].Body,
responseData[afterSelectValue].Title + responseData[afterSelectValue].Body,
"ver" + responseData[beforeSelectValue].Ver,
"ver" + responseData[afterSelectValue].Ver
);
// オプション設定内容はdiff2htmlのgithub参照
var configuration = {
drawFileList: false,
fileListToggle: false,
fileListStartVisible: false,
fileContentToggle: false,
matching: "lines",
outputFormat: "side-by-side",
synchronisedScroll: true,
highlight: true,
renderNothingWhenEmpty: false,
};
var targetElement = document.getElementById("app");
var diff2htmlUi = new Diff2HtmlUI(targetElement, unifiedDiff, configuration);
diff2htmlUi.draw();
diff2htmlUi.highlightCode();
}
結果
更新verを切り替える事ができました！
2つ前の変更からのを見たいなーとか。
これで差分対象にしているのは、タイトルと内容になるので、前回に日付の更新だけしていたりする場合は、内容に対しての前回変更が以前の方法だと分からなかったけど、これで更新verをさかのぼる事で、内容についての変更が3つ前とかでも差分表示できるようになりました！
下記のような時。
- 項目作成ver1
- 内容変更ver2
- 日付を変更ver3
- この状態で編集画面の差分表示には、前回と現在の差分となるので内容の変更はなしになる（以前の方法）
- それが、今回変更した方法で、ver1とver3の比較にすると内容の差分も分かる！
