Add auto calculate on mount

Kolobok12309 · Mar 6, 2024 · 7cb4846 · 7cb4846
1 parent f9f35c9
commit 7cb4846
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/components/FontComparer/index.vue b/components/FontComparer/index.vue
@@ -35,7 +35,7 @@
       </span>
     </div>
 
-    <details>
+    <details class="mt-4">
       <summary class="cursor-pointer">Css <b>@font-face</b></summary>
 
       <FontFaceCssPreview
@@ -72,6 +72,11 @@ const { t } = useI18n({
 });
 
 const target = ref('Montserrat');
+let targetIsChanged = false;
+watch(target, () => {
+  targetIsChanged = true;
+});
+
 const src = ref('Arial');
 const assumption = ref(0);
 const text = ref(defaultText);
@@ -109,8 +114,24 @@ const onClickText = async () => {
 
   sizeAdjust.value = res.sizeAdjust;
   ascentOverride.value = res.lineHeightOpts;
-  console.log('res', res);
+  descentOverride.value = 0;
+  lineGapOverride.value = 0;
+  console.log(`res ${target.value}:${src.value}`, res);
 };
+onMounted(async () => {
+  // @ts-ignore
+  let fontFaces = [...(await document.fonts.ready)];
+  // Wait for loading default target
+  while (!fontFaces.find(({ family }) => target.value === family)) {
+    if (targetIsChanged) return;
+
+    await sleep(50);
+    // @ts-ignore
+    fontFaces = [...(await document.fonts.ready)];
+  }
+
+  await onClickText();
+});
 </script>
 
 <i18n lang="json">

diff --git a/pages/index.vue b/pages/index.vue
@@ -41,7 +41,7 @@
       </NuxtLink>
     </Blockquote>
 
-    <FontComparer />
+    <FontComparer class="mt-4" />
   </div>
 </template>