30 lines
1.8 KiB
JavaScript
30 lines
1.8 KiB
JavaScript
|
var header = document.getElementById("site-header").getElementsByTagName("header")[0];
|
||
|
|
var title = document.getElementById("site-title-container");
|
||
|
|
var thumbnail = document.getElementById("site-thumbnail");
|
||
|
|
// Make constant because it is 0 when hidden
|
||
|
|
var thumbnailTimeout;
|
||
|
|
function showHideThumbnail() {
|
||
|
|
if (!thumbnailTimeout) {
|
||
|
|
thumbnailTimeout = setTimeout(function() {
|
||
|
|
thumbnailTimeout = null;
|
||
|
|
const THUMB_WIDTH = parseInt(thumbnail.getAttribute("data-width")) + parseInt((window.getComputedStyle(thumbnail)).getPropertyValue("padding-right"));
|
||
|
|
const HEADER_PADDING = parseInt(window.getComputedStyle(header).getPropertyValue("padding-right"), 10) + parseInt(window.getComputedStyle(header).getPropertyValue("padding-left"), 10);
|
||
|
|
const TITLE_WIDTH = parseInt(window.getComputedStyle(title).getPropertyValue("margin-left"), 10) + parseInt(window.getComputedStyle(title).getPropertyValue("margin-right"), 10) + parseInt(window.getComputedStyle(title).getPropertyValue("padding-left"), 10) + parseInt(window.getComputedStyle(title).getPropertyValue("padding-right"), 10);
|
||
|
|
contentWidth = THUMB_WIDTH + HEADER_PADDING + TITLE_WIDTH + title.scrollWidth
|
||
|
|
if (contentWidth > header.scrollWidth) {
|
||
|
|
thumbnail.classList.add("hide");
|
||
|
|
header.classList.add("small-text-center");
|
||
|
|
header.classList.add("align-center")
|
||
|
|
header.classList.remove("small-text-left");
|
||
|
|
} else {
|
||
|
|
header.classList.add("small-text-left");
|
||
|
|
header.classList.remove("small-text-center");
|
||
|
|
header.classList.remove("align-center");
|
||
|
|
thumbnail.classList.remove("hide");
|
||
|
|
}
|
||
|
|
}, 70);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
window.addEventListener("load", showHideThumbnail);
|
||
|
|
window.addEventListener("resize", showHideThumbnail);
|