It offers full-width and columnized view by keyboard shortcuts on UtaTen lyrics. No more scrolling.
As of
// ==UserScript==
// @name UtaTen FullScreen Columnizer
// @name:ja UtaTen FullScreen Columnizer
// @name:zh-CN UtaTen FullScreen Columnizer
// @namespace knoa.jp
// @description It offers full-width and columnized view by keyboard shortcuts on UtaTen lyrics. No more scrolling.
// @description:ja キーボードショートカットで、UtaTen の歌詞を横幅いっぱいのカラム分け表示にします。もうスクロールは要りません。
// @description:zh-CN 通过键盘快捷键，UtaTen的歌词被分成宽的列。不需要再滚动了。
// @include https://utaten.com/lyric/*
// @noframes
// @version 1.1.2
// @grant none
// ==/UserScript==
(function(){
const SCRIPTID = 'UtaTenFullScreenColumnizer';
console.log(SCRIPTID);
/* elements to use */
const body = document.body;
const header = document.querySelector('body > header');
const lyricBody = document.querySelector('.lyricBody');
if(!header || !lyricBody) return console.log(SCRIPTID, 'Elements not found.');
const beforeLyricBody = lyricBody.previousElementSibling;
/* key bindings */
window.addEventListener('keydown', e => {
if(['input', 'textarea'].includes(e.target.localName) || e.target.isContentEditable) return;
if(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) return;
console.log(SCRIPTID, e.key);
switch(e.key){
/* columnize */
case('1'):
case('2'):
case('3'):
case('4'):
case('5'):
case('6'):
case('7'):
case('8'):
case('9'):
body.classList.add(SCRIPTID);
if(document.fullscreenElement === null) header.after(lyricBody);
lyricBody.dataset.columns = e.key;
e.preventDefault();
break;
/* reset to default */
case('0'):
case('Escape'):
body.classList.remove(SCRIPTID);
beforeLyricBody.after(lyricBody);
delete lyricBody.dataset.columns;
e.preventDefault();
break;
/* browser's fullscreen */
case('f'):
if(document.fullscreenElement === null) lyricBody.requestFullscreen();
else document.exitFullscreen();
e.preventDefault();
break;
}
}, true);
/* fire the reset event on fullscreen exit */
window.addEventListener('fullscreenchange', e => {
if(document.fullscreenElement) return;
else window.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
});
/* add styles */
(function(css){
const style = document.createElement('style');
style.id = SCRIPTID;
style.type = 'text/css';
style.textContent = css;
document.head.appendChild(style);
})(`
/* maximize lyricBody */
.lyricBody[data-columns]{
width: 100vw;
padding: 2em 0em 2em 2em;
margin: 0;
box-sizing: border-box;
}
/* columnize */
.lyricBody[data-columns="1"] > div > div{columns: 1}
.lyricBody[data-columns="2"] > div > div{columns: 2}
.lyricBody[data-columns="3"] > div > div{columns: 3}
.lyricBody[data-columns="4"] > div > div{columns: 4}
.lyricBody[data-columns="5"] > div > div{columns: 5}
.lyricBody[data-columns="6"] > div > div{columns: 6}
.lyricBody[data-columns="7"] > div > div{columns: 7}
.lyricBody[data-columns="8"] > div > div{columns: 8}
.lyricBody[data-columns="9"] > div > div{columns: 9}
/* no distracting elements */
.lyricBody[data-columns] ~ *:not(footer),
.lyricBody[data-columns] ~ footer > aside{
display: none;
}
/* paint the space below the footer */
body.${SCRIPTID}{
background: #343330;
}
`);
})();