// ==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.1
// @grant       none
// @downloadURL 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'):
        lyricBody.requestFullscreen();
        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;
    }
  `);
})();