Vikipedia

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

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

2020年5月3日 (日) 01:44時点における版

9,031 バイト追加 、 2020年5月3日 (日) 01:44
細
編集の要約なし
編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
細編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
 
(同じ利用者による、間の28版が非表示)
1行目: 1行目:
// @ts-check
// @ts-check


(async () => {
/**
* @typedef MediaWiki
* @prop {readonly Map<string, never>} config
*/
 
/**
* @typedef WGNamespaceIds
* @prop {number} user
* @prop {number} user_talk
* @prop {number} special
*/
 
/**
* @typedef {{ [id: string]: string; }} WGFormattedNamespaces
*/
 
/**
* @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 UserMenuItem
* @prop {string} text
* @prop {string} title
* @prop {readonly string[]} iconClass
*/
 
/**
* @typedef MobileUI
* @prop {MenuDataGroup[]} leftGroups
* @prop {readonly UserMenuItem[]} userMenuItems
*/
 
class MobileUIBuilder {
    /**
    * @param {MediaWiki} mw
    */
    constructor(mw) {
        // this.mw = mw;
 
        /**
        * @type {string}
        */
        this.wgServer = mw.config.get("wgServer");
 
        /**
        * @type {string}
        */
        this.wgScript = mw.config.get("wgScript");
 
        /**
        * @type {string}
        */
        this.wgScriptPath = mw.config.get("wgScriptPath");
 
        /**
        * @type {string}
        */
        this.wgPageName = mw.config.get("wgPageName");
 
        /**
        * @type {number}
        */
        this.wgArticleId = mw.config.get("wgArticleId");
 
        /**
        * @type {boolean}
        */
        this.wgIsArticle = mw.config.get("wgIsArticle");
 
        /**
        * @type {boolean}
        */
        this.wgIsMainPage = mw.config.get("wgIsMainPage");
 
        /**
        * @type {number}
        */
        this.wgUserId = mw.config.get("wgUserId");
 
        /**
        * @type {string}
        */
        this.wgUserName = mw.config.get("wgUserName");
 
        /**
        * @type {WGNamespaceIds}
        */
        this.wgNamespaceIds = Object.assign({}, mw.config.get("wgNamespaceIds"));
 
        /**
        * @type {WGFormattedNamespaces}
        */
        this.wgFormattedNamespaces = Object.assign({}, mw.config.get("wgFormattedNamespaces"));
    }
 
    /**
    * @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),
                ].join("");
 
            case "mobile-ui-page-special-user":
                return [
                    this.wgScriptPath,
                    "/",
                    this.wgFormattedNamespaces[this.wgNamespaceIds.user],
                    ":",
                    this.wgUserName,
                ].join("");
 
            case "mobile-ui-page-special-contributions":
                return [
                    this.wgScriptPath,
                    "/",
                    this.wgFormattedNamespaces[this.wgNamespaceIds.special],
                    ":",
                    "Contributions",
                    "/",
                    this.wgUserName,
                ].join("");
 
            case "mobile-ui-page-user-talk":
                return [
                    this.wgScriptPath,
                    "/",
                    this.wgFormattedNamespaces[this.wgNamespaceIds.user_talk],
                    ":",
                    this.wgUserName,
                ].join("");
 
            case "mobile-ui-page-special-logout":
                return [
                    this.wgScript,
                    "?title=",
                    this.wgFormattedNamespaces[this.wgNamespaceIds.special],
                    ":",
                    "Logout",
                    "&returnto=",
                    this.wgPageName,
                ].join("");
 
            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.id = component.id || "";
        element.classList.add(...[].concat(component.class || []));
        element.setAttribute("data-event-name", component.dataEventName || "");
 
        if (href) {
            element.href = encodeURI(href);
        }
 
        const textElement = window.document.createElement("span");
        textElement.textContent = component.text || href;
        element.append(textElement);
 
        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;
    }
 
     /**
     /**
     * @typedef {import("jquery")} JQueryStatic
     * @param {MenuDataGroup} group
    * @returns {HTMLUListElement}
     */
     */
    menuDataGroup(group) {
        /**
        * @type {HTMLLIElement[]}
        */
        const children = [];
        for (const item of group.items) {
            children.push(this.menuDataItem(item));
        }
        const element = window.document.createElement("ul");
        element.id = group.id || "";
        element.classList.add(...[].concat(group.class || []));
        element.append(...children);
        return element;
    }


     /**
     /**
     * @typedef MobileUIMenuItem
     * @param {MenuDataGroup[]} groups
    * @prop {string} title
     * @returns {HTMLUListElement[]}
    * @prop {string} page
     * @prop {string | string[]} [class]
     */
     */
    menuDataGroups(groups) {
        /**
        * @type {HTMLUListElement[]}
        */
        const children = [];


    /**
        for (const group of groups) {
     * @typedef MobileUI
            children.push(this.menuDataGroup(group));
    * @prop {MobileUIMenuItem[]} menu
        }
 
        return children;
    }
 
    /**
     * @returns {HTMLElement}
     */
     */
    static get leftMenuContainerElement() {
        return window.document
            .getElementById("mw-mf-page-left");
    }


     const config = {
     /**
         wgArticleId: Number(),
    * @returns {HTMLDivElement | null}
        wgServer: "",
    */
         wgScriptPath: String(),
    static get leftMenuElement() {
     };
         return /** @type {HTMLDivElement} */ (
            MobileUIBuilder
                .leftMenuContainerElement
                .getElementsByClassName(MobileUIBuilder.menuClass)
                .item(0)
         );
     }


     Object.assign(config, mw.config.get(Object.keys(config)));
     /**
    * @returns {HTMLUListElement | null}
    */
    static get userMenuElement() {
        return window
            .document
            .querySelector(".minerva-user-menu > ul.toggle-list__list");
    }


     const wikiURL = `${config.wgServer}${config.wgScriptPath}`;
     /**
    * @returns {this}
    */
    setNotArticleClass() {
        if (this.wgIsArticle && !this.wgIsMainPage) return this;


    const mobileUIPath = `${wikiURL}/index.php?title=MediaWiki:MobileUI.json&action=raw&ctype=application/json`;
        MobileUIBuilder
    const response = await window.fetch(mobileUIPath);
            .leftMenuContainerElement
            .classList
            .add("mobile-ui-not-article");
 
        return this;
    }


     /**
     /**
     * @type {MobileUI}
     * @param {UserMenuItem} item
    * @returns {HTMLLIElement}
     */
     */
     const mobileUI = await response.json();
     createUserMenuItemElement(item) {
        const li = window.document.createElement("li");
        li.classList.add("toggle-list-item");
 
        const a = window.document.createElement("a");
        a.classList.add("toggle-list-item__anchor");
        a.href = [this.wgScriptPath, item.title].join("/");
        li.append(a);
 
        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 spacingSpan = window.document.createElement("span");
        spacingSpan.textContent = " ";
        outerSpan.append(spacingSpan);
 
        const innerSpan = window.document.createElement("span");
        innerSpan.classList.add("toggle-list-item__label");
        innerSpan.textContent = item.text;
        outerSpan.append(innerSpan);
 
        return li;
    }


     /**
     /**
     * @type {JQuery<HTMLElement>[]}
     * @param {readonly UserMenuItem[]} items
    * @returns {this}
     */
     */
     const groups = [];
     extendUserMenu(items) {
        const menu = MobileUIBuilder.userMenuElement;
 
        if (menu) {
            const lastItem = menu.lastElementChild;
            if (lastItem) {
                for (const item of items) {
                    const li = this.createUserMenuItemElement(item);
                    menu.insertBefore(li, lastItem);
                }
            }
        }


     const ul = $("<ul>");
        return this;
    }
 
    /**
    * @returns {this}
    */
     prebuild() {
        return this
            .setNotArticleClass()
            ;
    }


     groups.push(ul);
     /**
    * @param {MobileUI} mobileUI
    * @param {HTMLDivElement} leftMenu
    * @returns {this}
    */
    modify(mobileUI, leftMenu) {
        const firstGroup = leftMenu.getElementsByTagName("ul").item(0);
        if (firstGroup) {
            firstGroup.classList.add(MobileUIBuilder.hiddenClass);
        }


    for (const menuItem of mobileUI.menu) {
        const customLeftGroups = this.menuDataGroups(mobileUI.leftGroups);
         const li = $("<li>").appendTo(ul);
         leftMenu.prepend(...customLeftGroups);


         $("<a>")
         return this;
            .text(menuItem.title)
            .addClass(["mw-ui-icon", "mw-ui-icon-before"])
            .attr("href", menuItem.page)
            .appendTo(li);
     }
     }


     if (config.wgArticleId > 1) {
     /**
         const hlist = $("<ul>")
    * @param {MobileUI} mobileUI
             .addClass("hlist")
    * @returns {this}
            .css("word-break", "break-all");
    */
    build(mobileUI) {
         if (mobileUI.userMenuItems) {
             this.extendUserMenu(mobileUI.userMenuItems);
        }


         const li = $("<li>").appendTo(hlist);
         const leftMenuContainer = window.document.getElementById("mw-mf-page-left");
        const dl = $("<dl>").appendTo(li);


         $("<dt>")
         const leftMenu = /** @type {HTMLDivElement} */ (
             .text("ページの短縮URL")
             leftMenuContainer.getElementsByClassName(MobileUIBuilder.menuClass).item(0)
            .css("display", "block")
        );
            .css("padding-left", "1em")
            .appendTo(dl);


         const dd = $("<dd>")
         if (MobileUIBuilder.leftMenuElement) {
             .css("display", "block")
             this.modify(mobileUI, leftMenu);
             .appendTo(dl);
             return this;
        }


         const shortURL = `${wikiURL}/?curid=${config.wgArticleId}`;
         const observer = new MutationObserver((mutations, observer) => {
            for (const record of mutations) {
                for (const node of record.addedNodes) {
                    const maybeLeftMenu = /** @type {HTMLDivElement} */ (node);
                    const { classList } = maybeLeftMenu;
                    if (classList && classList.contains(MobileUIBuilder.menuClass)) {
                        observer.disconnect();
                        this.modify(mobileUI, maybeLeftMenu);
                        return;
                    }
                }
            }
        });


         $("<a>")
         observer.observe(leftMenuContainer, { childList: true });
            .text(shortURL)
            .attr("href", shortURL)
            .appendTo(dd);


         groups.push(hlist);
         return this;
     }
     }
}


    $(".menu").ready(() => {
MobileUIBuilder.rightMenuButtonID = "mobile-ui-right-menu-button";
        const menu = $(".menu");
MobileUIBuilder.menuClass = "menu";
        menu.find("ul").first().remove();
MobileUIBuilder.hiddenClass = "mobile-ui-hidden";
        menu.prepend(groups);
MobileUIBuilder.navigationEnabledClass = "navigation-enabled";
    });
})();
「https://2ch.me/vikipedia/特別:携帯機器差分/13829...14784」から取得