☰

Hinatazaka46's Member and etc

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

  1. // ==UserScript==
  2. // @name           Hinatazaka46's Member and etc
  3. // @name:ja        日向坂46 メンバー その他
  4. // @namespace      naoqv.hinatazaka
  5. // @description    Hinatazaka46's  Member/Formation/Discography/TV/Video/What's Hinatazaka46?/fanclub
  6. // @description:ja 日向坂46 ニュース(詳細)/スケジュール(詳細)メンバー/フォーメーション/ディスコグラフィー/TV/動画/日向坂46とは？/ファンクラブ
  7. // @version        1.92
  8. // @match          https://www.hinatazaka46.com/s/official/media/detail/*
  9. // @match          https://www.hinatazaka46.com/s/official/news/detail/*
  10. // @match          https://www.hinatazaka46.com/s/official/search/*
  11. // @match          https://www.hinatazaka46.com/s/official/artist/*
  12. // @match          https://www.hinatazaka46.com/s/official/discography/*
  13. // @match          https://www.hinatazaka46.com/s/official/page/*
  14. // @match          https://www.hinatazaka46.com/s/official/contents/*
  15. // @match          https://www.hinatazaka46.com/s/official/contents_list*
  16. // @match          https://www.hinatazaka46.com/s/official/diary/aimashou/*
  17. // @match          https://www.hinatazaka46.com/s/official/diary/event/*
  18. // @match          https://www.hinatazaka46.com/s/official/diary/member?*
  19.  
  20. // @require        https://update.greasyfork.org/scripts/531768/1568599/HinatazakaSigthtStyleUtils.js
  21. // @require        https://update.greasyfork.org/scripts/531764/1566566/HinatazakaExceptionHandler.js
  22. // @require        https://update.greasyfork.org/scripts/531797/1566626/HinatazakaCookieUtils.js
  23. // @require        https://update.greasyfork.org/scripts/531769/1567070/HinatazakaBaseProcessor.js
  24.  
  25. // @icon           https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
  26. // @compatible     chrome
  27. // @compatible     firefox
  28. // @license        MIT
  29. // ==/UserScript==
  30.  
  31. const SCRIPT_NAME = "日向坂46 メンバー その他";
  32.  
  33.  
  34. const setReleaseYear = (releaseYearSelector) => {
  35.   let navText = `<header class="header" role="banner" style="z-index: 1000;">
  36.                    <nav class="nav">
  37.                      <div class="release">RELEASE<br/>YEAR</div>
  38.                      <ul class="nav-list">`;
  39.   
  40.   Array.prototype.forEach.call(document.querySelectorAll(releaseYearSelector), (x) => {
  41.  
  42.     const year = x.innerText;
  43.     const id_year = "y_" + year;
  44.     x.parentNode.setAttribute("id", id_year);
  45.     navText += `<li><a href="#${id_year}">${year}</a></li>`;
  46.   });
  47.  
  48.   navText += `</ul>
  49.     </nav>
  50.   </header>`;
  51.   
  52.   const main = document.querySelector('.l-main');
  53.   main.setAttribute("style", 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  54.   main.insertAdjacentHTML('afterbegin', navText);
  55.   
  56.  
  57.   const header = document.querySelector('header');
  58.   const nav = document.querySelector('.nav');
  59.   const navHeight = nav.clientHeight;
  60.  
  61.   window.onscroll = () => {
  62.  
  63.     if (window.pageYOffset >= header.clientHeight) {
  64.       nav.classList.add('fixed');
  65.       main.setAttribute('style', 'padding-top:' + navHeight + 'px');
  66.     } else {
  67.       nav.classList.remove('fixed');
  68.       main.setAttribute('style', 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  69.     }
  70.   };
  71.   
  72.   const latestYear = document.querySelector(releaseYearSelector);
  73.   const scrollTop = latestYear.parentNode.getBoundingClientRect().top - 30;
  74.  
  75. 	// スクロール位置リセット　〜「再読み込み」ボタン押下時の位置ズレ対応
  76. 	scrollTo(0, 0);
  77.  
  78. 	// リスト位置までページ内で縦スクロール
  79. 	scrollTo({
  80. 		top: scrollTop,
  81. 		behavior: "smooth"
  82. 	});
  83. };
  84.  
  85.  
  86.  
  87. doProcess(()=> {
  88.  
  89.   const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
  90.  
  91. 	const pageType = getPageType();
  92.  
  93.   let styleText;
  94.  
  95.   if (isMobile()) {
  96.  
  97.     if (pageType == "formation") {
  98.         
  99.         styleText = `
  100.           .formation_image li:hover {
  101.             height: 60px;
  102.             margin: -10px 0 0 0px;
  103.             width: 60px;
  104.     			}
  105.           .formation_image li:hover i {
  106.           	margin: -6px 0 0 -30px;
  107.             font-size: larger;
  108.     			}`;
  109.         
  110.         document.appendStyle(styleText);
  111.     }
  112.     
  113.     return;
  114.   }
  115.  
  116.   slimDownMenuBar();
  117.  
  118.   switch (pageType) {
  119.  
  120.     case "news":     
  121.     case "media":
  122.     case "detail": //news/schedule      
  123.       break;
  124.     case "search": // Member
  125.       break;
  126.     case "artist": // Member Detail
  127.       break;
  128.     case "artist/00" : // Discography   
  129.       
  130.       styleText += `
  131.       .fixed {
  132.         width: 12rem;
  133.         position: fixed;
  134.         top: 60px;
  135.         left: 40px;
  136.         z-index: 1;
  137.         font-size:larger;
  138.       }
  139.       .release {
  140.         line-height: 20px;
  141.       }
  142.       .l-container {
  143.         margin-top: -280px;
  144.       }
  145.       .c-disco__year {
  146.         padding-top: 20px;
  147.       }
  148.       .c-disco__year {font-size: 4rem; width: 12rem}
  149.       .c-disco__category {font-size: 14px;}
  150.       .p-page-head-sub--first {padding-top: 10px;}
  151.       `;
  152.       
  153.       setReleaseYear('.c-disco__year');
  154.  
  155.       break;
  156.  
  157.     case "page":
  158.       break;
  159.     case "contents":
  160.       break;
  161.  
  162.     case "formation":
  163.       
  164.       styleText += `
  165.       .l-container {
  166.         margin-top: -240px;
  167.       }
  168.       .formation_image :not(.small_f) li:hover {
  169.   	    height: 120px;
  170.         margin: -15.5px;
  171.   	    width: 110px;
  172.     	}
  173.       .formation_image li:hover i {
  174.         font-size: 16px;
  175.       }
  176.       .formation_image li i {
  177.         font-size: 14px;
  178.       }
  179.       .small_f span:hover {
  180.         height: 120px;
  181.         margin: -16px -0;
  182.   	    width: 116px;
  183.       }
  184.       .fixed {
  185.         width: 12rem;
  186.         position: fixed;
  187.         top: 60px;
  188.         left: 40px;
  189.         z-index: 1;
  190.         font-size:larger;
  191.       }
  192.       .release {
  193.         line-height: 20px;
  194.       }
  195.       .p-page-head-sub--first {
  196.         padding-top: 20px;
  197.       }`;
  198.       
  199.       setReleaseYear('.c-page-subtitle');
  200.       
  201.       break;
  202.  
  203.     case "member":
  204.       break;
  205.  
  206.     case "diary":
  207.       break;
  208.  
  209.     case "discography":
  210.       break;
  211.  
  212.     case "aimashou":
  213.       break;
  214.  
  215.     case "event":
  216.       break;
  217.  
  218.     default:
  219.       throw new Error(PAGE_TYPE_ERROR_MSG);
  220.   }
  221.  
  222.   document.appendStyle(styleText);
  223.   
  224. }, SCRIPT_NAME);