hexo-theme-stellar 1.42.1 → 1.43.1

package/source/js/plugins/adaptive-text.js

@@ -1,7 +1,7 @@
 // 文字自适应颜色 DOM 插件
-// 扫描 [data-text-adaptive] 元素，解析背景来源（--cover-url → --bg-url →
+// 扫描 [data-text-adaptive] 元素，解析背景来源（--adaptive-background → --cover-url → --bg-url →
 // background-image → background-color），调用 stellar.color 计算文字颜色，
-// 写入内联 --text-banner 与 --text-banner-theme。
+// 写入内联 --text-banner 与 --text-banner-theme；Wiki 封面另写入主题色蒙版变量。
 // 属性值：
 //   theme（默认）  背景图平均色 lighten/darken（两种变量同色）
 //   contrast       黑白对比（两种变量同色）
@@ -19,6 +19,10 @@ function parseCssUrl(value) {
 
 function resolveBackground(el) {
   var style = window.getComputedStyle(el);
+  var adaptiveBackground = stellar.color.parse(style.getPropertyValue('--adaptive-background'));
+  if (adaptiveBackground) {
+    return { type: 'color', rgb: adaptiveBackground };
+  }
   var cover = parseCssUrl(style.getPropertyValue('--cover-url'));
   if (cover) {
     return { type: 'image', url: cover };
@@ -85,6 +89,39 @@ function setSplitTextColors(el, rgb) {
   }
 }
 
+// Wiki 卡片的 Today 风格内容层使用封面平均色：保留色相，增强弱饱和度后压低明度，
+// 让满不透明蒙版下的白色文字始终可读。变量写到 .wiki-card：蒙版用深色版本，
+// hover 边框使用同源但提高 20 个明度点的版本。
+function setWikiOverlayColor(el, rgb) {
+  var node = el.parentElement;
+  while (node && node.nodeType === 1) {
+    if ((' ' + node.className + ' ').indexOf(' wiki-card ') !== -1) {
+      var themed = stellar.color.enhanceSaturation(rgb, { minSaturation: 0.45, boostBelow: 0.35 });
+      var overlay = stellar.color.darken(themed, 0.26);
+      var border = stellar.color.lighten(themed, 0.46);
+      if (overlay) {
+        node.style.setProperty('--wiki-overlay-color', overlay);
+      }
+      if (border) {
+        node.style.setProperty('--wiki-border-color', border);
+      }
+      return;
+    }
+    node = node.parentElement;
+  }
+}
+
+// Wiki 卡片主题色确定后（包括提取失败时的 CSS 回退）通知索引页。
+// 覆盖层会同时等待原图 load，避免先用默认主题色绘制、再切换为平均色。
+function notifyWikiOverlayReady(el) {
+  if (!el || !el.dispatchEvent || !document.createEvent) {
+    return;
+  }
+  var event = document.createEvent('Event');
+  event.initEvent('wiki-overlay-ready', true, false);
+  el.dispatchEvent(event);
+}
+
 function applyToElement(el) {
   // 用户显式覆盖优先：首次处理时元素已有内联 --text-banner 或内联 color 则跳过
   // （插件自身写入的变量不视为用户覆盖，主题切换重算时需重新应用）
@@ -103,6 +140,10 @@ function applyToElement(el) {
     } else {
       setTextColor(el, styleName, rgb);
     }
+    if (styleName === 'split' && el.parentElement && (' ' + el.parentElement.className + ' ').indexOf(' wiki-card-cover ') !== -1) {
+      setWikiOverlayColor(el, rgb);
+      notifyWikiOverlayReady(el);
+    }
     appliedElements.add(el);
   };
   if (bg.type === 'color') {
@@ -112,6 +153,9 @@ function applyToElement(el) {
     stellar.color.getAverageColor(bg.url, { background: backdrop }).then(function (rgb) {
       if (rgb) {
         apply(rgb);
+      } else if (styleName === 'split' && el.parentElement && (' ' + el.parentElement.className + ' ').indexOf(' wiki-card-cover ') !== -1) {
+        // 平均色提取失败时不写变量，保留 CSS 回退色；但仍须解除 Wiki 覆盖层等待。
+        notifyWikiOverlayReady(el);
       }
     });
   }

package/source/js/plugins/dropdown.js

@@ -0,0 +1,435 @@
+// 通用 dropdown 浮层：把打开的菜单挂到 body 下，避免被任意祖先容器裁剪。
+(() => {
+  const selector = 'details.dropdown'
+  const gap = 8
+  const viewportPadding = 8
+  let layer = null
+  let active = null
+  let frame = null
+  let menuId = 0
+
+  function getLayer() {
+    if (layer && document.documentElement.contains(layer)) {
+      return layer
+    }
+    layer = document.createElement('div')
+    layer.className = 'dropdown-layer'
+    document.body.appendChild(layer)
+    return layer
+  }
+
+  function getDirectChild(parent, childSelector) {
+    for (const child of parent.children) {
+      if (child.matches(childSelector)) {
+        return child
+      }
+    }
+    return null
+  }
+
+  function getViewportSize() {
+    return {
+      width: document.documentElement.clientWidth || window.innerWidth,
+      height: document.documentElement.clientHeight || window.innerHeight
+    }
+  }
+
+  function getDirection(dropdown) {
+    const direction = dropdown.getAttribute('direction')
+    return direction === 'up' || direction === 'down' ? direction : 'auto'
+  }
+
+  function getAlign(dropdown) {
+    const align = dropdown.getAttribute('align')
+    return align === 'left' || align === 'right' ? align : 'auto'
+  }
+
+  function setMenuId(dropdown, menu) {
+    if (!menu.id) {
+      menuId += 1
+      menu.id = `stellar-dropdown-menu-${menuId}`
+    }
+    const trigger = getDirectChild(dropdown, '.dropdown-trigger')
+    if (trigger) {
+      trigger.setAttribute('aria-controls', menu.id)
+    }
+  }
+
+  function clearMenuPosition(menu) {
+    menu.style.removeProperty('top')
+    menu.style.removeProperty('left')
+    menu.style.removeProperty('max-height')
+    menu.style.removeProperty('visibility')
+    menu.style.removeProperty('opacity')
+    menu.removeAttribute('data-placement')
+  }
+
+  function hideMenuBeforeOpen(dropdown) {
+    const menu = getDirectChild(dropdown, '.dropdown-menu')
+    if (!menu || menu.classList.contains('dropdown-menu-portal')) {
+      return
+    }
+    menu.style.visibility = 'hidden'
+    menu.style.opacity = '0'
+  }
+
+  function isPointInRect(point, rect) {
+    return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom
+  }
+
+  function isPointInPolygon(point, polygon) {
+    let inside = false
+    for (let index = 0, previous = polygon.length - 1; index < polygon.length; previous = index++) {
+      const currentPoint = polygon[index]
+      const previousPoint = polygon[previous]
+      const intersects = currentPoint.y > point.y !== previousPoint.y > point.y &&
+        point.x < (previousPoint.x - currentPoint.x) * (point.y - currentPoint.y) /
+        (previousPoint.y - currentPoint.y) + currentPoint.x
+      if (intersects) {
+        inside = !inside
+      }
+    }
+    return inside
+  }
+
+  function updateBridge(state, triggerRect, menuRect, placement) {
+    const polygon = placement === 'up'
+      ? [
+          { x: triggerRect.left, y: triggerRect.top },
+          { x: menuRect.left, y: menuRect.bottom },
+          { x: menuRect.right, y: menuRect.bottom },
+          { x: triggerRect.right, y: triggerRect.top }
+        ]
+      : [
+          { x: triggerRect.left, y: triggerRect.bottom },
+          { x: triggerRect.right, y: triggerRect.bottom },
+          { x: menuRect.right, y: menuRect.top },
+          { x: menuRect.left, y: menuRect.top }
+        ]
+    const clipPath = `polygon(${polygon.map(point => `${Math.round(point.x)}px ${Math.round(point.y)}px`).join(', ')})`
+    state.bridge.__stellarDropdownPolygon = polygon
+    state.bridge.style.clipPath = clipPath
+    state.bridge.style.webkitClipPath = clipPath
+  }
+
+  function isPointerInsideState(state, event) {
+    const target = event.target
+    if (target && (state.dropdown.contains(target) || state.menu.contains(target) || state.bridge.contains(target))) {
+      return true
+    }
+    const point = { x: event.clientX, y: event.clientY }
+    if (isPointInRect(point, state.trigger.getBoundingClientRect()) || isPointInRect(point, state.menu.getBoundingClientRect())) {
+      return true
+    }
+    return isPointInPolygon(point, state.bridge.__stellarDropdownPolygon || [])
+  }
+
+  function closeState(state, focusTrigger) {
+    if (!state || active !== state) {
+      return
+    }
+    active = null
+    if (state.dropdown.open) {
+      state.dropdown.open = false
+    }
+    if (state.bridge.parentNode) {
+      state.bridge.remove()
+    }
+    state.menu.classList.remove('dropdown-menu-portal')
+    state.menu.classList.remove('dropdown-menu-visible')
+    state.menu.removeAttribute('data-portal')
+    clearMenuPosition(state.menu)
+    if (state.placeholder.parentNode) {
+      state.placeholder.parentNode.insertBefore(state.menu, state.placeholder)
+      state.placeholder.remove()
+    } else if (state.menu.parentNode) {
+      state.menu.remove()
+    }
+    state.dropdown.removeAttribute('data-dropdown-open')
+    if (focusTrigger && document.documentElement.contains(state.trigger)) {
+      state.trigger.focus()
+    }
+  }
+
+  function chooseVertical(dropdown, menuHeight, topSpace, bottomSpace) {
+    const direction = getDirection(dropdown)
+    if (direction === 'up') {
+      return 'up'
+    }
+    if (direction === 'down') {
+      return 'down'
+    }
+    if (menuHeight <= bottomSpace) {
+      return 'down'
+    }
+    if (menuHeight <= topSpace) {
+      return 'up'
+    }
+    return topSpace >= bottomSpace ? 'up' : 'down'
+  }
+
+  function chooseHorizontal(dropdown, rect, menuWidth, viewportWidth) {
+    const align = getAlign(dropdown)
+    const minLeft = viewportPadding
+    const maxLeft = Math.max(minLeft, viewportWidth - viewportPadding - menuWidth)
+    if (align === 'left') {
+      return Math.min(Math.max(rect.left, minLeft), maxLeft)
+    }
+    if (align === 'right') {
+      return Math.min(Math.max(rect.right - menuWidth, minLeft), maxLeft)
+    }
+    const leftAlignedLeft = rect.left
+    const rightAlignedLeft = rect.right - menuWidth
+    const leftFits = leftAlignedLeft >= minLeft && leftAlignedLeft <= maxLeft
+    const rightFits = rightAlignedLeft >= minLeft && rightAlignedLeft <= maxLeft
+    if (leftFits && rightFits) {
+      const rightSpace = viewportWidth - viewportPadding - rect.left
+      const leftSpace = rect.right - viewportPadding
+      return rightSpace >= leftSpace ? leftAlignedLeft : rightAlignedLeft
+    }
+    if (leftFits) {
+      return leftAlignedLeft
+    }
+    if (rightFits) {
+      return rightAlignedLeft
+    }
+    const preferLeft = viewportWidth - viewportPadding - rect.left >= rect.right - viewportPadding
+    const preferredLeft = preferLeft ? leftAlignedLeft : rightAlignedLeft
+    return Math.min(Math.max(preferredLeft, minLeft), maxLeft)
+  }
+
+  function positionActive() {
+    if (!active) {
+      return
+    }
+    const state = active
+    if (!document.documentElement.contains(state.trigger)) {
+      closeState(state, false)
+      return
+    }
+    const rect = state.trigger.getBoundingClientRect()
+    const viewport = getViewportSize()
+    if (rect.bottom <= 0 || rect.top >= viewport.height) {
+      closeState(state, false)
+      return
+    }
+
+    const topSpace = Math.max(0, rect.top - gap - viewportPadding)
+    const bottomSpace = Math.max(0, viewport.height - rect.bottom - gap - viewportPadding)
+    const menu = state.menu
+    menu.style.visibility = 'hidden'
+    menu.style.maxHeight = 'none'
+    menu.style.top = '0px'
+    menu.style.left = '0px'
+    const naturalRect = menu.getBoundingClientRect()
+    const vertical = chooseVertical(state.dropdown, naturalRect.height, topSpace, bottomSpace)
+    const availableHeight = vertical === 'up' ? topSpace : bottomSpace
+    menu.style.maxHeight = `${Math.max(1, Math.floor(availableHeight))}px`
+
+    const menuRect = menu.getBoundingClientRect()
+    const topLimit = viewportPadding
+    const bottomLimit = Math.max(topLimit, viewport.height - viewportPadding - menuRect.height)
+    const preferredTop = vertical === 'up'
+      ? rect.top - gap - menuRect.height
+      : rect.bottom + gap
+    const top = Math.min(Math.max(preferredTop, topLimit), bottomLimit)
+    const left = chooseHorizontal(state.dropdown, rect, menuRect.width, viewport.width)
+    menu.style.top = `${Math.round(top)}px`
+    menu.style.left = `${Math.round(left)}px`
+    menu.setAttribute('data-placement', vertical)
+    menu.style.removeProperty('visibility')
+    menu.style.removeProperty('opacity')
+    updateBridge(state, rect, menu.getBoundingClientRect(), vertical)
+  }
+
+  function schedulePosition() {
+    if (!active || frame !== null) {
+      return
+    }
+    frame = window.requestAnimationFrame(() => {
+      frame = null
+      positionActive()
+    })
+  }
+
+  function openDropdown(dropdown) {
+    const menu = getDirectChild(dropdown, '.dropdown-menu')
+    const trigger = getDirectChild(dropdown, '.dropdown-trigger')
+    if (!menu || !trigger) {
+      return
+    }
+    if (active && active.dropdown !== dropdown) {
+      closeState(active, false)
+    }
+    if (active && active.dropdown === dropdown) {
+      schedulePosition()
+      return
+    }
+
+    const placeholder = document.createComment('dropdown-menu')
+    const bridge = document.createElement('div')
+    bridge.className = 'dropdown-bridge'
+    if (!window.CSS || typeof window.CSS.supports !== 'function' ||
+      (!window.CSS.supports('clip-path', 'polygon(0 0, 1px 1px, 2px 2px)') &&
+      !window.CSS.supports('-webkit-clip-path', 'polygon(0 0, 1px 1px, 2px 2px)'))) {
+      bridge.style.pointerEvents = 'none'
+    }
+    menu.style.visibility = 'hidden'
+    menu.style.opacity = '0'
+    menu.parentNode.insertBefore(placeholder, menu)
+    const dropdownLayer = getLayer()
+    dropdownLayer.appendChild(bridge)
+    dropdownLayer.appendChild(menu)
+    setMenuId(dropdown, menu)
+    menu.classList.add('dropdown-menu-portal')
+    menu.setAttribute('data-portal', 'true')
+    dropdown.setAttribute('data-dropdown-open', 'true')
+    active = {
+      dropdown,
+      menu,
+      trigger,
+      placeholder,
+      bridge,
+      hoverMode: dropdown.__stellarDropdownHovering
+    }
+    positionActive()
+    if (!dropdown.open) {
+      dropdown.open = true
+    }
+    window.requestAnimationFrame(() => {
+      if (active && active.dropdown === dropdown) {
+        menu.classList.add('dropdown-menu-visible')
+      }
+    })
+  }
+
+  function bind(dropdown) {
+    if (dropdown.__stellarDropdownBound) {
+      return
+    }
+    dropdown.__stellarDropdownBound = true
+    dropdown.addEventListener('mouseenter', () => {
+      dropdown.__stellarDropdownHovering = true
+      if (active && active.dropdown === dropdown) {
+        active.hoverMode = true
+      }
+      if (!active || active.dropdown !== dropdown) {
+        openDropdown(dropdown)
+      }
+    })
+    const trigger = getDirectChild(dropdown, '.dropdown-trigger')
+    if (trigger) {
+      trigger.addEventListener('click', event => {
+        event.preventDefault()
+        if (!active || active.dropdown !== dropdown) {
+          openDropdown(dropdown)
+        }
+      })
+      trigger.addEventListener('keydown', event => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          if (active && active.dropdown === dropdown) {
+            closeState(active, false)
+          } else {
+            openDropdown(dropdown)
+          }
+        }
+      })
+    }
+    dropdown.addEventListener('mouseleave', () => {
+      dropdown.__stellarDropdownHovering = false
+    })
+    dropdown.addEventListener('toggle', () => {
+      if (dropdown.open) {
+        if (!active || active.dropdown !== dropdown) {
+          hideMenuBeforeOpen(dropdown)
+          openDropdown(dropdown)
+        } else {
+          schedulePosition()
+        }
+      } else if (active && active.dropdown === dropdown) {
+        closeState(active, false)
+      }
+    })
+    if (dropdown.open) {
+      openDropdown(dropdown)
+    }
+    dropdown.__stellarDropdownHovering = false
+  }
+
+  function bindTree(root) {
+    if (root.nodeType !== 1) {
+      return
+    }
+    if (root.matches(selector)) {
+      bind(root)
+    }
+    root.querySelectorAll(selector).forEach(bind)
+  }
+
+  function init() {
+    if (!document.body || !window.MutationObserver) {
+      return
+    }
+    bindTree(document.body)
+    const observer = new MutationObserver(records => {
+      records.forEach(record => {
+        record.addedNodes.forEach(bindTree)
+        record.removedNodes.forEach(node => {
+          if (active && node.nodeType === 1 && (node === active.dropdown || node.contains(active.dropdown))) {
+            closeState(active, false)
+          }
+        })
+      })
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+
+    document.addEventListener('click', event => {
+      if (!active) {
+        return
+      }
+      if (active.dropdown.contains(event.target) || active.menu.contains(event.target)) {
+        return
+      }
+      closeState(active, false)
+    }, true)
+
+    document.addEventListener('mousemove', event => {
+      if (!active || !active.hoverMode || isPointerInsideState(active, event)) {
+        return
+      }
+      closeState(active, false)
+    }, true)
+
+    document.addEventListener('keydown', event => {
+      if (!active) {
+        return
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        closeState(active, true)
+        return
+      }
+      if (event.key === 'Tab' && document.activeElement === active.trigger && !event.shiftKey) {
+        const firstItem = active.menu.querySelector('a, button, [tabindex]:not([tabindex="-1"])')
+        if (firstItem) {
+          event.preventDefault()
+          firstItem.focus()
+        }
+      }
+    })
+
+    window.addEventListener('resize', schedulePosition)
+    window.addEventListener('scroll', schedulePosition, true)
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', schedulePosition)
+      window.visualViewport.addEventListener('scroll', schedulePosition)
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true })
+  } else {
+    init()
+  }
+})()