// ==UserScript==
// @name         Twitter Image Mouse Wheel Switcher without transform animation
// @name:zh-CN   Twitter 鼠标滚轮无过渡动画切换图像
// @description  Switch previous or next image with mouse wheel (without transform animation), click on the image to close it.
// @description:zh-CN   Twitter 鼠标滚轮无过渡动画地切换图像,点击图像可关掉图像
// @version      0.0.3
// @match        https://x.com/*
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAAAAABXZoBIAAAA/0lEQVR4AbXPIazCMACE4d+L2qoZFEGSIGcRc/gJJB5XMzGJmK9EN0HMi+qaibkKVF1txdQe4g0YzPK5yyWXHL9TaPNQ89LojH87N1rbJcXkMF4Fk31UMrf34hm14KUeoQxGArALHTMuQD2cAWQfJXOpgTbksGr9ng8qluShJTPhyCdx63POg7rEim95ZyR68I1ggQpnCEGwyPicw6hZtPEGmnhkycqOio1zm6XuFtyw5XDXfGvuau0dXHzJp8pfBPuhIXO9ZK5ILUCdSvLYMpc6ASBtl3EaC97I4KaFaOCaBE9Zn5jUsVqR2vcTJZO1DdbGoZryVp94Ka/mQfE7f2T3df0WBhLDAAAAAElFTkSuQmCC
// @license      MIT
// @namespace https://greasyfork.org/users/982784
// @downloadURL https://update.greasyfork.icu/scripts/576311/Twitter%20Image%20Mouse%20Wheel%20Switcher%20without%20transform%20animation.user.js
// @updateURL https://update.greasyfork.icu/scripts/576311/Twitter%20Image%20Mouse%20Wheel%20Switcher%20without%20transform%20animation.meta.js
// ==/UserScript==

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
    #xcom-important-ul {
        transform: translate3d(var(--translate3dx1), 0px, 0px) !important;
    }
`)
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];


addEventListener('wheel', function (e) {
    if (e.target.alt === '图像') {
        let li0 = e.target.closest('li')
        if (!li0) return
        e.stopImmediatePropagation()
        e.preventDefault()
        let ul = li0.parentElement
        let x = 0
        for (let li of ul.children) {
            if (li === li0) break
            else x -= parseFloat(li.style.width)
        }
        if (e.deltaY > 0) {
            let next_w = parseFloat(li0.nextElementSibling?.style.width)
            if (next_w) {
                ul.style.setProperty('--translate3dx1', x - next_w + 'px');
                ul.id = 'xcom-important-ul'
            }
            document.querySelector('button[aria-label$="下一张幻灯片"]')?.click()
        }
        else {
            let next_w = parseFloat(li0.previousElementSibling?.style.width)
            if (next_w) {
                ul.style.setProperty('--translate3dx1', x + next_w + 'px');
                ul.id = 'xcom-important-ul'
            }
            document.querySelector('button[aria-label$="上一张幻灯片"]')?.click()
        }
    }
},
    { passive: false })
addEventListener('click', function (e) {
    if (e.target.alt === '图像') {
        let btn_close = document.querySelector('button[aria-label="关闭"]')
        if (btn_close) {
            e.stopImmediatePropagation()
            e.preventDefault()
            btn_close.click()
        }
    }
}, { capture: true })