Vikipedia

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

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

2019年6月27日 (木) 22:01時点における版

2,600 バイト追加 、 2019年6月27日 (木) 22:01
編集の要約なし
編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
85行目: 85行目:
     hrefForMenuDataItemComponent(component) {
     hrefForMenuDataItemComponent(component) {
         switch (component.id) {
         switch (component.id) {
             case MobileUIBuilder.pageShortURLID:
             case "mobile-ui-page-short-url":
                 return (
                 return (
                     this.wgServer
                     this.wgServer
112行目: 112行目:
         element.id = component.id || "";
         element.id = component.id || "";
         element.classList.add(...[].concat(component.class || []));
         element.classList.add(...[].concat(component.class || []));
         element.setAttribute(MobileUIBuilder.dataEventNameAttr, component.dataEventName || "");
         element.setAttribute("data-event-name", component.dataEventName || "");


         return element;
         return element;
176行目: 176行目:


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


181行目: 190行目:
     * @returns {HTMLElement}
     * @returns {HTMLElement}
     */
     */
     get menuContainerElement() {
     static get menuContainerElement() {
         return window.document.getElementById(MobileUIBuilder.menuContainerID);
         return window.document
            .getElementById("mw-mf-page-left");
     }
     }


188行目: 198行目:
     * @returns {HTMLDivElement | null}
     * @returns {HTMLDivElement | null}
     */
     */
     get menuElement() {
     static get menuElement() {
         return /** @type {HTMLDivElement} */ (
         return /** @type {HTMLDivElement} */ (
             this.menuContainerElement.getElementsByClassName(MobileUIBuilder.menuClass).item(0)
             MobileUIBuilder
                .menuContainerElement
                .getElementsByClassName(MobileUIBuilder.menuClass)
                .item(0)
        );
    }
 
    /**
    * @returns {HTMLBodyElement | null}
    */
    static get authenticatedBody() {
        return /** @type {HTMLBodyElement} */ (
            window.document
                .getElementsByClassName("is-authenticated")
                .item(0)
        );
    }
 
    /**
    * @returns {HTMLFormElement}
    */
    static get headerElement() {
        return /** @type {HTMLFormElement} */ (
            window.document
                .getElementsByClassName("header")
                .item(0)
        );
    }
 
    /**
    * @returns {HTMLAnchorElement | null}
    */
    static get userButton() {
        return /** @type {HTMLAnchorElement} */ (
            MobileUIBuilder
                .headerElement
                .getElementsByClassName("user-button")
                .item(0)
        );
    }
 
    /**
    * @returns {HTMLButtonElement | null}
    */
    static get rightMenuButtonElement() {
        return /** @type {HTMLButtonElement} */ (
            window.document
                .getElementById(MobileUIBuilder.rightMenuButtonID)
         );
         );
    }
    setNotArticleClass() {
        if (this.wgIsArticle && !this.wgIsMainPage) return;
        MobileUIBuilder
            .menuContainerElement
            .classList
            .add("mobile-ui-not-article");
    }
    assembleRightMenuButton() {
        if (!this.wgUserId) return;
        if (!MobileUIBuilder.authenticatedBody) return;
        if (MobileUIBuilder.rightMenuButtonElement) return;
        const userButton = MobileUIBuilder.userButton;
        if (userButton && !userButton.text.trim()) {
            userButton.parentElement.classList.add(MobileUIBuilder.hiddenClass);
        }
        const button = window.document.createElement("button");
        button.id = MobileUIBuilder.rightMenuButtonID;
        button.classList.add(
            "mw-ui-icon",
            "mw-ui-icon-element",
            "mobile-ui-icon-puzzle",
        );
        button.addEventListener("click", function (event) {
            event.preventDefault();
            const body = MobileUIBuilder.authenticatedBody;
            if (!body) return;
            if (body.classList.contains(MobileUIBuilder.navigationEnabledClass)) return;
            MobileUIBuilder.setRightMenuVisible(true);
            body.classList.add(
                MobileUIBuilder.navigationEnabledClass,
                MobileUIBuilder.secondaryNavigationEnabledClass,
            );
        });
        const buttonWrapper = window.document.createElement("div");
        buttonWrapper.append(button);
        MobileUIBuilder.headerElement.append(buttonWrapper);
    }
    prebuild() {
        this.setNotArticleClass();
        this.assembleRightMenuButton();
     }
     }


198行目: 305行目:
     */
     */
     modify(mobileUI) {
     modify(mobileUI) {
         const leftMenu = this.menuElement;
         const leftMenu = MobileUIBuilder.menuElement;
         if (leftMenu.classList.contains(MobileUIBuilder.leftMenuClass)) return;
         if (leftMenu.classList.contains(MobileUIBuilder.leftMenuClass)) return;


         const menuContainer = this.menuContainerElement;
         MobileUIBuilder.setRightMenuVisible(false);
         menuContainer.setAttribute(MobileUIBuilder.dataRightMenuVisibleAttr, String(false));
         const menuContainer = MobileUIBuilder.menuContainerElement;
         menuContainer.addEventListener("transitionend", function () {
         menuContainer.addEventListener("transitionend", function () {
             if (window.document.getElementsByClassName(MobileUIBuilder.secondaryNavigationEnabledClass).length) return;
            const body = MobileUIBuilder.authenticatedBody;
             this.setAttribute(MobileUIBuilder.dataRightMenuVisibleAttr, String(false));
             if (!body || body.classList.contains(MobileUIBuilder.secondaryNavigationEnabledClass)) return;
 
             MobileUIBuilder.setRightMenuVisible(false);
         });
         });
        if (!this.wgIsArticle || this.wgIsMainPage) {
            menuContainer.classList.add(MobileUIBuilder.notArticleClass);
        }


         const firstGroup = leftMenu.getElementsByTagName("ul").item(0);
         const firstGroup = leftMenu.getElementsByTagName("ul").item(0);
234行目: 339行目:
     */
     */
     build(mobileUI) {
     build(mobileUI) {
         if (this.menuElement) {
         if (MobileUIBuilder.menuElement) {
             this.modify(mobileUI);
             this.modify(mobileUI);
             return;
             return;
252行目: 357行目:
         });
         });


         observer.observe(this.menuContainerElement, { childList: true });
         observer.observe(MobileUIBuilder.menuContainerElement, { childList: true });
     }
     }
}
}


MobileUIBuilder.menuContainerID = "mw-mf-page-left";
MobileUIBuilder.rightMenuButtonID = "mobile-ui-right-menu-button";
MobileUIBuilder.menuClass = "menu";
MobileUIBuilder.menuClass = "menu";
MobileUIBuilder.dataEventNameAttr = "data-event-name";
MobileUIBuilder.leftMenuClass = "mobile-ui-left-menu";
MobileUIBuilder.leftMenuClass = "mobile-ui-left-menu";
MobileUIBuilder.rightMenuClass = "mobile-ui-right-menu";
MobileUIBuilder.rightMenuClass = "mobile-ui-right-menu";
MobileUIBuilder.notArticleClass = "mobile-ui-not-article";
MobileUIBuilder.pageShortURLID = "mobile-ui-page-short-url";
MobileUIBuilder.hiddenClass = "mobile-ui-hidden";
MobileUIBuilder.hiddenClass = "mobile-ui-hidden";
MobileUIBuilder.dataRightMenuVisibleAttr = "data-mobile-ui-right-menu-visible";
MobileUIBuilder.navigationEnabledClass = "navigation-enabled";
MobileUIBuilder.navigationEnabledClass = "navigation-enabled";
MobileUIBuilder.primaryNavigationEnabledClass = "primary-navigation-enabled";
MobileUIBuilder.secondaryNavigationEnabledClass = "secondary-navigation-enabled";
MobileUIBuilder.secondaryNavigationEnabledClass = "secondary-navigation-enabled";
「https://2ch.me/vikipedia/特別:携帯機器差分/13882」から取得