From 7e50b901c9edd59bfac26ec90138522356b6a39b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Sat, 7 Oct 2023 01:53:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4css,=20=E5=90=88=E5=B9=B6?=
 =?UTF-8?q?=E4=B8=BAjs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/weigets.js | 92 +++++++++++++++++++++++------------------------
 1 file changed, 45 insertions(+), 47 deletions(-)

diff --git a/public/weigets.js b/public/weigets.js
index 248df80..2cdcdd0 100644
--- a/public/weigets.js
+++ b/public/weigets.js
@@ -1,10 +1,11 @@
-export function createElement({ innerText, textContent, onclick, onchange, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
+export function createElement({ innerText, textContent, onclick, onchange, onkeydown, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
     const element = document.createElement(tagName)
     for (const key in attributes) element.setAttribute(key, attributes[key])
     if (style) Object.assign(element.style, style)
     if (classList.length) element.classList.add(...classList)
     if (textContent) element.textContent = textContent
     if (innerText) element.innerText = innerText
+    if (onkeydown) element.onkeydown = onkeydown
     if (onchange) element.onchange = onchange
     if (onclick) element.onclick = onclick
     if (dataset) Object.assign(element.dataset, dataset)
@@ -40,61 +41,58 @@ export function Avatar(options) {
 
 // 弹出窗口, 高斯模糊背景, 进入离开动画过渡
 export function Dialog(options) {
-    const element = createElement({}, 'div')
-    const content = createElement(options)
-    element.tabIndex = 0  // 使元素可以获得焦点
-    element.style.cssText = `
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 1000;
-        width: 100%;
-        height: 100%;
-        backdrop-filter: blur(5px);
-        duration: 0.5s;
-        transition: all 0.5s;
-    `
-    content.classList.add('dialog')
-    content.style.cssText = `
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: #fff;
-        border-radius: 150px;
-        box-shadow: 0 0 1em #ccc;
-        overflow: hidden;
-        display: flex;
-        justify-content: center;
-    `
-    element.appendChild(content)
-    // 点击空白处关闭
-    element.onclick = async event => {
-        if (event.target === element) {
-            await element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
-            element.remove()
-        }
-    }
-    // 按下 ESC 关闭
-    element.onkeydown = async event => {
-        if (event.key === 'Escape') {
-            await element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
-            element.remove()
-        }
-    }
+    const element = createElement({
+        tabIndex: 0,
+        style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            zIndex: 1000,
+            width: '100%',
+            height: '100%',
+            backdropFilter: 'blur(5px)',
+            duration: '0.5s',
+            transition: 'all 0.5s'
+        },
+        onclick: async event => {
+            await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
+            await event.target.remove()
+        },
+        onkeydown: async event => {
+            if (event.key !== 'Escape') return
+            await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
+            await event.target.remove()
+        },
+        children: [
+            createElement({
+                ...options,
+                style: {
+                    position: 'fixed',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    backgroundColor: '#fff',
+                    borderRadius: '150px',
+                    boxShadow: '0 0 1em #ccc',
+                    overflow: 'hidden',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    ...options.style,
+                }
+            })
+        ]
+    })
     // 显示时自动聚焦
-    const observer = new MutationObserver((mutationsList) => {
+    const observer = new MutationObserver(mutationsList => {
         for (const mutation of mutationsList) {
             if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                 element.focus()
                 element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
-                return
+                return observer.disconnect()
             }
         }
     })
-    // 监听 Dialog 元素的插入, 在 Dialog 被移除时停止监听
     observer.observe(document.body, { childList: true, subtree: true })
-    element.onremove = () => observer.disconnect()
     return element
 }