ReflectsLight/al-quran.reflectslight.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revisit the loader implementation

Browse source
This commit is contained in:
0x1eef 2024-10-02 01:09:49 -03:00
parent 355a4c75b5
commit 84b19edf04
5 changed files with 18 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/html/_postman.html.erb
View file

@ -1,4 +1,4 @@
<div class="postman loader" dir="<%= dir %>">
<div class="postman main" dir="<%= dir %>">
<div>
<progress value="0" max="100"></progress>
<span class="percentage"><%= t(locale, "loading") %></span>

2
src/html/main/surah-index.html.erb
View file

@ -21,7 +21,7 @@
</head>
<body>
<%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %>
<div class="root h-full"></div>
<div class="app mount root h-full"></div>
<script src="/js/loaders/surah-index-loader.js?v=<%= commit %>"></script>
</body>
</html>

2
src/html/main/surah-stream.html.erb
View file

@ -21,7 +21,7 @@
</head>
<body>
<%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %>
<div class="root"
<div class="app mount root"
data-surah-id="<%= context.surah.id %>"
data-audio-base-url="<%= audio_base_url %>">
</div>

17
src/js/loaders/SurahIndexLoader.ts
View file

@ -3,10 +3,8 @@ import { formatNumber } from "~/lib/t";
(function () {
const docel = document.documentElement;
const loader: HTMLElement = docel.querySelector(".postman.loader")!;
const style: HTMLStyleElement = docel.querySelector(".css.postman")!;
const progressBar: HTMLProgressElement = loader.querySelector("progress")!;
const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!;
const main: HTMLElement = docel.querySelector(".postman.main")!;
const css: HTMLStyleElement = docel.querySelector(".postman.css")!;
const rev = docel
.querySelector("meta[name='revision']")!
.getAttribute("content")!;
@ -26,16 +24,15 @@ import { formatNumber } from "~/lib/t";
item.script(`/js/main/surah-index.js?v=${rev}`, { id: "1" }),
...fonts,
item.progress((percent: number) => {
progressBar.value = percent;
progressNumber.innerText = formatNumber(
docel.lang,
Number(percent.toFixed(0)),
);
const bar: HTMLProgressElement = main.querySelector("progress")!;
const num: HTMLSpanElement = main.querySelector(".percentage")!;
bar.value = percent;
num.innerText = formatNumber(docel.lang, Number(percent.toFixed(0)));
}),
)
.fetch()
.then((pkg) => {
[loader, style].forEach((el) => el.remove());
[main, css].forEach((el) => el.remove());
pkg.fonts.forEach((f) => document.fonts.add(f));
pkg.css.forEach((s) => document.head.appendChild(s));
pkg.scripts

19
src/js/loaders/SurahStreamLoader.ts
View file

@ -3,11 +3,9 @@ import { formatNumber } from "~/lib/t";
(function () {
const docel = document.documentElement;
const loader = docel.querySelector(".postman.loader")!;
const style = docel.querySelector(".css.postman")!;
const progressBar = loader.querySelector("progress")!;
const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!;
const { surahId } = document.querySelector<HTMLElement>(".root")!.dataset;
const main = docel.querySelector(".postman.main")!;
const css = docel.querySelector(".postman.css")!;
const { surahId } = docel.querySelector<HTMLElement>(".app.mount")!.dataset;
const rev = docel
.querySelector("meta[name='revision']")!
.getAttribute("content")!;
@ -33,16 +31,15 @@ import { formatNumber } from "~/lib/t";
item.json(`/json/durations/${surahId}.json?v=${rev}`, { className: "json durations" }),
/* eslint-enable */
item.progress((percent: number) => {
progressBar.value = percent;
progressNumber.innerText = formatNumber(
docel.lang,
Number(percent.toFixed(0)),
);
const bar = main.querySelector("progress")!;
const num: HTMLSpanElement = main.querySelector(".percentage")!;
bar.value = percent;
num.innerText = formatNumber(docel.lang, Number(percent.toFixed(0)));
}),
)
.fetch()
.then((pkg) => {
[loader, style].forEach((el) => el.remove());
[main, css].forEach((el) => el.remove());
pkg.fonts.forEach((f) => document.fonts.add(f));
pkg.css.forEach((s) => document.head.appendChild(s));
pkg.json.forEach((o) => document.body.appendChild(o));