arcaliveDualMode2

아카라이브 심야식당 게시글 목록을 둘로나눠, 좌우에 각각 보여줍니다.
目前为 2022-06-30 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         arcaliveDualMode2
// @namespace    http://tampermonkey.net/
// @version      0.42
// @description  아카라이브 심야식당 게시글 목록을 둘로나눠, 좌우에 각각 보여줍니다.
// @author       Jayscript
// @match        https://arca.live/b/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=arca.live
// @grant        none
// @license      MIT
// ==/UserScript==
"use strict";

let originalMediaWidth = getOriginalMediaWidth();
const originalContentWrapper = getContentWrapperCloned();
let changedContentWrapper;

let timer = null;


function arcaliveDualMode()
{
    if (window.innerWidth >100)
    {
        removeRightSidebar();
        expandContentWrapper();
        moveArticlesToRightPlane();
        restoreMediaSize();
        changedContentWrapper = getContentWrapper();
        changedContentWrapper.after(originalContentWrapper);
        setDisplayOptionAsWidthSize();
    }

    addEventListener('resize', function() {	clearTimeout(timer); timer = setTimeout(setDisplayOptionAsWidthSize, 300); console.log('event');} );
}

function setDisplayOptionAsWidthSize()
{
    if (window.innerWidth > 1800)
    {
        originalContentWrapper.style.display = 'none';
        originalContentWrapper.querySelector('.right-sidebar').style.display ='none';
        changedContentWrapper.style.display = 'block';
        changedContentWrapper.querySelector('.right-sidebar').style.display ='none';
    }
    else
    {
        originalContentWrapper.style.display = 'block';
        let originalSidebar=originalContentWrapper.querySelector('.right-sidebar');
        originalSidebar.style.display='block';
        // TODO: Display Sidebar As small size.
        changedContentWrapper.style.display = 'none';
        changedContentWrapper.querySelector('.right-sidebar').style.display ='none';
    }
}

function getOriginalMediaWidth() {
    let image=document.querySelector('.fr-view.article-content img')
    return image? image.offsetWidth : null;
};


function getContentWrapperCloned() {
    return getContentWrapper().cloneNode(true);
}
function getContentWrapper() {
    return document.querySelector('.content-wrapper.clearfix');
}

function removeRightSidebar()
{
    document.querySelector('.right-sidebar').style.display = 'none';
}

function expandContentWrapper()
{
    let contentWrapper = document.querySelector('.content-wrapper.clearfix');
    contentWrapper.style='margin:0 5rem 0;max-width:100%';
    let containerBoard = document.querySelector('.containe-fluid.board-article');
    containerBoard.style='margin:0';
}
function moveArticlesToRightPlane()
{
    cloneArticleListAndArrangeIt();
    deleteDuplicatedArticles();
}

function cloneArticleListAndArrangeIt()
{
    let articleList = document.querySelector('.article-list');
    let articleList2 = articleList.cloneNode(true);
    articleList.after(articleList2);

    articleList.style='margin:5 0rem 0 0;float:left;width:49%;';
    articleList2.style='margin:5 0rem 0 0;float:right;width:49%;';
}
function deleteDuplicatedArticles()
{
    let articleList = document.querySelector('.article-list');
    let articleList2 = document.querySelectorAll('.article-list')[1];

    let articles=articleList.querySelectorAll('a.vrow:not(.notice)');
    let articles2=articleList2.querySelectorAll('a.vrow:not(.notice)');
    let noticesInArticles2=articleList2.querySelectorAll('a.vrow.notice');

    articles.forEach((el, i) => i>=15 && el.remove());
    articles2.forEach((el, i) => i<15 && el.remove());
    noticesInArticles2.forEach((el)=>el.remove());
}

function restoreMediaSize()
{
    let images = document.querySelectorAll('.fr-view.article-content img');
    let videos = document.querySelectorAll('.fr-view.article-content video');
    images.forEach(function (el) { el.style.width = `${originalMediaWidth}px`;});
    videos.forEach(function (el) { el.style.width = `${originalMediaWidth}px`;});
}

addEventListener('load',setTimeout(arcaliveDualMode,0));