aegon-dangerious 1.0.0

package/build-report/utils/scroll.ts

@@ -0,0 +1,361 @@
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+
+export const CAPSULE_SCROLL_CONTAINER_CLASS = 'capsule-scroll-container'
+
+export interface CapsuleScrollbarTheme {
+  thumbColor?: string
+  thumbHoverColor?: string
+  thumbActiveColor?: string
+  trackColor?: string
+  thumbWidthPx?: number
+  classPrefix?: string
+}
+
+export interface CapsuleScrollbarOptions extends CapsuleScrollbarTheme {
+  scrollEl: { value: HTMLElement | null }
+  anchorEl?: { value: HTMLElement | null }
+  active: { value: boolean }
+  gutterPx?: number
+  thumbWidthPx?: number
+  minThumbPx?: number
+  visibleRatio?: number
+  alwaysVisible?: boolean
+  autoHideAfterMs?: number
+  rightOffsetPx?: number
+}
+
+export interface CapsuleScrollbarBindings {
+  canScroll: { value: boolean }
+  shown: { value: boolean }
+  visible: { value: boolean }
+  rootStyle: { value: { [key: string]: string } }
+  thumbStyle: { value: { [key: string]: string } }
+  rootClass: string
+  thumbClass: string
+  onThumbMouseDown: (event: MouseEvent) => void
+  refresh: () => void
+  bind: () => void
+  unbind: () => void
+}
+
+const DEFAULT_CLASS_PREFIX = 'capsule-scrollbar'
+
+interface NativeHideSnapshot {
+  paddingRight: string
+  marginRight: string
+  width: string
+  boxSizing: string
+  scrollbarWidth: string
+  msOverflowStyle: string
+}
+
+export function markCapsuleScrollContainer(el: HTMLElement): () => void {
+  const computed = getComputedStyle(el)
+  const snapshot: NativeHideSnapshot = {
+    paddingRight: el.style.paddingRight,
+    marginRight: el.style.marginRight,
+    width: el.style.width,
+    boxSizing: el.style.boxSizing,
+    scrollbarWidth: el.style.scrollbarWidth,
+    msOverflowStyle: (el.style as CSSStyleDeclaration & { msOverflowStyle?: string }).msOverflowStyle ?? '',
+  }
+
+  el.style.setProperty('--capsule-scroll-padding-right', computed.paddingRight)
+  el.classList.add(CAPSULE_SCROLL_CONTAINER_CLASS)
+  el.style.scrollbarWidth = 'none'
+  ;(el.style as CSSStyleDeclaration & { msOverflowStyle?: string }).msOverflowStyle = 'none'
+
+  return () => {
+    el.classList.remove(CAPSULE_SCROLL_CONTAINER_CLASS)
+    el.style.removeProperty('--capsule-scroll-padding-right')
+    el.style.paddingRight = snapshot.paddingRight
+    el.style.marginRight = snapshot.marginRight
+    el.style.width = snapshot.width
+    el.style.boxSizing = snapshot.boxSizing
+    el.style.scrollbarWidth = snapshot.scrollbarWidth
+    ;(el.style as CSSStyleDeclaration & { msOverflowStyle?: string }).msOverflowStyle =
+      snapshot.msOverflowStyle
+  }
+}
+
+export function useCapsuleScrollbar(options: CapsuleScrollbarOptions): CapsuleScrollbarBindings {
+  const thumbWidthPx = options.thumbWidthPx ?? 10
+  const gutterPx = options.gutterPx ?? thumbWidthPx
+  const minThumbPx = options.minThumbPx ?? 48
+  const visibleRatio = options.visibleRatio ?? 1
+  const rightOffsetPx = options.rightOffsetPx ?? 1
+  const autoHideAfterMs = options.autoHideAfterMs ?? 3000
+  const alwaysVisible = options.alwaysVisible ?? autoHideAfterMs <= 0
+  const classPrefix = options.classPrefix ?? DEFAULT_CLASS_PREFIX
+
+  const canScroll = ref(false)
+  const shown = ref(false)
+  const zoneTop = ref(0)
+  const zoneRight = ref(rightOffsetPx)
+  const zoneHeight = ref(0)
+  const thumbHeight = ref(minThumbPx)
+  const thumbOffset = ref(0)
+
+  const visible = computed(() => canScroll.value && (alwaysVisible || shown.value))
+
+  let resizeObserver: ResizeObserver | undefined
+  let thumbDragCleanup: (() => void) | undefined
+  let removeContainerMark: (() => void) | undefined
+  let hideTimer: number | undefined
+  let rafId = 0
+
+  const rootStyle = computed(() => ({
+    top: `${zoneTop.value + thumbOffset.value}px`,
+    right: `${zoneRight.value}px`,
+    width: `${gutterPx}px`,
+    height: `${Math.round(thumbHeight.value)}px`,
+  }))
+
+  const thumbStyle = computed(() => ({
+    width: `${thumbWidthPx}px`,
+    height: '100%',
+  }))
+
+  function clearHideTimer() {
+    if (hideTimer !== undefined) {
+      clearTimeout(hideTimer)
+      hideTimer = undefined
+    }
+  }
+
+  function scheduleHide() {
+    clearHideTimer()
+    if (alwaysVisible || autoHideAfterMs <= 0) return
+    hideTimer = window.setTimeout(() => {
+      shown.value = false
+      hideTimer = undefined
+    }, autoHideAfterMs)
+  }
+
+  function revealBar() {
+    if (!canScroll.value) return
+    shown.value = true
+    scheduleHide()
+  }
+
+  function refreshLayout() {
+    const scrollEl = options.scrollEl.value
+    const anchorEl = options.anchorEl?.value ?? scrollEl
+    if (!options.active.value || !scrollEl || !anchorEl) {
+      canScroll.value = false
+      shown.value = false
+      return
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollEl
+    const scrollable = scrollHeight > clientHeight + 1
+    canScroll.value = scrollable
+    if (!scrollable) {
+      shown.value = false
+      return
+    }
+
+    const anchorRect = anchorEl.getBoundingClientRect()
+    const shrinkInset = (anchorRect.height * (1 - visibleRatio)) / 2
+
+    zoneTop.value = Math.round(anchorRect.top + shrinkInset)
+    zoneRight.value = rightOffsetPx
+    zoneHeight.value = Math.round(anchorRect.height * visibleRatio)
+
+    const trackH = zoneHeight.value
+    thumbHeight.value = Math.max(minThumbPx, (clientHeight / scrollHeight) * trackH)
+    const maxThumbTravel = Math.max(0, trackH - thumbHeight.value)
+    const scrollMax = scrollHeight - clientHeight
+    thumbOffset.value = scrollMax > 0 ? Math.round((scrollTop / scrollMax) * maxThumbTravel) : 0
+  }
+
+  function scheduleRefresh() {
+    cancelAnimationFrame(rafId)
+    rafId = requestAnimationFrame(refreshLayout)
+  }
+
+  function onScroll() {
+    revealBar()
+    scheduleRefresh()
+  }
+
+  function bind() {
+    unbind()
+    const scrollEl = options.scrollEl.value
+    if (!scrollEl) return
+
+    removeContainerMark = markCapsuleScrollContainer(scrollEl)
+    refreshLayout()
+    scrollEl.addEventListener('scroll', onScroll, { passive: true })
+    resizeObserver = new ResizeObserver(() => scheduleRefresh())
+    resizeObserver.observe(scrollEl)
+    if (options.anchorEl?.value) resizeObserver.observe(options.anchorEl.value)
+    window.addEventListener('resize', scheduleRefresh, { passive: true })
+  }
+
+  function unbind() {
+    cancelAnimationFrame(rafId)
+    clearHideTimer()
+    window.removeEventListener('resize', scheduleRefresh)
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+    thumbDragCleanup?.()
+    thumbDragCleanup = undefined
+    options.scrollEl.value?.removeEventListener('scroll', onScroll)
+    removeContainerMark?.()
+    removeContainerMark = undefined
+    canScroll.value = false
+    shown.value = false
+  }
+
+  function onThumbMouseDown(event: MouseEvent) {
+    const scrollEl = options.scrollEl.value
+    if (!scrollEl) return
+
+    event.preventDefault()
+    revealBar()
+    clearHideTimer()
+
+    const startY = event.clientY
+    const startScrollTop = scrollEl.scrollTop
+    const trackH = zoneHeight.value
+    const scrollMax = scrollEl.scrollHeight - scrollEl.clientHeight
+    const maxThumbTravel = Math.max(0, trackH - thumbHeight.value)
+
+    const onMove = (ev: MouseEvent) => {
+      if (maxThumbTravel <= 0 || scrollMax <= 0) return
+      scrollEl.scrollTop = startScrollTop + ((ev.clientY - startY) / maxThumbTravel) * scrollMax
+    }
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+      thumbDragCleanup = undefined
+      scheduleHide()
+    }
+
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+    thumbDragCleanup = onUp
+  }
+
+  watch(
+    () => options.active.value,
+    (active) => {
+      if (active) {
+        void nextTick(() => {
+          bind()
+          void nextTick(refreshLayout)
+        })
+        return
+      }
+      unbind()
+    },
+    { immediate: true },
+  )
+
+  onUnmounted(unbind)
+
+  return {
+    canScroll,
+    shown,
+    visible,
+    rootStyle,
+    thumbStyle,
+    rootClass: classPrefix,
+    thumbClass: `${classPrefix}__thumb`,
+    onThumbMouseDown,
+    refresh: refreshLayout,
+    bind,
+    unbind,
+  }
+}
+
+// --- 頁面滿屏滾動鎖定 ---
+
+/** 鎖定 document 滿屏滾動，返回 cleanup 恢復原 overflow */
+export function lockDocumentScroll(): () => void {
+  const html = document.documentElement
+  const body = document.body
+  const prevHtml = html.style.overflow
+  const prevBody = body.style.overflow
+
+  html.style.overflow = 'hidden'
+  body.style.overflow = 'hidden'
+
+  return () => {
+    html.style.overflow = prevHtml
+    body.style.overflow = prevBody
+  }
+}
+
+// --- 視口主內容區高度 ---
+
+export interface ViewportBodyHeightOptions {
+  /** 從視口高度中扣除的固定像素 */
+  subtract?: number
+  /** 按選擇器測量需扣除的高度（如 PageHeader） */
+  subtractSelector?: string
+  /** 測量 subtractSelector 時的父級容器，默認取 element 的 offsetParent 或 document */
+  subtractRoot?: HTMLElement
+  /** 是否監聽 resize，默認 true */
+  listenResize?: boolean
+}
+
+/** 當前視口高度（px） */
+export function getViewportHeight(): number {
+  return window.innerHeight
+}
+
+function resolveSubtract(el: HTMLElement, options?: ViewportBodyHeightOptions): number {
+  if (options?.subtract !== undefined) return options.subtract
+
+  if (options?.subtractSelector) {
+    const root = options.subtractRoot ?? el.parentElement ?? document.body
+    const node = root.querySelector(options.subtractSelector) as HTMLElement | null
+    if (node) return node.getBoundingClientRect().height
+  }
+
+  return 0
+}
+
+/** 計算主內容區可用高度（視口高度 − 扣除項） */
+export function getViewportBodyHeight(
+  el: HTMLElement,
+  options?: ViewportBodyHeightOptions,
+): number {
+  const subtract = resolveSubtract(el, options)
+  return Math.max(0, getViewportHeight() - subtract)
+}
+
+/**
+ * 將元素高度綁定為當前視口可用高度；返回 cleanup（移除監聽並清空 inline height）
+ */
+export function bindViewportBodyHeight(
+  el: HTMLElement,
+  options?: ViewportBodyHeightOptions,
+): () => void {
+  const listenResize = options?.listenResize ?? true
+
+  const update = () => {
+    const height = getViewportBodyHeight(el, options)
+    el.style.height = `${height}px`
+    el.style.maxHeight = `${height}px`
+  }
+
+  update()
+
+  if (!listenResize) {
+    return () => {
+      el.style.height = ''
+      el.style.maxHeight = ''
+    }
+  }
+
+  window.addEventListener('resize', update)
+  return () => {
+    window.removeEventListener('resize', update)
+    el.style.height = ''
+    el.style.maxHeight = ''
+  }
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "aegon-dangerious",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}