|
|
| 第40行： |
第40行： |
| }) | | }) |
| } | | } |
| | | // |
| // ------------------
| | mw.loader.load('https://cdn.jsdelivr.net/gh/mcbbs-wiki/SaltUI/SaltUI-MCBBSWiki.js') |
| // 防止手贱回退页面
| |
| // ------------------ | |
| $(function () {
| |
| for (let a of Array.from(document.querySelectorAll('.mw-rollback-link a'))) {
| |
| if (!a.hasAttribute('href')) { continue }
| |
| let handler = (ev) => {
| |
| ev.preventDefault()
| |
| confirmUI('确定要回退此页面吗？', (confirmed) => {
| |
| if (confirmed) { window.location.href = a.href }
| |
| })
| |
| }
| |
| a.addEventListener('click', handler)
| |
| a.addEventListener('touchend', handler)
| |
| }
| |
| /**
| |
| * 显示一个自定义确认框
| |
| * @param {string} text
| |
| * @param {(confirmed:boolean)=>void} callback
| |
| */
| |
| function confirmUI(text = '', callback) {
| |
| // 安全锁，防止用户多次点击
| |
| let safe = true
| |
| // 容器
| |
| let container = document.createElement('div')
| |
| container.className = 'confirmUIcontainer'
| |
| container.innerHTML = `<center>${text}</center>`
| |
| // 确定按钮
| |
| let yesBtn = document.createElement('div')
| |
| yesBtn.className = 'btn'
| |
| yesBtn.style.setProperty('--hover-color', '#FDF6E6')
| |
| yesBtn.textContent = '确定'
| |
| yesBtn.addEventListener('click', () => {
| |
| if (safe) {
| |
| safe = false // 安全锁
| |
| callback(true)
| |
| selfRemove() // 移除确认框
| |
| }
| |
| })
| |
| container.appendChild(yesBtn)
| |
| // 取消按钮
| |
| let noBtn = document.createElement('div')
| |
| noBtn.className = 'btn'
| |
| noBtn.style.setProperty('--hover-color', '#FDF6E6')
| |
| noBtn.textContent = '取消'
| |
| noBtn.addEventListener('click', () => {
| |
| if (safe) {
| |
| safe = false
| |
| callback(false)
| |
| selfRemove()
| |
| }
| |
| })
| |
| container.appendChild(noBtn)
| |
| // 关闭按钮
| |
| let closeBtn = document.createElement('div')
| |
| closeBtn.className = 'close'
| |
| closeBtn.textContent = '×'
| |
| closeBtn.addEventListener('click', () => {
| |
| if (safe) {
| |
| safe = false
| |
| selfRemove()
| |
| }
| |
| })
| |
| container.appendChild(closeBtn)
| |
| // 显示UI
| |
| container.style.opacity = '0'
| |
| container.style.top = '20%'
| |
| container.style.transitionTimingFunction = 'ease-out'
| |
| document.body.appendChild(container)
| |
| // 调整位置
| |
| container.style.marginLeft = (container.offsetWidth * -0.5) + 'px'
| |
| container.style.marginTop = (container.offsetHeight * -0.5) + 'px'
| |
| container.style.transitionDuration = '.3s'
| |
| container.style.opacity = '1'
| |
| container.style.top = '50%'
| |
| setTimeout(() => { container.style.transitionTimingFunction = 'ease-in' }, 400)
| |
| /**移除自己 */
| |
| function selfRemove() {
| |
| container.style.top = '20%'
| |
| container.style.opacity = '0'
| |
| setTimeout(() => { container.remove() }, 400)
| |
| }
| |
| }
| |
| // CSS
| |
| let s = document.createElement('style')
| |
| s.textContent = `
| |
| .confirmUIcontainer{
| |
| position: fixed;
| |
| border: 8px solid #0003;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| padding: 0;
| |
| top: 50%;
| |
| left: 50%;
| |
| min-width: 20vw;
| |
| background: #fbf2dc;
| |
| user-select: none;
| |
| }
| |
| .confirmUIcontainer > center{
| |
| padding: 1.2rem .6rem 1.2rem .6rem;
| |
| font-size: 1.05rem;
| |
| }
| |
| .confirmUIcontainer .btn{
| |
| width: 50%;
| |
| border: 1px solid #ccc;
| |
| padding: 1rem;
| |
| box-sizing: border-box;
| |
| font-size: 1.15rem;
| |
| line-height: 1.15rem;
| |
| float: left;
| |
| background-color: transparent;
| |
| text-align: center;
| |
| transition: .3s ease;
| |
| cursor: pointer;
| |
| }
| |
| .confirmUIcontainer .btn:hover{
| |
| background-color: var(--hover-color,transparent);
| |
| }
| |
| .confirmUIcontainer .close{
| |
| position: absolute;
| |
| width: 2rem;
| |
| height: 2rem;
| |
| top: 0;
| |
| right: 0;
| |
| font-size: 2rem;
| |
| line-height: 2rem;
| |
| text-align: center;
| |
| }
| |
| `
| |
| document.head.appendChild(s)
| |
| })
| |
