// ==UserScript==
// @name         TOKIMEKI Media ArrowShortcut Plus
// @namespace    https://tokimeki.blue/
// @version      0.1.0
// @description  TOKIMEKIでMedia欄から画像を開いたときの矢印キーの動作を変更する
// @author       mudo34
// @match        https://tokimeki.blue/*
// @icon         https://www.google.com/s2/favicons?domain=tokimeki.blue
// @grant        none
// @noframes
// ==/UserScript==

(function() {
  'use strict';

  /* クリック時の処理 */
  document.addEventListener('click', e => {

    const wrapper = e.target.closest('.media-content-wrap');
    if(!wrapper) return;

    const prev = e.target.closest('.media-content-nav__item--prev');
    const next = e.target.closest('.media-content-nav__item--next');

    // Ctrl中は本来の機能で通す
    if(e.ctrlKey) return;

    if(prev) {
        emblaSlideClick(e, wrapper, 'prev');
        return;
    }
    if(next) {
        emblaSlideClick(e, wrapper, 'next');
    }

  }, true);

  /* 矢印キーの処理 */
  document.addEventListener('keydown', e => {

    if( e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' ) return;

    // Ctrl中は本来の機能で通す
    if(e.ctrlKey) return;

    const wrapper = document.querySelector('.media-content-wrap');

    if(!wrapper) return;

    if(e.key === 'ArrowLeft') {
      emblaSlideClick(e, wrapper, 'prev');
      return;
    }

    if(e.key === 'ArrowRight') {
      emblaSlideClick(e, wrapper, 'next');
    }

  }, true);

  /* スライドの現在地(transformXを取得) */
  function getTranslateX(el) {
    const matrix = new DOMMatrix(getComputedStyle(el).transform);
    return Math.abs(matrix.m41);
  }

  /* スライド移動処理 */
  function emblaSlideClick(e, wrapper, navi) {
    const btn = wrapper.querySelector('.embla__' + navi);
    if(!btn) return;

    const embla = wrapper.querySelector('.embla');
    const container = wrapper.querySelector('.embla__container');
    if(!embla || !container) return;

    const x = getTranslateX(container);
    const maxX = container.scrollWidth - embla.clientWidth;

    /* 表示中の画像の位置判定 */
    /* ちょっとでも見えたらその画像見てることにする */
    const slides = wrapper.querySelectorAll('.embla__slide');
    const step = slides[1].offsetLeft - slides[0].offsetLeft;
    const threshold = step * 0.8;

    const isLast = (x >= maxX - threshold);
    const isFirst = (x <= threshold);

    if( (navi === 'prev' && isFirst) || (navi === 'next' && isLast) ) return;

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    btn.click();
  }

})();