Vikipedia

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

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

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

4,748 バイト追加 、 2020年5月3日 (日) 01:44
細
編集の要約なし
細編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
細編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
 
(同じ利用者による、間の22版が非表示)
3行目: 3行目:
/**
/**
  * @typedef MediaWiki
  * @typedef MediaWiki
  * @prop {readonly Map<string, any>} config
  * @prop {readonly Map<string, never>} config
*/
 
/**
* @typedef WGNamespaceIds
* @prop {number} user
* @prop {number} user_talk
* @prop {number} special
*/
 
/**
* @typedef {{ [id: string]: string; }} WGFormattedNamespaces
  */
  */


28行目: 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
  */
  */


33行目: 51行目:
  * @typedef MobileUI
  * @typedef MobileUI
  * @prop {MenuDataGroup[]} leftGroups
  * @prop {MenuDataGroup[]} leftGroups
  * @prop {MenuDataGroup[]} rightGroups
  * @prop {readonly UserMenuItem[]} userMenuItems
  */
  */


47行目: 65行目:
         */
         */
         this.wgServer = mw.config.get("wgServer");
         this.wgServer = mw.config.get("wgServer");
        /**
        * @type {string}
        */
        this.wgScript = mw.config.get("wgScript");


         /**
         /**
52行目: 75行目:
         */
         */
         this.wgScriptPath = mw.config.get("wgScriptPath");
         this.wgScriptPath = mw.config.get("wgScriptPath");
        /**
        * @type {string}
        */
        this.wgPageName = mw.config.get("wgPageName");


         /**
         /**
67行目: 95行目:
         */
         */
         this.wgIsMainPage = mw.config.get("wgIsMainPage");
         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"));
     }
     }


76行目: 124行目:
         switch (component.id) {
         switch (component.id) {
             case "mobile-ui-page-short-url":
             case "mobile-ui-page-short-url":
                 return (
                 return [
                     this.wgServer
                     this.wgServer,
                     + this.wgScriptPath
                     this.wgScriptPath,
                     + "?curid="
                     "/?curid=",
                     + String(this.wgArticleId)
                     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:
             default:
                 return component.title
                 return component.title
                     ? (this.wgScriptPath + "/" + component.title)
                     ? (this.wgScriptPath + "/" + component.title)
                     : component.href;
                     : component.href || "";
         }
         }
     }
     }
98行目: 186行目:


         const element = window.document.createElement("a");
         const element = window.document.createElement("a");
        element.text = component.text || href;
        element.href = encodeURI(href);
         element.id = component.id || "";
         element.id = component.id || "";
         element.classList.add(...[].concat(component.class));
         element.classList.add(...[].concat(component.class || []));
         element.setAttribute("data-event-name", component.dataEventName || "");
         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;
         return element;
123行目: 217行目:
         const element = window.document.createElement("li");
         const element = window.document.createElement("li");
         element.id = item.id || "";
         element.id = item.id || "";
         element.classList.add(...[].concat(item.class));
         element.classList.add(...[].concat(item.class || []));
         element.append(...children);
         element.append(...children);


141行目: 235行目:
         for (const item of group.items) {
         for (const item of group.items) {
             children.push(this.menuDataItem(item));
             children.push(this.menuDataItem(item));
            Function.call
         }
         }


         const element = window.document.createElement("ul");
         const element = window.document.createElement("ul");
         element.id = group.id || "";
         element.id = group.id || "";
         element.classList.add(...[].concat(group.class));
         element.classList.add(...[].concat(group.class || []));
         element.append(...children);
         element.append(...children);


170行目: 263行目:


     /**
     /**
    * @param {Node} node
     * @returns {HTMLElement}
     * @returns {HTMLElement | null}
     */
     */
     elementIfTarget(node) {
     static get leftMenuContainerElement() {
         const element = /** @type {HTMLElement} */ (node);
         return window.document
        const { classList } = element;
            .getElementById("mw-mf-page-left");
    }


        if (!classList) return null;
    /**
         if (!classList.contains("menu")) return null;
    * @returns {HTMLDivElement | null}
        if (classList.contains("menu-right")) return null;
    */
    static get leftMenuElement() {
         return /** @type {HTMLDivElement} */ (
            MobileUIBuilder
                .leftMenuContainerElement
                .getElementsByClassName(MobileUIBuilder.menuClass)
                .item(0)
        );
    }


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


     /**
     /**
     * @returns {HTMLElement}
     * @returns {this}
     */
     */
     get navElement() {
     setNotArticleClass() {
         return window.document.getElementById("mw-mf-page-left");
         if (this.wgIsArticle && !this.wgIsMainPage) return this;
 
        MobileUIBuilder
            .leftMenuContainerElement
            .classList
            .add("mobile-ui-not-article");
 
        return this;
     }
     }


     /**
     /**
     * @returns {HTMLDivElement | null}
    * @param {UserMenuItem} item
     * @returns {HTMLLIElement}
     */
     */
     get menuElement() {
     createUserMenuItemElement(item) {
         return /** @type {HTMLDivElement} */ (
         const li = window.document.createElement("li");
            this.navElement.getElementsByClassName("menu").item(0)
        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;
     }
     }


     /**
     /**
     * @param {MobileUI} mobileUI
     * @param {readonly UserMenuItem[]} items
     * @param {HTMLElement} menuElement
     * @returns {this}
     */
     */
     modify(mobileUI, menuElement) {
     extendUserMenu(items) {
         const navElement = this.navElement;
         const menu = MobileUIBuilder.userMenuElement;
         if (!this.wgIsArticle || this.wgIsMainPage) {
 
            navElement.classList.add("mobile-ui-not-article");
         if (menu) {
            const lastItem = menu.lastElementChild;
            if (lastItem) {
                for (const item of items) {
                    const li = this.createUserMenuItemElement(item);
                    menu.insertBefore(li, lastItem);
                }
            }
         }
         }


         const firstGroup = menuElement.getElementsByTagName("ul").item(0);
        return this;
    }
 
    /**
    * @returns {this}
    */
    prebuild() {
        return this
            .setNotArticleClass()
            ;
    }
 
    /**
    * @param {MobileUI} mobileUI
    * @param {HTMLDivElement} leftMenu
    * @returns {this}
    */
    modify(mobileUI, leftMenu) {
         const firstGroup = leftMenu.getElementsByTagName("ul").item(0);
         if (firstGroup) {
         if (firstGroup) {
             firstGroup.style.display = "none";
             firstGroup.classList.add(MobileUIBuilder.hiddenClass);
         }
         }


         const leftGroups = this.menuDataGroups(mobileUI.leftGroups);
         const customLeftGroups = this.menuDataGroups(mobileUI.leftGroups);
         menuElement.prepend(...leftGroups);
         leftMenu.prepend(...customLeftGroups);


         const rightMenuElement = window.document.createElement("div");
         return this;
        rightMenuElement.classList.add(...menuElement.classList, "menu-right");
 
        const rightGroups = this.menuDataGroups(mobileUI.rightGroups);
        rightMenuElement.append(...rightGroups);
        navElement.append(rightMenuElement);
     }
     }


     /**
     /**
     * @param {MobileUI} mobileUI
     * @param {MobileUI} mobileUI
    * @returns {this}
     */
     */
     build(mobileUI) {
     build(mobileUI) {
         const element = this.menuElement;
        if (mobileUI.userMenuItems) {
            this.extendUserMenu(mobileUI.userMenuItems);
        }
 
         const leftMenuContainer = window.document.getElementById("mw-mf-page-left");


         if (element) {
        const leftMenu = /** @type {HTMLDivElement} */ (
             this.modify(mobileUI, element);
            leftMenuContainer.getElementsByClassName(MobileUIBuilder.menuClass).item(0)
             return;
        );
 
         if (MobileUIBuilder.leftMenuElement) {
             this.modify(mobileUI, leftMenu);
             return this;
         }
         }


240行目: 403行目:
             for (const record of mutations) {
             for (const record of mutations) {
                 for (const node of record.addedNodes) {
                 for (const node of record.addedNodes) {
                     const element = this.elementIfTarget(node);
                     const maybeLeftMenu = /** @type {HTMLDivElement} */ (node);
                     if (element) {
                    const { classList } = maybeLeftMenu;
                     if (classList && classList.contains(MobileUIBuilder.menuClass)) {
                         observer.disconnect();
                         observer.disconnect();
                         this.modify(mobileUI, element);
                         this.modify(mobileUI, maybeLeftMenu);
                         return;
                         return;
                     }
                     }
250行目: 414行目:
         });
         });


         observer.observe(this.navElement, { childList: true });
         observer.observe(leftMenuContainer, { childList: true });
 
        return this;
     }
     }
}
}
MobileUIBuilder.rightMenuButtonID = "mobile-ui-right-menu-button";
MobileUIBuilder.menuClass = "menu";
MobileUIBuilder.hiddenClass = "mobile-ui-hidden";
MobileUIBuilder.navigationEnabledClass = "navigation-enabled";
「https://2ch.me/vikipedia/特別:携帯機器差分/13860...14784」から取得