// ==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.
// @description:ja キーボードショートカットで、UtaTen の歌詞を横幅いっぱいのカラム分け表示にします。
// @description:zh-CN 通过键盘快捷键，UtaTen的歌词被分成宽的列。
// @include     https://utaten.com/lyric/*
// @noframes
// @version     1.0.1
// @grant       none
// @downloadURL none
// ==/UserScript==

(function(){
  const SCRIPTID = 'UtaTenFullScreenColumnizer';
  console.log(SCRIPTID);
  const html = document.documentElement;
  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;
  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){
      case('1'):
      case('2'):
      case('3'):
      case('4'):
      case('5'):
      case('6'):
      case('7'):
      case('8'):
      case('9'):
        header.after(lyricBody);
        lyricBody.dataset.columns = e.key;
        e.preventDefault();
        break;
      case('0'):
      case('Escape'):
        beforeLyricBody.after(lyricBody);
        delete lyricBody.dataset.columns;
        e.preventDefault();
        break;
    }
  }, true);
  (function(css){
    const style = document.createElement('style');
    style.id = SCRIPTID;
    style.type = 'text/css';
    style.textContent = css;
    document.head.appendChild(style);
  })(`
    /* 横幅いっぱいに */
    .lyricBody[data-columns]{
      width: 100vw;
      padding: 2em 0em 2em 2em;
      margin: 0;
      box-sizing: border-box;
    }
    /* カラム分け */
    .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}
    /* 他の要素を非表示に */
    .lyricBody[data-columns] ~ *:not(footer),
    .lyricBody[data-columns] ~ footer > aside{
      display: none;
    }
  `);
})();