feat: add website root path settings (#1)

* feat: add website root path settings
* fix: disable cloudflare rocket-loader for iframe-resizer
This commit is contained in:
Axel Cocat 2022-03-16 23:39:45 +01:00 committed by GitHub
parent 1b7e975080
commit b8de1cbc8b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 86 additions and 60 deletions

View file

@ -1,4 +1,13 @@
<link rel="stylesheet" type="text/css" href="/css/character-achievements.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-achievements.css">
<style>
.achievement .points.no-points {
background-image: url("{{websiteRoot}}/img/UI-Achievement-Shields-NoPoints.png");
}
.achievement .points {
background-image: url("{{websiteRoot}}/img/UI-Achievement-Shields.png");
}
</style>
{{> icons }}
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
@ -8,7 +17,7 @@
<div class="column has-text-centered title is-size-3">
<span>Achievement Points:</span>
<span id="total-points"></span>
<img id="total-points-icon" src="/img/UI-Achievement-TinyShield.png">
<img id="total-points-icon" src="{{websiteRoot}}/img/UI-Achievement-TinyShield.png">
</div>
</div>
<br class="is-hidden-touch">
@ -205,7 +214,7 @@
$totalRow.prependTo($("#progress-bars")); // Move the total bar to the top
}
$.getJSON(`/character/{{realm}}/{{guid}}/achievements/data`, (data) => {
$.getJSON(`{{websiteRoot}}/character/{{realm}}/{{guid}}/achievements/data`, (data) => {
achievementsData = data;
const $summaryLink = $("<a>")

View file

@ -1,4 +1,4 @@
<link rel="stylesheet" type="text/css" href="/css/character-pvp.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-pvp.css">
{{> emblems}}
{{> character-header }}
@ -6,9 +6,9 @@
<div class="columns is-multiline">
<div class="column has-text-centered is-size-5 is-full-touch is-one-quarter-desktop">
{{#eq faction 1}}
<img class="faction" src="/img/PlusManz-Alliance.png">
<img class="faction" src="{{websiteRoot}}/img/PlusManz-Alliance.png">
{{else}}
<img class="faction" src="/img/PlusManz-Horde.png">
<img class="faction" src="{{websiteRoot}}/img/PlusManz-Horde.png">
{{/eq}}
<div>Total Kills: {{kills.total}}</div>

View file

@ -1,4 +1,4 @@
<link rel="stylesheet" type="text/css" href="/css/character-talents.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-talents.css">
{{> icons }}
<script type="application/javascript">
const aowow_tooltips = { "renamelinks": true, };

View file

@ -1,7 +1,7 @@
<link rel="stylesheet" type="text/css" href="/css/character.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character.css">
{{> icons }}
<script type="application/javascript" src="/js/viewer.min.js"></script>
<script type="application/javascript" src="{{websiteRoot}}/js/viewer.min.js"></script>
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
{{> character-header }}
@ -139,7 +139,7 @@
$item
.data("icon", icon)
.find(".inventory-slot")
.css("background-image", `url("/img/inventory-slot/${invSlot}.png")`);
.css("background-image", `url("{{websiteRoot}}/img/inventory-slot/${invSlot}.png")`);
if (item !== undefined) {
$item.data("item", item);
$item.find("a").attr("href", `{{aowow}}/?item=${item}`);
@ -209,7 +209,7 @@
$("#mounts-container").hide();
} else {
const $dismount = $mountTemplate.clone();
$dismount.find(".icon").css("background-image", `url("/img/UI-GearManager-LeaveItem.png")`);
$dismount.find(".icon").css("background-image", `url("{{websiteRoot}}/img/UI-GearManager-LeaveItem.png")`);
$dismount.find("a")
.on("click", () => {
setMount(0);
@ -235,7 +235,7 @@
const characterModel = {
type: ZamModelViewer.WOW,
contentPath: "/data/",
contentPath: "{{websiteRoot}}/data/",
background: "background.png",
container: $model,
hd: true,

View file

@ -60,7 +60,6 @@
}
.achievement .points {
background-image: url("/img/UI-Achievement-Shields.png");
background-repeat: no-repeat;
width: 64px;
height: 64px;
@ -87,10 +86,6 @@
transform: translateX(-50%);
}
.achievement .points.no-points {
background-image: url("/img/UI-Achievement-Shields-NoPoints.png");
}
.achievement .points.no-points .value {
visibility: hidden;
}

View file

@ -21,10 +21,6 @@
margin-right: 4px;
}
.guild-emblem {
background: url("/img/guild-emblems/circle.png") no-repeat center;
}
#members_processing {
height: 70px;
}

View file

@ -9,7 +9,7 @@
</p>
<br>
<a class="button is-info" href="/">Back to Armory</a>
<a class="button is-info" href="{{websiteRoot}}/">Back to Armory</a>
<a class="button is-info" href="{{websiteUrl}}" target="_parent">{{websiteName}} Homepage</a>
</div>
</div>

View file

@ -1,8 +1,13 @@
<link rel="stylesheet" type="text/css" href="/css/guild.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/guild.css">
<style>
.guild-emblem {
background: url("{{websiteRoot}}/img/guild-emblems/circle.png") no-repeat center;
}
</style>
{{> datatables}}
{{> emblems}}
<a href="/">Back to Armory</a>
<a href="{{websiteRoot}}/">Back to Armory</a>
<br><br>
<div id="guild-header">
@ -17,19 +22,19 @@
<div class="char-name title is-size-3">&lt;{{name}}&gt;</div>
<div class="is-size-5">
<div>
Guild Master: <a href="/character/{{realm}}/{{leader}}">{{leader}}</a>
Guild Master: <a href="{{websiteRoot}}/character/{{realm}}/{{leader}}">{{leader}}</a>
</div>
<div>
{{membersCount}} members
</div>
{{#eq faction 1}}
<div class="faction">
<img class="logo" src="/img/PlusManz-Alliance.png">
<img class="logo" src="{{websiteRoot}}/img/PlusManz-Alliance.png">
<span>Alliance</span>
</div>
{{else}}
<div class="faction">
<img class="logo" src="/img/PlusManz-Horde.png">
<img class="logo" src="{{websiteRoot}}/img/PlusManz-Horde.png">
<span>Horde</span>
</div>
{{/eq}}
@ -54,19 +59,19 @@
</table>
<script type="application/javascript">
createGuildEmblem({{{JSONstringify emblem}}}, $(".emblem-container .guild-emblem")[0]);
createGuildEmblem({{{ JSONstringify emblem }}}, $(".emblem-container .guild-emblem")[0]);
dt = $("#members").DataTable({
processing: true,
serverSide: true,
searchDelay: 800,
ajax: {
url: `/guild/{{realm}}/{{name}}/members`,
url: `{{websiteRoot}}/guild/{{realm}}/{{name}}/members`,
},
columnDefs: [
{
targets: 0,
render: (name) => `<a href="/character/{{realm}}/${name}">${name}</a>`,
render: (name) => `<a href="{{websiteRoot}}/character/{{realm}}/${name}">${name}</a>`,
},
{
targets: 1,

View file

@ -1,4 +1,4 @@
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/index.css">
{{> datatables}}
<h1 class="title is-size-1">Armory</h1>
@ -45,7 +45,7 @@
serverSide: true,
searchDelay: 800,
ajax: {
url: `/search`,
url: `{{websiteRoot}}/search`,
data: d => {
d.realm = $("#select-realm").val();
},
@ -53,11 +53,11 @@
columnDefs: [
{
targets: 0,
render: (name, type, row, meta) => `<a href="/character/${meta.settings.json.realm}/${name}">${name}</a>`,
render: (name, type, row, meta) => `<a href="{{websiteRoot}}/character/${meta.settings.json.realm}/${name}">${name}</a>`,
},
{
targets: 1,
render: (guild, type, row, meta) => guild === null ? "" : `<a href="/guild/${meta.settings.json.realm}/${guild}">${guild}</a>`,
render: (guild, type, row, meta) => guild === null ? "" : `<a href="{{websiteRoot}}/guild/${meta.settings.json.realm}/${guild}">${guild}</a>`,
},
{
searchable: false,

View file

@ -16,7 +16,7 @@ function createGuildEmblem(emblem, el) {
const canvas = $emblem.find("canvas")[0];
const ctx = canvas.getContext("2d");
const imgUrl = (type, section, value, value2) => `/img/guild-emblems/${type}_${value}${value2 ? ("_" + value2) : ""}_T${section}_U.PNG`;
const imgUrl = (type, section, value, value2) => `${handlebarsData.websiteRoot}/img/guild-emblems/${type}_${value}${value2 ? ("_" + value2) : ""}_T${section}_U.PNG`;
const $images = $("<div>").addClass("images").appendTo($emblem);
const bgUpper = $("<img>").attr("src", imgUrl("Background", "U", emblem.background)).appendTo($images)[0];
@ -64,7 +64,7 @@ function createArenaEmblem(teamSize, emblem, el) {
const canvas = $emblem.find("canvas")[0];
const ctx = canvas.getContext("2d");
const imgUrl = (teamSize, type, value) => `/img/arena-banners/PVP-Banner${teamSize ? ("-" + teamSize) : ""}${type ? ("-" + type) : ""}${value ? ("-" + value) : ""}.PNG`;
const imgUrl = (teamSize, type, value) => `${handlebarsData.websiteRoot}/img/arena-banners/PVP-Banner${teamSize ? ("-" + teamSize) : ""}${type ? ("-" + type) : ""}${value ? ("-" + value) : ""}.PNG`;
const $images = $("<div>").addClass("images").appendTo($emblem);
const banner = $("<img>").attr("src", imgUrl(teamSize)).appendTo($images)[0];

View file

@ -1,3 +1,3 @@
window.parent.postMessage({
url: window.location.pathname,
url: window.location.pathname.replace(handlebarsData.websiteRoot, ""),
}, "*");

View file

@ -6,22 +6,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{title}}</title>
<link rel="stylesheet" type="text/css" href="/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/css/armory.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/armory.css">
</head>
<body>
<script type="application/javascript">
const handlebarsData = {{{JSONstringify locals}}};
</script>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{{#if iframeMode.enabled}}
<script type="application/javascript">
if (window === window.parent) {
// If not embedded, redirect to the main website with the iframe in it
window.location.href = `{{iframeMode.url}}/?${window.location.pathname.trim().replace(/^\//, "")}`;
window.location.href = `{{iframeMode.url}}/?${window.location.pathname.trim().replace(handlebarsData.websiteRoot, "").replace(/^\//, "")}`;
}
</script>
<script type="application/javascript" src="/js/sync-url.js"></script>
<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.min.js"></script>
<script type="application/javascript" src="{{websiteRoot}}/js/sync-url.js"></script>
<script type="application/javascript" data-cfasync="false" src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.min.js"></script>
<script type="application/javascript">
$(window).on("load", () => {
window.parent.postMessage("contentLoaded", "*");
});
</script>
{{/if}}
<script type="application/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="section">
{{{ body }}}

View file

@ -1,16 +1,16 @@
<a href="/">Back to Armory</a>
<a href="{{websiteRoot}}/">Back to Armory</a>
<br><br>
<a href="/character/{{realm}}/{{name}}">Character</a>&ensp;
<a href="/character/{{realm}}/{{name}}/talents">Talents</a>&ensp;
<a href="/character/{{realm}}/{{name}}/achievements">Achievements</a>
<a href="/character/{{realm}}/{{name}}/pvp">PvP</a>
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}">Character</a>&ensp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a>&ensp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/achievements">Achievements</a>
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/pvp">PvP</a>
<br>
<br>
<div class="char-name title is-size-3">{{name}}</div>
{{#if guild}}
<a class="guild-name title is-size-4" href="/guild/{{realm}}/{{guild}}">&lt;{{guild}}&gt;</a>
<a class="guild-name title is-size-4" href="{{websiteRoot}}/guild/{{realm}}/{{guild}}">&lt;{{guild}}&gt;</a>
{{/if}}
<div class="is-size-5">
Level <span class="char-level">{{level}}</span>

View file

@ -1,6 +1,6 @@
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/css/datatables.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/datatables.css">
<script type="application/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>

View file

@ -1,2 +1,2 @@
<link rel="stylesheet" type="text/css" href="/css/emblems.css">
<script type="application/javascript" src="/js/emblems.js"></script>
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/emblems.css">
<script type="application/javascript" src="{{websiteRoot}}/js/emblems.js"></script>

View file

@ -1,4 +1,4 @@
<link rel="stylesheet" type="text/css" href="/css/icons.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/icons.css">
<style>
.iconlarge .border {
background-image: url("{{aowow}}/static/images/Icon/large/border/default.png");