아카라이브 미리보기 이미지, 모두 열기

Greasy Fork is available in English.
아카라이브 미리보기 이미지, 모두 열기

Extract image URL from specific element and log it to console
当前为 2024-04-14 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         아카라이브 미리보기 이미지, 모두 열기
// @namespace    Violentmonkey Scripts
// @version      1.01
// @description  Extract image URL from specific element and log it to console
// @author       Your Name
// @match        https://arca.live/b/*
// @grant        none
// ==/UserScript==

// 변수들을 만들어 기본값을 설정합니다.
var originalThumbnail = true; // 썸네일 클릭 시 원본 이미지 불러오기
var openAllButton = true; // 모두 열기 버튼 생성
var thumbnail = true; // 미리보기 이미지 생성
var thumbnailHover = true; // 미리보기 이미지 마우스 올리면 보이게
var time = 200; // 0.1초 뒤에 이미지 생성

// 썸네일 클릭 시 원본 이미지 불러오기
if (originalThumbnail) {
    (function() {
        'use strict';

        // 이미지 프리뷰 링크를 찾아서 이벤트 핸들러를 추가합니다.
        document.querySelectorAll('a.title.preview-image').forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault(); // 기본 동작 방지

                // 이미지의 src 속성을 가져옵니다.
                var imageUrl = link.querySelector('img').getAttribute('src');

                // "&type=list" 부분을 제거합니다.
                imageUrl = imageUrl.replace(/&type=list/g, '');

                // 새로운 URL로 리다이렉션합니다.
                window.location.href = imageUrl;
            });
        });
    })();
}

// 요소를 찾기 위한 CSS 선택자
var selector = 'a.vrow.column:not(.notice)';

// 요소들을 모두 가져오기
var elements = document.querySelectorAll(selector);

// 모두 열기 버튼 생성 부분
if (openAllButton) {
    var newButton = document.createElement('a');
    newButton.className = 'btn btn-sm btn-primary float-left'; // btn-danger 대신 btn-primary로 변경
    newButton.href = '#'; // #으로 설정하여 페이지 이동을 방지합니다.
    newButton.innerHTML = '<span class="ion-android-list"></span><span> 모두 열기 </span>'; // 버튼 텍스트 및 아이콘 설정

    // 버튼 클릭 시 동작하는 함수 정의
    newButton.addEventListener('click', function(event) {
        event.preventDefault(); // 기본 동작 방지

        // 각 요소의 href 속성 값 새 탭에서 열기
        elements.forEach(function(element) {
            var href = element.getAttribute('href');
            var classes = element.className.split(' ');

            // 필터된 클래스를 가지고 있는 요소는 제외
            if (href && !classes.includes('filtered') && !classes.includes('filtered-keyword')) {
                window.open(href, '_blank'); // 새 탭에서 링크 열기
            }
        });
    });

    // 모두 열기 버튼을 삽입할 위치 찾기
    var targetElement = document.querySelector('.form-control.select-list-type');

    // 모두 열기 버튼을 삽입할 위치의 앞에 모두 열기 버튼 추가
    targetElement.parentNode.insertBefore(newButton, targetElement);
}

if (thumbnail) {
    setTimeout(function() {
        // 미리보기 이미지 생성 코드를 여기에 넣으세요.
        elements.forEach(function(element) {
            var vcolId = element.querySelector('.vrow-top .vcol.col-id');
            var vcolTitle = element.querySelector('.vrow-top .vcol.col-title');

            vcolId.style.width = '3rem';

            var vcolThumb = document.createElement('span');
            vcolThumb.className = 'vcol col-thumb';
            vcolThumb.style.width = '5rem';

            // vcol col-box 요소를 vcol col-title 요소 앞에 삽입
            vcolTitle.parentNode.insertBefore(vcolThumb, vcolTitle);

            // vrow-preview 요소를 찾습니다.
            var vrowPreview = element.querySelector('.vrow-preview');

            // vrow-preview 요소가 있는 경우에만 처리
            if (vrowPreview) {
                element.style.height = 'auto';
                element.style.paddingTop = '3px';
                element.style.paddingBottom = '3px';

                // 이미지의 src 속성을 가져옵니다.
                var imageElement = vrowPreview.querySelector('img');

                var imageUrl = imageElement.getAttribute('src');

                // 이미지 요소 생성 및 설정
                var image = document.createElement('img');
                image.src = imageUrl;
                image.style.width = '5rem'; // 이미지의 너비와 높이와 동일하게 설정
                image.style.height = '5rem';

                // vcol col-box 요소에 이미지를 추가
                vcolThumb.appendChild(image);

                // vrow-preview의 width와 height를 150px로 설정
                vrowPreview.style.width = '30rem';
                vrowPreview.style.height = 'auto';
                vrowPreview.style.top = 'auto';
                vrowPreview.style.left = '10rem';
                vrowPreview.style.display = 'none';
                if (thumbnailHover) {
                    // 이미지에 마우스를 올리면 클래스명 변경
                    image.addEventListener('mouseenter', function() {
                        imageElement.src = imageUrl.replace('&type=list', '');
                        vrowPreview.style.display = null;
                    });

                    // 이미지를 벗어나면 다시 클래스명 변경
                    image.addEventListener('mouseleave', function() {
                        vrowPreview.style.display = 'none';
                    });
                }
            }
        });
    }, time); // 100밀리초 = 0.1초
}