From 6d4bd317a8ed23e74c74b3135a26b4c97dba8890 Mon Sep 17 00:00:00 2001
From: Michael Thomas <michaelhthomas@outlook.com>
Date: Tue, 28 Sep 2021 21:39:41 -0400
Subject: [PATCH] Make lyrics automagically fit to size

---
 app/src/components/Lyrics.vue | 34 +++++++++++++++++++++++++++++++---
 app/src/helpers/FitText.js    | 17 +++++++++++++++++
 2 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 app/src/helpers/FitText.js

diff --git a/app/src/components/Lyrics.vue b/app/src/components/Lyrics.vue
index 6d63a58..9fba835 100644
--- a/app/src/components/Lyrics.vue
+++ b/app/src/components/Lyrics.vue
@@ -1,20 +1,48 @@
 <template>
-  <p class="lyrics" v-html="lyrics">}</p>
+  <p class="lyrics fit-text" v-html="lyrics"></p>
 </template>
 
 <script>
+import FitText from "@/helpers/FitText";
+let f;
 export default {
   props: [
     'lyrics'
-  ]
+  ],
+  mounted() {
+    f = new FitText(document.querySelector(".fit-text"), 4, 0.1);
+    f.fit();
+    window.addEventListener('resize', this.fit);
+  },
+  watch: {
+    lyrics: function () {
+      this.$nextTick(function () {
+        f.fit();
+      });
+    }
+  },
+  methods: {
+    fit: function () {
+      f.fit();
+    }
+  }
 }
 </script>
 
 <style>
 .lyrics {
-  font-size: 5em;
+  font-size: 4rem;
   font-weight: 800;
   text-align: center;
+  overflow: hidden;
   text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
 }
+.bible {
+  display: block;
+  /* font-size: 0.5em; */
+  /* line-height: 1.5em; */
+}
+.bible sup {
+  font-size: 0.5em;
+}
 </style>
\ No newline at end of file
diff --git a/app/src/helpers/FitText.js b/app/src/helpers/FitText.js
new file mode 100644
index 0000000..1a16919
--- /dev/null
+++ b/app/src/helpers/FitText.js
@@ -0,0 +1,17 @@
+export default class FitText {
+  constructor(el, defaultSize, increment) {
+    this.element = el;
+    this.defaultSize = defaultSize;
+    this.increment = increment;
+  }
+  fit() {
+    this.element.style.fontSize = this.defaultSize + "rem";
+    this.recalc();
+  }
+  recalc(shouldRecalc) {
+    if (shouldRecalc || this.element.clientHeight < this.element.scrollHeight) {
+      this.element.style.fontSize = (parseFloat(this.element.style.fontSize.replace(/[^0-9.]/g,'')) - this.increment) + "rem";
+      this.recalc();
+    }
+  }
+}
\ No newline at end of file