diff --git a/app/app/src/components/RenderDocument.astro b/app/app/src/components/RenderDocument.astro index eab9c18..4d61427 100644 --- a/app/app/src/components/RenderDocument.astro +++ b/app/app/src/components/RenderDocument.astro @@ -1,5 +1,6 @@ --- import { i18n as i18nConfig } from '~/config' +import { site } from '~/site' import LocalesPicker from '~/components/LocalesPicker/LocalesPicker.astro' import logosrc from '~/assets/logo.png?url' @@ -20,7 +21,7 @@ function splitHash(hash: string) } const data = Astro.props.data || {} -const version = data.version || import.meta.env.GITHUB_SHA || 'dev' +const version = data.version || site.version || 'dev' const supportedLocales: string[] = data.supportedLocales || [i18nConfig.defaultLocale] const footerText = data.footer || null --- @@ -39,17 +40,21 @@ const footerText = data.footer || null
- + {site.version === 'dev' && ( + + )} - + {site.version === 'dev' && ( + + )}
@@ -153,18 +158,24 @@ const footerText = data.footer || null @apply border border-gray-700 rounded-lg; @apply cursor-pointer; - &:hover { + &:disabled { + @apply bg-gray-400; + @apply border-gray-500; + @apply cursor-not-allowed; + } + + &:not(:disabled):hover { @apply bg-gray-700; } - &:active { + &:not(:disabled):active { @apply bg-gray-800; } } } .content-controls { - .btn { + .btn:not(:disabled) { @apply bg-cyan-600; @apply border-cyan-700; @@ -627,20 +638,38 @@ document.querySelectorAll('[data-content-control="split"]').forEach((element) => { element.addEventListener('click', () => { + // Split document in pages splitDocument() }) }) -window.addEventListener('beforeprint', () => -{ - splitDocument() -}) - document.querySelectorAll('[data-content-control="print"]').forEach((element) => { - element.addEventListener('click', () => + element.addEventListener('click', async (event) => { + const target = event.currentTarget as HTMLElement + // Disable the print button to avoid multiple clicks + target.setAttribute('disabled', 'true') + // Split document in pages before printing + splitDocument() + // Wait for all images in all content wrappers to load + const images: HTMLImageElement[] = Array.from(document.querySelectorAll('.content-wrapper img')) + await Promise.all(images.map((img) => + { + if (img.complete) + { + return Promise.resolve() + } + return new Promise((resolve) => + { + img.addEventListener('load', () => resolve()) + img.addEventListener('error', () => resolve()) + }) + })) + // Print the document window.print() + // Re-enable the print button + target.removeAttribute('disabled') }) }) @@ -648,6 +677,7 @@ document.querySelectorAll('[data-content-control="reload"]').forEach((element) = { element.addEventListener('click', () => { + // Reload the page location.reload() }) })