more marquee fixes: now only active on overflow

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}`;
+}

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;

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 {

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 {