// ==UserScript==
// @name         Tweetdeck media zoom
// @namespace    http://tampermonkey.net/
// @version      0.1.6
// @description  タブレット専用にモーダルの画像を広げて表示
// @author       y_kahou
// @match        https://tweetdeck.twitter.com
// @grant        none
// @noframes
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// @downloadURL none
// ==/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 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) {
            var dom = $(this)
            if (!dom.data('dbltap')) {
                dom.data('dbltap', true);
                setTimeout(() => dom.data('dbltap', false), 350);
                e.preventDefault();
            } else {
                dom.data('dbltap', false);
                e.stopPropagation();
            }
        })
        // 動画は画面タップで再生停止
        $(modal).on('touchstart', 'video', function(e) {
            if (this.paused) this.play();
            else this.pause();
            e.stopPropagation();
        })
        // 余白、画像シングルタップでツイート文表示切替
        // 余白ダブルタップでモーダル閉じる
        $(modal).on('touchstart', '.l-table', function(e) {
            var dom = $(this)
            if (!dom.data('dbltap')) {
                dom.data('dbltap', true);
                setTimeout(() => dom.data('dbltap', false), 350);
                $('.med-tweet').toggleClass('view')
                e.preventDefault();
            } else {
                dom.data('dbltap', false)
                e.preventDefault();
                $(modal).empty().hide();
            }
        })
        // ツイート文の左右端余白タップでツイート文非表示(一応クリックでも可)
        $(modal).on('touchstart click', '.med-tweet', function(e) {
            var tgl = false
            var x = (e.type == 'click') ? e.pageX : e.touches[0].pageX
            var y = (e.type == 'click') ? e.pageY : e.touches[0].pageY
            
            // 左余白座標
            var of = $(this).offset()
            var rect = {
                top    : of.top,
                left   : of.left,
                right  : of.left + 100,
                hit: (x, y) => (rect.top <= y && y <= rect.bottom && rect.left <= x && x <= rect.right)
            }
            rect.bottom = of.top + $(this).height()
            tgl |= rect.hit(x, y)
            
            // 右余白座標
            rect.right = rect.left + $(this).width()
            rect.left = rect.right - 100;
            tgl |= rect.hit(x, y)
            
            if (tgl) {
                $('.med-tweet').toggleClass('view')
                e.preventDefault();
            }
        })
    }
    var iv = setInterval(function() {
        var modal = $('#open-modal')[0];
        if (modal) {
            clearInterval(iv);
            controll(modal);
        }
    }, 500)
})();