From 159390018b936867829d6a45708cdb21882e103e Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Wed, 1 Dec 2021 18:55:43 -0700
Subject: [PATCH] more marquee fixes: now only active on overflow

---
 scripts/dep/overflowing.js      | 26 ++++++++++++++++++++++++++
 scripts/fileview/load/render.js | 10 +++++++---
 styles/files.css                |  7 +++++--
 styles/styles.css               |  2 +-
 4 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 scripts/dep/overflowing.js

diff --git a/scripts/dep/overflowing.js b/scripts/dep/overflowing.js
new file mode 100644
index 0000000..2d6362a
--- /dev/null
+++ b/scripts/dep/overflowing.js
@@ -0,0 +1,26 @@
+// found this hoe on stack overflow
+
+module.exports = function isOverflowing(el) {
+    return getTextWidth(el.innerHTML, getCanvasFontSize(el)) > el.clientWidth - 30;
+};
+
+function getTextWidth(text, font) {
+    // re-use canvas object for better performance
+    const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
+    const context = canvas.getContext("2d");
+    context.font = font;
+    const metrics = context.measureText(text);
+    return metrics.width;
+}
+
+function getCssStyle(element, prop) {
+    return window.getComputedStyle(element, null).getPropertyValue(prop);
+}
+
+function getCanvasFontSize(el = document.body) {
+    const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
+    const fontSize = getCssStyle(el, 'font-size') || '16px';
+    const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
+
+    return `${fontWeight} ${fontSize} ${fontFamily}`;
+}
\ No newline at end of file
diff --git a/scripts/fileview/load/render.js b/scripts/fileview/load/render.js
index 40e07b1..5d845a1 100644
--- a/scripts/fileview/load/render.js
+++ b/scripts/fileview/load/render.js
@@ -1,5 +1,7 @@
 const loadHierarchy = require("../hierarchy");
 
+const isOverflowing = require('../../dep/overflowing');
+
 module.exports = (dir) => {
     const refresh = require("../refresh");
 
@@ -31,15 +33,17 @@ module.exports = (dir) => {
         cfc.appendChild(im);
         let cf = document.createElement('b');
         cf.className = 'file-name';
-        if (file.name.length > 25) {
+        cf.innerHTML = file.name;
+        cfc.appendChild(cf);
+        if (isOverflowing(cf)) {
+            cfc.removeChild(cf);
             cf.classList.add('large-file-name');
             cf.style.animationDuration = `${file.name.length / 2.5}s`;
             let lfnc = document.createElement('div');
             lfnc.className = 'large-file-name-container';
             cfc.appendChild(lfnc);
             lfnc.appendChild(cf);
-        } else {cfc.appendChild(cf);}
-        cf.innerHTML = file.name;
+        }
         let isd = document.createElement('p');
         isd.className = 'file-type';
         isd.innerHTML = file.type;
diff --git a/styles/files.css b/styles/files.css
index 1a0bec3..d59acf0 100644
--- a/styles/files.css
+++ b/styles/files.css
@@ -32,6 +32,8 @@
 .file-name {
     color: white;
     order: 0;
+    overflow: visible;
+    white-space: nowrap;
 }
 
 .file > * {
@@ -74,8 +76,8 @@
 }
 
 @keyframes scroll-text {
-    from {transform: translateX(35%);}
-    to {transform: translateX(-100.5%);}
+    from {transform: translateX(50%);}
+    to {transform: translateX(-105%);}
 }
 
 .large-file-name {
@@ -86,6 +88,7 @@
     margin: 0 0;
     transform: translateX(0%);
     animation-fill-mode: both;
+    top: 4px;
 }
 
 .large-file-name-container {
diff --git a/styles/styles.css b/styles/styles.css
index 6cabd9c..bd8f0d7 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -11,7 +11,7 @@ body {
     animation-name: pullup;
     animation-duration: .5s;
     animation-timing-function: ease-out;
-    opacity: 0;
+    animation-fill-mode: both;
 }
 
 @keyframes pullup {