364 lines
13 KiB
JavaScript
364 lines
13 KiB
JavaScript
|
/*!
|
|||
|
|
* 图片灯箱（正文图片点击放大、多图轮播、键盘切换）
|
|||
|
|
* Yongquan Yang <yangyq.net>
|
|||
|
|
*
|
|||
|
|
* ── 设计原则：没有 JS 也要能用 ────────────────────────────────
|
|||
|
|
* 服务端已经给每个图片链接写好了 `href="原图"`，所以**无 JS 时点击
|
|||
|
|
* 仍然是打开原图**（浏览器默认行为）。这个文件只负责把那次跳转
|
|||
|
|
* 改成「在当前页覆盖展示」——任何异常都只是退回默认行为，不会白屏、
|
|||
|
|
* 不会点了没反应。
|
|||
|
|
*
|
|||
|
|
* ── 为什么不用现成的灯箱库 ────────────────────────────────────
|
|||
|
|
* 主题一直坚持零第三方依赖（不需要 CDN、不需要打包、不需要许可证审查）。
|
|||
|
|
* 这里要的功能就三样：覆盖层、左右轮播、键盘响应。原生 API 足够，
|
|||
|
|
* 引一个几十 KB 的库反而多一份被 CDN 挂掉就全站变慢的风险。
|
|||
|
|
*
|
|||
|
|
* ── 键盘约定 ──────────────────────────────────────────────────
|
|||
|
|
* ← → 上一张/下一张（用户明确要求「左右可以查看」）
|
|||
|
|
* ↑ ↓ 同样上一张/下一张（用户明确要求「上下左右键都可以切换」）
|
|||
|
|
* Esc 关闭
|
|||
|
|
* Home / End 首张 / 末张
|
|||
|
|
* 打开时要**记住焦点来源**，关闭后把焦点还给那张图 —— 否则键盘用户
|
|||
|
|
* 关掉之后焦点落在 body 上，得从头 Tab 一遍才能回到原处。
|
|||
|
|
*/
|
|||
|
|
;(function () {
|
|||
|
|
'use strict'
|
|||
|
|
|
|||
|
|
var CFG = window.YANG_LB || {}
|
|||
|
|
|
|||
|
|
/* ── 状态 ───────────────────────────────────────────────── */
|
|||
|
|
var items = [] // 当前文章里所有可点图片：[{ href, alt, el }]
|
|||
|
|
var box = null // 覆盖层根节点
|
|||
|
|
var imgEl = null // 当前展示的 <img>
|
|||
|
|
var capEl = null // 底部说明（alt）
|
|||
|
|
var cntEl = null // 计数「3 / 8」
|
|||
|
|
var btnPrev = null
|
|||
|
|
var btnNext = null
|
|||
|
|
var cur = 0
|
|||
|
|
var lastFocus = null // 打开前的焦点，关闭时归还
|
|||
|
|
var opened = false
|
|||
|
|
|
|||
|
|
/* 锁滚动时记住原来的值，关闭时精确还原
|
|||
|
|
⚠️ 不要写 `document.body.style.overflow = ''` 一刀切：
|
|||
|
|
主题或插件可能本来就在 body 上设了 overflow，清空会把它弄丢。 */
|
|||
|
|
var prevOverflow = null
|
|||
|
|
var prevPaddingRight = null
|
|||
|
|
|
|||
|
|
/* ── 工具 ───────────────────────────────────────────────── */
|
|||
|
|
|
|||
|
|
function el (tag, cls, txt) {
|
|||
|
|
var n = document.createElement(tag)
|
|||
|
|
if (cls) { n.className = cls }
|
|||
|
|
if (txt != null) { n.textContent = txt }
|
|||
|
|
return n
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 相对地址补成绝对地址：灯箱里要用 URL 做比较，
|
|||
|
|
而且 <img src> 用绝对地址能避免相对路径在覆盖层里解析错。 */
|
|||
|
|
function abs (u) {
|
|||
|
|
if (!u) { return '' }
|
|||
|
|
try {
|
|||
|
|
return new URL(u, document.baseURI).href
|
|||
|
|
} catch (e) {
|
|||
|
|
return u
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fmt (tpl, a, b) {
|
|||
|
|
return String(tpl || '%1$s / %2$s')
|
|||
|
|
.replace('%1$s', a)
|
|||
|
|
.replace('%2$s', b)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 收集可点图片 ───────────────────────────────────────── */
|
|||
|
|
|
|||
|
|
/* 判据与服务端一致：`data-yang-lb="1"`。
|
|||
|
|
不用 `.content img` 一把梭 —— 那会把侧栏卡片、相关推荐里的图
|
|||
|
|
也算进来，轮播顺序会变得莫名其妙（用户点的是正文第 2 张，
|
|||
|
|
结果「下一张」跳到了页面底部的推荐图）。 */
|
|||
|
|
function collect () {
|
|||
|
|
var nodes = document.querySelectorAll('a[data-yang-lb="1"]')
|
|||
|
|
var out = []
|
|||
|
|
for (var i = 0; i < nodes.length; i++) {
|
|||
|
|
var a = nodes[i]
|
|||
|
|
var href = abs(a.getAttribute('href'))
|
|||
|
|
if (!href) { continue }
|
|||
|
|
var im = a.querySelector('img')
|
|||
|
|
out.push({
|
|||
|
|
href: href,
|
|||
|
|
alt: (im && im.getAttribute('alt')) || '',
|
|||
|
|
el: a
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
return out
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 构建覆盖层（懒创建：只有真的点开过才建 DOM）───────── */
|
|||
|
|
|
|||
|
|
function build () {
|
|||
|
|
if (box) { return }
|
|||
|
|
|
|||
|
|
box = el('div', 'yang-lb')
|
|||
|
|
box.setAttribute('role', 'dialog')
|
|||
|
|
box.setAttribute('aria-modal', 'true')
|
|||
|
|
box.setAttribute('aria-label', '图片查看')
|
|||
|
|
box.setAttribute('tabindex', '-1')
|
|||
|
|
box.setAttribute('data-theme', CFG.theme === 'light' ? 'light' : 'dark')
|
|||
|
|
|
|||
|
|
var stage = el('div', 'yang-lb-stage')
|
|||
|
|
|
|||
|
|
btnPrev = el('button', 'yang-lb-nav yang-lb-prev')
|
|||
|
|
btnPrev.setAttribute('type', 'button')
|
|||
|
|
btnPrev.setAttribute('aria-label', CFG.prev || '上一张')
|
|||
|
|
btnPrev.innerHTML = '<svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">'
|
|||
|
|
+ '<path d="M15 4 L7 12 L15 20" fill="none" stroke="currentColor" '
|
|||
|
|
+ 'stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
|
|||
|
|
|
|||
|
|
btnNext = el('button', 'yang-lb-nav yang-lb-next')
|
|||
|
|
btnNext.setAttribute('type', 'button')
|
|||
|
|
btnNext.setAttribute('aria-label', CFG.next || '下一张')
|
|||
|
|
btnNext.innerHTML = '<svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">'
|
|||
|
|
+ '<path d="M9 4 L17 12 L9 20" fill="none" stroke="currentColor" '
|
|||
|
|
+ 'stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
|
|||
|
|
|
|||
|
|
var btnClose = el('button', 'yang-lb-close')
|
|||
|
|
btnClose.setAttribute('type', 'button')
|
|||
|
|
btnClose.setAttribute('aria-label', CFG.close || '关闭')
|
|||
|
|
btnClose.innerHTML = '<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">'
|
|||
|
|
+ '<path d="M5 5 L19 19 M19 5 L5 19" fill="none" stroke="currentColor" '
|
|||
|
|
+ 'stroke-width="2" stroke-linecap="round"/></svg>'
|
|||
|
|
|
|||
|
|
imgEl = el('img', 'yang-lb-img')
|
|||
|
|
imgEl.setAttribute('alt', '')
|
|||
|
|
imgEl.setAttribute('decoding', 'async')
|
|||
|
|
|
|||
|
|
capEl = el('div', 'yang-lb-cap')
|
|||
|
|
cntEl = el('div', 'yang-lb-count')
|
|||
|
|
|
|||
|
|
stage.appendChild(imgEl)
|
|||
|
|
|
|||
|
|
box.appendChild(btnClose)
|
|||
|
|
box.appendChild(btnPrev)
|
|||
|
|
box.appendChild(stage)
|
|||
|
|
box.appendChild(btnNext)
|
|||
|
|
|
|||
|
|
var foot = el('div', 'yang-lb-foot')
|
|||
|
|
foot.appendChild(capEl)
|
|||
|
|
foot.appendChild(cntEl)
|
|||
|
|
box.appendChild(foot)
|
|||
|
|
|
|||
|
|
document.body.appendChild(box)
|
|||
|
|
|
|||
|
|
/* 点空白处关闭：判 `e.target === box` 才算「空白」。
|
|||
|
|
⚠️ 不能用 `box.contains(e.target)` 反向判 —— 那样点图片本身
|
|||
|
|
也会被当成空白（图片是 stage 的子节点，但不是 box 的直接
|
|||
|
|
空白区），一放大地图就关掉了。 */
|
|||
|
|
box.addEventListener('click', function (e) {
|
|||
|
|
if (e.target === box || e.target.classList.contains('yang-lb-stage')) {
|
|||
|
|
hide()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
btnClose.addEventListener('click', function (e) {
|
|||
|
|
e.preventDefault()
|
|||
|
|
hide()
|
|||
|
|
})
|
|||
|
|
btnPrev.addEventListener('click', function (e) {
|
|||
|
|
e.preventDefault()
|
|||
|
|
e.stopPropagation()
|
|||
|
|
go(cur - 1)
|
|||
|
|
})
|
|||
|
|
btnNext.addEventListener('click', function (e) {
|
|||
|
|
e.preventDefault()
|
|||
|
|
e.stopPropagation()
|
|||
|
|
go(cur + 1)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/* 触屏左右滑动 —— 手机上箭头不好按，滑动是本能动作。
|
|||
|
|
只判水平位移，且要大于竖直位移，避免和页面滚动抢手势。 */
|
|||
|
|
var tx = 0
|
|||
|
|
var ty = 0
|
|||
|
|
var tracking = false
|
|||
|
|
box.addEventListener('touchstart', function (e) {
|
|||
|
|
if (e.touches.length !== 1) { return }
|
|||
|
|
tx = e.touches[0].clientX
|
|||
|
|
ty = e.touches[0].clientY
|
|||
|
|
tracking = true
|
|||
|
|
}, { passive: true })
|
|||
|
|
box.addEventListener('touchend', function (e) {
|
|||
|
|
if (!tracking) { return }
|
|||
|
|
tracking = false
|
|||
|
|
var t = e.changedTouches && e.changedTouches[0]
|
|||
|
|
if (!t) { return }
|
|||
|
|
var dx = t.clientX - tx
|
|||
|
|
var dy = t.clientY - ty
|
|||
|
|
if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy) * 1.4) {
|
|||
|
|
go(dx < 0 ? cur + 1 : cur - 1)
|
|||
|
|
}
|
|||
|
|
}, { passive: true })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 显示 / 隐藏 ────────────────────────────────────────── */
|
|||
|
|
|
|||
|
|
function lockScroll () {
|
|||
|
|
prevOverflow = document.body.style.overflow
|
|||
|
|
prevPaddingRight = document.body.style.paddingRight
|
|||
|
|
/* 滚动条宽度补偿：隐藏滚动条会让页面横向「跳」一下，
|
|||
|
|
加等宽 padding 就不会。只在真有滚动条时补。 */
|
|||
|
|
var sbw = window.innerWidth - document.documentElement.clientWidth
|
|||
|
|
document.body.style.overflow = 'hidden'
|
|||
|
|
if (sbw > 0) {
|
|||
|
|
var pad = parseInt(window.getComputedStyle(document.body).paddingRight, 10) || 0
|
|||
|
|
document.body.style.paddingRight = (pad + sbw) + 'px'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function unlockScroll () {
|
|||
|
|
document.body.style.overflow = prevOverflow == null ? '' : prevOverflow
|
|||
|
|
document.body.style.paddingRight = prevPaddingRight == null ? '' : prevPaddingRight
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function paint () {
|
|||
|
|
var it = items[cur]
|
|||
|
|
if (!it) { return }
|
|||
|
|
imgEl.setAttribute('src', it.href)
|
|||
|
|
imgEl.setAttribute('alt', it.alt || '')
|
|||
|
|
capEl.textContent = it.alt || ''
|
|||
|
|
capEl.style.display = it.alt ? '' : 'none'
|
|||
|
|
cntEl.textContent = fmt(CFG.counter, cur + 1, items.length)
|
|||
|
|
|
|||
|
|
/* 只有一张图时箭头没有意义，藏起来（但要保留占位，
|
|||
|
|
否则图片会突然变宽、视觉上跳一下） */
|
|||
|
|
var multi = items.length > 1
|
|||
|
|
btnPrev.style.visibility = multi ? 'visible' : 'hidden'
|
|||
|
|
btnNext.style.visibility = multi ? 'visible' : 'hidden'
|
|||
|
|
cntEl.style.display = multi ? '' : 'none'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function show (i) {
|
|||
|
|
collectInto()
|
|||
|
|
if (!items.length) { return }
|
|||
|
|
build()
|
|||
|
|
cur = Math.max(0, Math.min(i, items.length - 1))
|
|||
|
|
lastFocus = document.activeElement
|
|||
|
|
paint()
|
|||
|
|
box.classList.add('is-open')
|
|||
|
|
opened = true
|
|||
|
|
lockScroll()
|
|||
|
|
/* 焦点移到覆盖层：键盘用户按 Esc 才能被我们接住。
|
|||
|
|
⚠️ 必须 preventScroll —— 有些浏览器 focus() 会把页面滚到元素位置，
|
|||
|
|
覆盖层是 position:fixed，滚了就等于背景跳一下。 */
|
|||
|
|
try {
|
|||
|
|
box.focus({ preventScroll: true })
|
|||
|
|
} catch (e) {
|
|||
|
|
box.focus()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hide () {
|
|||
|
|
if (!opened || !box) { return }
|
|||
|
|
opened = false
|
|||
|
|
box.classList.remove('is-open')
|
|||
|
|
unlockScroll()
|
|||
|
|
/* 清掉 src，让大图能被回收（长文章里逐张翻过去会占几百 MB） */
|
|||
|
|
imgEl.removeAttribute('src')
|
|||
|
|
if (lastFocus && lastFocus.focus) {
|
|||
|
|
try {
|
|||
|
|
lastFocus.focus({ preventScroll: true })
|
|||
|
|
} catch (e) {
|
|||
|
|
lastFocus.focus()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
lastFocus = null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function go (i) {
|
|||
|
|
if (!items.length) { return }
|
|||
|
|
/* 循环：到最后一张再往后回到第一张。
|
|||
|
|
用户说的是「轮播」，循环是轮播的应有之义。 */
|
|||
|
|
cur = (i + items.length) % items.length
|
|||
|
|
paint()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 每次打开都重新收集：某些页面会动态插入图片（懒加载插件、
|
|||
|
|
评论区异步加载），缓存一份数组会漏掉新图。 */
|
|||
|
|
function collectInto () {
|
|||
|
|
items = collect()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 事件绑定 ───────────────────────────────────────────── */
|
|||
|
|
|
|||
|
|
/* 委托到 document：正文里的图片可能在 JS 跑完之后才插入
|
|||
|
|
（无限滚动、某些编辑器动态渲染）。绑在具体元素上会漏。 */
|
|||
|
|
document.addEventListener('click', function (e) {
|
|||
|
|
var a = e.target
|
|||
|
|
while (a && a !== document) {
|
|||
|
|
if (a.nodeType === 1 && a.getAttribute && a.getAttribute('data-yang-lb') === '1') {
|
|||
|
|
/* 只接管「普通左键点击」：
|
|||
|
|
Ctrl/Cmd/Shift/中键 都要放行 —— 用户想在新标签页看图
|
|||
|
|
是他的正当选择，拦掉会被骂。 */
|
|||
|
|
if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
e.preventDefault()
|
|||
|
|
collectInto()
|
|||
|
|
var idx = 0
|
|||
|
|
for (var i = 0; i < items.length; i++) {
|
|||
|
|
if (items[i].el === a) { idx = i; break }
|
|||
|
|
}
|
|||
|
|
show(idx)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
a = a.parentNode
|
|||
|
|
}
|
|||
|
|
}, false)
|
|||
|
|
|
|||
|
|
document.addEventListener('keydown', function (e) {
|
|||
|
|
if (!opened) { return }
|
|||
|
|
/* 输入框里按方向键不该翻图（虽然覆盖层里没有输入框，
|
|||
|
|
但插件可能往里塞东西，防一手） */
|
|||
|
|
var t = e.target
|
|||
|
|
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
var k = e.key
|
|||
|
|
if (k === 'Escape' || k === 'Esc') {
|
|||
|
|
e.preventDefault()
|
|||
|
|
hide()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (k === 'ArrowLeft' || k === 'ArrowUp') {
|
|||
|
|
e.preventDefault()
|
|||
|
|
go(cur - 1)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (k === 'ArrowRight' || k === 'ArrowDown') {
|
|||
|
|
e.preventDefault()
|
|||
|
|
go(cur + 1)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (k === 'Home') {
|
|||
|
|
e.preventDefault()
|
|||
|
|
go(0)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (k === 'End') {
|
|||
|
|
e.preventDefault()
|
|||
|
|
go(items.length - 1)
|
|||
|
|
}
|
|||
|
|
}, false)
|
|||
|
|
|
|||
|
|
/* 窗口尺寸变化时不需要重算 —— 图片用 max-width/max-height 自适应，
|
|||
|
|
这里只是把「滚动条宽度补偿」重做一遍更精确，但代价不值。
|
|||
|
|
跳过。 */
|
|||
|
|
|
|||
|
|
/* 暴露一个极小接口，方便主题自己的探针与用户脚本触发 */
|
|||
|
|
window.YangLightbox = {
|
|||
|
|
open: function (i) { show(typeof i === 'number' ? i : 0) },
|
|||
|
|
close: hide,
|
|||
|
|
next: function () { go(cur + 1) },
|
|||
|
|
prev: function () { go(cur - 1) },
|
|||
|
|
count: function () { return collect().length },
|
|||
|
|
isOpen: function () { return opened }
|
|||
|
|
}
|
|||
|
|
})()
|