Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://updategreasyfork.deno.dev/scripts/532855/1600751/hinatazaka46-lookandfeel.js
// ==UserScript==
// @name hinatazaka46-lookandfeel
// @namespace https://gf.zukizuki.org/ja/users/1328592-naoqv
// @description:en Hinatazak46 Look&feel
// @description:ja 日向坂46 ルックアンドフィール
// @version 0.32
// @require https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js
// @icon https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
// @compatible chrome
// @compatible firefox
// @grant none
// @license MIT
// ==/UserScript==
"use strict";
const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
const isMobile = () => {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
const mobileRegex = /Android|iPhone|iPad|iPod|BlackBerry|Windows Phone|Opera Mini|IEMobile/i;
return mobileRegex.test(userAgent) || window.matchMedia("only screen and (max-width: 768px)").matches;
}
/*
* inlineスタイルを適用
* @param {string} styleText - スタイル定義
*/
document.appendStyle = (styleText) => {
const styleElem = document.createElement("style");
styleElem.setAttribute("rel", "stylesheet");
styleElem.textContent = styleText;
document.head.appendChild(styleElem);
};
/*
* スクロールダウン時にメニューバー細める
*/
const slimDownMenuBar = () => {
const styleElem = document.createElement("style");
styleElem.setAttribute("rel", "stylesheet");
const styleText = `.l-header {
height: 55px;
}
.p-header-wrap.is-fixed .p-header {
height: 30px;
}
.c-header__logo {
top: 5px;
width: 155px;
}
.p-header.p-header__in {
height: 60px;
position: relative;
}
nav.p-menu.p-menu--pc {
position: absolute;
top: 50%;
transform: translateY(-50%);
}`;
styleElem.textContent = styleText;
document.head.appendChild(styleElem);
};
const COLOR_MODE = {DEFAULT_COLOR: "0", DARK_COLOR: "1"};
/**
* カラーモードを取得
* @returns {string} カラーモード
*/
const getColorMode = () => {
let currentMode = CookieUtils.getCookie('color_mode');
if (currentMode !== "0" && currentMode !== "1") {
currentMode = COLOR_MODE.DEFAULT_COLOR;
}
return currentMode;
}
/**
* カラーモードを設定
* @param {string} mode - カラーモード
*/
const setColorMode = (mode) => {
if (mode !== COLOR_MODE.DEFAULT_COLOR && mode !== COLOR_MODE.DARK_COLOR) {
throw new Error("Illegal parameter error. [HinatazakaSigthtStyleUtils#setColorMode]");
}
CookieUtils.setCookie('color_mode', mode);
};
/**
* カラーモードを切り替える
* @returns {string} 切り替え後のカラーモード
*/
const toggleColorMode = () => {
const mode = ((parseInt(getColorMode()) + 1) % 2).toString();
setColorMode(mode);
return mode;
};
const GREEN_BUTTON = "linear-gradient(to right, #50a0f0 0%, #32edae 100%)";
const DEFAULT_BLUE = '#8cc8d1';
const DEFAULT_FONT_CL = "#8babab";
const DEFAULT_TITLE_FONT_CL ="#abbaba";
const DARK_FONT_CL = "#eeeeee";
const DARK_BG_CL = "#202040";
const DARK_MENU_CL = "#404070";
const DARK_SVG_CL = "#eeeeee";
const DARK_IMG_BG_CL = "#eeeeee";
const HOVER_BG_UPPER_CL = "#5bbee4";
const HOVER_BG_LOWER_CL = "#ebf4f7";
const HOVER_BORDER_CL = "#5bbee4";
const DARK_HOVER_BG_UPPER_CL = "#20cccc";
const DARK_HOVER_BG_LOWER_CL = "#202050";
const DARK_PAST_BG_CL = "#303040";
const DARK_TODAY_UPPER_CL = "#30aaaa";
const DARK_TODAY_LOWER_CL = "#303050";
const DARK_HOVER_BORDER_CL = "#79fcfc";
const DARK_STRONG_FONT_CL = 'crimson';
const DARK_STRONG_BG_CL = 'aquamarine';
const DARK_FC_TEXT_CL = 'rgb(99, 103, 103)';
const KEY_BACKGROUND = "backGround";
const KEY_MENUBAR = "manuBar";
const KEY_BREADCRUMB = "breadcrumb";
const KEY_LIST = "list";
const KEY_ARTICLE = "article";
const KEY_PASTDAY = "pastday";
const KEY_TODAY = "today";
const KEY_MEMBER_PROP = "memberProp";
const KEY_SVG_PATH = "svgPath";
const KEY_BLOG = "blog";
const KEY_STRONG = "strong";
const KEY_DISCO = "disco";
const KEY_AFTER = "after";
const KEY_BIOGRAPHY = "biography";
const KEY_FC_LOGO = "fc_logo";
const KEY_FC_TEXT = "fc_text";
const KEYS = [KEY_BACKGROUND, KEY_MENUBAR, KEY_BREADCRUMB, KEY_LIST, KEY_ARTICLE,
KEY_PASTDAY, KEY_TODAY, KEY_MEMBER_PROP, KEY_SVG_PATH, KEY_BLOG, KEY_STRONG, KEY_DISCO, KEY_AFTER, KEY_BIOGRAPHY, KEY_FC_LOGO, KEY_FC_TEXT];
const SELECTOR_DIC = {};
SELECTOR_DIC[KEY_BACKGROUND] = '.pages, .module-modal.js-member-filter .mordal-box, .l-container, .schedule__list-future';
SELECTOR_DIC[KEY_MENUBAR] = '.l-header, .p-header-wrap, .p-header-wrap.is-fixed';
SELECTOR_DIC[KEY_BREADCRUMB] = '.p-page-breadcrumb__list, .c-page-breadcrumb__item:last-child span';
SELECTOR_DIC[KEY_LIST] = '.l-container, .p-news__list ';
SELECTOR_DIC[KEY_ARTICLE] = '.c-blog-main__title, .c-blog-main__date, .c-article__title, .p-article__text, .p-article__text span, .c-blog-article__text div *, .c-blog-article__text p span, .tbcms_program-detail__inner p, .c-tv-backnumber-kiji-time, .c-tv-backnumber-kiji-text';
SELECTOR_DIC[KEY_PASTDAY] = '.schedule__list-pastday';
SELECTOR_DIC[KEY_TODAY] = '.schedule__list-today';
SELECTOR_DIC[KEY_MEMBER_PROP] = '.c-member__name, .c-member__name--info, .c-member__info-td__text, .c-blog-member__name, .c-blog-member__info-td__text, .c-mamber__category_title span, .c-section-title--member-name';
SELECTOR_DIC[KEY_SVG_PATH] = '.c-member__info-td__text a svg path';
SELECTOR_DIC[KEY_BLOG] = '.l-maincontents--blog, .p-blog-entry__group, .p-blog-entry__list, .s-blog__index, .p-blog-group, .p-blog-entry__list';
SELECTOR_DIC[KEY_STRONG] = '.p-article__text strong span, .p-article__text span strong';
SELECTOR_DIC[KEY_DISCO] = '.formation_image li i, .c-page-breadcrumb__item, .c-disco__title, .c-disco__date, .c-video-detail__title, .formation_image li i';
SELECTOR_DIC[KEY_AFTER] = '.l-other-contents--blog';
SELECTOR_DIC[KEY_BIOGRAPHY] = '.p-biography__text';
SELECTOR_DIC[KEY_FC_LOGO] = '.fc-logo';
SELECTOR_DIC[KEY_FC_TEXT] = '.fc-contents .text';
const CSS_DIC = {};
CSS_DIC[KEY_BACKGROUND] = new Array('background-color');
CSS_DIC[KEY_MENUBAR] = new Array('background-color');
CSS_DIC[KEY_BREADCRUMB] = new Array('color');
CSS_DIC[KEY_LIST] = new Array('color');
CSS_DIC[KEY_ARTICLE] = new Array('color');
CSS_DIC[KEY_PASTDAY] = new Array('background-color');
CSS_DIC[KEY_TODAY] = new Array('background');
CSS_DIC[KEY_MEMBER_PROP] = new Array('color');
CSS_DIC[KEY_SVG_PATH] = new Array('fill');
CSS_DIC[KEY_BLOG] = new Array('color', 'background-color');
CSS_DIC[KEY_STRONG] = new Array('color', 'background-color');
CSS_DIC[KEY_DISCO] = new Array('color');
CSS_DIC[KEY_AFTER] = new Array('color', '--bg-color');
CSS_DIC[KEY_BIOGRAPHY] = new Array('color');
CSS_DIC[KEY_FC_LOGO] = new Array('background-color');
CSS_DIC[KEY_FC_TEXT] = new Array('color');
const DEFAULT_COLOR_CONFIG = {};
const DARK_COLOR_CONFIG = {};
DARK_COLOR_CONFIG[KEY_BACKGROUND] = {"background-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_MENUBAR] = {"background-color": DARK_MENU_CL};
DARK_COLOR_CONFIG[KEY_BREADCRUMB] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_LIST] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_ARTICLE] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_PASTDAY] = {"background-color": DARK_PAST_BG_CL};
DARK_COLOR_CONFIG[KEY_TODAY] = {"background": `linear-gradient(${DARK_TODAY_UPPER_CL}, 10%, ${DARK_TODAY_LOWER_CL})`};
DARK_COLOR_CONFIG[KEY_MEMBER_PROP] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_SVG_PATH] = {"fill": DARK_SVG_CL};
DARK_COLOR_CONFIG[KEY_BLOG] = {"color": DARK_FONT_CL, "background-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_STRONG] = {"color": DARK_STRONG_FONT_CL, "background-color": DARK_STRONG_BG_CL};
DARK_COLOR_CONFIG[KEY_DISCO] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_AFTER] = {"color": DARK_FONT_CL, "--bg-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_BIOGRAPHY] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_FC_LOGO] = {"background-color": DARK_IMG_BG_CL};
DARK_COLOR_CONFIG[KEY_FC_TEXT] = {"color": DARK_FC_TEXT_CL};
/*
* cssプロパティの値を取得
* @param {string} selector - cssセレクタ
* @param {string} cssProperty - cssプロパティ名
* @return {string} cssプロパティの値
*/
const getSelectorStyle = (selector, cssProperty) =>
(((element, cssProperty) => (element != null) ? getComputedStyle(element).getPropertyValue(cssProperty) : 'rgb(0, 0, 0)')(document.querySelector(selector), cssProperty));
const getBeforeFirstComma = (str) => {
const index = str.indexOf(",");
return index !== -1 ? str.slice(0, index) : str;
};
const COLOR_CONFIGS = [];
const analyzeDefaultColor = () => {
Array.prototype.forEach.call(KEYS, (k) => {
DEFAULT_COLOR_CONFIG[k] = {};
Array.prototype.forEach.call(CSS_DIC[k], (c) => {
DEFAULT_COLOR_CONFIG[k][c] = getSelectorStyle(getBeforeFirstComma(SELECTOR_DIC[k]), c);
});
});
COLOR_CONFIGS.push(DEFAULT_COLOR_CONFIG, DARK_COLOR_CONFIG);
};
const setMenuFontColor = (selector, originColor = DEFAULT_BLUE) => {
Array.prototype.forEach.call(document.querySelectorAll(selector), (x) => {
x.style.color = originColor;
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.style.color = '#e0ffff';
} else {
x.style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.style.color = originColor;
});
});
};
/*
* hover時フォント設定
* @param {string} itemSelector - hover対象セレクタ
* @param {string} titleSelector - タイトルセレクタ
* @param {string} datetimeSelector - 日時セレクタ
*/
const setHoveredFontColor = (itemSelector, titleSelector, datetimeSelector) => {
Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.querySelector(titleSelector).style.color = `${DARK_FONT_CL}`;
const datetime = x.querySelector(datetimeSelector);
if (datetime) { datetime.style.color = `${DARK_FONT_CL}`;}
} else {
x.querySelector(titleSelector).style.color = `${DEFAULT_FONT_CL}`;
const datetime = x.querySelector(datetimeSelector);
if (datetime) { datetime.style.color = `${DEFAULT_FONT_CL}`;}
}
});
});
Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
x.addEventListener('mouseout', () => {
x.querySelector(titleSelector).style.color = `${DEFAULT_TITLE_FONT_CL}`;
const datetime = x.querySelector(datetimeSelector);
if (datetime) { datetime.style.color = `${DEFAULT_FONT_CL}`;}
});
});
};
const setHoveredFontAndBgColor = (itemSelector, textSelector) => {
Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.style.background = `linear-gradient(${DARK_HOVER_BG_UPPER_CL}, 20%, ${DARK_HOVER_BG_LOWER_CL})`;
x.style.outline = `1px solid ${DARK_HOVER_BORDER_CL}`
x.style.color = `${DARK_FONT_CL}`;
x.children[0].style.color = `${DARK_FONT_CL}`;
const text = x.querySelector(textSelector);
if (text) { text.style.color = `${DARK_FONT_CL}`;}
} else {
x.style.background = `linear-gradient(${HOVER_BG_UPPER_CL}, 20%, ${HOVER_BG_LOWER_CL})`;
x.style.outline = `1px solid ${HOVER_BORDER_CL}`
x.style.color = `${DEFAULT_FONT_CL}`;
x.children[0].style.color = `${DEFAULT_FONT_CL}`;
const text = x.querySelector(textSelector);
if (text) { text.style.color =`${DEFAULT_FONT_CL}`;}
}
});
});
Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
x.addEventListener('mouseout', () => {
x.style.background = `transparent`;
x.style.outline = `1px solid transparent`
x.style.color = `${DEFAULT_FONT_CL}`;
x.children[0].style.color = `${DEFAULT_FONT_CL}`;
const text = x.querySelector(textSelector);
if (text) { text.style.color = `${DEFAULT_FONT_CL}`;}
});
});
};
/*
* ページに対応した色設定を行う
* @param {string} pageType - ページ種類
* @param {string} colorMode - カラーモード
*/
const setColor = (pageType, colorMode) => {
const configIndex = parseInt(colorMode);
Array.prototype.forEach.call(KEYS, (k) => {
Array.prototype.forEach.call(document.querySelectorAll(SELECTOR_DIC[k]), (e) => {
Array.prototype.forEach.call(CSS_DIC[k], (c) => {
e.style.setProperty(c, COLOR_CONFIGS[configIndex][k][c]);
});
});
});
// パンくずリスト
Array.prototype.forEach.call(document.querySelectorAll('.p-page-breadcrumb__list .c-page-breadcrumb__item:not(:last-child)'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[0].style.color = "lightcyan";
} else {
x.children[0].style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[0].style.color = "lightcyan";
} else {
x.children[0].style.color = '#a9a9a9';
}
});
});
switch (pageType) {
case "news":
case "media":
setMenuFontColor('.cale_prev a, .cale_month a, .cale_next a, .cale_table tbody tr td a');
setHoveredFontAndBgColor('.p-news__item, .p-other__item, .p-schedule__item', 'time');
break;
case "artist":
setHoveredFontAndBgColor('.p-news__item', '.c-news__date');
break;
case "diary/member":
shortenYear('.c-blog-main__date, .c-blog-top__date');
setHoveredFontColor('.p-blog-top__item', '.c-blog-top__title', '.c-blog-top__date');
break;
case "diary/detail":
case "diary/member/list":
setMenuFontColor('.cale_prev a, .cale_month a, .cale_next a, .cale_table tbody tr td a');
setHoveredFontAndBgColor('.p-blog-entry__item', '.c-blog-entry__title');
setHoveredFontAndBgColor('.d-article', '.s-article-title');
setHoveredFontAndBgColor('.c-pager__item__text', 'time');
break;
// 動画
case "video":
case "contents":
// 動画タイトル
Array.prototype.forEach.call(document.querySelectorAll('.p-video__item.p-video__item--medium'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[1].children[0].style.color = "lightcyan";
} else {
x.children[1].children[0].style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.children[1].children[0].style.color = '#a9a9a9';
});
});
break;
case "event":
Array.prototype.forEach.call(document.querySelectorAll('.p-shakehands__item'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[1].children[1].style.color = "lightcyan";
x.children[1].children[2].style.color = "lightcyan";
} else {
x.children[1].children[1].style.color = '#5d5d5d';
x.children[1].children[2].style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.children[1].children[1].style.color = DEFAULT_FONT_CL;
x.children[1].children[2].style.color = DEFAULT_FONT_CL;
});
});
Array.prototype.forEach.call(document.querySelectorAll('.p-other__item'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.children[0].style.color = "lightcyan";
} else {
x.children[0].style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.children[0].style.color = DEFAULT_FONT_CL;
});
});
Array.prototype.forEach.call(document.querySelectorAll('.c-pager__item--count a'), (x) => {
x.addEventListener('mouseover', () => {
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
x.style.color = "lightcyan";
} else {
x.style.color = '#5d5d5d';
}
});
x.addEventListener('mouseout', () => {
x.style.color = DEFAULT_FONT_CL;
});
});
break;
default:
;
}
};
const leftPosition = (colorMode) => (colorMode === COLOR_MODE.DEFAULT_COLOR) ? "-3px" : "36px";
/**
* カラーモードトグルのスイッチボタンを生成
* @param {COLOR_MODE} colorMode
*/
const createSwitchButton = (colorMode) => {
const switchButton = document.createElement('div');
switchButton.classList.add("switch_button");
const left = leftPosition(colorMode);
switchButton.style.cssText
= `left: ${left};
margin-top: -5px;
width: 24px;
height: 24px;
border-radius: 50%;
position: absolute;
background-color: white;
box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #CECECE inset;
transition: left .3s ease-in-out;`;
return switchButton;
};
/*
* カラーモードのトグルスイッチを初期化
* @param {string} colorMode - "0": ライトモード、 "1": ダークモード
*/
const initializeColorToggle = (colorMode) => {
const menuList = document.querySelector('.p-menu__list');
if (menuList && !document.querySelector('.color_toggle')) {
const colorToggle = document.createElement('div');
colorToggle.classList.add("color_toggle");
menuList.appendChild(colorToggle);
colorToggle.style.cssText
= `margin-top: 2px;
margin-left: 16px;
width: 60px;
height: 18px;
border: solid 2px gray;
border-radius: calc(infinity * 1px);
background: linear-gradient(to right, #fff 0%, #fefefe 30%, #606080 70%, #404060 80%, #202040 100%);
position: relative;
cursor: pointer;
transition: background-color .2s ease-in-out;`;
const switchButton = createSwitchButton(colorMode);
colorToggle.appendChild(switchButton);
colorToggle.addEventListener("click", () => {
const colorMode = toggleColorMode();
switchButton.style.left = leftPosition(colorMode);
setColor(getPageType(), colorMode);
});
return true;
} else {
return false;
}
};
const doProcessList = (func) => {
const isDetail = ((location.href).match(new RegExp('\/detail\/')) != null);
if (isDetail) {
return;
}
const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
const pageType = (location.href).match(new RegExp('\/(media|news)\/'))[1];
if (! pageType) {
throw new Error(PAGE_TYPE_ERROR_MSG);
}
const SELECTORS = ((x) => {
switch (x) {
case "news":
return {"pArrow": ".p-news__pager-arrow",
"cArrowLeft": ".c-news_pager-arrow--left",
"cArrowRight" : ".c-news_pager-arrow--right",
"cPageMonth": ".c-news__page_month",
"cPageYear": ".c-news__page_year",
"lMainContentsUl": ".l-maincontents--news ul",
"pDate": ".p-news__page_date",
"lSubContents": ".l-sub-contents--news"};
case "media":
return {"pArrow": ".p-schedule__pager-arrow",
"cArrowLeft": ".c-schedule_pager-arrow--left",
"cArrowRight" : ".c-schedule_pager-arrow--right",
"cPageMonth": ".c-schedule__page_month",
"cPageYear": ".c-schedule__page_year",
"lMainContentsUl": ".l-maincontents--schedule ul",
"pDate": ".p-schedule__page_date",
"lSubContents": ".l-sub-contents--schedule"};
default:
throw new Error(PAGE_TYPE_ERROR_MSG);
}
})(pageType);
const pageYear = ((y) => {return (y === null || y === undefined) ? null : y.innerText;})(document.querySelector(SELECTORS.cPageYear));
const now = new Date();
// "年"の表示がない場合
if (pageYear !== "年") {
const daysOfWeek = ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'Sa'];
const year = now.getFullYear();
const month = now.getMonth() + 1;
// 月初
const first = new Date(year, month - 1, 1);
// 月末
const end = new Date(year, month, 0);
// 月末の日
const endDate = end.getDate();
// 前月末
const endPrevMonth = new Date(year, month - 1, 0);
// 前月末の日
const endDatePrevMonth = endPrevMonth.getDate();
// 月初の曜日
const firstDayOfWeek = first.getDay();
let numOfDay = 1;
let calendarHtml = '';
const pageMonth = ((m) => {return m !== null ? m.innerText : "";})(document.querySelector(SELECTORS.cPageMonth));
const leftArrowHref = document.querySelector(SELECTORS.cArrowLeft).children[0].href;
const rightArrowHref = document.querySelector(SELECTORS.cArrowRight).children[0].href;
calendarHtml += '<table class="cale_table" style="width: 210px; margin: -130px 0 20px -50px;">';
calendarHtml += `<tr><td></td><td class="cale_prev"><a id="cale_prev" href="${leftArrowHref}">＜</a></td>
<td class="cale_month" colspan="3">${pageYear} ${pageMonth}</td><td class="cale_next"><a href="${rightArrowHref}">＞</a></td><td></td></tr>`;
calendarHtml += '<tr>';
for (let i = 0; i < daysOfWeek.length; i++) {
calendarHtml += '<td class="cale_wek' + i + '">' + daysOfWeek[i] + '</td>';
}
calendarHtml += '</tr>';
for (let w = 0; w < 6; w++) {
calendarHtml += '<tr>'
for (let d = 0; d < 7; d++) {
if (w == 0 && d < firstDayOfWeek) {
// 前月
let num = endDatePrevMonth - firstDayOfWeek + d + 1;
calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
} else if (numOfDay > endDate) {
// 次月
let num = numOfDay - endDate;
calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
numOfDay++;
w = 99; // カレンダーの最下端が次月の日付のみになるのを防止
} else {
calendarHtml += '<td class="cale_day' + d + '">' + numOfDay + '</td>';
numOfDay++;
}
}
calendarHtml += '</tr>'
}
calendarHtml += '</table>';
document.querySelector(SELECTORS.lSubContents).insertAdjacentHTML('afterbegin', calendarHtml);
}
// 選択カテゴリ（ALL / 握手会・・・）
const categorySelectorSuffix
= ((c) => {
let value = "";
if (c.length == 0) {
value = "all";
} else {
const tempValue = c[0].value;
switch (tempValue) {
case "birthday":
value = "birth";
break;
case "fanclub":
value = "fanclubonly";
break;
default:
value = tempValue;
}
}
return value;
})(document.getElementsByName("cd"));
const categoryElem = document.querySelector('.c-button-category.category_' + categorySelectorSuffix);
const categoryStyles = window.getComputedStyle(categoryElem);
const categoryParent = categoryElem.parentElement;
categoryParent.style.marginLeft = "-5px";
categoryParent.style.paddingLeft = "4.5px";
categoryParent.style.marginRight = "40px";
categoryElem.style.color = `rgb(from ${categoryStyles.color} calc(r - 64) calc(g - 64) calc(b - 64))`;
categoryParent.style.backgroundColor = `rgb(from ${categoryStyles.color} calc(r + 64) calc(g + 64) calc(b + 64))`;
categoryParent.style.border = `solid 0.5px ${categoryElem.style.color}`;
// 詳細ページの場合 処理を終了
if (isDetail) {
return;
}
/*
* フルブラウザ上ではNEWS/スケジュールが多い月は見づらいため
* 自動スクロール、表示色を追加設定
*/
const PAGER_MARGIN_TOP = 20;
const PASTDAY_BG_CL = "#ededf0";
const TODAY_DATE_CL = "orange";
const TODAY_BG_CL = "#fafeff";
const TODAY_BORDER_CL_UPPER = "#d7eeff";
const TODAY_BORDER_CL_LOWER = "#5bbee4";
let styleText = `
.is-disabled {
color: silver;
}
.p-page-head {
padding-top: 20px;
}
.c-pager__item a svg {
fill: #7ab6db;
}
.schedule__list-pastday {
background-color: ${PASTDAY_BG_CL};
}
.schedule__list-today {
background-color: ${TODAY_BG_CL};
border: 2px solid;
border-image: linear-gradient(to right bottom, ${TODAY_BORDER_CL_UPPER}, ${TODAY_BORDER_CL_LOWER}) 1;
}
.schedule__date-today {
color: ${TODAY_DATE_CL};
}
.p-news__item, .p-schedule__item {
outline-offset: 1px;
}
.module-modal.js-member-filter .mordal-box .member-box ul li p.check input[type=checkbox]:checked+label:before {
background-color:#6bcaea;
border:1px solid #6bcaea;
}`;
document.appendStyle(styleText);
// リスト上方 "xxxx年 yy月" 行
const pDate = document.querySelector(SELECTORS.pDate);
// "xxxx年" ではなく "年"のみの場合
if (pageYear === "年") {
const cPageYear = document.querySelector(SELECTORS.cPageYear);
cPageYear.innerText = String(now.getFullYear()) + "年";
cPageYear.style.fontSize = "4.8rem";
document.querySelector(SELECTORS.cPageMonth).remove();
document.querySelector(SELECTORS.pArrow).remove();
}
pDate.style.marginBottom = "5px";
// ニュース/スケジュール リスト
const lMainContentsUl = document.querySelector(SELECTORS.lMainContentsUl);
const lMainContentsUlTop = lMainContentsUl.getBoundingClientRect().top;
const pDateHeight = pDate.offsetHeight;
// リスト下方 前月/次月ページャ
const pPager = document.querySelector(".p-pager");
// "xxxx年" ではなく "年"のみの場合
if (pageYear === "年") {
pPager.innerText = "";
pPager.style.marginTop = "0px";
} else {
pPager.style.marginTop = `${PAGER_MARGIN_TOP}px`;
}
const pPagerHeight = PAGER_MARGIN_TOP + pPager.offsetHeight;
const lMainContentsUlHeight = document.documentElement.clientHeight - pDateHeight - pPagerHeight;
// スクロール表示
lMainContentsUl.setAttribute("style", `height:${lMainContentsUlHeight}px; overflow: scroll; border: solid 1px #32a1ce;`);
const scrollTop = lMainContentsUlTop - pDateHeight;
// スクロール位置リセット 〜「再読み込み」ボタン押下時の位置ズレ対応
scrollTo(0, 0);
// リスト位置までページ内で縦スクロール
scrollTo({
top: scrollTop,
behavior: "smooth"
});
const nowYearMonth = String(now.getFullYear()) + String(now.getMonth() + 1).padStart( 2, '0');
const dispYear = document.querySelector(SELECTORS.cPageYear);
const dispMonth = document.querySelector(SELECTORS.cPageMonth);
// 表示対象の年月（ex.202404）を取得。設定がなければ当月
const dispYearMonth
= ((y, m) => {return (y == null || m == null) ? nowYearMonth : y.innerText.replace('年', '') + m.innerText.replace('月', '')})(dispYear, dispMonth);
// NEWS/スケジュールが当月以前の月の場合
if (dispYearMonth < nowYearMonth) {
lMainContentsUl.classList.add('schedule__list-pastday');
}
const createAnchor = (y, d) => `<a href="javascript:document.querySelector('${SELECTORS.lMainContentsUl}').scroll({top:${y}, behavior: 'smooth'});">${d}</a>`;
if (pageType === "news") {
doProcessNews(lMainContentsUlTop, createAnchor);
} else {
doProcessMedia(lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor);
}
};
const COMPRESSED = `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`;
const HINATAZAKA46 = JSON.parse(LZString.decompressFromBase64(COMPRESSED));
HTMLElement.prototype.setPenlightColor = function(color_01, color_02, thickness, intensity) {
this.style.borderLeftColor = "#" + color_01;
this.style.borderTopColor = "#" + color_01;
this.style.borderRightColor = "#" + color_02;
this.style.borderBottomColor = "#" + color_02;
this.style.boxShadow = `
-${thickness} 0px ${thickness} -4px #${color_01},
0px -${thickness} ${thickness} -4px #${color_01},
${thickness} 0px ${thickness} -4px #${color_02},
0px ${thickness} ${thickness} -4px #${color_02},
inset 0px 2px 4px white,
inset 2px 0px 4px white,
inset 0px -2px 4px white,
inset -2px 0px 4px white,
inset 0px 4px 4px #${color_01},
inset 4px 0px 4px #${color_01},
inset 0px -4px 4px #${color_02},
inset -4px 0px 4px #${color_02},
inset 0px ${thickness} 4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
inset ${thickness} 0px 4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
inset 0px -${thickness} 4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
inset -${thickness} 0px 4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
-4px 0px 4px -4px white,
0px -4px 4px -4px white,
4px 0px 4px -4px white,
0px 4px 4px -4px white,
-4px 0px 4px -4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
0px -4px 4px -4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
4px 0px 4px -4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
0px 4px 4px -4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity}))
`;
};
const createGeneration = (gen) => {
const fragment = document.createDocumentFragment();
const sub = document.createElement('div');
sub.classList.add('p-page-head-sub');
const subtitle = document.createElement('h2');
subtitle.classList.add('c-page-subtitle', 'en');
switch(gen) {
case "1":
subtitle.append(document.createTextNode('一期生'));
break;
case "2":
subtitle.append(document.createTextNode('二期生'));
break;
case "3":
subtitle.append(document.createTextNode('三期生'));
break;
case "4":
subtitle.append(document.createTextNode('四期生'));
break;
case "5":
subtitle.append(document.createTextNode('五期生'));
break;
}
sub.appendChild(subtitle);
fragment.append(sub);
const lcontents = document.createElement('div');
lcontents.classList.add('l-contents');
const lmaincontents = document.createElement('div');
lmaincontents.classList.add('l-maincontents');
const pmemberlist = document.createElement('div');
pmemberlist.classList.add('p-member__list');
lmaincontents.appendChild(pmemberlist);
lcontents.appendChild(lmaincontents);
fragment.append(lcontents);
return fragment;
};
const IMG_PREFIX = "https://cdn.hinatazaka46.com/images/14/";
const IMG_SUFFIX = "/800_800_102400.jpg";//1000_1000_102400.jpg
const appendNmKn = (anchor, obj) => {
const memberName = obj.memberName;
const memberKana = obj.memberKana;
const name = document.createElement('div');
name.classList.add('c-member__name');
name.append(document.createTextNode(memberName));
anchor.appendChild(name);
const kana = document.createElement('div');
kana.classList.add('c-member__kana');
kana.append(document.createTextNode(memberKana));
anchor.appendChild(kana);
};
const dateOptions = {
year: 'numeric',
month: 'short',
day: 'numeric'
};
const appendBd = (anchor, obj) => {
const memberName = obj.memberName;
const birthday = obj.birthday;
const name = document.createElement('div');
name.classList.add('c-member__name');
name.append(document.createTextNode(memberName));
anchor.appendChild(name);
const birthElement = document.createElement('div');
birthElement.classList.add('c-member__birth');
birthElement.append(document.createTextNode(obj.birth.toLocaleDateString('ja-JP', dateOptions)));
anchor.appendChild(birthElement);
};
const createMember = (number, imgUrl, linkUrl, appendElemFunc, arg) => {
const li = document.createElement('li');
li.classList.add('p-member__item');
li.style.display = "block";
li.dataset.member = number;
const anchor = document.createElement('a');
const thumb = document.createElement('div');
thumb.classList.add('c-member__thumb');
thumb.style.position = "relative";
const img = document.createElement('img');
img.setAttribute('src', IMG_PREFIX + imgUrl + IMG_SUFFIX);
thumb.appendChild(img);
if (linkUrl) {
img.style.cursor = "pointer";
const linkButton = document.createElement('a');
linkButton.append(document.createTextNode('Open Link in New Tab'));
linkButton.classList.add('open-link-button');
linkButton.style.display = "none";
linkButton.setAttribute('href', "https://" + linkUrl);
linkButton.setAttribute('target', '_blank');
img.addEventListener('click', () => {
linkButton.style.display = (linkButton.style.display == "none") ? 'flex' : 'none';
});
linkButton.addEventListener('click', (event) => {
event.stopPropagation();
});
thumb.appendChild(linkButton);
}
anchor.appendChild(thumb);
appendElemFunc(anchor, arg);
li.appendChild(anchor);
return li;
};
/*
* 複数グループが存在するソートカテゴリに卒業メンバーを追加して再構築
*
*
*/
const constructGroup = (list, groups, sortTop, headers) => {
let lastAdded;
Array.prototype.forEach.call(list, (x) => {
if (!groups[x]) return;
const groupMembers = Array.prototype.sort.call(groups[x], (a, b) => (a.kn).localeCompare(b.kn, 'ja'));
const unorderedList = document.createElement('ul');
unorderedList.className = 'p-member__list';
Array.prototype.forEach.call(groupMembers, (m) => {
const current = sortTop.querySelector(`[data-member="${m.no}"]`);
if (current) {
unorderedList.appendChild(current);
} else {
const og = createMember(m.no, m.img, m.lnk, appendBd, {"memberName": m.nm, "birth": m.birth});
unorderedList.appendChild(og);
}
});
let header = Array.prototype.find.call(headers, (h) => h.children[0].innerText.trim() == x);
if (header) {
header.nextSibling.nextSibling.children[0].replaceChild(unorderedList, header.nextSibling.nextSibling.children[0].children[0]);
lastAdded = header.nextSibling.nextSibling;
} else {
header = document.createElement('div');
header.className = 'p-page-head-sub';
const headSubHeader = document.createElement('h2');
header.classList.add('c-page-subtitle', 'en');
headSubHeader.append(document.createTextNode(x));
header.appendChild(headSubHeader);
sortTop.insertBefore(header, lastAdded.nextSibling);
const lContents = document.createElement('div');
lContents.className = 'l-contents';
lContents.appendChild(unorderedList);
const lMainContents = document.createElement('div');
lMainContents.className = 'l-maincontents';
lContents.appendChild(lMainContents);
sortTop.insertBefore(lContents, header.nextSibling);
lastAdded = lContents;
}
});
};
const doProcessMember = () => {
document.appendStyle(`
.p-member-filter {
margin-top: 1rem;
}
.p-page-head-sub {
padding-top: 20px;
}
.l-contents {
padding-bottom: 0px !important;
}
.p-member__item {
display: block;
margin-bottom: 50px !important;
}
.p-member__item a div img {
border: 1px solid;
border-radius: 8px;
padding: 0.2rem;
transition: transform 0.3s ease, z-index 0.3s ease;
transform-origin: center center;
}
.p-member__item:hover a div img {
transform:scale(1.1, 1.1);
}
.c-member__name {
font-size: 2.2rem;
}
.c-member__kana {
font-size: 1.5rem;
}
.open-link-button {
color: #dddddd;
background-color: #303030;
justify-content: center;
align-items: center;
font-size: 14px;
width: 190px;
height: 30px;
border-radius: 15px 5px;
cursor: pointer;
position: absolute;
bottom: 3px;
right: 3px;
z-index: 10000;
transition: 0.3s;
}
.open-link-button:hover {
color: lightyellow;
}`
);
const membersList = Array.prototype.filter.call(HINATAZAKA46.DATA, (m) => {
const isPersonal = m.no.length <= 2;
if (isPersonal) {
m.birth = excelSerialToDate(m.bd);
}
return isPersonal;
});
// デフォルト
const ogMembersList = Array.prototype.filter.call(membersList, (m) => {
return m.end != "";
});
const generations = {};
Array.prototype.forEach.call(ogMembersList, (m) => {
if (! generations[m.gen]) {
generations[m.gen] = createGeneration(m.gen);
}
const genTree = generations[m.gen];
const list = genTree.querySelector('.p-member__list');
const memberElement = createMember(m.no, m.img, m.lnk, appendNmKn, {"memberName": m.nm, "memberKana": m.kn});
list.appendChild(memberElement);
});
const defaultMembersList = document.querySelector('.sorted.sort-default.current');
Array.prototype.forEach.call(Object.values(generations), (g) => {
defaultMembersList.appendChild(g);
});
// 名前順
const newSortedByName = document.createElement('ul');
newSortedByName.className = 'p-member__list';
const sortedByName = document.querySelector('.sort-syllabary .p-member__list');
const nameOrderMembersList = Array.prototype.sort.call(membersList.slice(), (a, b) => (a.kn).localeCompare(b.kn, 'ja'));
Array.prototype.forEach.call(nameOrderMembersList, (m) => {
const current = sortedByName.querySelector(`[data-member="${m.no}"]`);
if (current) {
newSortedByName.appendChild(current);
} else {
const og = createMember(m.no, m.img, m.lnk, appendNmKn, {"memberName": m.nm, "memberKana": m.kn});
newSortedByName.appendChild(og);
}
});
sortedByName.parentNode.replaceChild(newSortedByName, sortedByName);
// 誕生日
const newSortedByBirth = document.createElement('ul');
newSortedByBirth.className = 'p-member__list';
const sortedByBirth = document.querySelector('.sort-birth .p-member__list');
const birthOrderMembersList = Array.prototype.sort.call(membersList.slice(), (a, b) => {
const aBrthDay = parseInt(a.bd);
const bBrthDay = parseInt(b.bd);
if (aBrthDay > bBrthDay) {
return -1;
} else if (aBrthDay == bBrthDay) {
return a.kn > b.kn ? 1: -1;
} else {
return 1;
}
});
Array.prototype.forEach.call(birthOrderMembersList, (m) => {
const current = sortedByBirth.querySelector(`[data-member="${m.no}"]`);
if (current) {
newSortedByBirth.appendChild(current);
} else {
const og = createMember(m.no, m.img, m.lnk, appendBd, {"memberName": m.nm, "birth": m.birth});
newSortedByBirth.appendChild(og);
}
});
sortedByBirth.parentNode.replaceChild(newSortedByBirth, sortedByBirth);
// 星座
const zodiacGroups = Object.groupBy(membersList, ({ birth }) => getZodiacSign(birth));
const zodiacTop = document.querySelector('.sort-constellation');
const zodiacHeaders = document.querySelectorAll('.sort-constellation .p-page-head-sub');
const zodiacList = ZODIAC.list();
constructGroup(zodiacList, zodiacGroups, zodiacTop, zodiacHeaders);
// 血液型
const bloodGroups = Object.groupBy(membersList, ({ bt }) => {
switch (bt) {
case "A":
case "B":
case "O":
case "AB":
return bt + "型";
case "X":
default:
return "不明";
}
});
const bloodTop = document.querySelector('.sort-blood');
const bloodHeaders = document.querySelectorAll('.sort-blood .p-page-head-sub');
const BLOOD_TYPES = ["A型", "B型", "O型", "AB型", "不明"];
constructGroup(BLOOD_TYPES, bloodGroups, bloodTop, bloodHeaders);
// Penlight
Array.prototype.forEach.call(document.querySelectorAll('.p-member__item'), (m) => {
const color_set = HINATAZAKA46.DATA[m.dataset.member].cl;
const code_01 = HINATAZAKA46.LIGHT[color_set[0]].cd;
const code_02 = HINATAZAKA46.LIGHT[color_set[1]].cd;
const img = m.children[0].children[0].children[0];
img.setPenlightColor(code_01, code_02, "4px", 64);
m.addEventListener('mouseover', () => {img.setPenlightColor(code_01, code_02, "12px", 128);});
m.addEventListener('mouseout', () =>{img.setPenlightColor(code_01, code_02, "4px", 64);});
});
}
const doProcessMemberDetail = () => {
document.appendStyle(`
.p-member__box {
padding-top: 40px;
}
.c-member__thumb img {
border: 3px solid;
border-radius: 8px;
padding: 0.2rem;
position: relative;
}
.c-mamber__category_title {
margin-bottom: 0;
}
.p-section {
z-index: 100;
}
.p-button--center {
padding-top: 0;
}
.c-member-greeting-popup-toggle-btn.active {
background: ${GREEN_BUTTON};
}
.p-contents.p-contents--news {
padding-bottom: 0px;
}
.c-btn-member-greeting-popup-close {
--color: black;
}
.c-btn-member-greeting-popup-close:before {
border: solid 1px;
background-color: var(--color);
}
.c-btn-member-greeting-popup-close:after {
border: solid 1px;
background-color: var(--color);
}`);
const close_button = document.querySelector('.c-btn-member-greeting-popup-close');
close_button.style.setProperty("--color", DEFAULT_FONT_CL);
const img = document.querySelector('.c-member__thumb > img:nth-child(1)');
if (img) {
const ct = (location.href).match(/artist\/([0-9]{1,2})/)[1];
const color_set = HINATAZAKA46.DATA[ct].cl;
const color_01 = HINATAZAKA46.LIGHT[color_set[0]];
const color_02 = HINATAZAKA46.LIGHT[color_set[1]];
img.setPenlightColor(color_01.cd, color_02.cd, "8px", 64);
}
};
const doProcessGreeting = () => {
document.appendStyle(`
.card, .member_thumb {
cursor: pointer;
}
div.card {
transition: transform 0.3s ease, z-index 0.3s ease;
transform-origin: center center;
}
div.card:hover {
transform: scale(1.05) translateZ(10px);
z-index: 10; /* 前面に出す */
}`
);
Array.prototype.forEach.call(document.querySelectorAll('[class^="card_"]'), (c) => {
const cardNo = c.classList[0].match(/[0-9]{1,2}/)[0];
const member = c.querySelector('.member_thumb');
member.addEventListener('click', () => {
location.href = "https://www.hinatazaka46.com/s/official/artist/" + cardNo + "?ima=0000";
});
c.addEventListener('mouseover', () => {
const menberName = c.querySelector('.name');
if (getColorMode() === COLOR_MODE.DARK_COLOR) {
menberName.style.color = `${DARK_FONT_CL}`;
} else {
menberName.children[0].style.color = `${DEFAULT_FONT_CL}`;
}
});
c.addEventListener('mouseout', () => {
const menberName = c.querySelector('.name');
menberName.style.color = `${DEFAULT_FONT_CL}`;
});
const card = c.querySelector('.card');
const btn = c.querySelector('a.btn01');
card.addEventListener('click', (e) => {
btn.click();
});
});
};
const DELTA = 2;
const doProcessNews = (lMainContentsUlTop, createAnchor) => {
const newsList = Array.prototype.map.call(document.getElementsByClassName("c-news__date"),
(x) => [parseInt(x.innerText.match(new RegExp(/\d{4}\.\d{2}\.(\d{2})/))[1]), x.getBoundingClientRect().top] );
const dayMap = new Map();
Array.prototype.forEach.call(newsList, (x) => {
if (! dayMap.has(x[0]) || x[1] < dayMap.get(x[0])) {
// Map(day, top)
dayMap.set(x[0], x[1]);
}
});
Map.prototype.forEach.call(dayMap, (top, day) => {
Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {
if (!td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {
td.innerHTML = createAnchor((top - lMainContentsUlTop - DELTA), day);
return true;
}
});
});
};
// SCHEDULE
const doProcessMedia = (lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor) => {
const today = now.getDate();
lMainContentsUl.scroll(0, 0);
let isScrolled = false;
Array.prototype.forEach.call(document.getElementsByClassName("c-schedule__date--list"), (dayElem) => {
// 日付(innerText)の文字列 '(日付)\n(曜日)' から日付を抽出
let day = ((x) => {return parseInt(x.substr(0, x.indexOf(`\n`)));})(dayElem.innerText);
Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {
if ( !td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {
td.innerHTML = createAnchor((dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA), day);
return true;
}
});
// 表示スケジュールが当月の場合
if (dispYearMonth === nowYearMonth) {
// 過去日
if (day < today) {
dayElem.parentElement.classList.add("schedule__list-pastday");
// 「今日」（ページを表示した日付）
} else if (day === today) {
dayElem.classList.add("schedule__date-today");
dayElem.parentElement.classList.add("schedule__list-today");
}
if (day >= today) {
dayElem.parentElement.classList.add("schedule__list-future");
if (!isScrolled) {
// 「今日」以降（「今日」を含めて）で最早のスケジュール日要素にスクロール
lMainContentsUl.scroll({
top: dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA,
behavior: "smooth"
});
isScrolled = true;
}
}
}
});
};
/*
* "ディスコグラフィー"向けリリース年リストを画面に配置する
*/
const setReleaseYear4Disco = () => {
const releaseYearSelector = '.c-disco__year';
let navText = `<header class="header" role="banner" style="z-index: 1000;">
<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 class="rel_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);
setTimeout(() => {
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;
// スクロール位置リセット 〜「再読み込み」ボタン押下時の位置ズレ対応
scrollTo(0, 0);
// リスト位置までページ内で縦スクロール
scrollTo({
top: scrollTop,
behavior: "smooth"
});
Array.prototype.forEach.call(document.querySelectorAll('.rel_year'), (x, i) => {
const year = x.innerText;
const yearElement = document.getElementById("y_" + year);
const top = yearElement.getBoundingClientRect().top;
x.setAttribute("href", `javascript:scrollTo({top:${top}, behavior:'smooth'});`);
});
}, 100);
};
/*
* ディスコグラフィー
*/
const doProcessDiscography = () => {
const 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__category {font-size: 14px;}
.p-page-head-sub--first {padding-top: 10px;}
`;
document.appendStyle(styleText);
setReleaseYear4Disco();
};
/*
* "フォーメーション"向けリリース年リストを画面に配置する
*/
const setReleaseYear4Formation = () => {
const releaseYearSelector = '.c-page-subtitle';
let navText = `<header class="header" role="banner" style="z-index: 1000;">
<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;
// スクロール位置リセット 〜「再読み込み」ボタン押下時の位置ズレ対応
scrollTo(0, 0);
// リスト位置までページ内で縦スクロール
scrollTo({
top: scrollTop,
behavior: "smooth"
});
};
/*
* フォーメーション
*/
const doProcessFormation = () => {
const styleText = `
.l-container {
margin-top: -280px;
}
.formation_image :not(.small_f) li, small_f span {
transition: transform 0.3s ease, z-index 0.3s ease;
transform-origin: center center;
}
.formation_image :not(.small_f) li:hover, .small_f span:hover {
transform: scale(1.4, 1.4) translateZ(10px);
z-index: 10;
}
.formation_image li:hover i {
font-size: 16px;
}
.formation_image li i {
font-size: 14px;
}
.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;
}
.p-page-head-sub {
margin: 0px auto 0px auto;
}
.formation_list h4 {
color: ${DEFAULT_BLUE};
background-color: darkslateblue;
font-size: 1.4em;
font-weight: bold;
padding: 0.3em 0.1em;
}
.formation_image li {
margin: 0 15px;
}
.formation_image li span {
width: 80px;
height: 80px;
}
.formation_image li span:hover {
box-shadow: 0px 0px 0px 3px ${DEFAULT_BLUE};
}
.formation_image li i {
font-size: 1.2em;
width: 130px;
padding-left: 20px;
shite-space: pre-line;
}`;
document.appendStyle(styleText);
setReleaseYear4Formation();
};
// Blog
const getBackgroundImageUrl = (el) => {
const bg = window.getComputedStyle(el).backgroundImage;
const urlMatch = bg.match(/url\(["']?(.*?)["']?\)/);
return urlMatch ? urlMatch[1] : null;
}
const parseColorToRGBArray = (colorStr) => {
const ctx = document.createElement('canvas').getContext('2d');
ctx.fillStyle = '#000'; // 初期値
// 無効な色文字列でも例外を出さないようにtry-catch
try {
ctx.fillStyle = colorStr;
} catch (e) {
return null;
}
// ブラウザが内部で解析したrgb(...)形式に変換されている
const computed = ctx.fillStyle;
// rgba形式を含めて正規化
const match = computed.match(/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/i);
if (!match) return null;
return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
};
/*
* ヘッダータイトルのフォント色を返す
* @param {number} r - red
* @param {number} g - green
* @param {number} b - blue
* @param {number} threshold - 閾値
*/
const getHeaderFontColor = (r, g, b, threshold = 30) => {
const defaultFontColor = parseColorToRGBArray(DEFAULT_BLUE);
const default_R = defaultFontColor[0];
const default_G = defaultFontColor[1];
const default_B = defaultFontColor[2];
const isNearlyDefault = r >= default_R - threshold && g >= default_G - threshold && b >= default_B - threshold;
// ヘッダータイトルの背景画像の色がデフォルトのフォント色と近い場合
if (isNearlyDefault) {
const compR = 255 - default_R * 0.2;
const compG = 255 - default_G * 0.2;
const compB = 255 - default_B * 0.5;
return `rgb(${compR}, ${compG}, ${compB})`;
} else {
return `rgb(${defaultFontColor[0]}, ${defaultFontColor[1]}, ${defaultFontColor[2]})`;
}
};
const updateFontColorOnImage = (imageUrl, selector) => {
const img = new Image();
img.crossOrigin = "anonymous"; // CORS対策（必要）
img.src = imageUrl;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
let r = 0, g = 0, b = 0, count = 0;
for (let i = 0; i < data.length; i += 4) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
count++;
}
r = Math.round(r / count);
g = Math.round(g / count);
b = Math.round(b / count);
const baseColor = getHeaderFontColor(r, g, b);
Array.prototype.forEach.call(document.querySelectorAll(selector), (e) => {
e.style.background = `linear-gradient(90deg, ${baseColor} 0%, white 20%, ${baseColor} 40%)`;
e.style.cssText += `background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent;`
});
};
img.onerror = () => {
Array.prototype.forEach.call(document.querySelectorAll(selector), (e) => {
e.style.background = `linear-gradient(90deg, ${DEFAULT_BLUE} 0%, white 20%, ${DEFAULT_BLUE} 40%)`;
e.style.cssText += `-webkit-background-clip: text;
-webkit-text-fill-color: transparent;`
e.style.color = "white";
});
console.error("画像の読み込みに失敗しました");
};
};
const updateHeaderFontColor = (imgSelector, textSelector) => {
const blogContainer = document.querySelector(imgSelector);
const imageUrl = getBackgroundImageUrl(blogContainer);
if (imageUrl) {
updateFontColorOnImage(imageUrl, textSelector);
}
}
/*
* 五期生リレーブログの写真を設定
*/
const create5thRelayPhoto = () => {
const relayPhoto = document.createElement('div');
relayPhoto.classList.add("c-blog-member__icon");
relayPhoto.style.backgroundImage = "url(https://cdn.hinatazaka46.com/images/14/fa2/dcd3c79b9d66efeed5a13af038129.jpg)";
relayPhoto.style.backgroundSize = "cover";
relayPhoto.style.backgroundPosition = "center";
relayPhoto.style.backgroundRepeat = "no-repeat";
relayPhoto.style.width = "220px";
relayPhoto.style.height = "122px";
relayPhoto.style.position = "relative";
relayPhoto.style.zIndex = "2";
return relayPhoto;
};
const scrollOnLoad = () => {
// 半透明ヘッダーメニュー 高さ
const headerHeight = document.querySelector(".p-header-wrap").offsetHeight;
// スクロール位置リセット リロード時のズレ対応
scrollTo(0, 0);
// 文頭までスクロール
scrollTo({
top: document.querySelector(".p-blog-article__head").getBoundingClientRect().top - headerHeight,
behavior: "smooth"
});
}
/** ブログ */
const blogDetail = () => {
const pBlogArticleHead = document.querySelector('.p-blog-article__head');
document.appendStyle(`
.p-blog-article {
border-bottom: none;
}
.c-blog-article__title {
--height: auto;
height: var(--height);
transition: height .3s ease-out;
}
.c-blog-article__title.open {
height: var(--height);
overflow: visible;
white-space: wrap;
}
.c-blog-article__title.hidden {
height: 58px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis "… 🔽";
}
.c-blog-article__text {
padding: 0 10px;
overflow: scroll;
border: none;
}
.p-pager {
margin-top: 10px;
}
.p-button--center {
padding-top: 0;
margin-top: -20px;
}`);
const articleTitleDiv = document.querySelector('.c-blog-article__title');
const height = articleTitleDiv.scrollHeight + 'px';
articleTitleDiv.style.setProperty("--height", height);
articleTitleDiv.style.marginBottom = "0px";
articleTitleDiv.classList.add("hidden");
setTimeout(() => {
const articleHeight = document.documentElement.clientHeight - pBlogArticleHead.getBoundingClientRect().bottom + 20;
document.querySelector('.c-blog-article__text').style.height = articleHeight + "px";
if (articleTitleDiv.offsetWidth < articleTitleDiv.scrollWidth) {
const articleTitle = articleTitleDiv.innerText;
articleTitleDiv.innerText = articleTitle + "🔼";
articleTitleDiv.style.cursor = "pointer";
articleTitleDiv.addEventListener('click', function() {
articleTitleDiv.classList.toggle("hidden");
articleTitleDiv.classList.toggle("open");
});
}
scrollOnLoad();
}, 100);
};
/** 記事一覧 */
const blogList = () => {
const blogGroupHeight = document.documentElement.clientHeight;
const styleText = `
.c-blog-member__icon--all {
height: 60px;
}
.p-button {
padding-top: 0;
}
.d-article {
line-height: 20px;
margin-bottom: 8px;
}
.s-member-icon {
font-size: larger
}
.s-article-title {
font-size: smaller;
}
.s-datetime {
font-size: smaller;
}
.p-blog-group {
height: ${blogGroupHeight - 60}px;
overflow: scroll;
.l-maincontents--blog {
border: none;
}
.c-blog-article__title {
margin-bottom: 0px;
}`;
document.appendStyle(styleText);
shortenYear('.c-blog-article__date');
const titleList = document.createElement('div');
titleList.setAttribute("class", "s-blog__index");
const memberName = document.querySelector('.c-blog-member__name');
if (memberName) {
if (memberName.innerText == "ポカ") {
const profileTable = document.querySelector('.p-blog-member__info-table');
profileTable.after(titleList);
} else {
const profileButton = document.querySelector('.p-button');
profileButton.after(titleList);
}
// リレーブログ
} else {
const info = document.querySelector('.p-blog-member__info');
info.after(titleList);
}
const createAnchor = (idx, datetime, icon, articleTitle) => `<div class="d-article"><a href="#article${idx}">
<span class="s-member-icon">${icon}</span>
<span class="s-article-title">${articleTitle}</span><br/><span class="s-datetime">${datetime}</span>
</a></div>`;
const lMainContentsBlogTop = document.querySelector('.l-maincontents--blog').getBoundingClientRect().top;
Array.prototype.forEach.call(document.querySelectorAll('.p-blog-article'), (x, i) => {
x.setAttribute('id', "article" + i);
const datetimeDiv = x.childNodes[1].childNodes[3].childNodes[1];
const datetime = datetimeDiv.firstChild.textContent.trim();
const articleTitleDiv = x.childNodes[1].childNodes[1];
const articleTitle = articleTitleDiv.firstChild.textContent.trim();
// メンバー混合リストの場合があるので名前を取得
const memberName = x.childNodes[1].childNodes[3].childNodes[3].innerText;
const icon = HINATAZAKA46.DATA[HINATAZAKA46.MEMBER[memberName]].icon;
titleList.insertAdjacentHTML('beforeend', createAnchor(i, datetime, icon, articleTitle));
});
setTimeout(() => {
document.querySelector('.p-blog-group').style.hight = "px";
scrollOnLoad();
}, 100);
};
const doProcessBlog = (blogPageType) => {
const body = document.querySelector('body');
// 内容が空のページ（卒業メンバーのブログなど）
if (body.getElementsByTagName('*').length === 0) {
body.innerHTML = 'This page is no longer available';
return;
}
// ひなたフェス/握手会 は非メンバーブログ
const isNotMemberBlog = (location.search).match(/(cd=hinafes_blog|cd=event)/g);
if (isNotMemberBlog) {
return;
}
if (isMobile()) {
return;
}
updateHeaderFontColor('.p-blog-head-container', '.c-blog-page__title, .c-blog-page__subtitle, .c-blog-main__name, .c-blog__profilelink');
const faceSelector = '.p-blog-face__list';
// 画面下部の顔写真
Array.prototype.forEach.call(document.querySelectorAll(faceSelector), (x) => {
x.addEventListener('mouseover', () => {
x.children[1].style.color = getColorMode() === COLOR_MODE.DARK_COLOR ? `${DARK_FONT_CL}` : `${DEFAULT_FONT_CL}`;
});
});
Array.prototype.forEach.call(document.querySelectorAll(faceSelector), (x) => {
x.addEventListener('mouseout', () => {
x.children[1].style.color = `${DEFAULT_FONT_CL}`;
});
});
const styleText_common = `
.c-blog-face__item {
transition: transform 0.3s ease, z-index 0.3s ease;
transform-origin: center center;
}
.p-blog-face__list:hover > * {
transform: scale(1.2, 1.2) translateZ(10px);
}
.p-blog-face__list:hover >.c-blog-face__item {
box-shadow: 0px 0px 0px 3px ${DEFAULT_BLUE};
}
.c-blog-main__category {
background-color: #5ca8d1;
}
.c-button-grad, .c-button-grad.c-button-grad--big {
background: ${GREEN_BUTTON};
}
.c-button-grad.c-button-grad--big {
min-width: 280px;
}
`;
if (blogPageType == "blog_top") {
((x) => { if (x) { x.style.cursor = "pointer"; } })(document.querySelector('.js-select.sort'));
document.appendStyle(styleText_common + `
.l-contents {
padding-bottom: 20px;
}
.c-blog-top__name {
font-weight: bold;
font-size: 2rem;
}
.c-blog-top__title,.c-blog-top__date {
font-size: 1.2rem;
}`);
return;
}
const blogEntryItem = document.querySelector('.p-blog-entry__item');
const blogEntryItemStyles = window.getComputedStyle(blogEntryItem, null);
const blogEntryItemHeight = parseInt(blogEntryItemStyles.height.replace('px', ''));
const blogEntryItemMarginBottom = parseInt(blogEntryItemStyles["margin-bottom"].replace('px', ''));
const blogEntryItemHeightWithMargin = blogEntryItemHeight + blogEntryItemMarginBottom;
const screenWidth = screen.width;
const CONTENTS_WIDTH = Math.floor(screen.width * 0.1 * 0.9) * 10;
const MAIN_CONTENTS_WIDTH = Math.floor(CONTENTS_WIDTH * 0.6) + "px";
const OTHER_BLOG_LIST_WIDTH = Math.floor(CONTENTS_WIDTH * 0.22) + "px";
const styleText = styleText_common + `
.l-contents {
width: ${CONTENTS_WIDTH}px;
}
.l-other-contents--blog {
width: ${OTHER_BLOG_LIST_WIDTH};
margin-top: -160px;
padding-top: 20px;
--bg-color: #ffffff;
background-color: var(--bg-color);
}
.c-button-grad {
padding: 6px 40px 6px 32px;
}
.l-other-contents--blog::after, .c-button-grad.c-button-grad--big::after {
background-color: var(--bg-color);
}
.p-blog-head {
padding-top: 0;
}
.c-blog-page__title {
margin-bottom: 0;
}
.c-blog-member__icon {
margin-bottom: 10px;
}
.p-blog-member__head {
margin-bottom: 5px;
}
.c-blog-member__info-td__name {
padding-bottom: 5px;
}
.s-blog__index {
position: relative;
z-index: 50;
margin: 0 0 0 -50px;
height: 160px;
width: 290px;
overflow: scroll;
}
.cale_table {
margin-top: 0px;
}
.p-blog-article__head {
background-color: #f6ffff;
border: 1px solid #a0d8ef ;
border-radius: 10px;
}
.c-blog-article__title {
font-size: 2.5rem;
line-height: 58px;
color: #636767;
background-color: #e0ffff;
border-radius: 10px;
}
.c-blog-article__title, .c-blog-article__date {
text-indent: 5px;
}
.l-maincontents--blog {
width: ${MAIN_CONTENTS_WIDTH};
margin-top:-160px;
padding: 20px;
}
.l-contents--blog-list {
padding-bottom: 0;
}
.c-blog-entry_area__title {
margin-bottom: 2px;
}
.p-blog-group {
border: solid 1px #32a1ce;
}
.p-blog-article {
padding-bottom: 0;
margin-bottom: 0;
}
.p-blog-article__info {
margin-bottom: 10px;
}
.c-pager__item__text time {
font-size: 1.4rem;
}
.p-button--center {
padding: 0;
}
.p-blog-face__title {
margin-bottom: 10px;
}
.p-blog-face__group {
padding-top: 20px;
}
.p-blog-entry__group {
padding-bottom: 0;
width: ${OTHER_BLOG_LIST_WIDTH};
}
.p-blog-entry__list {
height: ${blogEntryItemHeightWithMargin * 3}px;
width: ${OTHER_BLOG_LIST_WIDTH};
overflow: scroll;
border: none;
margin-bottom: 20px;
}
.c-blog-entry__name {
font-size: 1.3rem;
}`;
document.appendStyle(styleText);
shortenYear('.c-blog-article__date time');
shortenYear('.c-blog-entry__name');
shortenYear('.c-pager__item__text time');
setModalEvent('.c-blog-article__text img');
const memberIcon = document.querySelector('.c-blog-member__icon');
if (! memberIcon) {
const info = document.querySelector('.p-blog-member__info');
const relayPhoto = create5thRelayPhoto();
info.prepend(relayPhoto);
}
switch (blogPageType) {
case "blog_detail":
blogDetail();
break;
case "blog_list":
blogList();
break;
default:
throw new Error(PAGE_TYPE_ERROR_MSG);
}
};
const doProcessEvent = () => {
updateHeaderFontColor('.p-section--shakehands', '.c-shakehands-calender.pc, .c-shakehands-calender.pc a');
};
const doProcessFc = () => {
const styleText = `
.fc-logo {
padding: 15px;
}`;
document.appendStyle(styleText);
};
