Hinatazaka46's Member and etc

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

目前為 2024-10-08 提交的版本,檢視 最新版本

  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.3
  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/diary/*
  15. // @require https://update.greasyfork.org/scripts/510022/1459768/HinatazakaStyleSetting.js
  16. // @require https://update.greasyfork.org/scripts/509934/1453163/HinatazakaExceptionHandlingWrapper.js
  17. // @icon https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
  18. // @compatible chrome
  19. // @compatible firefox
  20. // @license MIT
  21. // ==/UserScript==
  22.  
  23. const SCRIPT_NAME = "日向坂46 ディスコグラフィー その他";
  24.  
  25. const setStyle = (styleText) => {
  26. const styleElem = document.createElement("style");
  27. styleElem.setAttribute("rel", "stylesheet");
  28. styleElem.textContent = styleText;
  29. document.head.appendChild(styleElem);
  30. };
  31.  
  32. const setReleaseYear = (releaseYearSelector) => {
  33. let navText = `<header class="header" role="banner">
  34. <nav class="nav">
  35. <div class="release">RELEASE<br/>YEAR</div>
  36. <ul class="nav-list">`;
  37. Array.prototype.forEach.call(document.querySelectorAll(releaseYearSelector), (x) => {
  38.  
  39. const year = x.innerText;
  40. const id_year = "y_" + year;
  41. x.parentNode.setAttribute("id", id_year);
  42. navText += `<li><a href="#${id_year}">${year}</a></li>`;
  43. });
  44.  
  45. navText += `</ul>
  46. </nav>
  47. </header>`;
  48. const main = document.querySelector('.l-main');
  49. main.setAttribute("style", 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  50. main.insertAdjacentHTML('afterbegin', navText);
  51.  
  52. const header = document.querySelector('header');
  53. const nav = document.querySelector('.nav');
  54. const navHeight = nav.clientHeight;
  55.  
  56. window.onscroll = () => {
  57.  
  58. if (window.pageYOffset >= header.clientHeight) {
  59. nav.classList.add('fixed');
  60. main.setAttribute('style', 'padding-top:' + navHeight + 'px');
  61. } else {
  62. nav.classList.remove('fixed');
  63. main.setAttribute('style', 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  64. }
  65. };
  66. const latestYear = document.querySelector(releaseYearSelector);
  67. const scrollTop = latestYear.parentNode.getBoundingClientRect().top - 30;
  68.  
  69. // スクロール位置リセット 〜「再読み込み」ボタン押下時の位置ズレ対応
  70. scrollTo(0, 0);
  71.  
  72. // リスト位置までページ内で縦スクロール
  73. scrollTo({
  74. top: scrollTop,
  75. behavior: "smooth"
  76. });
  77. };
  78.  
  79. handleException(()=> {
  80. darkMode();
  81. menuBarSetting();
  82.  
  83. const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
  84.  
  85. const pageType = (location.href).match(new RegExp('\/(detail|search|00|page|formation|member|diary|aimashou|event)\/'))[1];
  86.  
  87. let styleText;
  88.  
  89. switch (pageType) {
  90. case "detail": //news/schedule
  91. break;
  92. case "search": // Member
  93. break;
  94. case "00" : // Discography
  95. styleText = `
  96. .fixed {
  97. width: 12rem;
  98. position: fixed;
  99. top: 60px;
  100. left: 40px;
  101. z-index: 1;
  102. font-size:larger;
  103. }
  104. .release {
  105. line-height: 20px;
  106. }
  107. .l-container {
  108. margin-top: -280px;
  109. }
  110. .c-disco__year {
  111. padding-top: 20px;
  112. }
  113. .c-disco__year {font-size: 4rem; width: 12rem}
  114. .c-disco__title, .c-disco__date {color: ${DEFAULT_CL};}
  115. .c-disco__category {font-size: 14px;}
  116. .p-page-head-sub--first {padding-top: 10px;}
  117. `;
  118. setStyle(styleText);
  119. setReleaseYear('.c-disco__year');
  120. break;
  121.  
  122. case "page":
  123. break;
  124.  
  125. case "formation":
  126. styleText = `
  127. .l-container {
  128. margin-top: -240px;
  129. }
  130. .formation_image :not(.small_f) li:hover {
  131. height: 120px;
  132. margin: -15.5px;
  133. width: 110px;
  134. }
  135. .formation_image li:hover i {
  136. font-size: 16px;
  137. }
  138. .formation_image li i {
  139. font-size: 14px;
  140. color: ${DEFAULT_CL};
  141. }
  142. .small_f span:hover {
  143. height: 120px;
  144. margin: -16px -0;
  145. width: 116px;
  146. }
  147. .fixed {
  148. width: 12rem;
  149. position: fixed;
  150. top: 60px;
  151. left: 40px;
  152. z-index: 1;
  153. font-size:larger;
  154. }
  155. .release {
  156. line-height: 20px;
  157. }
  158. .p-page-head-sub--first {
  159. padding-top: 20px;
  160. }`;
  161. setStyle(styleText);
  162. setReleaseYear('.c-page-subtitle');
  163. break;
  164.  
  165. case "member":
  166. break;
  167.  
  168. case "diary":
  169. break;
  170.  
  171. case "aimashou":
  172. break;
  173.  
  174. case "event":
  175. break;
  176.  
  177. default:
  178. throw new Error(PAGE_TYPE_ERROR_MSG);
  179. }
  180. }, SCRIPT_NAME);