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

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

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

// 변수들을 만들어 기본값을 설정합니다.
var enableThumbnailImage = true; // 썸네일 클릭 시 원본 이미지 불러오기
var enableOpenAllButton = true; // 모두 열기 버튼 생성
var enableElementProcessing = true; // 미리보기 이미지 생성
var time = 100; // 0.1초 뒤에 이미지 생성

// 썸네일 클릭 시 원본 이미지 불러오기
if (enableThumbnailImage) {
    (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);

// 0.1초 뒤 실행
setTimeout(function() {
    // 모두 열기 버튼 생성 부분
    if (enableOpenAllButton) {
        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 (enableElementProcessing) {
        elements.forEach(function(element) {
            // vcol col-title 요소 앞에 vcol col-box 요소 생성
            var vcolTitle = element.querySelector('.vrow-top .vcol.col-title');
            var vcolBox = document.createElement('span');
            vcolBox.className = 'vcol col-box';
            vcolBox.style.width = '5rem';
            vcolBox.style.height = '5rem';

            // 이미지를 담는 div 요소 생성
            var imageContainer = document.createElement('span');
            imageContainer.className = 'image-container'; // 클래스 설정
            imageContainer.style.width = '100%'; // 이미지의 너비와 높이와 동일하게 설정
            imageContainer.style.height = '100%';
            imageContainer.style.overflow = 'hidden'; // 이미지가 넘치지 않도록 설정

            // 이미지가 있는지 확인
            var imageElement = element.querySelector('.vrow-preview img');

            // 이미지가 있는 경우에만 처리
            if (imageElement) {
                // vrow column 요소의 높이를 4rem으로 설정
                element.style.height = '5.5rem';

                // vcol col-id 요소의 너비를 3rem으로 설정
                var vcolId = element.querySelector('.vrow-top .vcol.col-id');
                vcolId.style.width = '3rem';

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

                // 이미지 요소 생성 및 설정
                var image = document.createElement('img');
                image.src = imageUrl;
                image.style.width = '100%'; // 부모 요소인 imageContainer에 꽉 차도록 설정
                image.style.height = 'auto'; // 이미지의 비율 유지

                // 이미지를 imageContainer에 추가
                imageContainer.appendChild(image);

                // vrow-preview의 width와 height를 150px로 설정
                var vrowPreview = element.querySelector('.vrow-preview');
                vrowPreview.style.width = '30rem';
                vrowPreview.style.height = 'auto';
                vrowPreview.style.top = 'auto';
                vrowPreview.style.left = '10rem';

                vrowPreview.style.display = 'none';

                // 이미지에 마우스를 올리면 클래스명 변경
                image.addEventListener('mouseenter', function() {
                    imageElement.src = imageUrl.replace('&type=list', '');
                    vrowPreview.style.display = null;
                });

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

            } else {
                // 이미지가 없는 경우에는 높이를 4rem으로 설정하지 않음
                // vcol col-id 요소의 너비를 3rem으로 설정
                var vcolId = element.querySelector('.vrow-top .vcol.col-id');
                vcolId.style.width = '3rem';
            }

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

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