maltejur/hsarch
maltejur/hsarch
1
0
Fork 0
Code Activity

remove skeleton

Browse source
This commit is contained in:
Malte Jürgens 2023-05-29 16:01:03 +02:00
parent 71ae67f164
commit 8c814187c8
Signed by: maltejur
GPG key ID: D29FBD5F93C0CFC3
4 changed files with 39 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/modules/ausgabeHertzblatt.ts
View file

@ -1,4 +1,3 @@
import { checkFile } from "./utils";
import json from "../../assets/data.json";
import Page from "./page";
@ -26,25 +25,11 @@ export default function AusgabeHertzblatt(params) {
<i class="fa fa-link"></i>Link
</a>`;
const skeleton = document.createElement("div");
skeleton.innerHTML = `
<a class="button-skeleton"><i class="fa fa-file-pdf-o"></i><span>PDF Anzeigen</span></a>
<a class="button-skeleton"><i class="fa fa-download"></i><span>Download</span></a>
`;
ret.innerHTML = pagehtml;
ret.appendChild(skeleton);
checkFile(`${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf`).then(
(exists) => {
if (exists) {
skeleton.remove();
ret.innerHTML +=
// prettier-ignore
`
<a class="button" href="#hertzblatt/${ausg.Ausgabe}/pdf">
pagehtml += `
<a class="button" href="#hertzblatt/${ausg.Ausgabe}/pdf">
<i class="fa fa-file-pdf-o"></i>PDF Anzeigen
</a>
<button>
</a>
<button>
<i class="fa fa-download"></i>Download
<div class="dropdown">
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf', '_self');">
@ -54,11 +39,9 @@ export default function AusgabeHertzblatt(params) {
<i class="fa fa-file-download"></i>Hohe Qualität
</a>
</div>
</button>
`;
}
}
);
</button>`;
ret.innerHTML = pagehtml;
return Page(ret);
}

40
src/modules/ausgabeHertzschlag.ts
View file

@ -1,4 +1,3 @@
import { checkFile } from "./utils";
import json from "../../assets/data.json";
import Page from "./page";
@ -28,39 +27,28 @@ export default function AusgabeHertzschlag(params) {
}
}
const skeleton = document.createElement("div");
skeleton.innerHTML = `
<a class="button-skeleton"><i class="fa fa-file-pdf-o"></i><span>PDF Anzeigen</span></a>
<a class="button-skeleton"><i class="fa fa-download"></i><span>Download</span></a>
`;
ret.innerHTML = pagehtml;
ret.appendChild(skeleton);
checkFile(`${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf`).then(
(exists) => {
if (exists) {
skeleton.remove();
ret.innerHTML +=
// prettier-ignore
`
<a class="button" href="#hertzschlag/${ausg["Ausgabe"]}/pdf">
pagehtml += `
<a class="button" href="#hertzschlag/${ausg["Ausgabe"]}/pdf">
<i class="fa fa-file-pdf-o"></i>PDF Anzeigen
</a>
<button>
</a>
<button>
<i class="fa fa-download"></i>Download
<div class="dropdown">
<a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/compressed/${ausg["Ausgabe"]}.pdf">
<a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/compressed/${
ausg["Ausgabe"]
}.pdf">
<i class="fa fa-file"></i>Niedrige Qualität
</a>
<a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf">
<a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/${
ausg["Ausgabe"]
}.pdf">
<i class="fa fa-file"></i>Hohe Qualität
</a>
</div>
</button>
`;
}
}
);
</button>
`;
ret.innerHTML = pagehtml;
return Page(ret);
}

10
src/modules/utils.ts
View file

@ -1,13 +1,3 @@
export function checkFile(url) {
return new Promise((resolve) => {
fetch(url, {
method: "HEAD",
})
.catch(() => resolve(false))
.then(() => resolve(true));
});
}
export function downloadFile(sUrl: string) {
var link = document.createElement("a");
link.href = sUrl;

35
src/style.css
View file

@ -186,8 +186,7 @@ body {
}
button,
.button,
.button-skeleton {
.button {
border: none;
border-radius: 8px;
text-align: center;
@ -208,43 +207,13 @@ button,
transition: background-color 0.2s ease;
}
.button-skeleton {
background: linear-gradient(
90deg,
rgb(250, 250, 250) 0%,
rgb(230, 230, 230) 50%,
rgb(250, 250, 250) 100%
)
rgb(250, 250, 250);
background-repeat: no-repeat;
animation: skeleton-loading 1s infinite;
}
.button-skeleton > span,
.button-skeleton > i {
color: transparent;
user-select: none;
background-color: rgb(230, 230, 230);
}
@keyframes skeleton-loading {
from {
background-position: -200px 0;
}
to {
background-position: 200px 0;
}
}
button:hover,
.button:hover {
background-color: darkred;
}
button .fas,
.button .fas,
.button-skeleton .fas {
.button .fas {
margin-right: 0.6em;
}