more marquee fixes: now only active on overflow

toast
Kit Kasune 3 years ago
parent 95c90a3d04
commit 159390018b
  1. 26
      scripts/dep/overflowing.js
  2. 10
      scripts/fileview/load/render.js
  3. 7
      styles/files.css
  4. 2
      styles/styles.css

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

@ -1,5 +1,7 @@
const loadHierarchy = require("../hierarchy"); const loadHierarchy = require("../hierarchy");
const isOverflowing = require('../../dep/overflowing');
module.exports = (dir) => { module.exports = (dir) => {
const refresh = require("../refresh"); const refresh = require("../refresh");
@ -31,15 +33,17 @@ module.exports = (dir) => {
cfc.appendChild(im); cfc.appendChild(im);
let cf = document.createElement('b'); let cf = document.createElement('b');
cf.className = 'file-name'; 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.classList.add('large-file-name');
cf.style.animationDuration = `${file.name.length / 2.5}s`; cf.style.animationDuration = `${file.name.length / 2.5}s`;
let lfnc = document.createElement('div'); let lfnc = document.createElement('div');
lfnc.className = 'large-file-name-container'; lfnc.className = 'large-file-name-container';
cfc.appendChild(lfnc); cfc.appendChild(lfnc);
lfnc.appendChild(cf); lfnc.appendChild(cf);
} else {cfc.appendChild(cf);} }
cf.innerHTML = file.name;
let isd = document.createElement('p'); let isd = document.createElement('p');
isd.className = 'file-type'; isd.className = 'file-type';
isd.innerHTML = file.type; isd.innerHTML = file.type;

@ -32,6 +32,8 @@
.file-name { .file-name {
color: white; color: white;
order: 0; order: 0;
overflow: visible;
white-space: nowrap;
} }
.file > * { .file > * {
@ -74,8 +76,8 @@
} }
@keyframes scroll-text { @keyframes scroll-text {
from {transform: translateX(35%);} from {transform: translateX(50%);}
to {transform: translateX(-100.5%);} to {transform: translateX(-105%);}
} }
.large-file-name { .large-file-name {
@ -86,6 +88,7 @@
margin: 0 0; margin: 0 0;
transform: translateX(0%); transform: translateX(0%);
animation-fill-mode: both; animation-fill-mode: both;
top: 4px;
} }
.large-file-name-container { .large-file-name-container {

@ -11,7 +11,7 @@ body {
animation-name: pullup; animation-name: pullup;
animation-duration: .5s; animation-duration: .5s;
animation-timing-function: ease-out; animation-timing-function: ease-out;
opacity: 0; animation-fill-mode: both;
} }
@keyframes pullup { @keyframes pullup {

Loading…
Cancel
Save