Vikipedia

「MediaWiki:MobileUI.js」の版間の差分

MediaWiki:MobileUI.js (ソースを閲覧)

2019年11月20日 (水) 23:24時点における版

358 バイト除去 、 2019年11月20日 (水) 23:24
編集の要約なし
細編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
253行目: 253行目:


         return children;
         return children;
    }
    /**
    * @param {boolean} isVisible
    */
    static setRightMenuVisible(isVisible) {
        MobileUIBuilder
            .menuContainerElement
            .setAttribute("data-mobile-ui-right-menu-visible", String(Boolean(isVisible)));
     }
     }


267行目: 258行目:
     * @returns {HTMLElement}
     * @returns {HTMLElement}
     */
     */
     static get menuContainerElement() {
     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 menuElement() {
     static get leftMenuElement() {
         return /** @type {HTMLDivElement} */ (
         return /** @type {HTMLDivElement} */ (
             MobileUIBuilder
             MobileUIBuilder
                 .menuContainerElement
                 .leftMenuContainerElement
                 .getElementsByClassName(MobileUIBuilder.menuClass)
                 .getElementsByClassName(MobileUIBuilder.menuClass)
                 .item(0)
                 .item(0)
335行目: 326行目:


         MobileUIBuilder
         MobileUIBuilder
             .menuContainerElement
             .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;


            MobileUIBuilder.setRightMenuVisible(true);
             body.classList.add(
             body.classList.add(
                 MobileUIBuilder.navigationEnabledClass,
                 MobileUIBuilder.navigationEnabledClass,
                 MobileUIBuilder.secondaryNavigationEnabledClass,
                 "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 leftMenu = MobileUIBuilder.menuElement;
        if (leftMenu.classList.contains(MobileUIBuilder.leftMenuClass)) return this;
 
        MobileUIBuilder.setRightMenuVisible(false);
        const menuContainer = MobileUIBuilder.menuContainerElement;
        menuContainer.addEventListener("transitionend", function () {
            const body = MobileUIBuilder.authenticatedBody;
            if (!body || body.classList.contains(MobileUIBuilder.secondaryNavigationEnabledClass)) return;
 
            MobileUIBuilder.setRightMenuVisible(false);
        });
 
         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, MobileUIBuilder.rightMenuClass);
         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);
        menuContainer.append(rightMenu);
        leftMenu.classList.add(MobileUIBuilder.leftMenuClass);


         return this;
         return this;
437行目: 422行目:
     */
     */
     build(mobileUI) {
     build(mobileUI) {
         if (MobileUIBuilder.menuElement) {
        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 { classList } = /** @type {HTMLDivElement} */ (node);
                     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(MobileUIBuilder.menuContainerElement, { childList: true });
         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.leftMenuClass = "mobile-ui-left-menu";
MobileUIBuilder.rightMenuClass = "mobile-ui-right-menu";
MobileUIBuilder.hiddenClass = "mobile-ui-hidden";
MobileUIBuilder.hiddenClass = "mobile-ui-hidden";
MobileUIBuilder.navigationEnabledClass = "navigation-enabled";
MobileUIBuilder.navigationEnabledClass = "navigation-enabled";
MobileUIBuilder.secondaryNavigationEnabledClass = "secondary-navigation-enabled";
「https://2ch.me/vikipedia/特別:携帯機器差分/14077」から取得