// ==UserScript==
// @name Hinatazaka46-lookandfeel
// @namespace https://greatest.deepsurf.us/ja/users/1328592-naoqv
// @version 0.60
// @description 日向坂46ルックアンドフィール
// @license MIT
// @icon https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
// @match https://www.hinatazaka46.com/s/official/*
// @grant GM_info
// @grant GM_xmlhttpRequest
// @compatible Firefox, Chrome
// ==/UserScript==
(function () {
'use strict';
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
(function() {
// @license MIT
const DEFAULT_BLUE = "#8cc8d1";
class Hinatazaka46 {
}
__publicField(Hinatazaka46, "MEMBERS", {
"ポカ": "000",
"井口 眞緒": "1",
"潮紗 理菜": "2",
"柿崎 芽実": "3",
"影山 優佳": "4",
"加藤 史帆": "5",
"齊藤 京子": "6",
"佐々木 久美": "7",
"佐々木 美玲": "8",
"高瀬 愛奈": "9",
"高本 彩花": "10",
"東村 芽依": "11",
"金村 美玖": "12",
"河田 陽菜": "13",
"小坂 菜緒": "14",
"富田 鈴花": "15",
"丹生 明里": "16",
"濱岸 ひより": "17",
"松田 好花": "18",
"宮田 愛萌": "19",
"渡邉 美穂": "20",
"上村 ひなの": "21",
"髙橋 未来虹": "22",
"森本 茉莉": "23",
"山口 陽世": "24",
"石塚 瑶季": "25",
"岸 帆夏": "26",
"小西 夏菜実": "27",
"清水 理央": "28",
"正源司 陽子": "29",
"竹内 希来里": "30",
"平尾 帆夏": "31",
"平岡 海月": "32",
"藤嶌 果歩": "33",
"宮地 すみれ": "34",
"山下 葉留花": "35",
"渡辺 莉奈": "36",
"大田 美月": "37",
"大野 愛実": "38",
"片山 紗希": "39",
"蔵盛 妃那乃": "40",
"坂井 新奈": "41",
"佐藤 優羽": "42",
"下田 衣珠季": "43",
"高井 俐香": "44",
"鶴崎 仁香": "45",
"松尾 桜": "46",
"日向坂46": "00",
"五期生リレー": "3000"
});
__publicField(Hinatazaka46, "MEMBER_PROPERTIES", [
{ "no": "000", "nm": "ポカ", "kn": "", "gen": "0", "ico": "🐦️", "bd": "43824", "bt": "", "cl": [0, 0], "end": "" },
{ "no": "1", "nm": "井口 眞緒", "kn": "いぐち まお", "gen": "1", "ico": "🍷", "bd": "35013", "bt": "AB", "cl": [8, 7], "end": "200330", "img": "986/eeac9663692558ffd0aecb18fe7e3", "lnk": "instagram.com/iguchi.mao" },
{ "no": "2", "nm": "潮 紗理菜", "kn": "うしお さりな", "gen": "1", "ico": "🍀", "bd": "35790", "bt": "O", "cl": [13, 6], "end": "231231", "img": "bb8/60972360af21e201cd8fc36813faa", "lnk": "ushiosarina.com" },
{ "no": "3", "nm": "柿崎芽実", "kn": "かきざき めみ", "gen": "1", "ico": "🐱", "bd": "37227", "bt": "A", "cl": [4, 4], "end": "190811", "img": "f58/a6c42b4b0cae08ee929ca32764d32" },
{ "no": "4", "nm": "影山 優佳", "kn": "かげやま ゆうか", "gen": "1", "ico": "⚽", "bd": "37019", "bt": "O", "cl": [8, 8], "end": "230723", "img": "04d/7577c4908a69515ec91c9dd0c2159", "lnk": "kageyamayuka.com" },
{ "no": "5", "nm": "加藤 史帆", "kn": "かとう しほ", "gen": "1", "ico": "🐻", "bd": "35828", "bt": "A", "cl": [15, 15], "end": "241225", "img": "610/d713c2e65eee8fa173ef6c62d0d49", "lnk": "shihokato.com" },
{ "no": "6", "nm": "齊藤 京子", "kn": "さいとう きょうこ", "gen": "1", "ico": "🍜", "bd": "35678", "bt": "A", "cl": [9, 9], "end": "240405", "img": "93d/28ddf8afcf0f3360c267eb0232ebd", "lnk": "toho-ent.co.jp/actor/96610" },
{ "no": "7", "nm": "佐々木 久美", "kn": "ささき くみ", "gen": "1", "ico": "🦒", "bd": "35086", "bt": "O", "cl": [1, 13], "end": "250406", "img": "4f1/2d700f34ba47f7c556c4f9b0080b5", "lnk": "kumisasaki.com" },
{ "no": "8", "nm": "佐々木 美玲", "kn": "ささき みれい", "gen": "1", "ico": "🍞", "bd": "36511", "bt": "O", "cl": [6, 6], "end": "250405", "img": "0df/18fcfe112bdc514260a599f15ca6d", "lnk": "mireisasaki.officialfc.jp" },
{ "no": "9", "nm": "高瀬 愛奈", "kn": "たかせ まな", "gen": "1", "ico": "🐶", "bd": "36058", "bt": "A", "cl": [9, 11], "end": "250501", "img": "f26/b28c840b2702129a0e128157f2fd2", "lnk": "instagram.com/mana_takase_" },
{ "no": "10", "nm": "高本 彩花", "kn": "たかもと あやか", "gen": "1", "ico": "🍒", "bd": "36101", "bt": "B", "cl": [1, 10], "end": "240731", "img": "99c/0c9b9b9eb6857ee825edde1adaeb8", "lnk": "instagram.com/ayacheri._.official" },
{ "no": "11", "nm": "東村 芽依", "kn": "ひがしむら めい", "gen": "1", "ico": "🍓", "bd": "36030", "bt": "O", "cl": [10, 10], "end": "250125", "img": "e8d/6d3443d32d21af5b4250cae4dfe98", "lnk": "instagram.com/mei.higashimura" },
{ "no": "12", "nm": "金村 美玖", "kn": "かねむら みく", "gen": "2", "ico": "🍣", "bd": "37509", "bt": "O", "cl": [6, 1], "end": "" },
{ "no": "13", "nm": "河田 陽菜", "kn": "かわた ひな", "gen": "2", "ico": "🐼", "bd": "37095", "bt": "B", "cl": [10, 6], "end": "" },
{ "no": "14", "nm": "小坂 菜緒", "kn": "こさか なお", "gen": "2", "ico": "🦕", "bd": "37506", "bt": "O", "cl": [14, 9], "end": "" },
{ "no": "15", "nm": "富田 鈴花", "kn": "とみた すずか", "gen": "2", "ico": "🚙", "bd": "36909", "bt": "A", "cl": [13, 13], "end": "45874", "img": "a3d/3354f4c554914640f4017cd4a1fa8", "lnk": "instagram.com/suzy.tomita" },
{ "no": "16", "nm": "丹生 明里", "kn": "にぶ あかり", "gen": "2", "ico": "🐸", "bd": "36937", "bt": "AB", "cl": [7, 7], "end": "250131", "img": "9bd/04f076fd4bb2a2133af488e5a4732", "lnk": "akarinibu.com" },
{ "no": "17", "nm": "濱岸 ひより", "kn": "はまぎし ひより", "gen": "2", "ico": "🐣", "bd": "37527", "bt": "A", "cl": [7, 9], "end": "241205", "img": "afc/00d2a3192ea32e11b16094ab3eff5", "lnk": "horipro.co.jp/hamagishihiyori" },
{ "no": "18", "nm": "松田 好花", "kn": "まつだ このか", "gen": "2", "ico": "🐙", "bd": "36277", "bt": "A", "cl": [10, 4], "end": "" },
{ "no": "19", "nm": "宮田 愛萌", "kn": "みやた まなも", "gen": "2", "ico": "⛩️", "bd": "35913", "bt": "A", "cl": [8, 10], "end": "221218", "img": "355/57e4a69c67e61eef9bce39cf3b4b3", "lnk": "farminc.co.jp/ranch-%E5%AE%AE%E7%94%B0%E6%84%9B%E8%90%8C" },
{ "no": "20", "nm": "渡邉 美穂", "kn": "わたなべ みほ", "gen": "2", "ico": "🏀", "bd": "36580", "bt": "A", "cl": [9, 1], "end": "220731", "img": "d65/46d3f83f40270879eb6eb890e7d40", "lnk": "mihowatanabe.jp" },
{ "no": "21", "nm": "上村 ひなの", "kn": "かみむら ひなの", "gen": "3", "ico": "⚫️🔻⚫️", "bd": "38089", "bt": "AB", "cl": [8, 2], "end": "" },
{ "no": "22", "nm": "髙橋 未来虹", "kn": "たかはし みくに", "gen": "3", "ico": "🌈", "bd": "37891", "bt": "B", "cl": [3, 13], "end": "" },
{ "no": "23", "nm": "森本 茉莉", "kn": "もりもと まりぃ", "gen": "3", "ico": "🐨", "bd": "38040", "bt": "A", "cl": [7, 15], "end": "" },
{ "no": "24", "nm": "山口 陽世", "kn": "やまぐち はるよ", "gen": "3", "ico": "⚾", "bd": "38040", "bt": "O", "cl": [4, 6], "end": "" },
{ "no": "25", "nm": "石塚 瑶季", "kn": "いしづか たまき", "gen": "4", "ico": "💎", "bd": "38205", "bt": "A", "cl": [10, 7], "end": "" },
{ "no": "26", "nm": "岸 帆夏", "kn": "きし ほのか", "gen": "4", "ico": "⛵", "bd": "38214", "bt": "O", "cl": [6, 9], "end": "2023127", "img": "ed0/52d7641fa4dcbafe9d087ad44bed3" },
{ "no": "27", "nm": "小西 夏菜実", "kn": "こにし ななみ", "gen": "4", "ico": "🐺", "bd": "38263", "bt": "B", "cl": [13, 15], "end": "" },
{ "no": "28", "nm": "清水 理央", "kn": "しみず りお", "gen": "4", "ico": "🫶", "bd": "38367", "bt": "AB", "cl": [1, 11], "end": "" },
{ "no": "29", "nm": "正源司 陽子", "kn": "しょうげんじ ようこ", "gen": "4", "ico": "🍫", "bd": "39127", "bt": "B", "cl": [7, 8], "end": "" },
{ "no": "30", "nm": "竹内 希来里", "kn": "たけうち きらり", "gen": "4", "ico": "🌟", "bd": "38768", "bt": "AB", "cl": [6, 8], "end": "" },
{ "no": "31", "nm": "平尾 帆夏", "kn": "ひらお ほのか", "gen": "4", "ico": "⛵️", "bd": "37833", "bt": "A", "cl": [1, 7], "end": "" },
{ "no": "32", "nm": "平岡 海月", "kn": "ひらおか みつき", "gen": "4", "ico": "🪼", "bd": "37355", "bt": "A", "cl": [15, 6], "end": "" },
{ "no": "33", "nm": "藤嶌 果歩", "kn": "ふじしま かほ", "gen": "4", "ico": "🐏", "bd": "38936", "bt": "X", "cl": [10, 15], "end": "" },
{ "no": "34", "nm": "宮地 すみれ", "kn": "みやち すみれ", "gen": "4", "ico": "🦥", "bd": "38717", "bt": "x", "cl": [14, 8], "end": "" },
{ "no": "35", "nm": "山下 葉留花", "kn": "やました はるか", "gen": "4", "ico": "🌱", "bd": "37761", "bt": "O", "cl": [9, 2], "end": "" },
{ "no": "36", "nm": "渡辺 莉奈", "kn": "わたなべ りな", "gen": "4", "ico": "🎀", "bd": "39851", "bt": "A", "cl": [15, 9], "end": "" },
{ "no": "37", "nm": "大田 美月", "kn": "おおた みづき", "gen": "5", "ico": "🍓", "bd": "39058", "bt": "A", "cl": [10, 11], "end": "" },
{ "no": "38", "nm": "大野 愛実", "kn": "おおの まなみ", "gen": "5", "ico": "🦀", "bd": "39207", "bt": "B", "cl": [8, 8], "end": "" },
{ "no": "39", "nm": "片山 紗希", "kn": "かたやま さき", "gen": "5", "ico": "🐰", "bd": "39077", "bt": "A", "cl": [1, 1], "end": "" },
{ "no": "40", "nm": "蔵盛 妃那乃", "kn": "くらもり ひなの", "gen": "5", "ico": "🪭", "bd": "38740", "bt": "B", "cl": [10, 8], "end": "" },
{ "no": "41", "nm": "坂井 新奈", "kn": "さかい にいな", "gen": "5", "ico": "🩰", "bd": "39886", "bt": "A", "cl": [9, 9], "end": "" },
{ "no": "42", "nm": "佐藤 優羽", "kn": "さとう ゆう", "gen": "5", "ico": "🪽", "bd": "38970", "bt": "AB", "cl": [2, 2], "end": "" },
{ "no": "43", "nm": "下田 衣珠季", "kn": "しもだ いずき", "gen": "5", "ico": "🏓", "bd": "39077", "bt": "A", "cl": [1, 2], "end": "" },
{ "no": "44", "nm": "高井 俐香", "kn": "たかい りか", "gen": "5", "ico": "🎠", "bd": "39295", "bt": "O", "cl": [13, 6], "end": "" },
{ "no": "45", "nm": "鶴崎 仁香", "kn": "つるさき にこ", "gen": "5", "ico": "🍡", "bd": "38073", "bt": "B", "cl": [6, 7], "end": "" },
{ "no": "46", "nm": "松尾 桜", "kn": "まつお さくら", "gen": "5", "ico": "🐧", "bd": "38511", "bt": "A", "cl": [10, 9], "end": "" },
{ "no": "00", "nm": "日向坂46", "kn": "", "gen": "1", "ico": "", "bd": "43551", "bt": "", "cl": [0, 0], "end": "" },
{ "no": "3000", "nm": "五期生リレー", "kn": "", "gen": "-1", "ico": "五", "bd": "", "bt": "", "cl": [0, 0], "end": "" }
]);
__publicField(Hinatazaka46, "PENLIGHT", [
{ "nm": "skyblue", "cd": "5bbee4" },
{ "nm": "pastel blue", "cd": "49bdf0" },
{ "nm": "emerald green", "cd": "50c878" },
{ "nm": "green", "cd": "00ff00" },
{ "nm": "pearl green", "cd": "b4ddc0" },
{ "nm": "light green", "cd": "90ee90" },
{ "nm": "yellow", "cd": "ffff00" },
{ "nm": "orange", "cd": "ffa500" },
{ "nm": "red", "cd": "ff0000" },
{ "nm": "white", "cd": "ffffff" },
{ "nm": "sakura pink", "cd": "ffc0c9" },
{ "nm": "pink", "cd": "ffc0cb" },
{ "nm": "passion pink", "cd": "fc0fc0" },
{ "nm": "purple", "cd": "800080" },
{ "nm": "violet", "cd": "ee82ee" },
{ "nm": "blue", "cd": "0000ff" }
]);
// @license MIT
const initializeAccordion = (details, opt = { gridTemplateRows: null, gridTemplateColumns: null }) => {
const summary = details.querySelector(".p-blog-face__title");
const panel = details.querySelector(".p-blog-face__group");
if (!(details && summary && panel)) {
return;
}
let isTransitioning = false;
const onOpen = () => {
if (details.classList.contains("open") || isTransitioning) {
return;
}
isTransitioning = true;
panel.style.gridTemplateRows = "0fr";
details.classList.add("open");
requestAnimationFrame(() => {
requestAnimationFrame(() => {
panel.style.gridTemplateRows = opt.gridTemplateRows ? opt.gridTemplateRows : "repeat(5, 200px)";
panel.style.gridTemplateColumns = opt.gridTemplateColumns ? opt.gridTemplateColumns : "repeat(7, 160px)";
panel.style.height = "auto";
panel.style.width = "auto";
});
});
panel.addEventListener(
"transitionend",
() => {
isTransitioning = false;
},
{ once: true }
);
};
const onClose = () => {
if (!details.classList.contains("open") || isTransitioning) {
return;
}
isTransitioning = true;
details.classList.remove("open");
panel.style.gridTemplateRows = "0fr";
panel.style.gridTemplateColumns = "0fr";
panel.style.height = "0";
panel.style.width = "0";
panel.addEventListener(
"transitionend",
() => {
panel.style.gridTemplateRows = "";
isTransitioning = false;
},
{ once: true }
);
};
summary.addEventListener("click", (event) => {
event.preventDefault();
if (details.classList.contains("open")) {
onClose();
} else {
onOpen();
}
});
};
// @license MIT
const CookieUtils = {
/*
* 指定した名前cookieの値を返す
* @param {string} cookieName - cookieの名前
* @return {string} cookieValue - cookieの値
*/
getCookie: (cookieName) => {
if (cookieName == "" || cookieName == null) {
console.error("CookieUtils.getCookie：引数に値を設定してください。");
throw new Error("無効なCookieの取得が試みられました。");
} else {
var replace = "(?:(?:^|.*s*)" + cookieName + "s*=s*([^;]*).*$)|^.*$";
var cookieValue = document.cookie.replace(new RegExp(replace), "$1");
return cookieValue;
}
},
/*
* cookieを追加する
* @param {string} cookieName - cookieの名前
* @param {string} cookieValue - cookieの値
* @param {number} cookieTime - cookieの有効期限(日数)
*/
setCookie: (cookieName, cookieValue, cookieDays = 30) => {
const cookieDomain = location.hostname;
const cookieTime = 60 * 60 * 24 * cookieDays;
if (cookieName == "" || cookieName == null) {
console.log("CookieUtils.setCookie：引数を設定してください。");
} else {
document.cookie = cookieName + "=" + cookieValue + ";domain=" + cookieDomain + ";path=/;max-age=" + cookieTime;
}
},
/*
* cookieを削除する
* @param {string} cookieName - cookieの名前
*/
removeCookie: (cookieName) => {
if (cookieName == "" || cookieName == null) {
console.log("CookieUtils.removeCookie：引数を設定してください。");
} else {
CookieUtils.setCookie(cookieName, "", 0);
}
}
};
// @license MIT
const last2digitsFromYear = (year) => ((str) => str.substring(str.length - 2))(year.toString());
const weekDay = {
0: "Sun.",
1: "Mon.",
2: "Tue.",
3: "Wed.",
4: "Thu.",
5: "Fri.",
6: "Sat."
};
const shortenYearWithDay = (yearSelector) => {
Array.prototype.forEach.call(document.querySelectorAll(yearSelector), (x) => {
const text = x.innerText;
const match = text.match(/(\d{4})\.(\d{1,2})\.(\d{1,2})(\s(\d{2}):(\d{2}))?/);
if (match && match[3]) {
const date = new Date(parseInt(match[1]), parseInt(match[2]) - 1, parseInt(match[3]), match[4] ? parseInt(match[4]) : 0, match[4] ? parseInt(match[4]) : 0, 0, 0);
if (match[5]) {
x.innerText = text.replace(/\d{4}\.\d{1,2}\.\d{1,2}\s\d{2}:\d{2}/, `'${last2digitsFromYear(date.getFullYear())}.${date.getMonth() + 1}.${date.getDate()} ${weekDay[date.getDay()]} ${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`);
} else {
x.innerText = text.replace(/\d{4}\.\d{1,2}\.\d{1,2}/, `'${last2digitsFromYear(date.getFullYear())}.${date.getMonth() + 1}.${date.getDate()} ${weekDay[date.getDay()]}`);
}
} else {
x.innerText = text.replace(/^(?!')\d{2}(\d{2}\.)/, "'$1");
}
});
};
const excelSerialToDate = (serial) => {
const msPerDay = 24 * 60 * 60 * 1e3;
const excelEpochOffset = 25569;
const date = new Date((parseInt(serial) - excelEpochOffset) * msPerDay);
return date;
};
const ZODIAC = {
ARIES: "おひつじ座",
TAURUS: "おうし座",
GEMINI: "ふたご座",
CANCER: "かに座",
LEO: "しし座",
VIRGO: "おとめ座",
LIBRA: "てんびん座",
SCORPIO: "さそり座",
SAGITTARIUS: "いて座",
CAPRICORN: "やぎ座",
AQUARIUS: "みずがめ座",
PISCES: "うお座"
};
const getZodiacSign = (date) => {
const month = date.getMonth() + 1;
const day = date.getDate();
if (month === 1 && day >= 20 || month === 2 && day <= 18) return ZODIAC.AQUARIUS;
if (month === 2 && day >= 19 || month === 3 && day <= 20) return ZODIAC.PISCES;
if (month === 3 && day >= 21 || month === 4 && day <= 19) return ZODIAC.ARIES;
if (month === 4 && day >= 20 || month === 5 && day <= 20) return ZODIAC.TAURUS;
if (month === 5 && day >= 21 || month === 6 && day <= 20) return ZODIAC.GEMINI;
if (month === 6 && day >= 21 || month === 7 && day <= 22) return ZODIAC.CANCER;
if (month === 7 && day >= 23 || month === 8 && day <= 22) return ZODIAC.LEO;
if (month === 8 && day >= 23 || month === 9 && day <= 22) return ZODIAC.VIRGO;
if (month === 9 && day >= 23 || month === 10 && day <= 22) return ZODIAC.LIBRA;
if (month === 10 && day >= 23 || month === 11 && day <= 21) return ZODIAC.SCORPIO;
if (month === 11 && day >= 22 || month === 12 && day <= 21) return ZODIAC.SAGITTARIUS;
return ZODIAC.CAPRICORN;
};
const GRID_ROWS = 5;
const GRID_CULOMNS = 12;
const BUTTON_WIDTH = "6rem";
const createMemberGrid = () => {
const genSet = /* @__PURE__ */ new Set();
const alltimeMembers = Array.prototype.filter.call(Hinatazaka46.MEMBER_PROPERTIES, (m) => {
const isPerson = parseInt(m.gen) > 0;
if (isPerson) genSet.add(m.gen);
return isPerson;
});
const membersGroupedByGens = Object.groupBy(alltimeMembers, ({ gen }) => {
return gen;
});
const fragments = [];
Set.prototype.forEach.call(genSet, (gen) => {
let index = 0;
Array.prototype.forEach.call(membersGroupedByGens[gen], (m) => {
fragments.push(`<button class="toggle" data-no="${m.no}" aria-pressed="false">${m.ico}</button>`);
index++;
});
for (let i = 0; i < GRID_CULOMNS - index; i++) {
fragments.push(`<button class="blank" aria-pressed="false"> </button>`);
}
});
return fragments.join("");
};
const dialog = `
<!-- モーダルのオーバーレイ -->
<div class="overlay" id="overlay" hidden></div>
<!-- モーダル本体 (A) -->
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden>
<div class="modal-inner">
<!-- A3: 左上の × ボタン -->
<button class="close-btn" id="closeBtn" aria-label="Close">×</button>
<h2 id="modalTitle" class="modal-title">Toggle Grid</h2>
<!-- A2: 3列 × 12行のグリッド（A1の集合） -->
<div class="toggle-grid" id="toggleGrid" aria-label="Toggle grid">
${createMemberGrid()}
</div>
<!-- A4: 右下の OK ボタン（押下時処理はスケルトン） -->
<button class="ok-btn" id="okBtn">OK</button>
</div>
<input id="memberselect_target" tyoe="hidden" value="" hidden/>
<input id="memberselect_row_index" tyoe="hidden" value="" hidden/>
</div>`;
const MEM_SELECT_CSS = `
:root {
--modal-bg: #111;
--panel-bg: #1a1a1a;
--accent: #4cc9f0;
--text: #f5f5f5;
--shadow: rgba(0,0,0,0.4);
}
/* hidden 属性で表示非表示を制御 */
[hidden] {
visibility: hidden; /* 見えなくなる */
opacity: 0; /* 不透明度を 0 に */
pointer-events: none; /* クリックを無効化 */
}
/* オーバーレイ */
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(2px);
z-index: 9999;
}
/* モーダル本体 */
.modal {
position: fixed;
inset: 0;
display: grid;
place-items: center;
z-index: 10000;
}
.modal-inner {
position: relative;
width: min(90vw, 1080px);
max-height: min(90vh, 640px);
background: var(--panel-bg);
color: var(--text);
border-radius: 16px;
box-shadow: 0 20px 40px var(--shadow);
padding: 56px 56px 72px; /* 余白を多めにして ×/OK を置きやすく */
overflow: auto;
}
.modal-title {
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
opacity: 0.9;
}
/* A2: トグルのグリッド（横 {GRID_ROWS}} x 縦{GRID_CULOMNS}） */
.toggle-grid {
position: relative;
display: grid;
grid-template-columns: repeat(${GRID_CULOMNS}, ${BUTTON_WIDTH});
grid-auto-rows: ${BUTTON_WIDTH};
gap: 12px;
align-content: start; /* 左詰め（縦方向も上に詰める） */
width: max-content; /* ちょうどの幅 */
min-height: calc(${GRID_ROWS} * ${BUTTON_WIDTH} + (${GRID_ROWS} - 1) * 12px); /* {GRID_ROWS} 行分の高さ相当（見た目の目安） */
}
/* ボタン */
.toggle, .blank {
width: ${BUTTON_WIDTH};
height: ${BUTTON_WIDTH};
border-radius: 12px;
border: 0;
background: #222;
color: #fff;
font-size: 28px;
display: grid;
place-items: center;
user-select: none;
/* 凹凸（立ち上がり） */
box-shadow: 0 6px 12px rgba(0,0,0,0.45), inset 0 0 0 rgba(255,255,255,0);
}
.toggle {
cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.toggle:active {
transform: translateY(1px);
}
/* ひなのなの */
.toggle:nth-child(25) {
font-size: 16px;
}
/* ON状態（aria-pressed="true"）を凹（押し込み）っぽく */
.toggle[aria-pressed="true"] {
background: #1e2630;
box-shadow:
inset 0 6px 14px rgba(0,0,0,0.6),
inset 0 -2px 6px rgba(255,255,255,0.06);
outline: 2px solid var(--accent);
}
/* A3: 左上の × ボタン（グリッドの左上あたりに位置） */
.close-btn {
position: absolute;
top: 14px; /* modal-inner の内側左上 */
left: 14px;
width: 36px;
height: 36px;
border-radius: 10px;
border: 0;
background: #2a2a2a;
color: #eee;
font-size: 18px;
cursor: pointer;
box-shadow: 0 6px 12px rgba(0,0,0,0.35);
transition: transform 120ms ease, background 120ms ease;
}
.close-btn:hover { background: #333; }
.close-btn:active { transform: translateY(1px); }
/* A4: 右下の OK ボタン（グリッド右下に寄せる） */
.ok-btn {
position: absolute;
right: 24px;
bottom: 20px;
padding: 10px 20px;
border-radius: 10px;
border: 0;
background: var(--accent);
color: #0b132b;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 16px rgba(0,0,0,0.25);
transition: transform 120ms ease, filter 120ms ease;
}
.ok-btn:hover { filter: brightness(1.05); }
.ok-btn:active { transform: translateY(1px); }`;
const styleElem = document.createElement("style");
styleElem.setAttribute("rel", "stylesheet");
styleElem.textContent = MEM_SELECT_CSS;
document.head.appendChild(styleElem);
document.body.insertAdjacentHTML("beforeend", dialog);
const modal = document.getElementById("modal");
const overlay = document.getElementById("overlay");
const closeBtn = document.getElementById("closeBtn");
const okBtn = document.getElementById("okBtn");
const grid = document.getElementById("toggleGrid");
modal.hidden = true;
overlay.hidden = true;
function openMemberSelectModal(target, rowIndex, members) {
const rowIndexElement = document.getElementById("memberselect_row_index");
rowIndexElement.value = rowIndex.toString();
const targetElement = document.getElementById("memberselect_target");
targetElement.value = target;
const membersBinary = parseInt(members).toString(2);
Array.prototype.forEach.call(modal.querySelectorAll(".toggle-grid > button"), (x) => {
const memberNo = parseInt(x.dataset.no);
x.setAttribute("aria-pressed", membersBinary.at(-1 * memberNo - 1) == "1" ? "true" : "false");
});
modal.hidden = false;
overlay.hidden = false;
}
function closeModal$1() {
modal.hidden = true;
overlay.hidden = true;
}
closeBtn.addEventListener("click", closeModal$1);
overlay.addEventListener("click", closeModal$1);
okBtn.addEventListener("click", () => {
const selected = Array.from(grid.querySelectorAll(".toggle"));
const selectedNos = [...selected].map((btn) => btn.getAttribute("aria-pressed") === "true" ? parseInt(btn.dataset.no) : null).reduce((accumrator, current) => current ? accumrator + Math.pow(2, current) : accumrator, 0);
const selectedIcons = [...selected].map((btn) => btn.getAttribute("aria-pressed") === "true" ? btn.innerText : "").join("");
const hiddenRowIndex = document.getElementById("memberselect_row_index");
const row = document.getElementById(`row[${hiddenRowIndex.value}]`);
row.querySelector(".members_icon").innerText = selectedIcons;
row.querySelector(".members").value = selectedNos ? selectedNos.toString() : "";
closeModal$1();
});
grid.addEventListener("click", (e) => {
const btn = e.target.closest(".toggle");
if (!btn) return;
const pressed = btn.getAttribute("aria-pressed") === "true";
btn.setAttribute("aria-pressed", String(!pressed));
});
const createMonthAndDay = (selectedDate) => {
const monthAndDayFragment = document.createDocumentFragment();
const container = document.createElement("div");
container.classList.add("date-picker-container");
const inputMonthAndDay = document.createElement("input");
inputMonthAndDay.classList.add("month-and-day");
inputMonthAndDay.type = "text";
inputMonthAndDay.setAttribute("aria-labelledby", "h-month-and-day");
inputMonthAndDay.readOnly = true;
inputMonthAndDay.placeholder = "月日を選択";
container.appendChild(inputMonthAndDay);
monthAndDayFragment.appendChild(container);
const calendarPopup = document.createElement("div");
calendarPopup.classList.add("calendar-popup");
const calendarHeader = document.createElement("div");
calendarHeader.classList.add("calendar-header");
const monthSelect = document.createElement("select");
monthSelect.classList.add("month-select");
calendarHeader.appendChild(monthSelect);
calendarHeader.append(new Text(" 月"));
calendarPopup.appendChild(calendarHeader);
const calendarGrid = document.createElement("div");
calendarGrid.classList.add("calendar-grid");
calendarPopup.appendChild(calendarGrid);
container.appendChild(calendarPopup);
for (let i = 0; i < 12; i++) {
const month = (new Date(0, i).getMonth() + 1).toString();
const option = document.createElement("option");
option.value = i.toString();
option.textContent = month;
monthSelect.appendChild(option);
}
const updateDateInput = (month, day) => {
const selectedMonth = month;
const formattedDate = `${selectedMonth}月${day}日`;
inputMonthAndDay.value = formattedDate;
calendarPopup.classList.remove("active");
};
if (selectedDate) {
const selectedMonth = parseInt(selectedDate.substring(0, 2));
updateDateInput(selectedMonth, parseInt(selectedDate.substring(2, 4)));
monthSelect.value = selectedMonth.toString();
} else {
const today = /* @__PURE__ */ new Date();
monthSelect.value = today.getMonth().toString();
}
inputMonthAndDay.addEventListener("click", (e) => {
e.stopPropagation();
const calendarPopup2 = inputMonthAndDay.nextSibling;
calendarPopup2.classList.toggle("active");
});
document.addEventListener("click", (event) => {
const target = event.target;
if (!target || !calendarPopup.contains(target) && target !== monthAndDayFragment) {
calendarPopup.classList.remove("active");
}
});
const renderCalendar = (month) => {
calendarGrid.innerHTML = "";
const daysInMonth = new Date(2024, month + 1, 0).getDate();
for (let day = 1; day <= daysInMonth; day++) {
const dayCell = document.createElement("div");
dayCell.classList.add("day-cell");
dayCell.textContent = day.toString();
dayCell.addEventListener("click", () => {
updateDateInput(month, day);
document.querySelectorAll(".day-cell").forEach((cell) => cell.classList.remove("selected"));
dayCell.classList.add("selected");
});
calendarGrid.appendChild(dayCell);
}
};
monthSelect.addEventListener("change", (event) => {
const selectedMonth = event.target.value;
renderCalendar(parseInt(selectedMonth));
});
renderCalendar(selectedDate ? parseInt(selectedDate.substring(0, 1)) : (/* @__PURE__ */ new Date()).getMonth());
return monthAndDayFragment;
};
const CSS_MONTH_DATE_PICKER = `
.date-picker-container {
position: relative;
display: inline-block;
}
.month-and-day {
padding: 2px 4px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
}
.calendar-popup {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 10px;
z-index: 1000;
font-family: "Libre Caslon Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.calendar-popup.active {
display: block;
}
.calendar-header {
text-align: center;
margin-bottom: 10px;
}
.month-select {
font-size: 26px;
padding: 4px 0 0 8px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.day-cell {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.2s;
font-size: 20px;
}
.day-cell:hover {
background-color: #f0f0f0;
}
.day-cell.selected {
background-color: #007bff;
color: #fff;
}
`;
const TARGET_ANNIVERSARY = "a";
const TARGET_WEEKLY = "w";
const TARGET_SPOT = "s";
const SCHEDULE_TARGET_ICON_DIC = { [TARGET_ANNIVERSARY]: "🎂", [TARGET_WEEKLY]: "🔄", [TARGET_SPOT]: "📍" };
const KEY_ANNIVERSARY_SCHEDULES = "__userscript_ANNIVERSARY_SCHEDULES";
const KEY_WEEKLY_SCHEDULES = "__userscript_WEEKLY_SCHEDULES";
const KEY_SPOT_SCHEDULES = "__userscript_SPOT_SCHEDULES";
const MINIMUM_SIZE = 3;
const ID_ANNIVERSARY_BUTTON = "anniversaryButton";
const ID_WEEKLY_BUTTON = "weeklyButton";
const ID_SPOT_BUTTON = "spotButton";
const ID_SAVE_ANNIV_BUTTON = "saveAnnivButton";
const ID_SAVE_WEEKLY_BUTTON = "saveWeeklyButton";
const ID_SAVE_SPOT_BUTTON = "saveSpotButton";
const SCHEDULE_TYPE = {
"event": "イベント",
"live": "LIVE",
"stage": "舞台",
"shakehands": "イベント",
"goods": "グッズ",
"release": "リリース",
"ticket": "チケット",
"tv": "テレビ",
"radio": "ラジオ",
"stream": "配信",
"magazinw": "雑誌",
"web-col": "WEB連載",
"birthday": "誕生日",
"other": "その他"
};
const SCHEDULE_TYPE_CSS = {
"event": "category_event",
"live": "category_event",
"stage": "category_event",
"shakehands": "category_shakehands",
"goods": "category_goods",
"release": "category_release",
"ticket": "category_ticket",
"tv": "category_media",
"radio": "category_media",
"stream": "category_media",
"magazine": "category_media",
"web-col": "category_media",
"birthday": "category_birthday",
"other": "category_other"
};
const SVG_SAVE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="2em">
<!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path fill="#2a3282" stroke="none" d="M160 144C151.2 144 144 151.2 144 160L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 237.3C496 233.1 494.3 229 491.3 226L416 150.6L416 240C416 257.7 401.7 272 384 272L224 272C206.3 272 192 257.7 192 240L192 144L160 144zM240 144L240 224L368 224L368 144L240 144zM96 160C96 124.7 124.7 96 160 96L402.7 96C419.7 96 436 102.7 448 114.7L525.3 192C537.3 204 544 220.3 544 237.3L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160zM256 384C256 348.7 284.7 320 320 320C355.3 320 384 348.7 384 384C384 419.3 355.3 448 320 448C284.7 448 256 419.3 256 384z"/>
</svg>`;
const getScheduleCategory = (type) => {
let category = "";
switch (type) {
case "shakehands":
category = "shakehands";
break;
case "release":
category = "release";
break;
case "event":
case "live":
case "stage":
category = "event";
break;
case "goods":
category = "goods";
break;
case "ticket":
category = "ticket";
break;
case "birthday":
category = "birthday";
break;
case "radio":
case "tv":
case "stream":
case "web-col":
category = "media";
break;
case "other":
category = "other";
break;
}
return category;
};
const SCHEDULE_4_SETTING = {
"event": "イベント",
"live": "LIVE",
"stage": "舞台",
"shakehands": "握手会",
"goods": "グッズ",
"release": "リリース",
"ticket": "チケット",
"tv": "テレビ",
"radio": "ラジオ",
"stream": "配信",
"magazinw": "雑誌",
"web-col": "WEB連載",
"birthday": "誕生日",
"other": "その他"
};
const DAY_OF_WEEK = { "sun": "日", "mon": "月", "tue": "火", "wed": "水", "thu": "木", "fri": "金", "sat": "土" };
const DAY_OF_WEEK_ENTRIES = Object.entries(DAY_OF_WEEK);
const setScheduler = () => {
document.appendStyle(SCHEDULE_CSS);
document.appendStyle(SCHEDULE_MODAL_CSS);
document.appendStyle(CSS_MONTH_DATE_PICKER);
const lContents = document.querySelector(".l-contents");
const rightSideBar = document.createElement("div");
rightSideBar.setAttribute("id", "l-sidebar--schedule");
rightSideBar.style.cssText = "display: block; position: absolute; width: 2000px; right: -2000px; top: 0; height: 100%;";
const editPanel = `<div></div>`;
rightSideBar.insertAdjacentHTML("afterbegin", editPanel);
lContents.appendChild(rightSideBar);
const editAnniversarySchedule = createSchedulerButton(ID_ANNIVERSARY_BUTTON, `${SCHEDULE_TARGET_ICON_DIC[TARGET_ANNIVERSARY]} Anniversary`);
editAnniversarySchedule.addEventListener("click", () => openScheduler(TARGET_ANNIVERSARY));
rightSideBar.appendChild(editAnniversarySchedule);
const editWeeklySchedule = createSchedulerButton(ID_WEEKLY_BUTTON, `${SCHEDULE_TARGET_ICON_DIC[TARGET_WEEKLY]} Weekly`);
editWeeklySchedule.addEventListener("click", () => openScheduler(TARGET_WEEKLY));
rightSideBar.appendChild(editWeeklySchedule);
const editSpotSchedule = createSchedulerButton(ID_SPOT_BUTTON, `${SCHEDULE_TARGET_ICON_DIC[TARGET_SPOT]} Spot`);
editSpotSchedule.addEventListener("click", () => openScheduler(TARGET_SPOT));
rightSideBar.appendChild(editSpotSchedule);
};
const confirmUseStorage = () => {
const emptyBlacket = "[]";
if (confirm("カスタムスケジュールを作成するには localStorage に値を保存する必要があります。よろしいですか？")) {
if (localStorage.getItem(KEY_ANNIVERSARY_SCHEDULES)) {
localStorage.setItem(KEY_ANNIVERSARY_SCHEDULES, emptyBlacket);
}
if (localStorage.getItem(KEY_WEEKLY_SCHEDULES)) {
localStorage.setItem(KEY_WEEKLY_SCHEDULES, emptyBlacket);
}
if (localStorage.getItem(KEY_SPOT_SCHEDULES)) {
localStorage.setItem(KEY_SPOT_SCHEDULES, emptyBlacket);
}
} else {
alert("カスタムスケジュール作成を中止します。");
}
};
const openScheduler = (target) => {
const schedulerModal = document.createElement("div");
schedulerModal.classList.add("modal--schedule");
schedulerModal.style.display = "flex";
const close = document.createElement("span");
close.classList.add("close");
close.addEventListener("click", (e) => {
e.stopPropagation();
closeSchedulerModal(schedulerModal);
});
schedulerModal.appendChild(close);
schedulerModal.insertAdjacentHTML("beforeend", '<div class="update_log"></div>');
let save_btn_id;
let schedule_key;
let saveSchedule;
switch (target) {
case TARGET_ANNIVERSARY:
save_btn_id = ID_SAVE_ANNIV_BUTTON;
schedule_key = KEY_ANNIVERSARY_SCHEDULES;
saveSchedule = saveAnniversary;
break;
case TARGET_WEEKLY:
save_btn_id = ID_SAVE_WEEKLY_BUTTON;
schedule_key = KEY_WEEKLY_SCHEDULES;
saveSchedule = saveWeekly;
break;
case TARGET_SPOT:
save_btn_id = ID_SAVE_SPOT_BUTTON;
schedule_key = KEY_SPOT_SCHEDULES;
saveSchedule = saveSpot;
break;
default:
throw new TypeError("Illegal Schedeule Target is given.");
}
const saveButton = createSchedulerButton(save_btn_id, SVG_SAVE);
saveButton.classList.add("button--save");
saveButton.addEventListener("click", saveSchedule);
schedulerModal.appendChild(saveButton);
if (!localStorage.getItem(schedule_key)) {
confirmUseStorage();
}
createSchedulerModal(target, schedulerModal, localStorage.getItem(schedule_key));
setOpenMemberSelectModal(schedulerModal, target);
document.body.appendChild(schedulerModal);
};
const saveAnniversary = (e) => {
e.stopPropagation();
const records = new Array();
Array.prototype.forEach.call(document.querySelectorAll(".grid .row"), (x) => {
const record = new AnniversarySchedule();
Array.prototype.forEach.call(x.querySelectorAll("input, select"), (y) => {
const classes = y.classList;
if (classes.contains("type")) {
record.type = y.value;
} else if (classes.contains("month-and-day")) {
const monthAndDay = y.value.match(/(\d{1,2})\D(\d{1,2})\D/);
record.date = monthAndDay ? monthAndDay[1].padStart(2, "0") + monthAndDay[2].padStart(2, "0") : "";
} else if (classes.contains("title")) {
record.title = y.value.escapeString();
} else if (classes.contains("link")) {
record.link = y.value;
} else if (classes.contains("members")) {
record.members = y.value;
}
});
if (record.isEmpty()) {
return;
} else if (record.isValid(x)) {
records.push(record);
}
});
save(KEY_ANNIVERSARY_SCHEDULES, records);
};
const saveWeekly = (e) => {
e.stopPropagation();
const records = new Array();
Array.prototype.forEach.call(document.querySelectorAll(".grid .row"), (x) => {
const record = new WeeklySchedule();
Array.prototype.forEach.call(x.querySelectorAll("input, select"), (y) => {
const classes = y.classList;
if (classes.contains("from")) {
record.from = y.value?.replaceAll("-", "");
} else if (classes.contains("to")) {
record.to = y.value?.replaceAll("-", "");
} else if (classes.contains("type")) {
record.type = y.value;
} else if (classes.contains("dow") && y.checked) {
record.dow?.push(y.value);
} else if (classes.contains("start")) {
record.start = y.value.replace(":", "");
} else if (classes.contains("end")) {
record.end = y.value.replace(":", "");
} else if (classes.contains("title")) {
record.title = y.value.escapeString();
} else if (classes.contains("link")) {
record.link = y.value;
} else if (classes.contains("members")) {
record.members = y.value;
}
});
if (record.isEmpty()) {
return;
} else if (record.isValid(x)) {
records.push(record);
}
});
localStorage.setItem(KEY_WEEKLY_SCHEDULES, JSON.stringify(records));
};
const saveSpot = (e) => {
e.stopPropagation();
const records = new Array();
Array.prototype.forEach.call(document.querySelectorAll(".grid .row"), (x) => {
const record = new SpotSchedule();
Array.prototype.forEach.call(x.querySelectorAll("input, select"), (y) => {
const classes = y.classList;
if (classes.contains("date")) {
record.date = y.value?.replaceAll("-", "");
} else if (classes.contains("type")) {
record.type = y.value;
} else if (classes.contains("start")) {
record.start = y.value.replace(":", "");
} else if (classes.contains("end")) {
record.end = y.value.replace(":", "");
} else if (classes.contains("title")) {
record.title = y.value.escapeString();
} else if (classes.contains("link")) {
record.link = y.value;
} else if (classes.contains("members")) {
record.members = y.value;
}
});
if (record.isEmpty()) {
return;
} else if (record.isValid(x)) {
records.push(record);
}
});
console.log(records);
localStorage.setItem(KEY_SPOT_SCHEDULES, JSON.stringify(records));
};
const createSchedulerModal = (target, modal2, jsonSchedules) => {
const fragment = new DocumentFragment();
const panel = document.createElement("div");
panel.classList.add("panel--schedule");
fragment.appendChild(panel);
panel.insertAdjacentHTML("beforeend", (() => {
switch (target) {
case TARGET_ANNIVERSARY:
return HEADER_ANNIVERSARY;
case TARGET_WEEKLY:
return HEADER_WEEKLY;
case TARGET_SPOT:
return HEADER_SPOT;
default:
return "";
}
})());
const grid2 = document.createElement("div");
grid2.classList.add("grid");
panel.appendChild(grid2);
const schedules = JSON.parse(jsonSchedules);
const createRowFunc = (() => {
switch (target) {
case TARGET_ANNIVERSARY:
return createAnniversaryRow;
case TARGET_WEEKLY:
return createWeeklyRow;
case TARGET_SPOT:
return createSpotRow;
default:
return (_i, _x) => "想定しないTARGET";
}
})();
schedules.forEach((x, i) => {
const bitPos = bitPositions(BigInt(x.members ? parseInt(x.members) : 0));
const memberIcons = bitPos.map((x2) => Hinatazaka46.MEMBER_PROPERTIES[x2].ico).join("");
x.memberIcons = memberIcons;
const record = createRowFunc(i, x);
grid2.insertAdjacentHTML("beforeend", record);
if (target == TARGET_ANNIVERSARY) {
const monthAndDay = panel.querySelector(`[id="row[${i}]"] > .month-and-day`);
monthAndDay?.appendChild(createMonthAndDay(x.date));
}
});
const rowCnt = schedules.length;
const maxCnt = rowCnt + MINIMUM_SIZE;
for (let i = rowCnt; i < maxCnt; i++) {
const record = createRowFunc(i);
grid2.insertAdjacentHTML("beforeend", record);
if (target == TARGET_ANNIVERSARY) {
const monthAndDay = panel.querySelector(`[id="row[${i}]"] > .month-and-day`);
monthAndDay?.appendChild(createMonthAndDay());
}
}
modal2.appendChild(fragment);
modal2.insertAdjacentHTML("beforeend", '<input id="is_saved" type="hidden" value="false" hidden/>');
};
const createSchedulerButton = (id2, label) => {
const button = document.createElement("div");
if (label.toLowerCase().startsWith("<svg")) {
button.innerHTML = label;
} else {
button.innerText = label;
}
button.setAttribute("id", id2);
button.classList.add("button--schedule");
button.onmousedown = () => button.classList.add("pressed");
button.onmouseup = () => button.classList.remove("pressed");
button.onmouseleave = () => button.classList.remove("pressed");
return button;
};
const setOpenMemberSelectModal = (schedulerModal, target) => {
Array.prototype.forEach.call(schedulerModal.querySelectorAll(".button"), (x) => {
x.addEventListener("click", () => {
const index = x.dataset.index;
const members = document.querySelector(`[id="row[${index}]"] .members`).value;
openMemberSelectModal(target, index, members);
});
});
};
const clearRow = (index) => {
const row = document.getElementById("row[" + index + "]");
Array.prototype.forEach.call(row?.querySelectorAll("input"), (x) => {
if (x.type == "checkbox") {
x.checked = false;
} else if (["text", "date", "time", "url"].includes(x.type)) {
x.value = "";
}
});
Array.prototype.forEach.call(row?.querySelectorAll("select"), (x) => {
x.selectedIndex = 0;
});
};
const scriptElem = document.createElement("script");
scriptElem.setAttribute("type", "text/javascript");
scriptElem.setAttribute("qv", "ooo");
scriptElem.textContent = "const clearRow = " + clearRow.toString();
document.head.appendChild(scriptElem);
const createScheduleTypeOptions = (type) => {
let options = '<option value="" style="color: red;">選択してください</option>';
Array.prototype.forEach.call(Object.keys(SCHEDULE_4_SETTING), (x) => {
options += `<option value="${x}" ${x == type ? "selected" : ""}>${SCHEDULE_4_SETTING[x]}</option>`;
});
return options;
};
const closeSchedulerModal = (modal2) => {
const saved = document.getElementById("is_saved");
if (saved.value === "true") {
document.getElementById("pageForm").submit();
}
modal2.style.animation = "modalFadeOut 0.3s forwards";
modal2.addEventListener("animationend", () => {
modal2.style.display = "none";
document.body.removeChild(modal2);
});
};
const insertExtSchedule = (category, dispYearMonth, lMainContentsUl, day, dayElem) => {
const date = dispYearMonth + String(day).padStart(2, "0");
insertAnniversarySchedule(category, date, dayElem);
insertSpotSchedule(category, date, dayElem);
insertWeeklySchedule(category, date, dayElem);
void lMainContentsUl.offsetHeight;
};
const insertAnniversarySchedule = (category, date, dayElem) => {
const anniversarySchedules = ((x) => JSON.parse(x ?? "[]"))(localStorage.getItem(KEY_ANNIVERSARY_SCHEDULES));
Array.prototype.forEach.call(anniversarySchedules, (x) => {
const monthAndDay = date.substring(4, 8);
const scheduleCategory = getScheduleCategory(x.type);
if (monthAndDay == x.date && (category == "all" || scheduleCategory == category)) {
insert(dayElem, TARGET_ANNIVERSARY, x);
}
});
};
const insertWeeklySchedule = (category, date, dayElem) => {
const dow = dayElem.querySelector("b").innerText;
const weeklySchedules = ((x) => JSON.parse(x ?? "[]"))(localStorage.getItem(KEY_WEEKLY_SCHEDULES));
Array.prototype.forEach.call(weeklySchedules, (x) => {
x.dow.some((d) => {
if (dow == DAY_OF_WEEK[d]) {
const scheduleCatedory = getScheduleCategory(x.type);
if (date >= x.from && date <= x.to && (category == "all" || scheduleCatedory == category)) {
insert(dayElem, TARGET_WEEKLY, x);
}
return true;
}
return false;
});
});
};
const insertSpotSchedule = (category, date, dayElem) => {
const spotSchedules = ((x) => JSON.parse(x ?? "[]"))(localStorage.getItem(KEY_SPOT_SCHEDULES));
Array.prototype.forEach.call(spotSchedules, (x) => {
const scheduleCategory = getScheduleCategory(x.type);
if (date == x.date && (category == "all" || scheduleCategory == category)) {
insert(dayElem, TARGET_SPOT, x);
}
});
};
const insert = (dayElem, target, schedule) => {
console.log("@@", target, schedule.title);
const setMewmbers = BigInt(schedule.members ? parseInt(schedule.members) : 0);
const filterMembers = Array.prototype.filter.call(document.querySelectorAll('#pageForm > [name="list[]"]'), (x) => {
return !isNaN(x.value);
}).map((x) => x.value).reduce((p, c) => p + Math.pow(2, c), 0);
if (filterMembers != 0 && (BigInt(filterMembers) & setMewmbers) == 0n) return;
const items = dayElem.getElementsByClassName("p-schedule__item");
if (items.length == 0) {
const daylyScheduleList = dayElem.querySelector(".p-schedule__list.p-schedule__list--long");
daylyScheduleList.insertAdjacentHTML(
"afterbegin",
`<li class="p-schedule__item">
<a href="${schedule.link}">
<div class="p-schedule__head">
<div class="c-schedule__category ${SCHEDULE_TYPE_CSS[schedule.type]}">
${SCHEDULE_TYPE[schedule.type]}
</div>
<div class="c-schedule__time--list">
${schedule.start ? schedule.start.toTimeFormat() + "〜" + schedule.end.toTimeFormat() : ""}
</div>
</div>
<p class="c-schedule__text">
${SCHEDULE_TARGET_ICON_DIC[target]} ${schedule.title}
</p>
</a>
</li>`
);
} else {
Array.prototype.some.call(Array.prototype.slice.call(items).reverse(), (item, i) => {
const insertSootSchedule = () => item.insertAdjacentHTML(
"afterend",
`<li class="p-schedule__item">
<a href="${schedule.link}">
<div class="p-schedule__head">
<div class="c-schedule__category ${SCHEDULE_TYPE_CSS[schedule.type]}">
${SCHEDULE_TYPE[schedule.type]}
</div>
<div class="c-schedule__time--list">
${schedule.start ? schedule.start.toTimeFormat() + "〜" + schedule.end.toTimeFormat() : ""}
</div>
</div>
<p class="c-schedule__text">
${SCHEDULE_TARGET_ICON_DIC[target]} ${schedule.title}
</p>
</a>
</li>`
);
const timeElem = item.querySelector(".c-schedule__time--list");
if (!timeElem) {
insertSootSchedule();
return true;
} else if (timeElem.innerText) {
const time = timeElem.innerText.match(/[0-9]{1,2}:[0-9]{2}/)[0];
const start = schedule.start;
if (time < start || i == items.length - 1 || !start) {
insertSootSchedule();
return true;
}
}
return false;
});
}
};
const fillEmpty = (lMainContentsUl, dispYearMonth) => {
if (dispYearMonth) {
fillEmptyMonthly(lMainContentsUl, dispYearMonth);
} else {
fillEmpty4Today(lMainContentsUl);
}
};
const fillEmptyMonthly = (lMainContentsUl, dispYearMonth) => {
const year = parseInt(dispYearMonth.substring(0, 4));
const month = parseInt(dispYearMonth.substring(5, 6));
const lastDay = new Date(year, month, 0).getDate();
const days = Array.prototype.map.call(lMainContentsUl.querySelectorAll(".c-schedule__date--list span"), (x) => {
return parseInt(x.innerText);
});
const diff = [];
for (let i = 1; i <= lastDay; i++) {
if (days.indexOf(i) === -1) {
diff.push(new Date(year, month - 1, i));
}
}
const listGroup = lMainContentsUl.querySelectorAll(".p-schedule__list-group");
Array.prototype.forEach.call(listGroup, (x) => {
const date = parseInt(x.querySelector("span").innerText);
Array.prototype.forEach.call([...diff], (d) => {
if (d.getDate() < date) {
x.insertAdjacentHTML(
"beforebegin",
`<div class="p-schedule__list-group">
<div class="c-schedule__date--list">
<span>${d.getDate()}</span><b>${DAY_OF_WEEK_ENTRIES[d.getDay()][1]}</b>
</div>
<ul class="p-schedule__list p-schedule__list--long">
</ul>
</div>`
);
diff.shift();
}
});
});
Array.prototype.forEach.call(diff, (d) => {
lMainContentsUl.insertAdjacentHTML(
"beforeend",
`<div class="p-schedule__list-group">
<div class="c-schedule__date--list">
<span>${d.getDate()}</span><b>${DAY_OF_WEEK_ENTRIES[d.getDay()][1]}</b>
</div>
<ul class="p-schedule__list p-schedule__list--long">
</ul>
</div>`
);
});
};
const fillEmpty4Today = (lMainContentsUl) => {
const todayElem = lMainContentsUl.querySelector(".c-schedule__date--list span");
if (!todayElem) {
const d = /* @__PURE__ */ new Date();
lMainContentsUl.insertAdjacentHTML(
"beforeend",
`<div class="p-schedule__list-group">
<div class="c-schedule__date--list">
<span>${d.getDate()}</span><b>${DAY_OF_WEEK_ENTRIES[d.getDay()][1]}</b>
</div>
<ul class="p-schedule__list p-schedule__list--long">
</ul>
</div>`
);
}
};
String.prototype.toDateFormat = function() {
return this.replace(/([0-9]{4})([0-1][0-9])([0-3][0-9])/, "$1-$2-$3");
};
String.prototype.toMonthAndDayFormat = function() {
return this.replace(/([0-1][0-9])([0-3][0-9])/, "$1/$2");
};
String.prototype.toTimeFormat = function() {
return this.replace(/([0-2][0-9])([0-5][0-9])/, "$1:$2");
};
String.prototype.isNotEmpty = function() {
if (this) {
return this.length > 0;
} else {
return false;
}
};
String.prototype.escapeString = function() {
return this.replace("\\", "\\\\").replace('"', '"');
};
Array.prototype.getChecked = function(dow) {
return this.includes(dow) ? "checked" : "";
};
class Schedule {
constructor(type, title, link, members) {
__publicField(this, "type");
__publicField(this, "title");
__publicField(this, "link");
__publicField(this, "start");
__publicField(this, "end");
__publicField(this, "members");
__publicField(this, "memberIcons");
this.type = type;
this.title = title;
this.link = link;
this.members = members;
}
isValid(element) {
const isTypeSelected = this.type.isNotEmpty();
strength(isTypeSelected, element, ".type");
const isValidTitle = this.title.isNotEmpty();
strength(isValidTitle, element, ".title");
const isValid = isTypeSelected && isValidTitle;
return isValid;
}
isEmpty() {
return !this.type && !this.title && !this.link;
}
}
class AnniversarySchedule extends Schedule {
constructor(type, title, link, members) {
super(
type = type,
title = title,
link = link,
members = members
);
__publicField(this, "date");
this.date = this.date;
}
/**
*
* @param element
* @param index
* @returns
*/
isValid(element) {
const isValidSchedule = super.isValid(element);
const isValidDow = this.date.isNotEmpty();
strength(isValidDow, element, ".month-and-day");
const isValid = isValidSchedule && isValidDow;
return isValid;
}
isEmpty() {
return super.isEmpty() && !this.date;
}
}
class WeeklySchedule extends Schedule {
constructor(type, title, link, members, from, to, start, end) {
super(
type = type,
title = title,
link = link,
members = members
);
__publicField(this, "from");
__publicField(this, "to");
__publicField(this, "dow", []);
__publicField(this, "start");
__publicField(this, "end");
this.from = from;
this.to = to;
this.start = start;
this.end = end;
}
/**
*
* @param element
* @param index
* @returns
*/
isValid(element) {
const isValidSchedule = super.isValid(element);
const isValidDow = this.dow.length > 0;
strength(isValidDow, element, ".dowlabel");
const isNotEmptyStart = this.start.isNotEmpty();
const isNotEmptyEnd = this.end.isNotEmpty();
const isValidTime = !(!isNotEmptyStart && isNotEmptyEnd);
strength(isValidTime, element, ".start, .end");
const isValid = isValidSchedule && isValidDow && isValidTime;
return isValid;
}
isEmpty() {
return super.isEmpty() && !this.from && !this.to && this.dow.length == 0;
}
}
class SpotSchedule extends Schedule {
constructor(type, title, link, members, date, start, end) {
super(type, title, link, members);
__publicField(this, "date");
__publicField(this, "start");
__publicField(this, "end");
this.date = date;
this.start = start;
this.end = end;
}
isValid(element) {
const isValidSchedule = super.isValid(element);
const isValidDate = this.date.isNotEmpty();
strength(isValidDate, element, ".date");
const isNotEmptyStart = this.start.isNotEmpty();
const isNotEmptyEnd = this.end.isNotEmpty();
const isValidTime = !(!isNotEmptyStart && isNotEmptyEnd);
strength(isValidTime, element, ".start, .end");
const isValid = isValidSchedule && isValidDate && isValidTime;
return isValid;
}
isEmpty() {
return super.isEmpty() && !this.date;
}
}
const strength = (isValid, element, selector) => {
Array.prototype.forEach.call(element.querySelectorAll(selector), (x) => {
if (!isValid && !x.classList.contains("alert")) {
x.classList.add("alert");
} else if (isValid && x.classList.contains("alert")) {
x.classList.remove("alert");
}
});
};
const SCHEDULE_MODAL_CSS = `
.modal--schedule {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
align-items: center;
justify-content: center;
animation: modalFadeIn 0.3s;
}
.button--save {
position: absolute;
top: 80px;
left: 200px;
}
#${ID_ANNIVERSARY_BUTTON}, #${ID_WEEKLY_BUTTON}, #${ID_SPOT_BUTTON} {
width: 200px;
height: 48px;
position: relative;
margin-top: 40px;
}
.button--schedule {
padding: 8px 24px 0 24px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: white;
font-size: 2rem;
font-weight: bold;
cursor: pointer;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
transition: all 0.15s ease;
}
.button--schedule.pressed {
transform: scale(0.95);
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
background: linear-gradient(135deg, #3a8dde, #00c2ce);
}
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalFadeOut {
from { opacity: 1; }
}
.panel--schedule {
background-color: white;
position: absolute;
top: 160px;
max-height: 500px;
.grid { overflow:scroll; }
}
.close {
position: absolute;
top: 30px;
left: 120px;
display: inline-block;
inline-size: 1em;
aspect-ratio: 1;
cursor: pointer;
&::before,
&::after {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 1px;
margin: auto;
content: "";
background-color: currentcolor;
--color: #ffffff;
color: var(--color);
width: 2rem;
height: 0.2rem;
}
&::before {
rotate: -45deg;
}
&::after {
rotate: 45deg;
}
}
.update_log {
position: absolute;
top: 80px;
left: 315px;
width: 1100px;
height: 70px;
overflow: scroll;
background-color: black;
p:nth-last-child(1) {
color: ${DEFAULT_BLUE};
}
p:not(nth-last-child(1)) {
color: darkcyan;
}
.container {
scrollbar-width: none;
}
-ms-overflow-style: none;
&&::-webkit-scrollbar{
display: none;
}
}`;
const TRASH_WIDTH = "30px";
const INDEX_WIDTH = "30px";
const TIME_WIDTH = "100px";
const DATE_WIDTH = "140px";
const TYPE_WIDTH = "140px";
const TITLE_WIDTH = "260px";
const LINK_WIDTH = "240px";
const PERSON_ICON_WIDTH = "30px";
const MEMBER_PARADE_WIDTH = "100px";
const SCHEDULE_CSS = `
.schedule-form { font-family: system-ui, sans-serif; }
.anniversary {
display: grid;
grid-template-columns: ${TRASH_WIDTH} ${INDEX_WIDTH} 120px ${TYPE_WIDTH} ${TITLE_WIDTH} ${LINK_WIDTH} ${PERSON_ICON_WIDTH} ${MEMBER_PARADE_WIDTH};
gap: 8px;
align-items: center;
}
.weekly {
display: grid;
grid-template-columns: ${TRASH_WIDTH} ${INDEX_WIDTH} ${DATE_WIDTH} ${DATE_WIDTH} ${TYPE_WIDTH} repeat(7, 25px) ${TIME_WIDTH} ${TIME_WIDTH} ${TITLE_WIDTH} ${LINK_WIDTH} ${PERSON_ICON_WIDTH} ${MEMBER_PARADE_WIDTH};
gap: 8px;
align-items: center;
}
.spot {
display: grid;
grid-template-columns: ${TRASH_WIDTH} ${INDEX_WIDTH} ${DATE_WIDTH} ${TYPE_WIDTH} ${TIME_WIDTH} ${TIME_WIDTH} ${TITLE_WIDTH} ${LINK_WIDTH} ${PERSON_ICON_WIDTH} ${MEMBER_PARADE_WIDTH};
gap: 8px;
align-items: center;
}
.header {
font-weight: 600;
padding: 6px 8px;
background: #f2f4f7;
border: 1px solid #e5e7eb;
border-radius: 6px;
text-align: center;
white-space: nowrap;
}
.subheader {
font-weight: 600;
padding: 4px 6px;
background: #fafafa;
border: 1px solid #ececec;
border-radius: 6px;
text-align: center;
}
.cell.no {
text-align: right;
padding-right: 5px
}
.cell.clear,
.cell.member,
.cell input[type="date"],
.cell input[type="checkbox"],
.cell input[type="time"],
.cell input[type="text"],
.cell input[type="url"] {
width: 100%;
box-sizing: border-box;
padding: 4px 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
outline: none;
}
.cell.clear {
padding: 4px 2px 2px 6px !important;
}
.cell input[type="button"] {
cursor: pointer;
padding: 6px 2px 0 2px;
width: 100%;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 6px;
outline: none;
}
.cell input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.center { text-align: center; }
.dowlabel { display: flex; justify-content: center; }
.dow { width: 18px; height: 18px; }
.alert { background-color: red;}`;
const HEADER_ANNIVERSARY = `<div class="row anniversary" role="row">
<div class="header" id="h-clear"> </div>
<div class="header" id="h-no">No</div>
<div class="header" id="h-month-and-day">日付</div>
<div class="header" id="h-type">種別</div>
<div class="header" id="h-title">タイトル</div>
<div class="header" id="h-link">リンク</div>
<div class="header" id="h-button"> </div>
<div class="header" id="h-member">メンバー</div>
</div>`;
const HEADER_WEEKLY = `<!-- ヘッダー（1段目：大項目） -->
<div class="row weekly" role="row">
<div class="header" id="h-clear"> </div>
<div class="header" id="h-no">No</div>
<div class="header" id="h-from-date">開始日</div>
<div class="header" id="h-to-date">最終日</div>
<div class="header" id="h-type">種別</div>
<div class="header center" id="h-dayofweek" style="grid-column: 6 / span 7;">曜日</div>
<div class="header" id="h-start-time">開始時間</div>
<div class="header" id="h-end-time">終了時間</div>
<div class="header" id="h-title">タイトル</div>
<div class="header" id="h-link">リンク</div>
<div class="header" id="h-button"> </div>
<div class="header" id="h-member">メンバー</div>
</div>
<!-- ヘッダー（2段目：曜日の内訳） -->
<div class="row weekly" role="row">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="subheader" id="h-sun">日</div>
<div class="subheader" id="h-mon">月</div>
<div class="subheader" id="h-tue">火</div>
<div class="subheader" id="h-wed">水</div>
<div class="subheader" id="h-thu">木</div>
<div class="subheader" id="h-fri">金</div>
<div class="subheader" id="h-sat">土</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>`;
const HEADER_SPOT = `<div class="row spot" role="row">
<div class="header" id="h-clear"> </div>
<div class="header" id="h-no">No</div>
<div class="header" id="h-date">日付</div>
<div class="header" id="h-type">種別</div>
<div class="header" id="h-start-time">開始時間</div>
<div class="header" id="h-end-time">終了時間</div>
<div class="header" id="h-title">タイトル</div>
<div class="header" id="h-link">リンク</div>
<div class="header" id="h-button"> </div>
<div class="header" id="h-member">メンバー</div>
</div>`;
const createAnniversaryRow = (i, x) => `<div id="row[${i}]" class="row anniversary" role="row">
<div class="cell">
<input type="button" class="button" onclick="javscript:clearRow(${i})" value="🗑️" />
</div>
<div class="cell no">
${i + 1}
</div>
<div class="cell month-and-day">
</div>
<div class="cell">
<select class="type" aria-labelledby="h-type">
${createScheduleTypeOptions(x?.type)}
</select>
</div>
<div class="cell">
<input type="text" class="title" placeholder="タイトル" aria-labelledby="h-title" value="${x?.title ?? ""}"/>
</div>
<div class="cell">
<input type="url" class="link" placeholder="https://example.com" aria-labelledby="h-link" value="${x?.link ?? ""}"/>
</div>
<div class="cell">
<input data-index="${i}" type="button" class="button" aria-labelledby="h-button" value="👤"/>
</div>
<div class="cell">
<span class="members_icon" aria-labelledby="h-member">${x?.memberIcons ?? ""}</span>
</div>
<input type="hidden" class="members" value="${x?.members}">
</div>`;
const createWeeklyRow = (i, x) => `<div id="row[${i}]" class="row weekly" role="row">
<div class="cell clear">
<input type="button" onclick="javscript:clearRow(${i});" value="🗑️"/>
</div>
<div class="cell no">
${i + 1}
</div>
<div class="cell">
<input type="date" class="from" aria-labelledby="h-from-date" value="${x?.from?.toDateFormat()}"/>
</div>
<div class="cell">
<input type="date" class="to" aria-labelledby="h-to-date" value="${x?.to?.toDateFormat()}"/>
</div>
<div class="cell">
<select class="type" aria-labelledby="h-type">
${createScheduleTypeOptions(x?.type)}
</select>
</div>
<label class="dowlabel" for="w${i}-sun" title="日"><input id="w${i}-sun" class="dow" type="checkbox" value="sun" aria-labelledby="h-dayofweek h-sun" ${x?.dow?.getChecked("sun")}/></label>
<label class="dowlabel" for="w${i}-mon" title="月"><input id="w${i}-mon" class="dow" type="checkbox" value="mon" aria-labelledby="h-dayofweek h-mon" ${x?.dow?.getChecked("mon")}/></label>
<label class="dowlabel" for="w${i}-tue" title="火"><input id="w${i}-tue" class="dow" type="checkbox" value="tue" aria-labelledby="h-dayofweek h-tue" ${x?.dow?.getChecked("tue")}/></label>
<label class="dowlabel" for="w${i}-wed" title="水"><input id="w${i}-wed" class="dow" type="checkbox" value="wed" aria-labelledby="h-dayofweek h-wed" ${x?.dow?.getChecked("wed")}/></label>
<label class="dowlabel" for="w${i}-thu" title="木"><input id="w${i}-thu" class="dow" type="checkbox" value="thu" aria-labelledby="h-dayofweek h-thu" ${x?.dow?.getChecked("thu")}/></label>
<label class="dowlabel" for="w${i}-fri" title="金"><input id="w${i}-fri" class="dow" type="checkbox" value="fri" aria-labelledby="h-dayofweek h-fri" ${x?.dow?.getChecked("fri")}/></label>
<label class="dowlabel" for="w${i}-sat" title="土"><input id="w${i}-sat" class="dow" type="checkbox" value="sat" aria-labelledby="h-dayofweek h-sat" ${x?.dow?.getChecked("sat")}/></label>
<div class="cell">
<input type="time" class="start" aria-labelledby="h-start-time" value="${x?.start?.toTimeFormat()}"/>
</div>
<div class="cell">
<input type="time" class="end" aria-labelledby="h-end-time" value="${x?.end?.toTimeFormat()}"/>
</div>
<div class="cell">
<input type="text" class="title" placeholder="イベント名" aria-labelledby="h-title" value="${x?.title ?? ""}"/>
</div>
<div class="cell">
<input type="url" class="link" placeholder="https://example.com" aria-labelledby="h-link" value="${x?.link ?? ""}"/>
</div>
<div class="cell">
<input data-index="${i}" type="button" class="button" aria-labelledby="h-button" value="👤"/>
</div>
<div class="cell">
<span class="members_icon" aria-labelledby="h-member">${x?.memberIcons ?? ""}</span>
</div>
<input type="hidden" class="members" value="${x?.members}">
</div>`;
const createSpotRow = (i, x) => `<div id="row[${i}]" class="row spot" role="row">
<div class="cell clear">
<div onclick="javscript:clearRow(${i});">🗑️</div>
</div>
<div class="cell no">
${i + 1}
</div>
<div class="cell">
<input type="date" class="date" aria-labelledby="h-date" value="${x?.date?.toDateFormat()}"/>
</div>
<div class="cell">
<select class="type" aria-labelledby="h-type">
${createScheduleTypeOptions(x?.type)}
</select>
</div>
<div class="cell">
<input type="time" class="start" aria-labelledby="h-start-time" value="${x?.start?.toTimeFormat()}"/>
</div>
<div class="cell">
<input type="time" class="end" aria-labelledby="h-end-time" value="${x?.end?.toTimeFormat}"/>
</div>
<div class="cell">
<input type="text" class="title" placeholder="イベント名" aria-labelledby="h-title" value="${x?.title ?? ""}"/>
</div>
<div class="cell">
<input type="url" class="link" placeholder="https://example.com" aria-labelledby="h-link" value="${x?.link ?? ""}"/>
</div>
<div class="cell">
<input data-index="${i}" type="button" class="button" aria-labelledby="h-button" value="👤"/>
</div>
<div class="cell">
<span class="members_icon" aria-labelledby="h-member">${x?.memberIcons ?? ""}</span>
</div>
<input type="hidden" class="members" value="${x?.members}">
</div>`;
const bitPositions = (n) => {
const positions = [];
let index = 0;
while (n > 0) {
if (n & 1n) {
positions.push(index);
}
n = n >> 1n;
index++;
}
return positions;
};
const zeroPad = (x, pad = "00") => (pad + x).slice(-1 * pad.length);
const createDatetime = (date) => date.getFullYear() + "-" + zeroPad(date.getMonth() + 1) + "-" + zeroPad(date.getDate()) + " " + zeroPad(date.getHours()) + ":" + +zeroPad(date.getMinutes()) + ":" + zeroPad(date.getSeconds()) + "." + zeroPad(date.getMilliseconds(), "000");
const save = (key, records) => {
localStorage.setItem(key, JSON.stringify(records));
const updLog = document.querySelector(".update_log");
updLog.insertAdjacentHTML("beforeend", `<p>[${createDatetime(/* @__PURE__ */ new Date())}] ${records.length}件 保存しました。</p>`);
var bottom = updLog.scrollHeight - updLog.clientHeight;
updLog.scroll(0, bottom);
const isSaved = document.getElementById("is_saved");
isSaved.value = "true";
};
// @license MIT
function openModal(src) {
const modal2 = document.createElement("div");
modal2.innerHTML = `<img src="${src}">`;
modal2.classList.add("modal--photo");
modal2.style.display = "flex";
modal2.addEventListener("click", () => {
closeModal(modal2);
});
document.body.appendChild(modal2);
}
function closeModal(modal2) {
modal2.style.animation = "modalFadeOut 0.3s forwards";
modal2.addEventListener("animationend", () => {
modal2.style.display = "none";
document.body.removeChild(modal2);
});
}
const setModalEvent = (imgSelector) => {
document.appendStyle(`
.modal--photo {
display: none;
position: fixed;
z-index: 20000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
align-items: center;
justify-content: center;
animation: modalFadeIn 0.3s;
img {
max-width: 90%; /* 画像の最大幅を親要素(modal)の90%に制限し、画面内に収まるようにする */
max-height: 100vh; /* 画像の最大高さをビューポートの高さ(100vh)に制限し、画面内に収まるようにする */
object-fit: contain; /* 画像の比率を保持しつつ、指定された高さと幅に収める */
&:hover {
cursor: zoom-out; /* モーダル内の画像にホバー時にカーソルをズームアウトのアイコンに変更 */
}
}
}
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalFadeOut {
from { opacity: 1; }
}`);
Array.prototype.forEach.call(document.querySelectorAll(imgSelector), (image) => {
image.style.cssText = image.style.cssText.replace("cursor: defalut; ", "");
image.classList.add("clickable-image");
image.onclick = () => {
openModal(image.src);
};
image.onmouseover = () => {
image.style.cursor = "-woz-zoom-in";
image.style.cursor = "-webkit-zoom-in";
image.style.cursor = "zoom-in";
};
image.onmouseout = () => {
image.style.cursor = "default";
};
image.oncontextmenu = () => {
};
image.onmousedown = () => {
};
image.onselectstart = () => {
};
});
};
var _GM_info = /* @__PURE__ */ (() => typeof GM_info != "undefined" ? GM_info : void 0)();
var _GM_xmlhttpRequest = /* @__PURE__ */ (() => typeof GM_xmlhttpRequest != "undefined" ? GM_xmlhttpRequest : void 0)();
// @license MIT
const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
const DEFAULT_COLOR = "0";
const DARK_COLOR = "1";
const pageTypeMatch = (x = location.href) => x.match(/(news|media|detail|search|formation|diary\/member\/list|diary\/member|diary\/detail|artist\/00|artist|greeting|biography|video|contents|discography|aimashou|event|about_fanclub)/);
const getPageType = (x = location.href) => x.match(/contents_list/) ? "contents" : ((y) => y ? y[0] : "other")(pageTypeMatch(x));
const isMobile = () => {
const userAgent = navigator.userAgent || navigator.vendor;
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;
};
document.appendStyle = (styleText) => {
document.head.insertAdjacentHTML("beforeend", `<style rel="stylesheet">${styleText}</style>`);
};
const slimDownMenuBar = () => {
document.appendStyle(`
.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%);
}`);
};
const getColorMode = () => {
const key = "color_mode";
return ((x) => x ? x : /* @__PURE__ */ ((y) => y ? y : DEFAULT_COLOR)(sessionStorage.getItem(key)))(CookieUtils.getCookie(key));
};
const setColorMode = (mode) => {
if (mode !== DEFAULT_COLOR && mode !== DARK_COLOR) {
throw new Error("Illegal parameter error. [HinatazakaSigthtStyleUtils#setColorMode]");
}
const lang = CookieUtils.getCookie("wovn_selected_lang");
const key = "color_mode";
if (!CookieUtils.getCookie(key) && !sessionStorage.getItem(key)) {
if (confirm(
lang == "ja" ? "カラーモードの設定を保持するには Cookie に値を保存する必要があります。よろしいですか？" : "To retain your color mode settings, we need to store the value in a cookie. Is that okay?"
)) {
CookieUtils.setCookie(key, mode);
} else {
alert(lang == "ja" ? "カラーモードの設定は保持されません。" : "Color mode settings are not stored.");
sessionStorage.setItem(key, mode);
}
} else {
sessionStorage.setItem(key, mode);
}
};
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_FONT_CL = "#8babab";
const DEFAULT_TITLE_FONT_CL = "#abbaba";
const DARK_FONT_CL = "#eeeeee";
const DARK_BG_CL = "#0a2040";
const DARK_MENU_CL = "#204070";
const DARK_SVG_CL = "#eeeeee";
const DARK_IMG_BG_CL = "#eeeeee";
const HOVER_BG_UPPER_CL = "#ecf0f9";
const HOVER_BG_LOWER_CL = "#eff4fd";
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",
MENUBAR: "manuBar",
BREADCRUMB: "breadcrumb",
LIST: "list",
ARTICLE: "article",
PASTDAY: "pastday",
TODAY: "today",
MEMBER_PROP: "memberProp",
SVG_PATH: "svgPath",
BLOG: "blog",
STRONG: "strong",
DISCO: "disco",
AFTER: "after",
BIOGRAPHY: "biography",
FC_LOGO: "fc_logo",
FC_TEXT: "fc_text"
};
const SELECTOR_DIC = {
[KEY.BACKGROUND]: ".pages, .module-modal.js-member-filter .mordal-box, .l-container, .schedule__list-future",
[KEY.MENUBAR]: ".l-header, .p-header-wrap, .p-header-wrap.is-fixed",
[KEY.BREADCRUMB]: ".p-page-breadcrumb__list, .c-page-breadcrumb__item:last-child span",
[KEY.LIST]: ".l-container, .p-news__list ",
[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",
[KEY.PASTDAY]: ".schedule__list-pastday",
[KEY.TODAY]: ".schedule__list-today",
[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",
[KEY.SVG_PATH]: ".c-member__info-td__text a svg path",
[KEY.BLOG]: ".l-maincontents--blog, .p-blog-entry__group, .p-blog-entry__list, .s-blog__index, .p-blog-group, .p-blog-entry__list",
[KEY.STRONG]: ".p-article__text strong span, .p-article__text span strong",
[KEY.DISCO]: ".formation_image li i, .c-page-breadcrumb__item, .c-disco__title, .c-disco__date, .c-video-detail__title, .formation_image li i",
[KEY.AFTER]: ".l-other-contents--blog",
[KEY.BIOGRAPHY]: ".p-biography__text",
[KEY.FC_LOGO]: ".fc-logo",
[KEY.FC_TEXT]: ".fc-contents .text"
};
const CSS_DIC = {
[KEY.BACKGROUND]: ["background-color"],
[KEY.MENUBAR]: ["background-color"],
[KEY.BREADCRUMB]: ["color"],
[KEY.LIST]: ["color"],
[KEY.ARTICLE]: ["color"],
[KEY.PASTDAY]: ["background-color"],
[KEY.TODAY]: ["background"],
[KEY.MEMBER_PROP]: ["color"],
[KEY.SVG_PATH]: ["fill"],
[KEY.BLOG]: ["color", "background-color"],
[KEY.STRONG]: ["color", "background-color"],
[KEY.DISCO]: ["color"],
[KEY.AFTER]: ["color", "--bg-color"],
[KEY.BIOGRAPHY]: ["color"],
[KEY.FC_LOGO]: ["background-color"],
[KEY.FC_TEXT]: ["color"]
};
const DEFAULT_COLOR_CONFIG = {};
const DARK_COLOR_CONFIG = {
[KEY.BACKGROUND]: { "background-color": DARK_BG_CL },
[KEY.MENUBAR]: { "background-color": DARK_MENU_CL },
[KEY.BREADCRUMB]: { "color": DARK_FONT_CL },
[KEY.LIST]: { "color": DARK_FONT_CL },
[KEY.ARTICLE]: { "color": DARK_FONT_CL },
[KEY.PASTDAY]: { "background-color": DARK_PAST_BG_CL },
[KEY.TODAY]: { "background": `linear-gradient(${DARK_TODAY_UPPER_CL}, 10%, ${DARK_TODAY_LOWER_CL})` },
[KEY.MEMBER_PROP]: { "color": DARK_FONT_CL },
[KEY.SVG_PATH]: { "fill": DARK_SVG_CL },
[KEY.BLOG]: { "color": DARK_FONT_CL, "background-color": DARK_BG_CL },
[KEY.STRONG]: { "color": DARK_STRONG_FONT_CL, "background-color": DARK_STRONG_BG_CL },
[KEY.DISCO]: { "color": DARK_FONT_CL },
[KEY.AFTER]: { "color": DARK_FONT_CL, "--bg-color": DARK_BG_CL },
[KEY.BIOGRAPHY]: { "color": DARK_FONT_CL },
[KEY.FC_LOGO]: { "background-color": DARK_IMG_BG_CL },
[KEY.FC_TEXT]: { "color": DARK_FC_TEXT_CL }
};
const getSelectorStyle = (selector, cssProperty) => ((element, cssProperty2) => element != null ? getComputedStyle(element).getPropertyValue(cssProperty2) : "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(Object.values(KEY), (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 setLinkFontColor = (selector, originColor = DEFAULT_BLUE) => {
Array.prototype.forEach.call(document.querySelectorAll(selector), (x) => {
x.style.color = originColor;
x.addEventListener("mouseover", () => {
x.style.color = getColorMode() === DARK_COLOR ? "#e0ffff" : "#5d5d5d";
});
x.addEventListener("mouseout", () => {
x.style.color = originColor;
});
});
};
const setHoveredFontColor = (itemSelector, titleSelector, datetimeSelector) => {
Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
x.addEventListener("mouseover", () => {
if (getColorMode() === 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() === 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}, 10%, ${HOVER_BG_LOWER_CL})`;
x.style.outline = `0.5px 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;
}
});
});
};
const setColor = (pageType, colorMode) => {
const configIndex = parseInt(colorMode);
Array.prototype.forEach.call(Object.values(KEY), (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", () => {
x.children[0].style.color = getColorMode() === DARK_COLOR ? "lightcyan" : "#5d5d5d";
});
x.addEventListener("mouseout", () => {
x.children[0].style.color = getColorMode() === DARK_COLOR ? "lightcyan" : "#a9a9a9";
});
});
switch (pageType) {
case "news":
case "media":
setLinkFontColor(".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":
shortenYearWithDay(".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":
setLinkFontColor(".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");
break;
// 動画
case "video":
case "contents":
Array.prototype.forEach.call(document.querySelectorAll(".p-video__item.p-video__item--medium"), (x) => {
x.addEventListener("mouseover", () => {
x.children[1].children[0].style.color = getColorMode() === DARK_COLOR ? "lightcyan" : "#5d5d5d";
});
x.addEventListener("mouseout", () => {
x.children[1].children[0].style.color = "#a9a9a9";
});
});
break;
case "event":
Array.prototype.forEach.call(document.getElementsByClassName("p-shakehands__item"), (x) => {
x.addEventListener("mouseover", () => {
if (getColorMode() === 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.getElementsByClassName("p-other__item"), (x) => {
x.addEventListener("mouseover", () => {
x.children[0].style.color = getColorMode() === DARK_COLOR ? "lightcyan" : "#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", () => {
x.style.color = getColorMode() === DARK_COLOR ? "lightcyan" : "#5d5d5d";
});
x.addEventListener("mouseout", () => {
x.style.color = DEFAULT_FONT_CL;
});
});
break;
}
};
const leftPosition = (colorMode) => colorMode === DEFAULT_COLOR ? "-3px" : "36px";
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;
};
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 colorMode2 = toggleColorMode();
switchButton.style.left = leftPosition(colorMode2);
setColor(getPageType(), colorMode2);
});
return true;
} else {
return false;
}
};
const getCorrectedCategory = () => {
const c = document.getElementsByName("cd");
let value = "";
if (c == null || c.length == 0) {
value = "all";
} else if (c[0] instanceof HTMLInputElement) {
const tempValue = c[0].value;
switch (tempValue) {
case "birthday":
value = "birth";
break;
case "fanclub":
value = "fanclubonly";
break;
default:
value = tempValue;
}
}
return value;
};
const getSelectors = (pageType) => {
switch (pageType) {
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);
}
};
const doProcessList = () => {
const isDetail = location.href.match(new RegExp("/detail/")) != null;
if (isDetail) {
return;
}
const pageType = location.href.match(new RegExp("/(media|news)/"))[1];
const selectors = getSelectors(pageType);
const pageYearMonth = document.getElementsByName("dy")[0];
const isSetYearMonth = pageYearMonth != null;
const yearMonth = isSetYearMonth ? pageYearMonth.value.match(/(20[1-9][0-9])([0-1][0-9])/) : null;
const year = yearMonth ? parseInt(yearMonth[1]) : -1;
const month = yearMonth ? parseInt(yearMonth[2]) : -1;
if (isSetYearMonth) {
const daysOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
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;
const leftArrowHref = document.querySelector(selectors.cArrowLeft).children[0].href;
const rightArrowHref = document.querySelector(selectors.cArrowRight).children[0].href;
let calendarHtml = `
<table class="cale_table" style="width: 220px; margin: -130px 0 20px -50px; position: relative; right: 24px;">
<tr><td></td><td class="cale_prev"><a id="cale_prev" href="${leftArrowHref}">＜</a></td>
<td class="cale_month" colspan="3">${year}年 ${month}月</td><td class="cale_next"><a href="${rightArrowHref}">＞</a></td><td></td></tr>
<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);
}
const category = getCorrectedCategory();
const categoryElem = document.querySelector(".c-button-category.category_" + category);
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;
}
const PAGER_MARGIN_TOP = 20;
setCSS4NewsAndSchedule();
const now = /* @__PURE__ */ new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1;
const pDate = document.querySelector(selectors.pDate);
const pPager = document.querySelector(".p-pager");
if (isSetYearMonth) {
pPager.style.marginTop = `${PAGER_MARGIN_TOP}px`;
} else {
const cPageYear = document.querySelector(selectors.cPageYear);
cPageYear.innerText = String(currentYear) + "年";
const cPageMonth = document.querySelector(selectors.cPageMonth);
cPageMonth.innerText = String(currentMonth) + "月";
document.querySelector(selectors.pArrow).remove();
pPager.innerText = "";
pPager.style.marginTop = "0px";
}
pDate.style.marginBottom = "5px";
const lMainContentsUl = document.querySelector(selectors.lMainContentsUl);
const lMainContentsUlTop = lMainContentsUl.getBoundingClientRect().top;
const pDateHeight = pDate.offsetHeight;
const pPagerHeight = PAGER_MARGIN_TOP + pPager.offsetHeight;
const lMainContentsUlHeight = document.documentElement.clientHeight - pDateHeight - pPagerHeight;
lMainContentsUl.setAttribute("style", `height:${lMainContentsUlHeight}px; overflow-y: scroll; overflow-x: hidden; border: solid 1px #32a1ce;`);
const scrollTop = lMainContentsUlTop - pDateHeight;
scrollTo(0, 0);
scrollTo({
top: scrollTop,
behavior: "smooth"
});
const nowYearMonth = String(currentYear) + String(currentMonth).padStart(2, "0");
const dispYear = document.querySelector(selectors.cPageYear);
const dispMonth = document.querySelector(selectors.cPageMonth);
const dispYearMonth = ((y, m) => {
return y == null || y.innerText == null || m == null || m.innerText == null ? nowYearMonth : y.innerText.replace("年", "") + m.innerText.replace("月", "");
})(dispYear, dispMonth);
if (lMainContentsUl && 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(category, lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor);
}
};
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");
const gens = { "1": "一期生", "2": "二期生", "3": "三期生", "4": "四期生", "5": "五期生" };
subtitle.append(document.createTextNode(gens[gen]));
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";
const appendNmKn = (anchor, nameInfo) => {
if (anchor.tagName != "A") {
console.error("this anchor is wrong. tagName: '", anchor.tagName, "'");
return;
}
const memberName = nameInfo.name;
const memberKana = nameInfo.kana;
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 DATE_OPTIONS = {
year: "numeric",
month: "short",
day: "numeric"
};
const appendBd = (anchor, birthInfo) => {
if (anchor.tagName != "A") {
console.error("this anchor is wrong. tagName: '", anchor.tagName, "'");
return;
}
const memberName = birthInfo.name;
const nameElement = document.createElement("div");
nameElement.classList.add("c-member__name");
nameElement.append(document.createTextNode(memberName));
anchor.appendChild(nameElement);
const birthElement = document.createElement("div");
birthElement.classList.add("c-member__birth");
birthElement.append(document.createTextNode(birthInfo.birth.toLocaleDateString("ja-JP", DATE_OPTIONS)));
anchor.appendChild(birthElement);
};
const createMemberElement = (number, imgUrl, linkUrl, appendElemFunc, memberData) => {
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, memberData);
li.appendChild(anchor);
return li;
};
const constructGroup = (list, groups, sortTop, headers) => {
let lastAdded;
list.forEach((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";
groupMembers.forEach((m) => {
const current = sortTop.querySelector(`[data-member="${m.no}"]`);
if (current) {
current.style.display = "block";
unorderedList.appendChild(current);
} else {
const og = createMemberElement(m.no, m.img, m.lnk, appendBd, { "name": 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;
}
});
};
HTMLElement.prototype.setPenlightColor = function(color_01, color_02, thickness, intensity, base = 2, white = 2) {
this.style.borderLeftColor = "#" + color_01;
this.style.borderTopColor = "#" + color_01;
this.style.borderRightColor = "#" + color_02;
this.style.borderBottomColor = "#" + color_02;
this.style.boxShadow = `
-${thickness}px 0 ${thickness}px -4px #${color_01},
0 -${thickness}px ${thickness}px -4px #${color_01},
${thickness}px 0 ${thickness}px -4px #${color_02},
0 ${thickness}px ${thickness}px -4px #${color_02},
inset 0 ${white}px ${white * 2}px white,
inset 2px 0 ${white * 2}px white,
inset 0 -${white}px ${white * 2}px white,
inset -2px 0 ${white * 2}px white,
inset 0 ${base * 2}px ${base * 2}px #${color_01},
inset ${base * 2}px 0 ${base * 2}px #${color_01},
inset 0 -${base * 2}px ${base * 2}px #${color_02},
inset -${base * 2}px 0 ${base * 2}px #${color_02},
inset 0 ${thickness}px ${base * 2}px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
inset ${thickness}px ${base * 2}px 4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
inset 0 -${thickness}px ${base * 2}px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
inset -${thickness}px 0 ${base * 2}px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
-${white * 2}px 0 ${white * 2}px -${white * 2}px white,
0 -${white * 2}px ${white * 2}px -${white * 2}px white,
${white * 2}px 0 ${white * 2}px -${white * 2}px white,
0 ${white * 2}px ${white * 2}px -${white * 2}px white,
-${base * 2}px 0px ${base * 2}px -${base * 2}px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
0 -${base * 2}px ${base * 2}px -${base * 2}px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
${base * 2}px 0px ${base * 2}px -${base * 2}px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
0 ${base * 2}px ${base * 2}px -${base * 2}px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity}))
`;
};
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 currentNumberSet = /* @__PURE__ */ new Set();
Array.prototype.forEach.call(document.querySelectorAll(".p-member__item"), (m) => {
if (window.getComputedStyle(m).display !== "none") {
currentNumberSet.add(m.dataset.member);
}
});
Array.prototype.forEach.call(Hinatazaka46.MEMBER_PROPERTIES, (m) => {
if (m.bd) {
m.birth = excelSerialToDate(m.bd);
}
});
const alltimeNumberSet = /* @__PURE__ */ new Set();
const alltimeMembers = Array.prototype.filter.call(Hinatazaka46.MEMBER_PROPERTIES, (m) => {
const intNo = parseInt(m.no);
const isPerson = intNo > 0 && intNo < 1e3;
if (isPerson) {
alltimeNumberSet.add(m.no);
}
return isPerson;
});
const exNumberSet = alltimeNumberSet.difference(currentNumberSet);
const exMembers = Array.prototype.filter.call(Hinatazaka46.MEMBER_PROPERTIES, (m) => {
return exNumberSet.has(m.no);
});
const generations = {};
Array.prototype.forEach.call(exMembers, (m) => {
if (!generations[m.gen]) {
generations[m.gen] = createGeneration(m.gen);
}
const genTree = generations[m.gen];
const list = genTree.querySelector(".p-member__list");
if (list) {
const memberElement = createMemberElement(m.no, m.img ? m.img : "", m.lnk ? m.lnk : "", appendNmKn, { "name": m.nm, "kana": m.kn });
list.appendChild(memberElement);
}
});
const defaultMembers = document.querySelector(".sorted.sort-default.current");
if (defaultMembers) {
Array.prototype.forEach.call(Object.values(generations), (g) => {
defaultMembers.appendChild(g);
});
}
const newSortedByName = document.createElement("ul");
newSortedByName.className = "p-member__list";
const sortedByName = document.querySelector(".sort-syllabary .p-member__list");
if (sortedByName) {
const nameOrderMembers = Array.prototype.sort.call(alltimeMembers.slice(), (a, b) => a.kn.localeCompare(b.kn, "ja"));
Array.prototype.forEach.call(nameOrderMembers, (m) => {
const current = sortedByName.querySelector(`[data-member="${m.no}"]`);
if (current) {
current.style.display = "block";
newSortedByName.appendChild(current);
} else {
const og = createMemberElement(m.no, m.img, m.lnk, appendNmKn, { "name": m.nm, "kana": 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 birthOrderMembers = Array.prototype.sort.call(alltimeMembers.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(birthOrderMembers, (m) => {
const current = sortedByBirth.querySelector(`[data-member="${m.no}"]`);
if (current) {
current.style.display = "block";
newSortedByBirth.appendChild(current);
} else {
const og = createMemberElement(m.no, m.img, m.lnk, appendBd, { "name": m.nm, "birth": m.birth });
newSortedByBirth.appendChild(og);
}
});
sortedByBirth.parentNode.replaceChild(newSortedByBirth, sortedByBirth);
const zodiacGroups = Object.groupBy(alltimeMembers, ({ birth }) => getZodiacSign(birth));
const zodiacTop = document.querySelector(".sort-constellation");
const zodiacHeaders = document.querySelectorAll(".sort-constellation .p-page-head-sub");
constructGroup(Object.values(ZODIAC), zodiacGroups, zodiacTop, zodiacHeaders);
const BLOOD_TYPES = ["A型", "B型", "O型", "AB型", "不明"];
const bloodGroups = Object.groupBy(alltimeMembers, ({ 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");
constructGroup(BLOOD_TYPES, bloodGroups, bloodTop, bloodHeaders);
Array.prototype.forEach.call(document.querySelectorAll(".p-member__item"), (m) => {
const color_set = Hinatazaka46.MEMBER_PROPERTIES[parseInt(m.dataset.member)].cl;
const code_01 = Hinatazaka46.PENLIGHT[color_set[0]].cd;
const code_02 = Hinatazaka46.PENLIGHT[color_set[1]].cd;
const img = m.children[0].children[0].children[0];
img.setPenlightColor(code_01, code_02, 4, 64);
m.addEventListener("mouseover", () => {
img.setPenlightColor(code_01, code_02, 12, 128);
});
m.addEventListener("mouseout", () => {
img.setPenlightColor(code_01, code_02, 4, 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-button--center { padding-top: 0; }
.c-member-greeting-popup-pager-btn-in { cursor: pointer; }
.c-member-greeting-popup-card-in.active img {
transition: transform 0.3s ease, z-index 0.3s ease;
transform-origin: 100% 20%;
&:hover {
transform: scale(1.5) translateZ(10px);
z-index: 10; /* 前面に出す */
}
}
.c-member-greeting-popup-pager-btn-icon {
transition: transform 0.3s ease, z-index 0.3s ease;
transform-origin: center center;
}
.c-member-greeting-popup-pager-btn-in:hover .c-member-greeting-popup-pager-btn-icon {
box-shadow: 0px 0px 0px 3px ${DEFAULT_BLUE};
transform: scale(1.08) translateZ(10px);
z-index: 10; /* 前面に出す */
}
.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;
&:before, &:after {
border: solid 1px;
background-color: var(--color);
}
}
.c-blog__image {
border: 2px solid ${DEFAULT_BLUE};
}
.c-news__date { width: 11rem; }`);
const close_button = document.querySelector(".c-btn-member-greeting-popup-close");
close_button.style.setProperty("--color", DEFAULT_FONT_CL);
shortenYearWithDay(".c-news__date");
const img = document.querySelector(".c-member__thumb > img:nth-child(1)");
if (img) {
const ct = location.href.match(/artist\/([0-9]{1,2})/);
if (ct) {
const color_set = Hinatazaka46.MEMBER_PROPERTIES[parseInt(ct[1])].cl;
const color_01 = Hinatazaka46.PENLIGHT[color_set[0]];
const color_02 = Hinatazaka46.PENLIGHT[color_set[1]];
img.setPenlightColor(color_01.cd, color_02.cd, 8, 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() === 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", () => {
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 = /* @__PURE__ */ new Map();
newsList.forEach((x) => {
if (!dayMap.has(x[0]) || x[1] < dayMap.get(x[0])) {
dayMap.set(x[0], x[1]);
}
});
dayMap.forEach((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;
}
return false;
});
});
};
const doProcessMedia = (category, lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor) => {
document.appendStyle(`.p-schedule__list-group { padding-top: 10px; }`);
if (document.getElementsByName("dy").length) {
fillEmpty(lMainContentsUl, dispYearMonth);
}
lMainContentsUl.scroll(0, 0);
let isScrolled = false;
const today = now.getDate();
Array.prototype.forEach.call(document.getElementsByClassName("p-schedule__list-group"), (dayElem) => {
const dateElem = dayElem.querySelector(".c-schedule__date--list");
const day = ((x) => {
return parseInt(x.substr(0, x.indexOf(`
`)));
})(dateElem.innerText);
insertExtSchedule(category, dispYearMonth, lMainContentsUl, day, dayElem);
const scheduleElem = dayElem.querySelector(".p-schedule__list");
const hasChild = scheduleElem.childNodes[0].textContent?.trim();
if (!hasChild) return;
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;
}
return false;
});
if (dispYearMonth === nowYearMonth) {
if (day < today) {
dayElem.classList.add("schedule__list-pastday");
} else if (day === today) {
dateElem.classList.add("schedule__date-today");
dayElem.classList.add("schedule__list-today");
}
if (day >= today) {
dayElem.classList.add("schedule__list-future");
if (!isScrolled) {
lMainContentsUl.scroll({
top: dateElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA,
behavior: "smooth"
});
isScrolled = true;
}
}
}
});
if (category != "all") {
Array.prototype.forEach.call(document.querySelectorAll(".p-schedule__list-group > .p-schedule__list"), (x) => {
if (x.childElementCount == 0) {
x.parentElement.remove();
}
});
if (document.querySelector(".p-schedule__list-group > .p-schedule__list")) {
const p = document.querySelector("div.l-maincontents--schedule > ul > li > a > p");
if (p && p.innerText == "この月の予定はありません。") {
p.parentElement?.parentElement?.remove();
}
}
}
setScheduler();
};
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.getElementsByClassName("rel_year"), (x) => {
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 = () => {
document.appendStyle(`
.fixed {
width: 12rem;
position: fixed;
top: 60px;
left: 40px;
z-index: 1;
font-size:larger;
}
.header { width: 100px; }
.release { line-height: 20px; }
.l-container { margin-top: -280px; }
.c-disco__year { padding-top: 20px; font-size: 4rem; width: 12rem;}
.c-disco__category {font-size: 14px;}
.p-page-head-sub--first {padding-top: 10px;}
`);
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 ul li {
transition: transform 0.3s ease, z-index 0.3s ease;
transform-origin: center center;
&:hover {
transform: scale(1.4, 1.4) translateZ(10px);
z-index: 10;
}
}
.formation_image li {
&:hover i { font-size: 16px; }
i { font-size: 14px; }
}
.fixed {
width: 12rem;
position: fixed;
top: 60px;
left: 40px;
z-index: 1;
font-size:larger;
}
.header { width: 100px; }
.release { line-height: 20px; }
.p-page-head-sub, .l-contents { width: 1300px; }
.p-page-head-sub { margin: 0px auto 0px auto; }
.p-page-head-sub--first { padding-top: 20px; }
.formation_list {
.block_head { width:23% !important; }
.block_head+ { width:77% !important; }
h4 {
color: ${DEFAULT_BLUE};
background-color: #0c1860;
outline: 2px solid darkslateblue;
font-size: 1.4em;
font-weight: bold;
padding: 0.3em 0.1em;
}
}
@media screen and (min-width: 1024px) {
.formation_image li {
span {
width: 80px;
height: 80px;
}
&:hover span { box-shadow: 0px 0px 0px 3px ${DEFAULT_BLUE}; }
i {
font-size: 1.12em;
width: 130px;
padding-left: 20px;
shite-space: pre-line;
}
}
}`;
document.appendStyle(styleText);
setReleaseYear4Formation();
};
const getBackgroundImageUrl = (el) => {
const bg = window.getComputedStyle(el).backgroundImage;
const urlMatch = bg.match(/url\(["']?(.*?)["']?\)/);
return urlMatch ? urlMatch[1] : null;
};
const parseColorToRGBArray = (colorStr) => {
const defaultColor = [140, 200, 209];
const ctx = document.createElement("canvas").getContext("2d");
ctx.fillStyle = "#000";
try {
ctx.fillStyle = colorStr;
} catch (e) {
return defaultColor;
}
if (ctx) {
const computed = ctx.fillStyle;
const match = computed.match(/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/i);
if (!match) return defaultColor;
return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
} else {
return defaultColor;
}
};
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 setMemberIconOutline = (r, g, b) => {
const icon = document.querySelector(".c-blog-member__icon");
if (icon) {
icon.style.outline = `8px solid rgb(${r}, ${g}, ${b})`;
}
};
const getFontSize = (x) => ((z) => parseInt(z))(((y) => y.replace(/([0-9][0-9\.]+).*/, "$1"))(x != null ? window.getComputedStyle(x).getPropertyValue("font-size") : "0"));
const setFontColor = (selector, color) => {
Array.prototype.forEach.call(document.querySelectorAll(selector), (e) => {
const fontSize = getFontSize(e);
if (e.classList.contains("p-blog-face__icon")) {
e.style.cssText = `--color: ${color}`;
} else if (fontSize > 60) {
e.style.textStroke = `0.5px ${color}`;
e.style.webkitTextStroke = `0.5px ${color}`;
} else {
e.style.background = `linear-gradient(90deg, ${color} 0%, white 20%, ${color} 40%)`;
e.style.cssText += `background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent;`;
}
});
};
const setFontColorOnImage4Greasemonkey = (imageUrl, selector) => {
const img = new Image();
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, count2 = 0;
for (let i = 0; i < data.length; i += 4) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
count2++;
}
r = Math.round(r / count2);
g = Math.round(g / count2);
b = Math.round(b / count2);
setMemberIconOutline(r, g, b);
const baseColor = getHeaderFontColor(r, g, b);
setFontColor(selector, baseColor);
};
img.onerror = () => {
setFontColor(selector, DEFAULT_BLUE);
console.error("画像の読み込みに失敗しました");
};
};
const setFontColorOnImage4Tampermonkey = (imageUrl, selector) => {
_GM_xmlhttpRequest({
method: "GET",
url: imageUrl,
responseType: "blob",
onload: function(res) {
const blob = res.response;
const url = URL.createObjectURL(blob);
const img = new Image();
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, count2 = 0;
for (let i = 0; i < data.length; i += 4) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
count2++;
}
r = Math.round(r / count2);
g = Math.round(g / count2);
b = Math.round(b / count2);
setMemberIconOutline(r, g, b);
const baseColor = getHeaderFontColor(r, g, b);
setFontColor(selector, baseColor);
URL.revokeObjectURL(url);
};
img.src = url;
},
onerror: function() {
setFontColor(selector, DEFAULT_BLUE);
console.error("画像の読み込みに失敗しました");
}
});
};
const updateColorOnImage = (imageUrl, selector) => {
if (typeof _GM_info !== "undefined") {
if (_GM_info.scriptHandler === "Tampermonkey") {
console.log("Tampermonkey で実行されています");
setFontColorOnImage4Tampermonkey(imageUrl, selector);
} else if (_GM_info.scriptHandler === "Greasemonkey") {
console.log("Greasemonkey で実行されています");
setFontColorOnImage4Greasemonkey(imageUrl, selector);
} else {
console.log("その他のユーザースクリプトマネージャ:", _GM_info.scriptHandler);
setFontColorOnImage4Tampermonkey(imageUrl, selector);
}
}
};
const updateColorOnTopImage = (imgSelector, textSelector) => {
const blogContainer = document.querySelector(imgSelector);
const imageUrl = getBackgroundImageUrl(blogContainer);
if (imageUrl) {
updateColorOnImage(imageUrl, textSelector);
}
};
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 = () => {
document.appendStyle(`
.p-blog-member__info {
.p-button:nth-child(4) { display: block; }
.p-button:nth-child(n + 5) { display: none; }
}
.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: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis "… 🔽";
}
.c-blog-article__text {
overflow-x: hidden;
overflow-y: scroll;
border: none;
}
.p-blog-article__info div { vertical-align: top; }
.p-pager {
margin-top: 0px;
padding-left: 5px;
display: inline-block;
width: 580px;
}
.c-pager__item {
width: 280px;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis "…";
}
}
.c-pager__item time {
margin-top: 0;
}
.p-button--center {
padding-top: 0;
margin-top: -20px;
}`);
const articleTitleDiv = document.querySelector(".c-blog-article__title");
if (articleTitleDiv) {
const height = articleTitleDiv.scrollHeight + "px";
articleTitleDiv.style.setProperty("--height", height);
articleTitleDiv.style.marginBottom = "0px";
articleTitleDiv.classList.add("hidden");
}
const articleInfo = document.querySelector(".p-blog-article__info");
const pager = document.querySelector(".p-pager");
if (articleInfo && pager) {
articleInfo.appendChild(pager);
}
setTimeout(() => {
const articleHeight = document.documentElement.clientHeight * 0.8;
((x) => {
if (x) {
x.style.height = articleHeight + "px";
}
})(document.querySelector(".c-blog-article__text"));
if (articleTitleDiv && 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 getIcon = (memberName) => {
if (!memberName) return "❔️";
switch (memberName) {
case "日向坂46":
return Hinatazaka46.MEMBER_PROPERTIES[Hinatazaka46.MEMBER_PROPERTIES.length - 2].ico;
case "ポカ":
return Hinatazaka46.MEMBER_PROPERTIES[0].ico;
case "五期生リレー":
return Hinatazaka46.MEMBER_PROPERTIES[Hinatazaka46.MEMBER_PROPERTIES.length - 1].ico;
default:
return Hinatazaka46.MEMBER_PROPERTIES[parseInt(Hinatazaka46.MEMBERS[memberName])].ico;
}
};
const rewriteMemberSelectOption = () => {
Array.prototype.forEach.call(document.querySelectorAll(".js-select.sort option"), (o, i) => {
if (i > 0) {
const memberName = o.innerText.trim().match(/(([^\x01-\x7E]|\x20)*)/)[1];
const icon = getIcon(memberName);
o.innerText = o.innerText.replace(/(([^\x01-\x7E]|\x20)*)\(([1-2]?[0-9]\.[1-3]?[0-9] [1-2]?[0-9]:[1-2]?[0-9]).*\).*/g, `${icon} $1 ($3)`);
}
});
};
const blogList = () => {
const blogGroupHeight = document.documentElement.clientHeight;
document.appendStyle(`
.c-blog-member__icon--all { height: 60px; }
.p-button { padding-top: 0; }
.calender_pats { margin-bottom: 20px; }
.s-blog__index {
position: relative;
z-index: 50;
margin: 0 0 0 -50px;
height: 250px;
width: 280px;
overflow: scroll;
}
.d-article {
line-height: 20px;
margin-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis "…";
}
.d-article {
a { padding-left: 0.5rem; }
.s-datetime { padding-left: 1rem; }
}
.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; }
.p-pager { margin: 0 0 2px 0; }
`);
const titleList = document.createElement("div");
titleList.setAttribute("class", "s-blog__index");
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>`;
Array.prototype.forEach.call(document.getElementsByClassName("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 = getIcon(memberName);
titleList.insertAdjacentHTML("beforeend", createAnchor(i, datetime, icon, articleTitle));
});
shortenYearWithDay(".s-datetime");
const calendar = document.querySelector(".calender_pats");
if (calendar) {
calendar.before(titleList);
}
rewriteMemberSelectOption();
Array.prototype.forEach.call(document.getElementsByClassName("p-blog-entry__group"), (g) => {
const blogEntrySubtitle = g.querySelector(".c-blog-entry_area__subtitle");
if (blogEntrySubtitle && blogEntrySubtitle.innerText == "日向坂46の") {
const blogEntryList = g.querySelector(".p-blog-entry__list");
const memberSelectBtn = document.querySelector(".p-blog-member-filter");
blogEntryList.before(memberSelectBtn);
}
});
const pager = document.querySelector(".p-pager.p-pager--count");
if (pager) {
const blogList2 = document.querySelector(".p-blog-group");
if (blogList2) {
blogList2.before(pager);
}
}
setTimeout(() => {
((x) => {
if (x) {
x.style.hight = "px";
}
})(document.querySelector(".p-blog-group"));
scrollOnLoad();
}, 100);
};
const oembed = (a) => {
if (a.tagName != "A") {
console.error("this anchor is wrong. tagName: '", a.tagName, "'");
return;
}
const href = a.getAttribute("href");
if (href && href.match("https://youtu.be|https://youtube.com|https://www.youtube.com")) {
const xhr = new XMLHttpRequest();
const url = `https://www.youtube.com/oembed?url=${href}&maxwidth=720&maxheight=405`;
xhr.open("GET", url);
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
const res = JSON.parse(xhr.responseText);
const div = document.createElement("div");
div.classList.add("div__youtube");
div.innerHTML = res.html;
if (a.nextSibling == null) {
a.parentNode.appendChild(div);
} else if (a.nextSibling.nodeType !== Node.TEXT_NODE) {
a.parentNode.insertBefore(div, a.nextSibling);
} else {
a.parentNode.insertBefore(div, a.nextSibling.nextSibling);
}
}
};
}
};
const doProcessBlog = (blogPageType) => {
const body = document.querySelector("body");
if (body && 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;
}
updateColorOnTopImage(".p-blog-head-container", ".c-blog-page__title, .c-blog-page__subtitle, .c-blog-main__name, .c-blog__profilelink, .p-blog-face__title, .p-blog-face__icon");
Array.prototype.forEach.call(document.querySelectorAll(".c-blog-article__text :not(div) > img"), (i) => {
i.outerHTML = "<div>" + i.outerHTML + "</div>";
});
Array.prototype.forEach.call(document.querySelectorAll(".c-blog-article__text a"), (a) => {
oembed(a);
});
const faceSelector = ".p-blog-face__list";
Array.prototype.forEach.call(document.querySelectorAll(faceSelector), (x) => {
x.addEventListener("mouseover", () => {
x.children[1].style.color = getColorMode() === DARK_COLOR ? `${DARK_FONT_CL}` : `${DEFAULT_FONT_CL}`;
});
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;
}
.c-blog__profilelink { font-size: 1.5rem; }
.c-select-box.js-selected-value { border: solid 1px ${DEFAULT_BLUE}; }
.p-blog-face__list:hover {
> * { transform: scale(1.2, 1.2) translateZ(10px); }
> .c-blog-face__item { box-shadow: 0 0 0 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; }
.js-select.sort { cursor: pointer; }
`;
if (blogPageType == "blog_top") {
document.appendStyle(styleText_common + `
.l-contents { padding-bottom: 20px; }
.c-blog-top__name {
font-weight: bold;
font-size: 2rem;
}
.c-blog-page__subtitle { font-size: 3rem; }
.c-blog-top__title, .c-blog-top__date { font-size: 1.2rem; }
.c-blog-main__name { font-size: 3rem; }
.c-blog-main__image, .c-blog__image { border: 2px solid ${DEFAULT_BLUE}; }`);
rewriteMemberSelectOption();
return;
}
const memberName = ((x) => x ? x.innerText : "")(document.querySelector(".c-blog-member__name"));
const memberNo = ((x) => {
if (x == "3000") {
return -1;
} else if (Number.isNaN(x) || x == "00") {
return -2;
} else {
return parseInt(x);
}
})(Hinatazaka46.MEMBERS[memberName]);
const color_set = Hinatazaka46.MEMBER_PROPERTIES.slice(memberNo)[0].cl;
const code_01 = Hinatazaka46.PENLIGHT[color_set[0]].cd;
const code_02 = Hinatazaka46.PENLIGHT[color_set[1]].cd;
setBrogMemberIcon(memberName, code_01, code_01);
const styleText_member_blog = getMemberBlogCSS(code_01, code_02);
document.appendStyle(styleText_common + styleText_member_blog);
shortenYearWithDay(".c-blog-article__date, .c-blog-article__date time, .c-blog-entry__name, .c-pager__item__text time");
setModalEvent(".c-blog-article__text img");
const blog = document.querySelector(".p-blog-group");
blog.addEventListener("dblclick", () => {
blog.classList.toggle("p-blog-group__zoom");
});
switch (blogPageType) {
case "blog_detail":
blogDetail();
break;
case "blog_list":
blogList();
break;
default:
throw new Error(PAGE_TYPE_ERROR_MSG);
}
const memberBlogBtn = document.querySelector(".c-button-grad.c-button-grad--big");
memberBlogBtn.classList.remove("c-button-grad--big");
memberBlogBtn.classList.add("c-button-grad--right");
memberBlogBtn.style.padding = "7px 16px;";
const memberBlogEntryList = document.querySelector(".p-blog-entry__list");
memberBlogEntryList.after(memberBlogBtn);
const accordion = document.querySelector(".p-blog-face");
initializeAccordion(accordion, { gridTemplateRows: "repeat(5, 200px)", gridTemplateColumns: "repeat(7, 160px)" });
const memberBlogAccordion = document.querySelector(".p-blog-face");
const title = document.querySelector(".p-blog-head");
title.after(memberBlogAccordion);
const span = document.createElement("span");
span.classList.add("p-blog-face__icon");
span.setAttribute("aria-hidden", "true");
const faceTitle = document.querySelector(".p-blog-face__title");
faceTitle.appendChild(span);
};
const doProcessEvent = () => {
setHoveredFontAndBgColor(".p-section--shakehands", ".c-shakehands-calender.pc, .c-shakehands-calender.pc a");
};
const doProcessFc = () => {
document.appendStyle(".fc-logo { padding: 15px; }");
};
const setCSS4NewsAndSchedule = () => {
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";
document.appendStyle(`
.l-contents { margin-top: -20px; }
.c-button-filter { cursor: pointer; }
.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; }
.p-news__item { padding-left: 4px; }
.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;
}
.check-box { padding: 0 220px !important;}
.check-box > div { width: 240px; padding: 0 4px 0 4px !important; }
.check-box p { font-size: 1.3rem !important;}
.btn-decision > a { color: ${DARK_BG_CL} !important;}`);
};
const getMemberBlogCSS = (code_01, code_02) => {
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.marginBottom.replace("px", ""));
const blogEntryItemHeightWithMargin = blogEntryItemHeight + blogEntryItemMarginBottom;
const CONTENTS_WIDTH = Math.floor(screen.width * 0.1 * 0.9) * 10;
const MAIN_CONTENTS_WIDTH = Math.floor(CONTENTS_WIDTH * 0.6);
const OTHER_BLOG_LIST_WIDTH = Math.floor(CONTENTS_WIDTH * 0.22);
const MARGIN_TOP = -180;
const memberBlogCSS = `
.l-contents { width: ${CONTENTS_WIDTH}px; }
.l-other-contents--blog {
width: ${OTHER_BLOG_LIST_WIDTH};
margin-top: ${MARGIN_TOP}px;
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-container { display: flex; }
.p-blog-head {
width: 600px;
padding-top: 0;
padding-left: 20px;
margin: 0 0 0 60px;
}
.c-blog-page__subtitle { width: 230px; }
.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; }
.p-button { padding-top: 0; }
.cale_table { margin-top: 0px; }
.p-blog-article__head {
background-color: #f6ffff;
border: 1px solid #a0d8ef;
border-radius: 10px;
outline: 4px solid ${DEFAULT_BLUE};
}
.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; }
.c-blog-article__text {
text-indent: 1rem;
padding-left: 1rem;
}
.l-maincontents--blog {
width: ${MAIN_CONTENTS_WIDTH}px;
margin-top: ${MARGIN_TOP}px;
padding: 20px 20px 60px 20px;
}
.l-contents--blog-list { padding-bottom: 0; }
.c-blog-entry_area__title { margin-bottom: 2px; }
.p-blog-group, .p-blog-entry__list { border: solid 1px #32a1ce; }
.p-blog-article {
padding-bottom: 0;
margin-bottom: 0;
}
.p-blog-article__info { margin-bottom: 5px; }
.c-pager__item__text time { font-size: 1.4rem; }
.p-button--center { padding: 0; }
.p-blog-face {
margin: 0 0 0 auto;
padding-bottom: 0;
width: 700px;
z-index: 100;
}
.p-blog-face__title {
font-size: 2.2rem;
width: 300px;
margin: 20px 0 0 auto;
line-height: 24px;
cursor: pointer;
&::-webkit-details-marker { display: none; }
}
.p-blog-face__icon {
position: relative;
display: inline-block;
inline-size: 1em;
aspect-ratio: 1;
&::before,
&::after {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 1px;
margin: auto;
content: "";
background-color: currentcolor;
--color: #ffffff;
color: var(--color);
width: 1rem;
height: 0.2rem;
}
&::after {
transition: opacity 0.3s;
rotate: 90deg;
}
&:where(.p-blog-face.open *)::after { opacity: 0; }
}
.p-blog-face__list::hover .c-blog-face__name {
--color: #ffffff;
color: var(--color);
}
.p-blog-face__group {
padding-top: 20px;
margin-right: 800px;
display: grid;
transition: grid-template-rows 0.5s;
height: 0;
width: 0;
}
.p-blog-face__list {
padding: 16px;
margin: 0 24px 10px 24px;
}
.p-blog-face .p-blog-face__list {
width: 0;
height: 0;
overflow: hidden;
}
.p-blog-face.open .p-blog-face__list {
padding: 20px;
width: 160px;
height: 200px;
}
.p-blog-entry__group {
padding-bottom: 0;
width: ${OTHER_BLOG_LIST_WIDTH}px;
}
.p-blog-entry__list {
height: ${blogEntryItemHeightWithMargin * 3}px;
width: ${OTHER_BLOG_LIST_WIDTH}px;
overflow-x: hidden;
overflow-y: scroll;
padding: 3px;
margin: 10px 0;
}
.c-blog-entry__name { font-size: 1.3rem; }
.c-blog-article__text {
padding-top: 1rem;
img {
border: 6px solid #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
}
.c-blog-entry__thumb {
border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
.l-sub-contents--blog { margin-top: -150px; }
.c-blog-member__icon {
border: 8px;
border-style: groove ridge ridge groove;
border-color: #${code_01} #${code_02} #${code_02} #${code_01};
}
.c-button-grad--right {
font-size: 1.4rem;
text-align: center;
width: ${OTHER_BLOG_LIST_WIDTH}px;
height: 36px;
margin: 0 0 20px 0;
}
.p-blog-group__zoom {
.c-blog-article__text { font-size: 2.4rem };
}
.div__youtube {
margin: 20px 0 10px 40px;
}`;
return memberBlogCSS;
};
const setBrogMemberIcon = (memberName, code_01, code_02) => {
let memberIcon = document.querySelector(".c-blog-member__icon");
if (!memberIcon) {
memberIcon = create5thRelayPhoto();
const info = document.querySelector(".p-blog-member__info");
if (info) {
info.prepend(memberIcon);
}
((x) => {
if (x) {
x.style.marginTop = "20px";
}
})(document.querySelector(".calender_pats"));
} else if (!memberName) {
memberIcon.setAttribute(
"style",
`height: 188px;
width: 188px;
background-image: url("https://cdn.hinatazaka46.com/images/14/263/732dfca7d5ebb83ba68acb11e4eb4/400_320_102400.jpg");
border-radius: 50%;`
);
}
memberIcon.setPenlightColor(code_01, code_02, 0, 16, 2, 1);
};
const create5thRelayPhoto = () => {
const relayPhoto = document.createElement("div");
relayPhoto.classList.add("c-blog-member__icon");
relayPhoto.setAttribute("style", `
background-image: url(https://cdn.hinatazaka46.com/images/14/fa2/dcd3c79b9d66efeed5a13af038129.jpg);
background-size: 120%;
border-radius: 10%;
background-position-y: 5px;
background-repeat: no-repeat;
width: 210px;
height: 130px;
position: relative;
z-index = 2;
`);
return relayPhoto;
};
// @license MIT
const handleException = (proc, scriptName) => {
try {
const divElem = document.querySelector("html body div");
if (divElem == null || divElem.innerText == null || divElem.innerText.includes("メンテナンス中")) {
return;
}
proc();
} catch (e) {
console.error(e);
const lang = CookieUtils.getCookie("wovn_selected_lang");
switch (lang) {
case "ja":
alert(`userscriptの処理中にエラーが発生しました。
「${scriptName}」のuserscriptを無効にしてください。`);
break;
case "en":
case "zh-Hans":
case "zh-Hant":
case "ko":
default:
alert(`An error occurred while processining userscript.
Please disable the userscript:
[${scriptName}].`);
}
}
};
// @license MIT
let id;
let count = 0;
const replaceLang = () => {
const langSelect = document.getElementById("wovn-translate-widget");
if (count >= 10) {
clearInterval(id);
}
if (langSelect) {
langSelect.style.top = "5px";
document.querySelector(".wovn-lang-selector").style.height = "25px";
document.querySelector(".wovn-lang-selector-links").style.paddingTop = "5px";
clearInterval(id);
}
count++;
};
const doProcess = (proc, scriptName) => {
handleException(proc, scriptName);
handleException(() => {
const colorMode = getColorMode();
initializeColorToggle(colorMode);
analyzeDefaultColor();
setColor(getPageType(), colorMode);
}, "hinatazaka46-process");
id = setInterval(replaceLang, 200);
};
const memberSelectShim = () => {
document.querySelector(".c-button-filter").style.cursor = "pointer";
const decAnchor = document.querySelector(".btn-decision a");
const createNowYearMonth = () => {
const now = /* @__PURE__ */ new Date();
return String(now.getFullYear()) + String(now.getMonth() + 1).padStart(2, "0");
};
const dispYearMonth = ((x) => {
return x === null ? createNowYearMonth() : x[0];
})(decAnchor.href.match(new RegExp("[0-9]{6}")));
const newDecAnchor = document.createElement("a");
newDecAnchor.text = "決定する";
newDecAnchor.style.cursor = "pointer";
newDecAnchor.addEventListener(
"click",
() => {
const PARAM_NM_DY = "dy";
const pageForm = document.getElementById("pageForm");
const item = pageForm.elements.namedItem(PARAM_NM_DY);
if (item) {
item.value = dispYearMonth;
} else {
pageForm.elements[0].setAttribute("name", PARAM_NM_DY);
pageForm.elements[0].setAttribute("value", dispYearMonth);
}
const list = document.querySelectorAll('#pageForm > [name="list[]"]');
const sendCheckedIdList = Array.prototype.filter.call(list, (x) => {
return x.type === "checkbox" && x.checked;
}).map((x) => {
return x.value;
});
Array.prototype.forEach.call(list, (x) => {
if (x.type === "hidden" && sendCheckedIdList.indexOf(x.value) < 0) {
x.remove();
}
});
pageForm.submit();
}
);
const decBtn = document.querySelector(".btn-decision");
decBtn.replaceChildren(newDecAnchor);
const checkedIdList = [];
Array.prototype.forEach.call(document.querySelectorAll('#pageForm > [name="list[]"]'), (x) => {
const memberId = x.value;
if (checkedIdList.indexOf(memberId) < 0) {
checkedIdList.push(memberId);
} else {
x.remove();
}
});
Array.prototype.forEach.call(checkedIdList, (x) => {
document.getElementById(x)?.dispatchEvent(new MouseEvent("click"));
});
};
const SCRIPT_NAME = "日向坂46";
document.head.insertAdjacentHTML("afterbegin", `
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap&display=swap" rel="stylesheet">
`);
doProcess(() => {
const pageType = getPageType();
let styleText = `
h1, h2, h3, h4, h5, h6 {font-weight: 950; }
.js-select { cursor: pointer; }
.c-select-box { color: #0fb84a; }
.c-button-grad { z-index: 100; }
.l-contents { padding-bottom: 60px; }`;
if (isMobile()) {
if (pageType == "formation") {
document.appendStyle(
styleText + `
.formation_image li:hover {
height: 60px;
margin: -10px 0 0 0px;
width: 60px;
i {
margin: -6px 0 0 -30px;
font-size: larger;
}
}`
);
}
return;
}
slimDownMenuBar();
document.appendStyle(styleText);
setLinkFontColor(".p-menu__item a");
switch (pageType) {
case "news":
case "media":
memberSelectShim();
doProcessList();
break;
case "detail":
break;
case "search":
doProcessMember();
break;
case "artist":
doProcessMemberDetail();
break;
case "artist/00":
doProcessDiscography();
break;
case "greeting":
doProcessGreeting();
break;
case "contents":
break;
case "formation":
doProcessFormation();
break;
case "diary/member":
doProcessBlog("blog_top");
break;
case "diary/member/list":
doProcessBlog("blog_list");
break;
case "diary/detail":
doProcessBlog("blog_detail");
break;
case "video":
case "aimashou":
break;
case "event":
doProcessEvent();
break;
case "biography":
break;
case "about_fanclub":
doProcessFc();
break;
}
}, SCRIPT_NAME);
})();
})();
