☰

Greasy Fork is available in English.

arcalive 이미지 미리보기

arcalive 게시글의 이미지를 미리보여줍니다.

// ==UserScript==
// @name         arcalive 이미지 미리보기
// @namespace    http://tampermonkey.net/
// @version      0.24
// @description  arcalive 게시글의 이미지를 미리보여줍니다.
// @author       You
// @match        https://arca.live/b/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=arca.live
// @grant        none
// @license      MIT
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==
//'use strict';
const pose = '날짜'; // 어디에다 이미지를 붙일지 선택 ! [제목, 날짜 중에서]

function imageFetchAndAttatch(vrow) // 이미지 페칭해서 붙임.
{
    let a=fetch(vrow.href)
        .then(response=>response.text())
        .then(html=>{
        var parser = new DOMParser();
        return parser.parseFromString(html, 'text/html');
    })
        .then(html=>{
        let image = html.querySelector('.article-content img')
        if (image)
        {
            const aspectRatio = image.height/image.width;
            image.width = 100;
            image.height = aspectRatio * image.width;
            vrow.querySelector('.col-time')?.prepend(image);
        }
    })
}
function moveImageWithMark(vrow, image){
    const brTag=document.createElement('span');

    let dest;
    switch (pose)
    {
        case '제목':
            dest = vrow.querySelector('.title');
            dest.append(brTag, image);
            dest.prepend(mark);
            break;
        case '날짜':
            dest = vrow.querySelector('.col-time');
            dest.prepend(image);
            image.append(brTag);
            break;
    }
}

(function() {
    const vrows=document.querySelectorAll('.vrow:not(.notice)');

    for (const vrow of vrows)
    {
        const vrowPrev = vrow.querySelector('.vrow-preview');
        if (vrowPrev)
        {
            const image = vrowPrev.children[0];
            image.width =100; // 혹시나 이미지크기가 이상할경우대비 100px로.

            moveImageWithMark(vrow, image);
            vrowPrev.style.display = 'none';
        }
        else
        {
            imageFetchAndAttatch(vrow);
        }

    }
        const articles=document.querySelectorAll('.article-list a.vrow.column');
        articles.forEach(article=>{article.style='height: auto !important'});

        // 이상현상제거
        const vrowBottoms = document.querySelectorAll('.vrow-bottom');
        for (const vrowBottom of vrowBottoms)
        {
            for (const v of vrowBottom.children)
            {
                v.style.display='flex';
                v.style['align-items']='center';
                v.style['flex-direction']='column';
                v.style['justify-content']='center';
                v.style['align-content']='center';
            }
        }

}
    )();