diff options
Diffstat (limited to 'aero.js')
| -rw-r--r-- | aero.js | 43 |
1 files changed, 42 insertions, 1 deletions
@@ -83,6 +83,47 @@ function makeDraggable(el, handle) { window.addEventListener('mouseup', () => { dragging = false; }); } +function makeResizable(el, options = {}) { + const minW = options.minW || 280; + const minH = options.minH || 180; + const handles = ['e', 's', 'se']; + handles.forEach(mode => { + const h = document.createElement('div'); + h.className = 'rs rs-' + mode + ' no-drag'; + el.appendChild(h); + h.addEventListener('mousedown', (e) => startResize(e, mode)); + }); + let mode = null, sx = 0, sy = 0, sw = 0, sh = 0; + function startResize(e, m) { + e.preventDefault(); e.stopPropagation(); + mode = m; + sx = e.clientX; sy = e.clientY; + const r = el.getBoundingClientRect(); + sw = r.width; sh = r.height; + // pin current size as inline so first move doesn't snap + el.style.width = sw + 'px'; + el.style.height = sh + 'px'; + el.classList.add('resized'); + el.style.zIndex = (++window.__zTop || (window.__zTop = 100)); + document.body.classList.add('rs-cursor-' + m); + window.addEventListener('mousemove', onMove); + window.addEventListener('mouseup', onUp); + } + function onMove(e) { + if (!mode) return; + const dx = e.clientX - sx; + const dy = e.clientY - sy; + if (mode.includes('e')) el.style.width = Math.max(minW, sw + dx) + 'px'; + if (mode.includes('s')) el.style.height = Math.max(minH, sh + dy) + 'px'; + } + function onUp() { + mode = null; + document.body.classList.remove('rs-cursor-e', 'rs-cursor-s', 'rs-cursor-se'); + window.removeEventListener('mousemove', onMove); + window.removeEventListener('mouseup', onUp); + } +} + function counterHTML(val = 42137, label = "visitors") { const digits = String(val).padStart(7, '0').split('').map(d => `<div class="d">${d}</div>`).join(''); return `<div class="counter"><div class="digits">${digits}</div><div class="label">${label}</div></div>`; @@ -228,7 +269,7 @@ async function fetchReelMouthFeed(limit = 6) { } window.Aero = { - spawnBubbles, makeClouds, sparkleCursor, makeDraggable, + spawnBubbles, makeClouds, sparkleCursor, makeDraggable, makeResizable, counterHTML, nowPlayingHTML, animateEq, musicToggleHTML, bindMusicToggle, // theme api getTheme, setTheme, mountThemeSwitcher, initTheme, THEMES, |