☰

Hinatazaka46's Member and etc

Hinatazaka46's Member/Formation/Discography/TV/Video/What's Hinatazaka46?/fanclub

// ==UserScript==
// @name           Hinatazaka46's Member and etc
// @name:ja        日向坂46 メンバー その他
// @namespace      naoqv.hinatazaka
// @description    Hinatazaka46's  Member/Formation/Discography/TV/Video/What's Hinatazaka46?/fanclub
// @description:ja 日向坂46 ニュース(詳細)/スケジュール(詳細)メンバー/フォーメーション/ディスコグラフィー/TV/動画/日向坂46とは？/ファンクラブ
// @version        1.82
// @match          https://www.hinatazaka46.com/s/official/media/detail/*
// @match          https://www.hinatazaka46.com/s/official/news/detail/*
// @match          https://www.hinatazaka46.com/s/official/search/*
// @match          https://www.hinatazaka46.com/s/official/artist/*
// @match          https://www.hinatazaka46.com/s/official/discography/*
// @match          https://www.hinatazaka46.com/s/official/page/*
// @match          https://www.hinatazaka46.com/s/official/diary/*
// @require        https://update.greasyfork.org/scripts/510022/1459768/HinatazakaStyleSetting.js
// @require        https://update.greasyfork.org/scripts/509934/1480445/HinatazakaExceptionHandlingWrapper.js
// @icon           https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
// @compatible     chrome
// @compatible     firefox
// @license        MIT
// ==/UserScript==

const SCRIPT_NAME = "日向坂46 メンバー その他";

const setStyle = (styleText) => {
  const styleElem = document.createElement("style");
  styleElem.setAttribute("rel", "stylesheet");
  styleElem.textContent = styleText;
  document.head.appendChild(styleElem);
};

const setReleaseYear = (releaseYearSelector) => {
  let navText = `<header class="header" role="banner">
                   <nav class="nav">
                     <div class="release">RELEASE<br/>YEAR</div>
                     <ul class="nav-list">`;
  
  Array.prototype.forEach.call(document.querySelectorAll(releaseYearSelector), (x) => {

    const year = x.innerText;
    const id_year = "y_" + year;
    x.parentNode.setAttribute("id", id_year);
    navText += `<li><a href="#${id_year}">${year}</a></li>`;
    
  });

  navText += `</ul>
    </nav>
  </header>`;
  
  const main = document.querySelector('.l-main');
  main.setAttribute("style", 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  main.insertAdjacentHTML('afterbegin', navText);
  

  const header = document.querySelector('header');
  const nav = document.querySelector('.nav');
  const navHeight = nav.clientHeight;

  window.onscroll = () => {

    if (window.pageYOffset >= header.clientHeight) {
      nav.classList.add('fixed');
      main.setAttribute('style', 'padding-top:' + navHeight + 'px');
    } else {
      nav.classList.remove('fixed');
      main.setAttribute('style', 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
    }
  };
  
  const latestYear = document.querySelector(releaseYearSelector);
  const scrollTop = latestYear.parentNode.getBoundingClientRect().top - 30;

	// スクロール位置リセット　〜「再読み込み」ボタン押下時の位置ズレ対応
	scrollTo(0, 0);

	// リスト位置までページ内で縦スクロール
	scrollTo({
		top: scrollTop,
		behavior: "smooth"
	});
};

handleException(()=> {
  
  darkMode();
  menuBarSetting();

  const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";

	const pageType = (location.href).match(new RegExp('\/(detail|search|artist\/00|artist|page|formation|member|diary|aimashou|event)\/'))[1];

  let styleText;

  switch (pageType) {
    case "detail": //news/schedule
      styleText = `
      .c-article__title, .p-article__text {
        color: ${DEFAULT_CL};
      }`;
      setStyle(styleText);
      Array.prototype.forEach.call(document.querySelectorAll('.p-article__text strong span, .p-article__text span strong'), (x) => {
        x.style.color ='aquamarine';
        x.style.backgroundColor ='crimson';
      });
      break;
    case "search": // Member
      break;
    case "artist": // Member Detail
      break;
    case "artist/00" : // Discography      
      styleText = `
      .fixed {
        width: 12rem;
        position: fixed;
        top: 60px;
        left: 40px;
        z-index: 1;
        font-size:larger;
      }
      .release {
        line-height: 20px;
      }
      .l-container {
        margin-top: -280px;
      }
      .c-disco__year {
        padding-top: 20px;
      }
      .c-disco__year {font-size: 4rem; width: 12rem}
      .c-disco__title, .c-disco__date {color: ${DEFAULT_CL};}
      .c-disco__category {font-size: 14px;}
      .p-page-head-sub--first {padding-top: 10px;}
      `;
      setStyle(styleText);
      setReleaseYear('.c-disco__year');
 
      break;

    case "page":
      break;

    case "formation":
      styleText = `
      .l-container {
        margin-top: -240px;
      }
      .formation_image :not(.small_f) li:hover {
  	    height: 120px;
        margin: -15.5px;
  	    width: 110px;
    	}
      .formation_image li:hover i {
        font-size: 16px;
      }
      .formation_image li i {
        font-size: 14px;
        color: ${DEFAULT_CL};
      }
      .small_f span:hover {
        height: 120px;
        margin: -16px -0;
  	    width: 116px;
      }
      .fixed {
        width: 12rem;
        position: fixed;
        top: 60px;
        left: 40px;
        z-index: 1;
        font-size:larger;
      }
      .release {
        line-height: 20px;
      }
      .p-page-head-sub--first {
        padding-top: 20px;
      }`;
      setStyle(styleText);
      setReleaseYear('.c-page-subtitle');
      
      break;

    case "member":
      break;

    case "diary":
      break;

    case "aimashou":
      break;

    case "event":
      break;

    default:
      throw new Error(PAGE_TYPE_ERROR_MSG);
  }
  
}, SCRIPT_NAME);