feat(score tag): support RenderAbc options

Modified the score tag to pass custom options to the abcjs RenderAbc interface.
This enhancement enables proper rendering of guitar tablature with custom
settings such as instrument tuning, labels, and formatting options.
This commit is contained in:
Yuchen Mu committed 2025-02-24 19:03:46 +08:00
1 parent 13720bd94d
commit 2de7d34b2b
2 files changed
+80 -18

No files matched your search

+49 -15
View File
@@ -1,17 +1,51 @@
script.
(() => {
const abcjsInit = () => {
const abcjsFn = () => setTimeout(() => {
document.querySelectorAll(".abc-music-sheet").forEach(ele => {
if (ele.children.length > 0) return
ABCJS.renderAbc(ele, ele.innerHTML, {responsive: 'resize'})
})
}, 100)
typeof ABCJS === 'object' ? abcjsFn()
: btf.getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
}
(function() {
var abcjsInit = function() {
var abcjsFn = function() {
setTimeout(function() {
var sheets = document.querySelectorAll(".abc-music-sheet");
for (var i = 0; i < sheets.length; i++) {
var ele = sheets[i];
if (ele.children.length > 0) continue;
// 从 data-params 属性中解析参数
var params = {};
var dp = ele.getAttribute("data-params");
if (dp) {
try {
params = JSON.parse(dp);
} catch (e) {
console.error("解析 data-params 失败:", e);
}
}
// 将解析出的参数与 responsive 参数合并,
// 保证 params 中的内容在 responsive 之前
var options = {};
for (var key in params) {
if (params.hasOwnProperty(key)) {
options[key] = params[key];
}
}
options.responsive = "resize";
// 使用 ABCJS.renderAbc 渲染乐谱
ABCJS.renderAbc(ele, ele.innerHTML, options);
}
}, 100);
};
window.pjax ? abcjsInit() : window.addEventListener('load', abcjsInit)
btf.addGlobalFn('encrypt', abcjsInit, 'abcjs')
})()
if (typeof ABCJS === "object") {
abcjsFn();
} else {
btf.getScript("!{url_for(theme.asset.abcjs_basic_js)}").then(abcjsFn);
}
};
if (window.pjax) {
abcjsInit();
} else {
window.addEventListener("load", abcjsInit);
}
btf.addGlobalFn("encrypt", abcjsInit, "abcjs");
})();