From 01e730c68a79862112798d4816625ddcd00350d9 Mon Sep 17 00:00:00 2001 From: Bobby Date: Fri, 18 Jul 2025 12:24:06 +0530 Subject: refactor ratings, minify content, update single post page --- static/scripts/resize.js | 80 ++++++++++++++++++++++++++++++++++++++++++++++++ static/scripts/upload.js | 5 +-- 2 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 static/scripts/resize.js (limited to 'static/scripts') diff --git a/static/scripts/resize.js b/static/scripts/resize.js new file mode 100644 index 0000000..95b75c1 --- /dev/null +++ b/static/scripts/resize.js @@ -0,0 +1,80 @@ +function getAvailableHeight() { + const navbar = document.querySelector('nav') + const postBar = document.querySelector('.single-post-bar') + const navbarHeight = navbar ? navbar.offsetHeight : 0 + const postBarHeight = postBar ? postBar.offsetHeight : 0 + const padding = 40 + return window.innerHeight - navbarHeight - postBarHeight - padding +} + +function updateSizeSelection(selectedSize) { + document.querySelectorAll('.single-post-bar-size-actions a').forEach((link) => { + link.classList.remove('size-selected') + if (link.onclick && link.onclick.toString().includes(selectedSize)) { + link.classList.add('size-selected') + } + }) +} + +let currentSize = 'fitBoth' + +function handleResize() { + if (currentSize === 'fitHeight' || currentSize === 'fitBoth') { + switchSize(currentSize) + } +} + +function switchSize(size) { + currentSize = size + const img = document.getElementById('post-image') + const container = document.querySelector('.post-image-container') + const sizeData = sizes[size] + + img.className = '' + img.style.width = '' + img.style.height = '' + img.style.maxWidth = '' + img.style.maxHeight = '' + + if (size === 'fitHeight') { + const availableHeight = getAvailableHeight() + img.style.maxHeight = availableHeight + 'px' + img.style.width = 'auto' + img.style.maxWidth = 'none' + img.classList.add('fit-height') + } else if (size === 'fitWidth') { + img.style.width = '100%' + img.style.height = 'auto' + img.style.maxWidth = '100%' + img.classList.add('fit-width') + } else if (size === 'fitBoth') { + const availableHeight = getAvailableHeight() + const imageWidth = parseInt(sizeData.width || img.naturalWidth) + const imageHeight = parseInt(sizeData.height || img.naturalHeight) + + if (imageHeight > imageWidth) { + img.style.maxHeight = availableHeight + 'px' + img.style.width = 'auto' + img.style.maxWidth = 'none' + } else { + img.style.width = '100%' + img.style.height = 'auto' + img.style.maxWidth = '100%' + } + img.classList.add('fit-both') + } else { + img.style.maxWidth = 'none' + if (sizeData.width) img.style.width = sizeData.width + 'px' + if (sizeData.height) img.style.height = sizeData.height + 'px' + img.classList.add('fixed-size') + } + + img.src = sizeData.src + updateSizeSelection(size) +} + +window.addEventListener('resize', handleResize) + +window.addEventListener('load', function () { + switchSize(currentSize) +}) \ No newline at end of file diff --git a/static/scripts/upload.js b/static/scripts/upload.js index fe4c4ef..0a6cc17 100644 --- a/static/scripts/upload.js +++ b/static/scripts/upload.js @@ -77,7 +77,7 @@ function createPreviewElement(key, blob, type, nameOrUrl) { const previewRatingForm = document.createElement('form'); previewRatingForm.className = 'preview-rating-form'; - ['Safe', 'Questionable', 'Sensitive', 'Explicit'].forEach((rating, idx) => { + ['Safe', 'Sensitive', 'Questionable', 'Explicit'].forEach((rating, idx) => { const inputId = `rating-${rating.toLowerCase()}-${key}`; const input = document.createElement('input'); input.type = 'radio'; @@ -625,6 +625,7 @@ function showImageProgress(previewElement) { height: 100%; width: 0%; background-color: #4a9eff; + transition: width 0.3s ease; `; progressContainer.appendChild(progressBar); @@ -663,7 +664,7 @@ function animateProgress(progressBar, duration) { if (isCompleted) return; const elapsed = Date.now() - startTime; - const timeRatio = elapsed / (duration * 4); + const timeRatio = elapsed / duration; let targetProgress; if (timeRatio < 0.2) { -- cgit v1.2.3