注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。
- Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
- Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
- Internet Explore/Edger: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください
- Opera: Ctrl-F5を押してください
// @ts-check
/**
* @typedef MediaWiki
* @prop {readonly Map<string, any>} config
*/
/**
* @typedef MenuDataItemComponent
* @prop {string} [text]
* @prop {string} [title]
* @prop {string} [href]
* @prop {string} [id]
* @prop {string | string[]} [class]
* @prop {string} [dataEventName]
*/
/**
* @typedef MenuDataItem
* @prop {string} [id]
* @prop {string | string[]} [class]
* @prop {MenuDataItemComponent[]} components
*/
/**
* @typedef MenuDataGroup
* @prop {string} [id]
* @prop {string | string[]} [class]
* @prop {MenuDataItem[]} items
*/
/**
* @typedef MobileUI
* @prop {MenuDataGroup[]} leftGroups
* @prop {MenuDataGroup[]} rightGroups
*/
class MobileUIBuilder {
/**
* @param {MediaWiki} mw
*/
constructor(mw) {
// this.mw = mw;
/**
* @type {string}
*/
this.wgServer = mw.config.get("wgServer");
/**
* @type {string}
*/
this.wgScriptPath = mw.config.get("wgScriptPath");
/**
* @type {number}
*/
this.wgArticleId = mw.config.get("wgArticleId");
/**
* @type {boolean}
*/
this.wgIsArticle = mw.config.get("wgIsArticle");
/**
* @type {boolean}
*/
this.wgIsMainPage = mw.config.get("wgIsMainPage");
}
/**
* @param {MenuDataItemComponent} component
* @returns {string}
*/
hrefForMenuDataItemComponent(component) {
switch (component.id) {
case "mobile-ui-page-short-url":
return (
this.wgServer
+ this.wgScriptPath
+ "?curid="
+ String(this.wgArticleId)
);
default:
return component.title
? (this.wgScriptPath + "/" + component.title)
: component.href;
}
}
/**
* @param {MenuDataItemComponent} component
* @returns {HTMLAnchorElement}
*/
menuDataItemComponent(component) {
const href = this.hrefForMenuDataItemComponent(component);
const element = window.document.createElement("a");
element.text = component.text || href;
element.href = encodeURI(href);
element.id = component.id || "";
element.classList.add(...[].concat(component.class));
element.setAttribute("data-event-name", component.dataEventName || "");
return element;
}
/**
* @param {MenuDataItem} item
* @returns {HTMLLIElement}
*/
menuDataItem(item) {
/**
* @type {HTMLAnchorElement[]}
*/
const children = [];
for (const component of item.components) {
children.push(this.menuDataItemComponent(component));
}
const element = window.document.createElement("li");
element.id = item.id || "";
element.classList.add(...[].concat(item.class));
element.append(...children);
return element;
}
/**
* @param {MenuDataGroup} group
* @returns {HTMLUListElement}
*/
menuDataGroup(group) {
/**
* @type {HTMLLIElement[]}
*/
const children = [];
for (const item of group.items) {
children.push(this.menuDataItem(item));
Function.call
}
const element = window.document.createElement("ul");
element.id = group.id || "";
element.classList.add(...[].concat(group.class));
element.append(...children);
return element;
}
/**
* @param {MenuDataGroup[]} groups
* @returns {HTMLUListElement[]}
*/
menuDataGroups(groups) {
/**
* @type {HTMLUListElement[]}
*/
const children = [];
for (const group of groups) {
children.push(this.menuDataGroup(group));
}
return children;
}
/**
* @param {Node} node
* @returns {HTMLElement | null}
*/
elementIfTarget(node) {
const element = /** @type {HTMLElement} */ (node);
const { classList } = element;
if (!classList) return null;
if (!classList.contains("menu")) return null;
if (classList.contains("menu-right")) return null;
return element;
}
/**
* @returns {HTMLElement}
*/
get navElement() {
return window.document.getElementById("mw-mf-page-left");
}
/**
* @returns {HTMLDivElement | null}
*/
get menuElement() {
return /** @type {HTMLDivElement} */ (
this.navElement.getElementsByClassName("menu").item(0)
);
}
/**
* @param {MobileUI} mobileUI
* @param {HTMLElement} menuElement
*/
modify(mobileUI, menuElement) {
const navElement = this.navElement;
if (!this.wgIsArticle || this.wgIsMainPage) {
navElement.classList.add("mobile-ui-not-article");
}
const firstGroup = menuElement.getElementsByTagName("ul").item(0);
if (firstGroup) {
firstGroup.style.display = "none";
}
const leftGroups = this.menuDataGroups(mobileUI.leftGroups);
menuElement.prepend(...leftGroups);
const rightMenuElement = window.document.createElement("div");
rightMenuElement.classList.add(...menuElement.classList, "menu-right");
const rightGroups = this.menuDataGroups(mobileUI.rightGroups);
rightMenuElement.append(...rightGroups);
navElement.append(rightMenuElement);
}
/**
* @param {MobileUI} mobileUI
*/
build(mobileUI) {
const element = this.menuElement;
if (element) {
this.modify(mobileUI, element);
return;
}
const observer = new MutationObserver((mutations, observer) => {
for (const record of mutations) {
for (const node of record.addedNodes) {
const element = this.elementIfTarget(node);
if (element) {
observer.disconnect();
this.modify(mobileUI, element);
return;
}
}
}
});
observer.observe(this.navElement, { childList: true });
}
}