☰

Hinatazaka46 Layout change NEWS / SCHEDULE

Change the layout of the "News" and "Schedule" pages on the Hinatazaka46 website

目前為 2024-09-25 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name           Hinatazaka46 Layout change NEWS / SCHEDULE
  3. // @name:ja        日向坂46 レイアウト変更 NEWS / SCHEDULE
  4. // @namespace      naoqv.hinatazaka
  5. // @description	   Change the layout of the "News" and "Schedule" pages on the Hinatazaka46 website
  6. // @description:ja 日向坂46サイト「ニュース」「スケジュール」ページのレイアウト変更
  7. // @version        1.15
  8. // @match	       https://www.hinatazaka46.com/s/official/news/*
  9. // @match          https://www.hinatazaka46.com/s/official/media/*
  10. // @require        https://update.gf.qytechs.cn/scripts/510022/1453515/HinatazakaStyleSetting.js
  11. // @require        https://update.gf.qytechs.cn/scripts/509934/1453163/HinatazakaExceptionHandlingWrapper.js
  12. // @icon           https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
  13. // @compatible     chrome
  14. // @compatible     firefox
  15. // @grant          none
  16. // @license        MIT
  17. // ==/UserScript==
  18.  
  19. const SCRIPT_NAME = "日向坂46 NEWS / SCHEDULE レイアウト変更";
  20.  
  21. handleException(()=> {
  22.  
  23. 	const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
  24.  
  25. 	const pageType = (location.href).match(new RegExp('\/(media|news)\/'))[1];
  26. 	const isDetail = ((location.href).match(new RegExp('\/detail\/')) != null);
  27.  
  28. 	const SELECTORS = ((x) => {
  29. 			switch (x) {
  30. 				case "news":
  31. 					return {"pArrow": ".p-news__pager-arrow",
  32. 							"cArrowLeft": ".c-news_pager-arrow--left",
  33. 								"cArrowRight" : ".c-news_pager-arrow--right",
  34. 								"cPageMonth": ".c-news__page_month",
  35. 								"cPageYear": ".c-news__page_year",
  36. 								"lMainContentsUl": ".l-maincontents--news ul",
  37. 								"pDate": ".p-news__page_date",
  38. 								"lSubContents": ".l-sub-contents--news"};
  39. 				case "media":
  40. 					return {"pArrow": ".p-schedule__pager-arrow",
  41. 							"cArrowLeft": ".c-schedule_pager-arrow--left",
  42. 								"cArrowRight" : ".c-schedule_pager-arrow--right",
  43. 								"cPageMonth": ".c-schedule__page_month",
  44. 								"cPageYear": ".c-schedule__page_year",
  45. 								"lMainContentsUl": ".l-maincontents--schedule ul",
  46. 								"pDate": ".p-schedule__page_date",
  47. 								"lSubContents": ".l-sub-contents--schedule"};
  48. 				default:
  49. 						throw new Error(PAGE_TYPE_ERROR_MSG);
  50. 			}
  51. 	})(pageType);
  52.  
  53. 	const pageYear = ((y) => {return (y === null || y === undefined) ? null : y.innerText;})(document.querySelector(SELECTORS['cPageYear']));
  54.  
  55. 	(() => {
  56.  
  57. 		if (isDetail) {
  58. 			return;
  59. 		}
  60.  
  61.     darkMode();
  62.     menuBarSetting();
  63.  
  64. 		if (pageYear !== "年") {
  65.  
  66. 			//console.log("日向坂46 cal");
  67.  
  68. 			const daysOfWeek = ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'Sa'];
  69. 			const now = new Date();
  70. 			const year = now.getFullYear();
  71. 			const month = now.getMonth() + 1;
  72. 			// 月初
  73. 			const first = new Date(year, month - 1, 1);
  74. 			// 月末
  75. 			const end = new Date(year, month,	0);
  76. 			// 月末の日
  77. 			const endDate = end.getDate();
  78. 			// 前月末
  79. 			const endPrevMonth = new Date(year, month - 1, 0);
  80. 			// 前月末の日
  81. 			const endDatePrevMonth = endPrevMonth.getDate();
  82. 			// 月初の曜日
  83. 			const firstDayOfWeek = first.getDay();
  84.  
  85. 			let numOfDay = 1;
  86. 			let calendarHtml = '';
  87.  
  88. 			const pageMonth = ((m) => {return m !== null ? m.innerText : "";})(document.querySelector(SELECTORS['cPageMonth']));
  89.  
  90. 			const leftArrowHref = document.querySelector(SELECTORS['cArrowLeft']).children[0].href;
  91. 			const rightArrowHref = document.querySelector(SELECTORS['cArrowRight']).children[0].href;
  92.  
  93. 			calendarHtml += '<table class="cale_table" style="width: 210px; margin: -130px 0 20px -50px;">';
  94. 			calendarHtml += `<tr><td></td><td class="cale_prev"><a id="cale_prev" href="${leftArrowHref}">＜</a></td>
  95.           <td class="cale_month" colspan="3">${pageYear}&#160;${pageMonth}</td><td class="cale_next"><a href="${rightArrowHref}">＞</a></td><td></td></tr>`;
  96.  
  97. 			calendarHtml += '<tr>';
  98.  
  99. 			for (let i = 0; i < daysOfWeek.length; i++) {
  100. 					calendarHtml += '<td class="cale_wek' + i + '">' + daysOfWeek[i] + '</td>';
  101. 			}
  102.  
  103. 			calendarHtml += '</tr>';
  104.  
  105. 			for (let w = 0; w < 6; w++) {
  106. 				calendarHtml += '<tr>'
  107.  
  108. 				for (let d = 0; d < 7; d++) {
  109. 					if (w == 0 && d < firstDayOfWeek) {
  110. 						// 前月
  111. 						let num = endDatePrevMonth - firstDayOfWeek + d + 1;
  112. 						calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
  113. 					} else if (numOfDay > endDate) {
  114. 						// 次月
  115. 						let num = numOfDay - endDate;
  116. 						calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
  117. 						numOfDay++;
  118. 						w = 99; // カレンダーの最下端が次月の日付のみになるのを防止
  119. 					} else {
  120. 						calendarHtml += '<td class="cale_day' + d + '">' + numOfDay + '</td>';
  121. 						numOfDay++;
  122. 					}
  123. 				}
  124. 				calendarHtml += '</tr>'
  125. 			}
  126.  
  127. 			calendarHtml += '</table>';
  128.  
  129. 			document.querySelector(SELECTORS["lSubContents"]).insertAdjacentHTML('afterbegin', calendarHtml);
  130. 		}
  131. 	})();
  132.  
  133. 	(() => {
  134. 		//console.log("日向坂46 NEWS / スケジュール");
  135.  
  136. 		// 選択カテゴリ（ALL / 握手会・・・）
  137. 		const categorySelectorSuffix
  138. 			= ((c) => {
  139.             let value = ""; 
  140.             if (c.length == 0) {
  141.                 value = "all";
  142.             } else {
  143.                 const tempValue = c[0].value;
  144.                 
  145.                 switch (tempValue) {
  146.                     case "birthday":
  147.                         value = "birth";
  148.                         break;
  149.                     
  150.                     case "fanclub":
  151.                         value = "fanclubonly";
  152.                         break;
  153.     
  154.                     default:
  155.                         value = tempValue;
  156.                 }
  157.             }
  158.  
  159.             return value;
  160.         })(document.getElementsByName("cd"));
  161.  
  162.     const categoryElem = document.querySelector('.c-button-category.category_' + categorySelectorSuffix);
  163.     const categoryStyles = window.getComputedStyle(categoryElem);
  164.     const categoryParent = categoryElem.parentElement;
  165.     categoryParent.style.marginLeft = "-5px";
  166.     categoryParent.style.paddingLeft = "4.5px";
  167.     categoryParent.style.marginRight = "40px";
  168.     categoryElem.style.color = `rgb(from ${categoryStyles.color} calc(r - 64) calc(g - 64) calc(b - 64))`;
  169.     categoryParent.style.backgroundColor = `rgb(from ${categoryStyles.color} calc(r + 64) calc(g + 64) calc(b + 64))`;
  170.     categoryParent.style.border = `solid 0.5px ${categoryElem.style.color}`;
  171.  
  172. 		const now = new Date();
  173. 		const nowYearMonth = String(now.getFullYear()) + String(now.getMonth() + 1).padStart( 2, '0');
  174.  
  175. 		// 詳細ページの場合 処理を終了　
  176. 		if (isDetail) {
  177. 			return;
  178. 		}
  179.  
  180. 		/*
  181. 		 * フルブラウザ上ではNEWS/スケジュールが多い月は見づらいため
  182. 		 * 自動スクロール、表示色を追加設定
  183. 		 */
  184.  
  185.     const HOVER_CL = "#ddffff";
  186. 		const HOVER_BG_CL_UPPER = "#20cccc";
  187. 		const HOVER_BG_CL_LOWER = "#202040";
  188. 		const PAST_BG_CL = "#303040";
  189. 		const TODAY_DATE_CL = "orange";
  190. 		const TODAY_BG_CL_UPPER = "#30aaaa";
  191. 		const TODAY_BG_CL_LOWER = "#303050";
  192. 		const TODAY_BORDER_CL_UPPER = "#5bbee5";
  193. 		const TODAY_BORDER_CL_LOWER = "#d7eeff";
  194. 		const PAGER_MARGIN_TOP = 20;
  195.  
  196. 		const styleElem = document.createElement("style");
  197. 		styleElem.setAttribute("rel", "stylesheet");
  198.  
  199. 		let styleText = `
  200. 			.is-disabled {
  201. 				color: silver;
  202. 			}
  203. 			.p-page-head {
  204. 				padding-top: 20px;
  205. 			}
  206.       .l-container {
  207.           color: ${DEFAULT_CL};
  208.           background-color: #202050;
  209.       }
  210.       .c-pager__item a svg {
  211.           fill: #7ab6db;
  212.       }
  213.       .module-modal.js-member-filter .mordal-box .member-box ul li p.check input[type=checkbox]:checked+label:before {
  214.         background-color:#6bcaea;
  215.         border:1px solid #6bcaea;
  216.       }`;
  217.  
  218. 		switch (pageType) {
  219. 			case "news":
  220. 				styleText += `
  221.             .p-news__list {background-color: ${DEFAULT_BG_CL};}
  222. 						.p-news__item:hover {
  223. 							background: linear-gradient(${HOVER_BG_CL_UPPER}, 20%, ${HOVER_BG_CL_LOWER});
  224. 							outline: 1px solid ${TODAY_BORDER_CL_UPPER}; outline-offset: ipx;
  225. 						}
  226.             .p-news__item:hover .c-news__date, .p-news__item:hover .c-news__text, .p-news__item:hover .c-news__time--list {
  227.               color: ${HOVER_CL};
  228.             }`;
  229. 				 break;
  230. 			case "media":
  231. 				styleText += `
  232. 						.p-schedule__item:hover {
  233.             	background: linear-gradient(${HOVER_BG_CL_UPPER}, 20%, ${HOVER_BG_CL_LOWER});
  234. 							outline: 1px solid ${TODAY_BORDER_CL_UPPER}; outline-offset: ipx;
  235.             }
  236.             .p-schedule__item:hover .c-schedule__text, .p-schedule__item:hover .c-schedule__time--list {
  237.               color: ${HOVER_CL};
  238.             }
  239. 						.schedule__list-pastday {background-color: ${PAST_BG_CL};}
  240. 						.schedule__date-today {color: ${TODAY_DATE_CL};}
  241. 						.schedule__list-today {background: linear-gradient(${TODAY_BG_CL_UPPER}, 10%, ${TODAY_BG_CL_LOWER}); border: 2px solid;
  242. 						border-image: linear-gradient(to bottom, ${TODAY_BORDER_CL_UPPER}, ${TODAY_BORDER_CL_LOWER}) 1;}
  243.             .schedule__list-future {background-color: ${DEFAULT_BG_CL};}
  244.             `;
  245. 				break;
  246. 			default:
  247. 				throw new Error(PAGE_TYPE_ERROR_MSG);
  248. 		}
  249.  
  250. 		styleElem.textContent = styleText;
  251.  
  252. 		document.head.appendChild(styleElem);
  253.  
  254. 		// リスト上方 "xxxx年 yy月" 行
  255. 		const pDate = document.querySelector(SELECTORS["pDate"]);
  256. 		
  257. 		// "xxxx年" ではなく "年"のみの場合
  258. 		if (pageYear === "年") {
  259. 			const cPageYear = document.querySelector(SELECTORS["cPageYear"]);
  260. 			cPageYear.innerText = String(now.getFullYear()) + "年";
  261. 			cPageYear.style.fontSize = "4.8rem";
  262. 			document.querySelector(SELECTORS["cPageMonth"]).remove();
  263. 			document.querySelector(SELECTORS["pArrow"]).remove();
  264. 		}
  265.  
  266. 	 	pDate.style.marginBottom = "5px";
  267.  
  268. 		// ニュース/スケジュール リスト
  269. 		const lMainContentsUl = document.querySelector(SELECTORS["lMainContentsUl"]);
  270.  
  271. 		const lMainContentsUlTop = lMainContentsUl.getBoundingClientRect().top;
  272.  
  273. 		const pDateHeight = pDate.offsetHeight;
  274.  
  275. 		// リスト下方 前月/次月ページャ
  276. 		const pPager = document.querySelector(".p-pager");
  277.  
  278. 		// "xxxx年" ではなく "年"のみの場合
  279. 		if (pageYear === "年") {
  280. 			pPager.innerText = "";
  281. 			
  282. 			pPager.style.marginTop = "0px";
  283. 		} else {
  284.  
  285. 			pPager.style.marginTop = `${PAGER_MARGIN_TOP}px`;
  286. 		}
  287.  
  288. 		const pPagerHeight = PAGER_MARGIN_TOP + pPager.offsetHeight;
  289. 		const lMainContentsUlHeight = document.documentElement.clientHeight - pDateHeight - pPagerHeight; 
  290.  
  291. 		// スクロール表示
  292. 		lMainContentsUl.setAttribute("style", `height:${lMainContentsUlHeight}px; overflow: scroll; border: solid 1px #32a1ce;`);
  293.  
  294.     const scrollTop = lMainContentsUlTop - pDateHeight;
  295.  
  296. 		// スクロール位置リセット　〜「再読み込み」ボタン押下時の位置ズレ対応
  297. 		scrollTo(0, 0);
  298.  
  299. 		// リスト位置までページ内で縦スクロール
  300. 		scrollTo({
  301. 			top: scrollTop,
  302. 			behavior: "smooth"
  303. 		});
  304. 		
  305.     const dispYear = document.querySelector(SELECTORS['cPageYear']);
  306.     const dispMonth = document.querySelector(SELECTORS['cPageMonth']);
  307.  
  308. 		// 表示対象の年月（ex.202404）を取得。設定がなければ当月
  309. 		const dispYearMonth
  310.         = ((y, m) => {return (y == null || m == null) ? nowYearMonth : y.innerText.replace('年', '') + m.innerText.replace('月', '')})(dispYear, dispMonth);
  311. 		
  312. 		// NEWS/スケジュールが当月以前の月の場合
  313. 		if (dispYearMonth < nowYearMonth) {
  314.  
  315. 			lMainContentsUl.style.background = `${PAST_BG_CL}`;
  316. 		}
  317.  
  318. 		const DELTA = 2;
  319. 		const createAnchor
  320. 			= (y, d) => `<a href="javascript:document.querySelector('${SELECTORS['lMainContentsUl']}').scroll({top:${y}, behavior: 'smooth'});">${d}</a>`;
  321.  
  322. 		switch(pageType) {
  323.  
  324. 		case "news":
  325.  
  326. 			const newsList = Array.prototype.map.call(document.getElementsByClassName("c-news__date"),
  327. 				(x) => [parseInt(x.innerText.match(new RegExp(/\d{4}\.\d{2}\.(\d{2})/))[1]), x.getBoundingClientRect().top] );
  328.  
  329. 			const dayMap = new Map();
  330.  
  331. 			Array.prototype.forEach.call(newsList, (x) => {
  332.  
  333. 				if (! dayMap.has(x[0]) || x[1] < dayMap.get(x[0])) {
  334. 					// Map(day, top)
  335. 					dayMap.set(x[0], x[1]);
  336. 				}
  337. 			});
  338.  
  339. 			Map.prototype.forEach.call(dayMap, (top, day) => {
  340. 				
  341. 				Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {
  342.  
  343. 					if (!td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {
  344.  
  345. 						td.innerHTML = createAnchor((top - lMainContentsUlTop - DELTA), day);
  346.  
  347. 						return true;
  348. 					}
  349. 				});
  350. 			});
  351.  
  352. 			break;
  353.  
  354. 		case "media":
  355.  
  356. 			const today = now.getDate();
  357.  
  358. 			lMainContentsUl.scroll(0, 0);
  359.  
  360. 			let isScrolled = false;
  361.  
  362. 			Array.prototype.forEach.call(document.getElementsByClassName("c-schedule__date--list"), (dayElem) => {
  363.  
  364. 				// 日付(innerText)の文字列 '(日付)\n(曜日)' から日付を抽出
  365. 				let day = ((x) => {return parseInt(x.substr(0, x.indexOf(`\n`)));})(dayElem.innerText);
  366.  
  367. 				Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {
  368.  
  369. 					if ( !td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {
  370.  
  371. 						td.innerHTML = createAnchor((dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA), day);
  372.  
  373. 						return true;
  374. 					}
  375. 				});
  376.  
  377. 				// 表示スケジュールが当月の場合
  378. 				if (dispYearMonth === nowYearMonth) {
  379. 					// 過去日
  380. 					if (day < today) {
  381.  
  382. 						dayElem.parentElement.classList.add("schedule__list-pastday");
  383.  
  384. 					// 「今日」（ページを表示した日付）
  385. 					} else if (day === today) {
  386.  
  387. 						dayElem.classList.add("schedule__date-today");
  388. 						dayElem.parentElement.classList.add("schedule__list-today");
  389. 					}
  390.  
  391. 					if (day >= today) {
  392.  
  393.             dayElem.parentElement.classList.add("schedule__list-future");
  394.  
  395.             if (!isScrolled) {
  396. 					      // 「今日」以降（「今日」を含めて）で最早のスケジュール日要素にスクロール
  397. 						    lMainContentsUl.scroll({
  398.  
  399. 							     top: dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA,	 
  400. 						       behavior: "smooth"
  401. 						    });
  402.  
  403. 						    isScrolled = true;
  404.             }
  405. 					}
  406. 				}
  407. 			});
  408.  
  409. 			break;
  410.  
  411. 		default:
  412. 			throw new Error(PAGE_TYPE_ERROR_MSG);
  413. 		}
  414. 	})();
  415. }, SCRIPT_NAME);

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址