fix: run js scripts on window load

This commit is contained in:
Axel Cocat 2022-05-14 23:14:33 +02:00
parent 843d5f856c
commit f34edb0ea0
6 changed files with 740 additions and 727 deletions

View file

@ -69,6 +69,7 @@
</div> </div>
<script type="application/javascript"> <script type="application/javascript">
$(window).on("load", () => {
let achievementsData = {}; let achievementsData = {};
let $openCategory; let $openCategory;
const $achievementTemplate = $("#achievement-template").detach().removeAttr("id"); const $achievementTemplate = $("#achievement-template").detach().removeAttr("id");
@ -257,4 +258,5 @@
makeProgressBars(); makeProgressBars();
openSummary(); openSummary();
}); });
});
</script> </script>

View file

@ -36,7 +36,9 @@
</div> </div>
<script type="application/javascript"> <script type="application/javascript">
$(window).on("load", () => {
{{#each arenaTeams}} {{#each arenaTeams}}
createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]); createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]);
{{/each}} {{/each}}
});
</script> </script>

View file

@ -3,7 +3,6 @@
<script type="application/javascript"> <script type="application/javascript">
const aowow_tooltips = { "renamelinks": true, }; const aowow_tooltips = { "renamelinks": true, };
</script> </script>
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
{{> character-header }} {{> character-header }}
@ -47,62 +46,10 @@
</div> </div>
</div> </div>
<div style="display: none;">
<!-- Hackfix for aowow's tooltip opening when the page loads -->
<a href="{{aowow}}/?spell=10"></a>
</div>
<script type="application/javascript"> <script type="application/javascript">
$(window).on("load", () => {
const talentsData = {{{JSONstringify data}}}; const talentsData = {{{JSONstringify data}}};
for (let spec = 0; spec < 2; ++spec) {
const $spec = $(`#talents-spec-${spec}`);
let nbLearned = 0;
for (const tree of talentsData.trees) {
const learned = {};
for (const talent of talentsData.talents[spec]) {
for (const s of tree.spells) {
const ranks = [s.spellRank0, s.spellRank1, s.spellRank2, s.spellRank3, s.spellRank4];
const idx = ranks.indexOf(talent);
if (idx === -1) {
continue;
}
learned[s.id] = {
spell: s,
rank: idx + 1,
};
++nbLearned;
break;
}
}
const $tree = $("#talent-tree-template")
.clone(false)
.removeAttr("id")
.appendTo($spec);
$tree.find(".header .image").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`);
$tree.find(".header .name").text(tree.name);
createTree(tree, learned, $tree[0]);
}
if (nbLearned === 0 && spec !== 0) {
$spec.addClass("hidden");
$("#spec-links").hide();
continue;
}
const $glyphs = $spec.find(".glyphs");
for (const spell of talentsData.glyphs[spec]) {
const $a = $("<a>");
$a.attr("href", `{{aowow}}?spell=${spell}`);
$glyphs.append($a);
$glyphs.append("<br>");
}
$glyphs.parent().appendTo($spec);
}
function createTree(data, learnedTalents, container) { function createTree(data, learnedTalents, container) {
const $columns = $(container).find(".col"); const $columns = $(container).find(".col");
let points = 0; let points = 0;
@ -219,6 +166,55 @@
$(container).append($arrow); $(container).append($arrow);
} }
function main() {
for (let spec = 0; spec < 2; ++spec) {
const $spec = $(`#talents-spec-${spec}`);
let nbLearned = 0;
for (const tree of talentsData.trees) {
const learned = {};
for (const talent of talentsData.talents[spec]) {
for (const s of tree.spells) {
const ranks = [s.spellRank0, s.spellRank1, s.spellRank2, s.spellRank3, s.spellRank4];
const idx = ranks.indexOf(talent);
if (idx === -1) {
continue;
}
learned[s.id] = {
spell: s,
rank: idx + 1,
};
++nbLearned;
break;
}
}
const $tree = $("#talent-tree-template")
.clone(false)
.removeAttr("id")
.appendTo($spec);
$tree.find(".header .image").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`);
$tree.find(".header .name").text(tree.name);
createTree(tree, learned, $tree[0]);
}
if (nbLearned === 0 && spec !== 0) {
$spec.addClass("hidden");
$("#spec-links").hide();
continue;
}
const $glyphs = $spec.find(".glyphs");
for (const spell of talentsData.glyphs[spec]) {
const $a = $("<a>");
$a.attr("href", `{{aowow}}?spell=${spell}`);
$glyphs.append($a);
$glyphs.append("<br>");
}
$glyphs.parent().appendTo($spec);
}
$("#link-spec-0").on("click", () => { $("#link-spec-0").on("click", () => {
$("#talents-spec-0").removeClass("hidden"); $("#talents-spec-0").removeClass("hidden");
$("#talents-spec-1").addClass("hidden"); $("#talents-spec-1").addClass("hidden");
@ -232,4 +228,11 @@
if (location.hash === "#1") { if (location.hash === "#1") {
$("#link-spec-1").click(); $("#link-spec-1").click();
} }
$("<script>")
.attr("src", "{{aowow}}/static/widgets/power.js")
.appendTo("body");
}
main();
});
</script> </script>

View file

@ -71,6 +71,7 @@
</div> </div>
<script type="application/javascript"> <script type="application/javascript">
$(window).on("load", () => {
const $model = $("#model"); const $model = $("#model");
const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id"); const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
const $mountTemplate = $("#mount-template").detach().removeAttr("id"); const $mountTemplate = $("#mount-template").detach().removeAttr("id");
@ -413,4 +414,5 @@
windowWidth = newWidth; windowWidth = newWidth;
onResize(); onResize();
}, 500)); }, 500));
});
</script> </script>

View file

@ -59,6 +59,7 @@
</table> </table>
<script type="application/javascript"> <script type="application/javascript">
$(window).on("load", () => {
createGuildEmblem({{{ JSONstringify emblem }}}, $(".emblem-container .guild-emblem")[0]); createGuildEmblem({{{ JSONstringify emblem }}}, $(".emblem-container .guild-emblem")[0]);
dt = $("#members").DataTable({ dt = $("#members").DataTable({
@ -98,4 +99,5 @@
}, },
order: [[1, "asc"]], order: [[1, "asc"]],
}); });
});
</script> </script>

View file

@ -34,6 +34,7 @@
</table> </table>
<script type="application/javascript"> <script type="application/javascript">
$(window).on("load", () => {
let dt; let dt;
$("#select-realm").on("change", () => { $("#select-realm").on("change", () => {
@ -79,4 +80,5 @@
details: true, details: true,
}, },
}); });
});
</script> </script>