Только для мобильныхПример
Хочу сделать так, чтобы текст в колонках помещался в одну строку. Для этого использую
ngFitText. Проблема в том, что если в одной колонке текст короткий, например 54, то шрифт будет больше чем в других колонках. Нужно чтобы шрифт был одного размера во всех колонках. Поэтому сделал директиву, которая считывает размер шрифта во всех колонках, и ставит на всех самый меньший из них.
.directive('equalFontSize', function($timeout, $window) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
function run(noDebounceFlag) {
let elems = document.querySelectorAll('[equal-font-size]');
let font;
let debounce = 0;
if (!noDebounceFlag && attrs.hasOwnProperty('fittext')) {
debounce += 1100;
}
removeOldCss(elems);
$timeout(() => {
if (attrs.equalFontSize === 'min') {
font = getFontMin(elems);
}
setFont(elems, font);
}, debounce);
}
function getFontMin(elems) {
let fontMin = 1000;
elems.forEach(element => {
let style = window.getComputedStyle(element);
let fontSize = parseInt(style.getPropertyValue('font-size'));
if (fontSize < fontMin) {
fontMin = fontSize;
}
});
return fontMin;
}
function removeOldCss(elems) {
elems.forEach(element => {
let classList = element.className.split(' ');
classList.forEach(cssClass => {
if (cssClass.includes("-fs-px")) {
angular.element(element).removeClass(cssClass);
}
});
});
}
function setFont(elems, font) {
let fontElem = document.querySelectorAll('#font')[0];
angular.element(fontElem).text(font);
elems.forEach(element => {
angular.element(element).addClass(`-fs-px-${font}`);
});
}
run();
window.addEventListener('resize', () => {
run(true);
});
}
};
})
Почему используются классы вместо inline? Ответ: на мобильных скроллинг триггерит resize и поэтому ngFitText каждый раз будет пересчитывать размер шрифта. Поскольку наш класс перебивает инлайн стили, то скачков в размере шрифта не будет видно. В тестовом примере этого нету, но в реальном примере моя директива считывает шрифт только если изменился режим из портретного в альбомный или наоборот, но не в этом суть.
Проблема в том, что при resize ngFitText работает нестабильно и ставит часто минимальный размер шрифта. Не могу понять почему так