Diffstat (limited to 'views/layouts')
| -rw-r--r-- | views/layouts/general-page.html | 62 |
1 files changed, 22 insertions, 40 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index d874ecf..ce5698b 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -31,10 +31,6 @@ window.dispatchEvent(new Event('popstate')); return false; }; - - function convertRemToPixels(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); - } </script> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/js/glightbox.min.js"></script> @@ -198,7 +194,6 @@ <div class="theme-icon" data-theme="lettuce"></div> <div class="theme-icon" data-theme="night"></div> <div class="theme-icon" data-theme="ram"></div> - <div class="theme-pin"></div> </div> </div> @@ -243,7 +238,6 @@ const themeWheel = document.getElementById('theme-wheel'); const themeButton = document.getElementById('theme-button'); const themeIcons = document.querySelectorAll('.theme-icon'); - const themeWheelRadius = convertRemToPixels(6); themeIcons.forEach(icon => { if (icon.getAttribute('data-theme') == savedTheme) { @@ -263,36 +257,23 @@ } function positionThemeIcons() { - const sliceAngle = 360 / themeIcons.length; - - themeIcons.forEach((icon, index) => { - const startAngle = index * sliceAngle; - const endAngle = (index + 1) * sliceAngle; - - const clipPath = createSliceClipPath(startAngle, endAngle, themeWheelRadius); - icon.style.clipPath = clipPath; - }); - } + const icons = themeWheel.querySelectorAll('.theme-icon'); + const iconCount = icons.length; + const vmax = calculateVmax(1); + const wheelRadius = 7.5*vmax; // Radius of the wheel + const iconRadius = 4*vmax; // Distance from center to place icons + const iconSize = 3*vmax; // Half of icon size for centering - function createSliceClipPath(startAngle, endAngle, radius) { - const centerX = radius; - const centerY = radius; + icons.forEach((icon, index) => { + const angle = (index * 360 / iconCount) - 90; + const angleRad = (angle * Math.PI) / 180; - let points = `${centerX}px ${centerY}px`; + const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize; + const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize; - const segments = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) / 5)); - const angleStep = (endAngle - startAngle) / segments; - - for (let i = 0; i <= segments; i++) { - const angle = ((startAngle + angleStep * i - 90) * Math.PI) / 180; - const x = centerX + Math.cos(angle) * radius; - const y = centerY + Math.sin(angle) * radius; - points += `, ${x}px ${y}px`; - } - - points += `, ${centerX}px ${centerY}px`; - - return `polygon(${points})`; + icon.style.left = x + 'px'; + icon.style.top = y + 'px'; + }); } function positionThemeWheel() { @@ -300,24 +281,25 @@ const buttonCenterX = buttonRect.left + buttonRect.width / 2; const buttonCenterY = buttonRect.top + buttonRect.height / 2; - const margin = 0; + const wheelRadius = calculateVmax(7.5); + const margin = calculateVmax(1); - let wheelX = buttonCenterX - themeWheelRadius; - let wheelY = buttonCenterY - themeWheelRadius; + let wheelX = buttonCenterX - wheelRadius; + let wheelY = buttonCenterY - wheelRadius; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; if (wheelX < margin) { wheelX = margin; - } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) { - wheelX = viewportWidth - (themeWheelRadius * 2) - margin; + } else if (wheelX + (wheelRadius * 2) > viewportWidth - margin) { + wheelX = viewportWidth - (wheelRadius * 2) - margin; } if (wheelY < margin) { wheelY = margin; - } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) { - wheelY = viewportHeight - (themeWheelRadius * 2) - margin; + } else if (wheelY + (wheelRadius * 2) > viewportHeight - margin) { + wheelY = viewportHeight - (wheelRadius * 2) - margin; } themeWheel.style.left = wheelX + 'px'; |