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

← 古い編集新しい編集 →

@@ 2行目: / 2行目: @@
 /**
-  * @typedef {import("jquery")} _JQueryStatic
+  * @typedef MediaWiki
+ * @prop {readonly Map<string, any>} config
   */
@@ 32行目: / 33行目: @@
   * @typedef MobileUI
   * @prop {MenuDataGroup[]} leftGroups
- * @prop {MenuDataGroup} leftShortURLGroup
   * @prop {MenuDataGroup[]} rightGroups
   */
@@ 38行目: / 38行目: @@
 class MobileUIBuilder {
      /**
-      * @param {any} mw
+      * @param {MediaWiki} mw
-     * @param {JQueryStatic} $
       */
-     constructor(mw, $) {
+     constructor(mw) {
-         this.mw = mw;
+         // this.mw = mw;
-        this.$ = $;
          /**
@@ 59行目: / 57行目: @@
           */
          this.wgArticleId = mw.config.get("wgArticleId");
+        /**
+         * @type {boolean}
+         */
+        this.wgIsArticle = mw.config.get("wgIsArticle");
+        /**
+         * @type {boolean}
+         */
+        this.wgIsMainPage = mw.config.get("wgIsMainPage");
      }
@@ 84行目: / 92行目: @@
      /**
       * @param {MenuDataItemComponent} component
-      * @returns {JQuery<HTMLElement>}
+      * @returns {HTMLAnchorElement}
       */
      menuDataItemComponent(component) {
          const href = this.hrefForMenuDataItemComponent(component);
-         return this
+         const element = window.document.createElement("a");
-            .$("<a>")
+        element.text = component.text || href;
-            .text(component.text || href)
+        element.href = encodeURI(href);
-            .attr("href", href)
+        element.id = component.id || "";
-            .attr("id", component.id)
+        element.classList.add(...[].concat(component.class));
-            .addClass(component.class)
+        element.setAttribute("data-event-name", component.dataEventName || "");
-            .attr("data-event-name", component.dataEventName);
+        return element;
      }
      /**
       * @param {MenuDataItem} item
-      * @returns {JQuery<HTMLElement>}
+      * @returns {HTMLLIElement}
       */
      menuDataItem(item) {
          /**
-          * @type {JQuery<HTMLElement>[]}
+          * @type {HTMLAnchorElement[]}
           */
          const children = [];
@@ 112行目: / 121行目: @@
          }
-         return this
+         const element = window.document.createElement("li");
-            .$("<li>")
+        element.id = item.id || "";
-            .attr("id", item.id)
+        element.classList.add(...[].concat(item.class));
-            .addClass(item.class)
+        element.append(...children);
-            .append(children);
+        return element;
      }
      /**
       * @param {MenuDataGroup} group
-      * @returns {JQuery<HTMLElement>}
+      * @returns {HTMLUListElement}
       */
      menuDataGroup(group) {
          /**
-          * @type {JQuery<HTMLElement>[]}
+          * @type {HTMLLIElement[]}
           */
          const children = [];
@@ 131行目: / 141行目: @@
          for (const item of group.items) {
              children.push(this.menuDataItem(item));
+            Function.call
          }
-         return this
+         const element = window.document.createElement("ul");
-            .$("<ul>")
+        element.id = group.id || "";
-            .attr("id", group.id)
+        element.classList.add(...[].concat(group.class));
-            .addClass(group.class)
+        element.append(...children);
-            .append(children);
+        return element;
      }
      /**
       * @param {MenuDataGroup[]} groups
-      * @returns {JQuery<HTMLElement>[]}
+      * @returns {HTMLUListElement[]}
       */
      menuDataGroups(groups) {
          /**
-          * @type {JQuery<HTMLElement>[]}
+          * @type {HTMLUListElement[]}
           */
          const children = [];
@@ 180行目: / 192行目: @@
      /**
-      * @returns {HTMLElement | null}
+      * @returns {HTMLDivElement | null}
       */
      get menuElement() {
-         return /** @type {HTMLElement} */ (
+         return /** @type {HTMLDivElement} */ (
              this.navElement.getElementsByClassName("menu").item(0)
          );
@@ 193行目: / 205行目: @@
       */
      modify(mobileUI, menuElement) {
+        const navElement = this.navElement;
+        if (this.wgIsArticle && !this.wgIsMainPage) {
+            navElement.classList.add("mobile-ui-article");
+        }
+        const firstGroup = menuElement.getElementsByTagName("ul").item(0);
+        if (firstGroup) {
+            firstGroup.style.display = "none";
+        }
          const leftGroups = this.menuDataGroups(mobileUI.leftGroups);
-         const rightGroups = [];
+         menuElement.prepend(...leftGroups);
-        const jqMenu = this.$(menuElement);
-        jqMenu.find("ul").first().remove();
-        jqMenu.prepend(leftGroups);
-         this
+         const rightMenuElement = window.document.createElement("div");
-            .$("<div>")
+        rightMenuElement.classList.add(...menuElement.classList, "menu-right");
-            .addClass(["menu", "menu-right", "view-border-box"])
-            .append(rightGroups)
-            .insertAfter(jqMenu);
-            this
+        const rightGroups = this.menuDataGroups(mobileUI.rightGroups);
-            .$(this.navElement)
+        rightMenuElement.append(...rightGroups);
-            .attr("data-article-id", this.wgArticleId);
+        navElement.append(rightMenuElement);
      }