☰

UtaTen FullScreen Columnizer

通过键盘快捷键，UtaTen的歌词被分成宽的列。

当前为 2020-11-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        UtaTen FullScreen Columnizer
  3. // @name:ja     UtaTen FullScreen Columnizer
  4. // @name:zh-CN  UtaTen FullScreen Columnizer
  5. // @namespace   knoa.jp
  6. // @description It offers full-width and columnized view by keyboard shortcuts on UtaTen lyrics.
  7. // @description:ja キーボードショートカットで、UtaTen の歌詞を横幅いっぱいのカラム分け表示にします。
  8. // @description:zh-CN 通过键盘快捷键，UtaTen的歌词被分成宽的列。
  9. // @include     https://utaten.com/lyric/*
  10. // @noframes
  11. // @version     1.0.2
  12. // @grant       none
  13. // ==/UserScript==
  14.  
  15. (function(){
  16.   const SCRIPTID = 'UtaTenFullScreenColumnizer';
  17.   console.log(SCRIPTID);
  18.   const body = document.body;
  19.   const header = document.querySelector('body > header');
  20.   const lyricBody = document.querySelector('.lyricBody');
  21.   if(!header || !lyricBody) return console.log(SCRIPTID, 'Elements not found.');
  22.   const beforeLyricBody = lyricBody.previousElementSibling;
  23.   window.addEventListener('keydown', e => {
  24.     if(['input', 'textarea'].includes(e.target.localName) || e.target.isContentEditable) return;
  25.     if(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) return;
  26.     console.log(SCRIPTID, e.key);
  27.     switch(e.key){
  28.       case('1'):
  29.       case('2'):
  30.       case('3'):
  31.       case('4'):
  32.       case('5'):
  33.       case('6'):
  34.       case('7'):
  35.       case('8'):
  36.       case('9'):
  37.         body.classList.add(SCRIPTID);
  38.         header.after(lyricBody);
  39.         lyricBody.dataset.columns = e.key;
  40.         e.preventDefault();
  41.         break;
  42.       case('0'):
  43.       case('Escape'):
  44.         body.classList.remove(SCRIPTID);
  45.         beforeLyricBody.after(lyricBody);
  46.         delete lyricBody.dataset.columns;
  47.         e.preventDefault();
  48.         break;
  49.     }
  50.   }, true);
  51.   (function(css){
  52.     const style = document.createElement('style');
  53.     style.id = SCRIPTID;
  54.     style.type = 'text/css';
  55.     style.textContent = css;
  56.     document.head.appendChild(style);
  57.   })(`
  58.     /* 横幅いっぱいに */
  59.     .lyricBody[data-columns]{
  60.       width: 100vw;
  61.       padding: 2em 0em 2em 2em;
  62.       margin: 0;
  63.       box-sizing: border-box;
  64.     }
  65.     /* カラム分け */
  66.     .lyricBody[data-columns="1"] > div > div{columns: 1}
  67.     .lyricBody[data-columns="2"] > div > div{columns: 2}
  68.     .lyricBody[data-columns="3"] > div > div{columns: 3}
  69.     .lyricBody[data-columns="4"] > div > div{columns: 4}
  70.     .lyricBody[data-columns="5"] > div > div{columns: 5}
  71.     .lyricBody[data-columns="6"] > div > div{columns: 6}
  72.     .lyricBody[data-columns="7"] > div > div{columns: 7}
  73.     .lyricBody[data-columns="8"] > div > div{columns: 8}
  74.     .lyricBody[data-columns="9"] > div > div{columns: 9}
  75.     /* 他の要素を非表示に */
  76.     .lyricBody[data-columns] ~ *:not(footer),
  77.     .lyricBody[data-columns] ~ footer > aside{
  78.       display: none;
  79.     }
  80.     /* フッタより下も塗りつぶす */
  81.     body.${SCRIPTID}{
  82.       background: #343330;
  83.     }
  84.   `);
  85. })();