Skip to content

[WIP] fix scaling content bug #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
prashant-gurung899 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[WIP] fix scaling content bug #138

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 50 additions & 38 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -443,66 +443,78 @@ function adjustFontSize() {
return element.offsetHeight + marginTop + marginBottom + paddingTop + paddingBottom
}

const contentContainer = currentSlide.querySelector('.content-container') as HTMLElement | null
const contentWrapper = currentSlide.querySelector('.content-wrapper') as HTMLElement
const content = currentSlide.querySelector('.content') as HTMLElement

if (!contentWrapper || !content) return

// Reset any previous scaling from prior runs
if (contentContainer) {
contentContainer.style.fontSize = ''
}
;(Array.from(content.children) as HTMLElement[]).forEach((el) => {
el.style.fontSize = ''
el.style.marginTop = ''
el.style.marginBottom = ''
})

const contentWrapperHeight = contentWrapper.offsetHeight
let totalHeight = getTotalHeightOfChildren(content)

// set minimum font size from where the image starts to get reduced as well
// this is to prevent the font size to get too small and becomes hard to read
const fontSizeToStartReducingImage = 12
let fontSize = parseFloat(getComputedStyle(content).fontSize)

while (totalHeight > contentWrapperHeight) {
if (totalHeight > contentWrapperHeight) {
const scaleFactor = contentWrapperHeight / totalHeight
fontSize = Math.floor(scaleFactor * fontSize)

const wrapperElements = Array.from(content.children) as HTMLElement[]
wrapperElements.forEach((wrapperElement) => {
wrapperElement.style.fontSize = `${fontSize}px`
const style = getComputedStyle(wrapperElement)
const marginTop = Math.floor(parseFloat(style.marginTop) * scaleFactor)
const marginBottom = Math.floor(parseFloat(style.marginBottom) * scaleFactor)
wrapperElement.style.marginTop = `${marginTop}px`
wrapperElement.style.marginBottom = `${marginBottom}px`
})

// reduce image size if font size gets smaller than minimum font size
const images = content.querySelectorAll(
'.image-container .image-wrapper img'
) as NodeListOf<HTMLImageElement>
if (fontSize <= fontSizeToStartReducingImage && images.length > 0) {
images.forEach((image) => {
const currentWidth = image.offsetWidth
const currentHeight = image.offsetHeight
image.style.width = `${Math.floor(currentWidth * scaleFactor)}px`
image.style.height = `${Math.floor(currentHeight * scaleFactor)}px`
if (contentContainer) {
contentContainer.style.fontSize = `${scaleFactor}em`

const effectiveFontSize =
scaleFactor * parseFloat(getComputedStyle(contentContainer).fontSize)
if (effectiveFontSize <= fontSizeToStartReducingImage) {
const images = content.querySelectorAll(
'.image-container .image-wrapper img'
) as NodeListOf<HTMLImageElement>
images.forEach((image) => {
image.style.width = `${Math.floor(image.offsetWidth * scaleFactor)}px`
image.style.height = `${Math.floor(image.offsetHeight * scaleFactor)}px`
})
}
} else {
let fontSize = Math.floor(scaleFactor * parseFloat(getComputedStyle(content).fontSize))
const wrapperElements = Array.from(content.children) as HTMLElement[]
wrapperElements.forEach((el) => {
el.style.fontSize = `${fontSize}px`
const style = getComputedStyle(el)
el.style.marginTop = `${Math.floor(parseFloat(style.marginTop) * scaleFactor)}px`
el.style.marginBottom = `${Math.floor(parseFloat(style.marginBottom) * scaleFactor)}px`
})

const images = content.querySelectorAll(
'.image-container .image-wrapper img'
) as NodeListOf<HTMLImageElement>
if (fontSize <= fontSizeToStartReducingImage && images.length > 0) {
images.forEach((image) => {
image.style.width = `${Math.floor(image.offsetWidth * scaleFactor)}px`
image.style.height = `${Math.floor(image.offsetHeight * scaleFactor)}px`
})
}
}
totalHeight = getTotalHeightOfChildren(content)
}

if (currentSlide.classList.contains('about-us')) {
const content = currentSlide.querySelector('.content') as HTMLElement
const infoSection = currentSlide.querySelector('.info-section') as HTMLElement
const contentWidth = content.offsetWidth
let infoSectionWidth = infoSection.scrollWidth
while (infoSectionWidth > contentWidth) {
const infoSectionWidth = infoSection.scrollWidth
if (infoSectionWidth > contentWidth) {
const scaleFactor = contentWidth / infoSectionWidth
fontSize = Math.floor(scaleFactor * fontSize)

const infoBoxes = infoSection.querySelectorAll('.info-box') as NodeListOf<HTMLElement>
infoBoxes.forEach((box) => {
box.style.fontSize = `${fontSize}px`
const style = getComputedStyle(box)
const padding = parseFloat(style.padding) * scaleFactor
box.style.padding = `${Math.max(2, Math.floor(padding))}px`
box.style.margin = `${Math.max(2, Math.floor(parseFloat(style.margin) * scaleFactor))}px`
})
infoSectionWidth = infoSection.scrollWidth
if (contentContainer) {
const currentEm = parseFloat(contentContainer.style.fontSize) || 1
contentContainer.style.fontSize = `${currentEm * scaleFactor}em`
}
}
}
}
Expand Down
Loading