Vikipedia

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

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

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

1,488 バイト除去 、 2020年5月3日 (日) 01:44
細
編集の要約なし
編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
細編集の要約なし
タグ: モバイル編集 モバイルウェブ編集
 
(同じ利用者による、間の6版が非表示)
3行目: 3行目:
/**
/**
  * @typedef MediaWiki
  * @typedef MediaWiki
  * @prop {readonly Map<string, any>} config
  * @prop {readonly Map<string, never>} config
  */
  */


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


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


127行目: 134行目:
                 return [
                 return [
                     this.wgScriptPath,
                     this.wgScriptPath,
                    "/",
                     this.wgFormattedNamespaces[this.wgNamespaceIds.user],
                     this.wgFormattedNamespaces[this.wgNamespaceIds.user],
                     ":",
                     ":",
178行目: 186行目:


         const element = window.document.createElement("a");
         const element = window.document.createElement("a");
        element.text = component.text || href;
         element.id = component.id || "";
         element.id = component.id || "";
         element.classList.add(...[].concat(component.class || []));
         element.classList.add(...[].concat(component.class || []));
186行目: 193行目:
             element.href = encodeURI(href);
             element.href = encodeURI(href);
         }
         }
        const textElement = window.document.createElement("span");
        textElement.textContent = component.text || href;
        element.append(textElement);


         return element;
         return element;
249行目: 260行目:


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


263行目: 265行目:
     * @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");
271行目: 273行目:
     * @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)
281行目: 283行目:


     /**
     /**
     * @returns {HTMLBodyElement | null}
     * @returns {HTMLUListElement | 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() {
     static get userMenuElement() {
         return /** @type {HTMLAnchorElement} */ (
         return window
             MobileUIBuilder
             .document
                .headerElement
            .querySelector(".minerva-user-menu > ul.toggle-list__list");
                .getElementsByClassName("user-button")
                .item(0)
        );
    }
 
    /**
    * @returns {HTMLButtonElement | null}
    */
    static get rightMenuButtonElement() {
        return /** @type {HTMLButtonElement} */ (
            window.document
                .getElementById(MobileUIBuilder.rightMenuButtonID)
        );
     }
     }


331行目: 298行目:


         MobileUIBuilder
         MobileUIBuilder
             .menuContainerElement
             .leftMenuContainerElement
             .classList
             .classList
             .add("mobile-ui-not-article");
             .add("mobile-ui-not-article");
339行目: 306行目:


     /**
     /**
     * @returns {this}
    * @param {UserMenuItem} item
     * @returns {HTMLLIElement}
     */
     */
     assembleRightMenuButton() {
     createUserMenuItemElement(item) {
         if (!this.wgUserId) return this;
         const li = window.document.createElement("li");
         if (!MobileUIBuilder.authenticatedBody) return this;
         li.classList.add("toggle-list-item");
        if (MobileUIBuilder.rightMenuButtonElement) return this;


         const userButton = MobileUIBuilder.userButton;
         const a = window.document.createElement("a");
         if (userButton && !userButton.text.trim()) {
         a.classList.add("toggle-list-item__anchor");
            userButton.parentElement.classList.add(MobileUIBuilder.hiddenClass);
        a.href = [this.wgScriptPath, item.title].join("/");
         }
         li.append(a);


         const button = window.document.createElement("button");
         const outerSpan = window.document.createElement("span");
         button.id = MobileUIBuilder.rightMenuButtonID;
         outerSpan.classList.add("toggle-list-item__icon", "mw-ui-icon", "mw-ui-icon-before", ...item.iconClass);
        button.classList.add(
         a.append(outerSpan);
            "mw-ui-icon",
            "mw-ui-icon-element",
            "mobile-ui-icon-puzzle",
         );


         button.addEventListener("click", function (event) {
         const spacingSpan = window.document.createElement("span");
            event.preventDefault();
        spacingSpan.textContent = " ";
            event.stopPropagation();
        outerSpan.append(spacingSpan);
            this.blur();


            const body = MobileUIBuilder.authenticatedBody;
        const innerSpan = window.document.createElement("span");
            if (!body) return;
        innerSpan.classList.add("toggle-list-item__label");
            if (body.classList.contains(MobileUIBuilder.navigationEnabledClass)) return;
        innerSpan.textContent = item.text;
        outerSpan.append(innerSpan);


            MobileUIBuilder.setRightMenuVisible(true);
        return li;
            body.classList.add(
    }
                MobileUIBuilder.navigationEnabledClass,
                MobileUIBuilder.secondaryNavigationEnabledClass,
            );
        });


         const buttonWrapper = window.document.createElement("div");
    /**
        buttonWrapper.append(button);
    * @param {readonly UserMenuItem[]} items
        MobileUIBuilder.headerElement.append(buttonWrapper);
    * @returns {this}
    */
    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);
                }
            }
        }


         return this;
         return this;
388行目: 360行目:
         return this
         return this
             .setNotArticleClass()
             .setNotArticleClass()
             .assembleRightMenuButton();
             ;
     }
     }


     /**
     /**
     * @param {MobileUI} mobileUI
     * @param {MobileUI} mobileUI
    * @param {HTMLDivElement} leftMenu
     * @returns {this}
     * @returns {this}
     */
     */
     modify(mobileUI) {
     modify(mobileUI, 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) {
415行目: 376行目:
         const customLeftGroups = this.menuDataGroups(mobileUI.leftGroups);
         const customLeftGroups = this.menuDataGroups(mobileUI.leftGroups);
         leftMenu.prepend(...customLeftGroups);
         leftMenu.prepend(...customLeftGroups);
        const rightMenu = window.document.createElement("div");
        rightMenu.classList.add(...leftMenu.classList, MobileUIBuilder.rightMenuClass);
        const rightGroups = this.menuDataGroups(mobileUI.rightGroups);
        rightMenu.append(...rightGroups);
        menuContainer.append(rightMenu);
        leftMenu.classList.add(MobileUIBuilder.leftMenuClass);


         return this;
         return this;
433行目: 385行目:
     */
     */
     build(mobileUI) {
     build(mobileUI) {
         if (MobileUIBuilder.menuElement) {
        if (mobileUI.userMenuItems) {
             this.modify(mobileUI);
            this.extendUserMenu(mobileUI.userMenuItems);
        }
 
        const leftMenuContainer = window.document.getElementById("mw-mf-page-left");
 
        const leftMenu = /** @type {HTMLDivElement} */ (
            leftMenuContainer.getElementsByClassName(MobileUIBuilder.menuClass).item(0)
        );
 
         if (MobileUIBuilder.leftMenuElement) {
             this.modify(mobileUI, leftMenu);
             return this;
             return this;
         }
         }
441行目: 403行目:
             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, maybeLeftMenu);
                         return;
                         return;
                     }
                     }
451行目: 414行目:
         });
         });


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


         return this;
         return this;
459行目: 422行目:
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/特別:携帯機器差分/13897...14784」から取得