Update drawer.js

ui/drawer.js

@@ -1,3 +1,6 @@
+
+import { getSlideToggleOptions } from '/script.js';
+import { slideToggle } from '/lib.js';
 import { extension_settings } from "/scripts/extensions.js";
 import { extensionName, defaultSettings } from "../utils/settings.js";
 import {
@@ -62,70 +65,76 @@ async function loadSettings() {
 export function createDrawer() {
   if ($("#amily2-main-drawer").length > 0) return;
 
-  const amily2DrawerHtml = `
-        <div id="amily2-main-drawer" class="drawer">
-            <div class="drawer-toggle drawer-header" title="Amily2号优化助手">
-                <div id="amily2-drawer-icon" class="drawer-icon fa-solid fa-magic fa-fw closedIcon interactable" tabindex="0"></div>
-            </div>
-            <div id="amily2-drawer-content" class="drawer-content" style="display: none;">
-                <!-- 王座将在此处动态加载 -->
-            </div>
-        </div>
-    `;
+const amily2DrawerHtml = `
+      <div id="amily2-main-drawer" class="drawer">
+          <div id="amily2_drawer_icon" class="drawer-toggle drawer-header closedIcon interactable" title="Amily2号优化助手" tabindex="0">
+              <i class="drawer-icon fa-solid fa-magic fa-fw"></i>
+          </div>
+          <div id="amily2_drawer_content" class="drawer-content closedDrawer" style="display: none;">
+              <!-- 王座将在此处动态加载 -->
+          </div>
+      </div>
+  `;
   $("#sys-settings-button").after(amily2DrawerHtml);
 
 
-  $(document).on(
-    "mousedown",
-    "#amily2-main-drawer .drawer-toggle",
-    async function (e) {
-      e.preventDefault(); 
-      e.stopPropagation(); 
+$(document).on(
+  "mousedown",
+  "#amily2_drawer_icon", 
+  async function (e) {
+    e.preventDefault();
+    e.stopPropagation();
 
-      const drawerIcon = $("#amily2-drawer-icon");
-      const contentPanel = $("#amily2-drawer-content");
-      const isOpening = drawerIcon.hasClass("closedIcon");
+    const drawerIcon = $(this);
+    const contentPanel = $("#amily2_drawer_content");
 
 
-      $(".openIcon")
-        .not(drawerIcon)
-        .removeClass("openIcon")
-        .addClass("closedIcon");
-      $(".openDrawer")
-        .not(contentPanel)
-        .removeClass("openDrawer")
-        .slideUp({ duration: 200, easing: "swing" });
+
+    $('.openDrawer').not(contentPanel).not('.pinnedOpen').addClass('resizing').each((_, el) => {
+        slideToggle(el, { 
+            ...getSlideToggleOptions(), 
+            onAnimationEnd: function (el) {
+                el.closest('.drawer-content').classList.remove('resizing');
+            },
+        });
+    });
+
+    $('.openIcon').not(drawerIcon).not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
+    $('.openDrawer').not(contentPanel).not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
+
+    drawerIcon.toggleClass('closedIcon openIcon');
+    contentPanel.toggleClass('closedDrawer openDrawer');
 
 
-      drawerIcon.toggleClass("closedIcon openIcon");
-      contentPanel.toggleClass("openDrawer");
-      contentPanel.slideToggle({
-        duration: 200,
-        easing: "swing",
-      });
+    contentPanel.addClass('resizing').each((_, el) => {
+        slideToggle(el, {
+            ...getSlideToggleOptions(),
+            onAnimationEnd: function (el) {
+                el.closest('.drawer-content').classList.remove('resizing');
+            },
+        });
+    });
 
 
-      const isInitialized = contentPanel.data("initialized");
-      if (isOpening && !isInitialized) {
-        try {
-          const modalContent = await $.get(
-            `${extensionFolderPath}/assets/amily2-modal.html`,
-          );
-          contentPanel.html(modalContent);
-          await loadSettings();
-          bindModalEvents();
-          contentPanel.data("initialized", true);
-
-          console.log("[Amily2号-建设部] 宫殿内室已根据最高指令激活。");
-        } catch (error) {
-
-          console.error("[Amily2号-建设部] 加载宫殿内部HTML失败:", error);
-          contentPanel.html(
-            '<p style="color:red; padding: 20px;">紧急报告：无法加载Amily2号府邸内饰。</p>',
-          );
-        }
+    const isInitialized = contentPanel.data("initialized");
+    if (drawerIcon.hasClass("openIcon") && !isInitialized) {
+      try {
+        const extensionFolderPath = `scripts/extensions/third-party/${extensionName}`;
+        const modalContent = await $.get(
+          `${extensionFolderPath}/assets/amily2-modal.html`,
+        );
+        contentPanel.html(modalContent);
+        await loadSettings(); 
+        bindModalEvents();
+        contentPanel.data("initialized", true);
+        console.log("[Amily2号-建设部] 宫殿内室已根据最高指令激活。");
+      } catch (error) {
+        console.error("[Amily2号-建设部] 加载宫殿内部HTML失败:", error);
+        contentPanel.html(
+          '<p style="color:red; padding: 20px;">紧急报告：无法加载Amily2号府邸内饰。</p>',
+        );
       }
-
-    },
-  );
+    }
+  },
+);
 }