375
回編集
細編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
||
253行目: | 253行目: | ||
return children; | return children; | ||
} | } | ||
267行目: | 258行目: | ||
* @returns {HTMLElement} | * @returns {HTMLElement} | ||
*/ | */ | ||
static get | static get leftMenuContainerElement() { | ||
return window.document | return window.document | ||
.getElementById("mw-mf-page-left"); | .getElementById("mw-mf-page-left"); | ||
275行目: | 266行目: | ||
* @returns {HTMLDivElement | null} | * @returns {HTMLDivElement | null} | ||
*/ | */ | ||
static get | static get leftMenuElement() { | ||
return /** @type {HTMLDivElement} */ ( | return /** @type {HTMLDivElement} */ ( | ||
MobileUIBuilder | MobileUIBuilder | ||
. | .leftMenuContainerElement | ||
.getElementsByClassName(MobileUIBuilder.menuClass) | .getElementsByClassName(MobileUIBuilder.menuClass) | ||
.item(0) | .item(0) | ||
335行目: | 326行目: | ||
MobileUIBuilder | MobileUIBuilder | ||
. | .leftMenuContainerElement | ||
.classList | .classList | ||
.add("mobile-ui-not-article"); | .add("mobile-ui-not-article"); | ||
372行目: | 363行目: | ||
if (body.classList.contains(MobileUIBuilder.navigationEnabledClass)) return; | if (body.classList.contains(MobileUIBuilder.navigationEnabledClass)) return; | ||
body.classList.add( | body.classList.add( | ||
MobileUIBuilder.navigationEnabledClass, | MobileUIBuilder.navigationEnabledClass, | ||
"secondary-navigation-enabled", | |||
); | ); | ||
}); | }); | ||
397行目: | 387行目: | ||
/** | /** | ||
* @param {MobileUI} mobileUI | * @param {MobileUI} mobileUI | ||
* @param {HTMLElement} leftMenuContainer | |||
* @param {HTMLDivElement} leftMenu | |||
* @returns {this} | * @returns {this} | ||
*/ | */ | ||
modify(mobileUI | modify(mobileUI, leftMenuContainer, leftMenu) { | ||
const firstGroup = leftMenu.getElementsByTagName("ul").item(0); | const firstGroup = leftMenu.getElementsByTagName("ul").item(0); | ||
if (firstGroup) { | if (firstGroup) { | ||
419行目: | 399行目: | ||
const customLeftGroups = this.menuDataGroups(mobileUI.leftGroups); | const customLeftGroups = this.menuDataGroups(mobileUI.leftGroups); | ||
leftMenu.prepend(...customLeftGroups); | leftMenu.prepend(...customLeftGroups); | ||
const viewport = leftMenuContainer.parentElement; | |||
const rightMenuContainer = window.document.createElement("nav"); | |||
rightMenuContainer.id = "mobile-ui-page-right"; | |||
rightMenuContainer.classList.add(...leftMenuContainer.classList); | |||
viewport.insertBefore(rightMenuContainer, leftMenuContainer); | |||
const rightMenu = window.document.createElement("div"); | const rightMenu = window.document.createElement("div"); | ||
rightMenu.classList.add(...leftMenu.classList | rightMenu.classList.add(...leftMenu.classList); | ||
rightMenuContainer.appendChild(rightMenu); | |||
const rightGroups = this.menuDataGroups(mobileUI.rightGroups); | const rightGroups = this.menuDataGroups(mobileUI.rightGroups); | ||
rightMenu.append(...rightGroups); | rightMenu.append(...rightGroups); | ||
return this; | return this; | ||
437行目: | 422行目: | ||
*/ | */ | ||
build(mobileUI) { | build(mobileUI) { | ||
if (MobileUIBuilder. | const leftMenuContainer = window.document.getElementById("mw-mf-page-left"); | ||
this.modify(mobileUI); | |||
const leftMenu = /** @type {HTMLDivElement} */ ( | |||
leftMenuContainer.getElementsByClassName(MobileUIBuilder.menuClass).item(0) | |||
); | |||
if (MobileUIBuilder.leftMenuElement) { | |||
this.modify(mobileUI, leftMenuContainer, leftMenu); | |||
return this; | return this; | ||
} | } | ||
445行目: | 436行目: | ||
for (const record of mutations) { | for (const record of mutations) { | ||
for (const node of record.addedNodes) { | for (const node of record.addedNodes) { | ||
const | const maybeLeftMenu = /** @type {HTMLDivElement} */ (node); | ||
const { classList } = maybeLeftMenu; | |||
if (classList && classList.contains(MobileUIBuilder.menuClass)) { | if (classList && classList.contains(MobileUIBuilder.menuClass)) { | ||
observer.disconnect(); | observer.disconnect(); | ||
this.modify(mobileUI); | this.modify(mobileUI, leftMenuContainer, maybeLeftMenu); | ||
return; | return; | ||
} | } | ||
455行目: | 447行目: | ||
}); | }); | ||
observer.observe( | observer.observe(leftMenuContainer, { childList: true }); | ||
return this; | return this; | ||
463行目: | 455行目: | ||
MobileUIBuilder.rightMenuButtonID = "mobile-ui-right-menu-button"; | MobileUIBuilder.rightMenuButtonID = "mobile-ui-right-menu-button"; | ||
MobileUIBuilder.menuClass = "menu"; | MobileUIBuilder.menuClass = "menu"; | ||
MobileUIBuilder.hiddenClass = "mobile-ui-hidden"; | MobileUIBuilder.hiddenClass = "mobile-ui-hidden"; | ||
MobileUIBuilder.navigationEnabledClass = "navigation-enabled"; | MobileUIBuilder.navigationEnabledClass = "navigation-enabled"; | ||