Tweetdeck media zoom

Greasy Fork is available in English.
Tweetdeck media zoom

タブレット専用に選択した画像を広げて表示
当前为 2020-11-11 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Tweetdeck media zoom
// @namespace    http://tampermonkey.net/
// @version      0.1.4
// @description  タブレット専用に選択した画像を広げて表示
// @author       y_kahou
// @match        https://tweetdeck.twitter.com/
// @grant        none
// @noframes
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// ==/UserScript==

var $ = window.jQuery;

function __css__() {/*
.med-origlink { display: none; }
.med-flaglink { display: none; }
.med-embeditem {
    top: 0;
    bottom: 0;
}
.med-tweet {
    background: rgb(0, 0, 0, 0.8);
    right: 0px;
    left: 0px;
    transition: 0.5s;
}
.view {
    opacity: 0;
    pointer-events: none;
}

.js-med-tweet .item-box {
    padding-left: 100px;
    padding-right: 100px;
}
.js-med-tweet .account-link {
    flex: none;
}
.js-med-tweet .account-link > .nbfc{
    display: inline-block;
}
.js-med-tweet time {
    position: absolute;
    right: 100px;
}
*/}
function addStyle() {
    var css = (__css__).toString()
        .match(/[^]*\/\*([^]*)\*\/\}$/)[1]
        .replace(/\{\*/g, '/*')
        .replace(/\*\}/g, '*/');
        
    var font = $('html').css('font-family')
    css += `pre { white-space: pre-wrap; font-family: ${font}; }`
    
    $('head').append(`<style id="mystyle" type="text/css">${css}</style>`)
}
(function() {
    'use strict';
    addStyle();
    
    var tapCount = 0;
    var tapCount2 = 0;
    
    var controll = function(modal) {
        
        $(modal).on('DOMSubtreeModified propertychange', function() {
            // ツイートが改行を消されるのを防ぐ
            var tweet = $('p', modal)[0]
            if (tweet) {
                $(tweet).replaceWith(`<pre>${$(tweet).html()}</pre>`);
            }
        })
        
        // 画像ダブルタップで元ツイート表示
        $(modal).on('touchstart', '.med-link', function(e) {
            if (!tapCount) {
                ++tapCount;
                setTimeout(() => tapCount = 0, 350);
                e.preventDefault();
            } else {
                tapCount = 0 ;
                e.stopPropagation();
            }
        })
        // 余白、画像シングルタップでツイート表示切替
        // 余白ダブルタップでモーダル閉じる
        $(modal).on('touchstart', '.l-table', function(e) {
            if (!tapCount2) {
                ++tapCount2;
                setTimeout(() => tapCount2 = 0, 350);
                $('.med-tweet').toggleClass('view')
            } else {
                tapCount2 = 0 ;
                e.preventDefault();
                $(modal).empty().hide();
            }
        })
        // ツイートの左右端余白タップでツイート非表示
        // 一応クリックでも消せる
        $(modal).on('touchstart click', '.med-tweet', function(e) {
            var tgl = false
            // タッチ座標
            var x, y;
            if (e.type == 'click') {
                x = e.pageX
                y = e.pageY
            } else {
                x = e.touches[0].pageX
                y = e.touches[0].pageY
            }
            // 左余白座標
            var of = $(this).offset()
            var top    = of.top,
                left   = of.left,
                bottom = top + $(this).height(),
                right  = of.left + 100;
            if (top <= y && y <= bottom &&
                left <= x && x <= right) { tgl = true }
            
            // 右余白座標
            right = left + $(this).width()
            left = right - 100;
            if (top <= y && y <= bottom &&
                left <= x && x <= right) { tgl = true }
            
            if (tgl) {
                $('.med-tweet').toggleClass('view')
                e.preventDefault();
            }
        })
    }
    var iv = setInterval(function() {
        var modal = $('#open-modal')[0];
        if (modal) {
            clearInterval(iv);
            controll(modal);
        }
    }, 500)
})();