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> <div>
<progress value="0" max="100"></progress> <progress value="0" max="100"></progress>
<span class="percentage"><%= t(locale, "loading") %></span> <span class="percentage"><%= t(locale, "loading") %></span>

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

@ -21,7 +21,7 @@
</head> </head>
<body> <body>
<%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %> <%= 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> <script src="/js/loaders/surah-index-loader.js?v=<%= commit %>"></script>
</body> </body>
</html> </html>

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

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

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

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

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

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