375
回編集
編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
||
3行目: | 3行目: | ||
/** | /** | ||
* @typedef MediaWiki | * @typedef MediaWiki | ||
* @prop {readonly Map<string, | * @prop {readonly Map<string, never>} config | ||
*/ | */ | ||
39行目: | 39行目: | ||
* @prop {string | string[]} [class] | * @prop {string | string[]} [class] | ||
* @prop {MenuDataItem[]} items | * @prop {MenuDataItem[]} items | ||
*/ | |||
/** | |||
* @typedef UserMenuItem | |||
* @prop {string} text | |||
* @prop {string} title | |||
* @prop {readonly string[]} iconClass | |||
*/ | */ | ||
44行目: | 51行目: | ||
* @typedef MobileUI | * @typedef MobileUI | ||
* @prop {MenuDataGroup[]} leftGroups | * @prop {MenuDataGroup[]} leftGroups | ||
* @prop { | * @prop {readonly UserMenuItem[]} userMenuItems | ||
*/ | */ | ||
276行目: | 283行目: | ||
/** | /** | ||
* @returns { | * @returns {HTMLUListElement | null} | ||
*/ | */ | ||
static get | static get userMenuElement() { | ||
return | return window | ||
.document | |||
.querySelector(".minerva-user-menu > ul.toggle-list__list"); | |||
} | } | ||
334行目: | 306行目: | ||
/** | /** | ||
* @returns { | * @param {UserMenuItem} item | ||
* @returns {HTMLLIElement} | |||
*/ | */ | ||
createUserMenuItemElement(item) { | |||
const li = window.document.createElement("li"); | |||
li.classList.add("toggle-list-item"); | |||
const | const a = window.document.createElement("a"); | ||
a.classList.add("toggle-list-item__anchor"); | |||
a.href = [this.wgScriptPath, item.title].join("/"); | |||
li.append(a); | |||
const | const outerSpan = window.document.createElement("span"); | ||
outerSpan.classList.add("toggle-list-item__icon", "mw-ui-icon", "mw-ui-icon-before", ...item.iconClass); | |||
a.append(outerSpan); | |||
); | |||
const innerSpan = window.document.createElement("span"); | |||
innerSpan.classList.add("toggle-list-item__label"); | |||
innerSpan.textContent = item.text; | |||
outerSpan.append(innerSpan); | |||
return li; | |||
} | |||
/** | |||
* @param {readonly UserMenuItem[]} items | |||
* @returns {this} | |||
*/ | |||
extendUserMenu(items) { | |||
const menu = MobileUIBuilder.userMenuElement; | |||
const | if (menu) { | ||
const lastItem = menu.lastChild; | |||
if (lastItem) { | |||
for (const item of items) { | |||
const li = this.createUserMenuItemElement(item); | |||
menu.insertBefore(li, lastItem); | |||
} | |||
} | |||
} | |||
return this; | return this; | ||
382行目: | 356行目: | ||
return this | return this | ||
.setNotArticleClass() | .setNotArticleClass() | ||
; | |||
} | } | ||
/** | /** | ||
* @param {MobileUI} mobileUI | * @param {MobileUI} mobileUI | ||
* @param {HTMLDivElement} leftMenu | * @param {HTMLDivElement} leftMenu | ||
* @returns {this} | * @returns {this} | ||
*/ | */ | ||
modify(mobileUI | modify(mobileUI, leftMenu) { | ||
const firstGroup = leftMenu.getElementsByTagName("ul").item(0); | const firstGroup = leftMenu.getElementsByTagName("ul").item(0); | ||
if (firstGroup) { | if (firstGroup) { | ||
399行目: | 372行目: | ||
const customLeftGroups = this.menuDataGroups(mobileUI.leftGroups); | const customLeftGroups = this.menuDataGroups(mobileUI.leftGroups); | ||
leftMenu.prepend(...customLeftGroups); | leftMenu.prepend(...customLeftGroups); | ||
return this; | return this; | ||
422行目: | 381行目: | ||
*/ | */ | ||
build(mobileUI) { | build(mobileUI) { | ||
if (mobileUI.userMenuItems) { | |||
this.extendUserMenu(mobileUI.userMenuItems); | |||
} | |||
const leftMenuContainer = window.document.getElementById("mw-mf-page-left"); | const leftMenuContainer = window.document.getElementById("mw-mf-page-left"); | ||
429行目: | 392行目: | ||
if (MobileUIBuilder.leftMenuElement) { | if (MobileUIBuilder.leftMenuElement) { | ||
this.modify(mobileUI | this.modify(mobileUI, leftMenu); | ||
return this; | return this; | ||
} | } | ||
440行目: | 403行目: | ||
if (classList && classList.contains(MobileUIBuilder.menuClass)) { | if (classList && classList.contains(MobileUIBuilder.menuClass)) { | ||
observer.disconnect(); | observer.disconnect(); | ||
this.modify(mobileUI | this.modify(mobileUI, maybeLeftMenu); | ||
return; | return; | ||
} | } |