adjustment

lib/ui/checkbox.js

@@ -29,7 +29,7 @@ function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, char
     }
 }
 
-function createRadiobox(opts = {}) {
+export function createRadiobox(opts = {}) {
     const container = createElement('label', 'ui-check-wrapper ui-radio-wrapper',
         createElement('input', input => {
             input.setAttribute('type', 'radio');
@@ -56,7 +56,7 @@ function createRadiobox(opts = {}) {
     return container;
 }
 
-function createCheckbox(opts = {}) {
+export function createCheckbox(opts = {}) {
     const container = createElement('label', 'ui-check-wrapper',
         createElement('input', input => {
             input.setAttribute('type', 'checkbox');
@@ -97,7 +97,7 @@ function createCheckbox(opts = {}) {
     return container;
 }
 
-function resolveCheckbox(container = document.body, legacy) {
+export function resolveCheckbox(container = document.body, legacy) {
     if (legacy) {
         const checks = container.querySelectorAll('input[type="checkbox"]');
         for (let chk of checks) {
@@ -177,10 +177,4 @@ function resolveCheckbox(container = document.body, legacy) {
         box.insertBefore(input, box.firstChild);
     }
     return container;
-}
-
-export {
-    createCheckbox,
-    resolveCheckbox,
-    createRadiobox
 }

lib/ui/css/media.scss

@@ -8,9 +8,9 @@
     align-items: center;
 
     >svg {
-        width: 26px;
-        height: 26px;
-        fill: var(--link-color);
+        width: 20px;
+        height: 20px;
+        fill: var(--secondary-link-color);
     }
 
     >a {

lib/ui/css/variables/definition.scss

@@ -27,6 +27,7 @@
     --title-bg-color: rgb(68, 114, 196);
     --hover-bg-color: #eee;
     --link-color: #1890ff;
+    --secondary-link-color: #1d9ac0;
     --primary-color: rgb(123, 28, 33);
     --loading-bg-color: hsla(0, 0%, 100%, .4);
     --loading-fore-color: rgba(0, 0, 0, .2);

lib/ui/icon.js

@@ -9,14 +9,14 @@ function createUse(type, id) {
     return use;
 }
 
-function changeIcon(svg, type, id) {
+export function changeIcon(svg, type, id) {
     if (svg instanceof SVGElement) {
         svg.replaceChildren(createUse(type, id));
     }
     return svg;
 }
 
-function createIcon(type, id, style) {
+export function createIcon(type, id, style) {
     const svg = document.createElementNS(svgns, 'svg');
     svg.appendChild(createUse(type, id));
     if (style != null) {
@@ -27,7 +27,7 @@ function createIcon(type, id, style) {
     return svg;
 }
 
-function resolveIcon(container) {
+export function resolveIcon(container) {
     const svgs = container.querySelectorAll('svg[data-id]');
     for (let icon of svgs) {
         const type = icon.dataset.type;
@@ -37,10 +37,4 @@ function resolveIcon(container) {
         icon.removeAttribute('data-id');
     }
     return container;
-}
-
-export {
-    createIcon,
-    changeIcon,
-    resolveIcon
 }

lib/ui/media.d.ts

@@ -19,31 +19,8 @@ export function createAudio(mime: string, url: string): HTMLAudioElement | HTMLD
 export function createVideo(url: string): HTMLVideoElement
 
 /**
- * 创建一个 pdf 文件元素
- * @param url pdf 文件 url
- */
-export function createPdf(url: string): HTMLDivElement
-
-/**
- * 创建一个 smil 文件元素
- * @param url smil 文件 url
- */
-export function createSmilefile(url: string): HTMLDivElement
-
-/**
- * 创建一个 vcard 文件元素
- * @param url vcard 文件 url
- */
-export function createVcard(url: string): HTMLDivElement
-
-/**
- * 创建一个不支持的视频文件元素
- * @param url 视频 url
- */
-export function createVideofile(url: string): HTMLDivElement
-
-/**
- * 创建一个通用文件元素
+ * 创建一个文件元素
  * @param url 文件 url
+ * @param icon 图标，默认为 `file-alt`
  */
-export function createFile(url: string): HTMLDivElement
+export function createFile(url: string, icon?: string): HTMLDivElement

lib/ui/media.js

@@ -74,18 +74,18 @@ export function createAudio(mime, url) {
         let timer;
         return createElement('div', 'ui-media-audio',
             createElement('button', button => {
+                button.className = 'play';
                 button.addEventListener('click', () => {
                     if (context != null) {
                         clearInterval(timer);
                         context.close();
                         context = null;
                         timestamp.textContent = '00:00 / 00:00';
+                        button.className = 'play';
                         button.replaceChildren(createIcon('fa-solid', 'play'));
                         return;
                     }
-                    get(url, {
-                        accept: mime
-                    })
+                    get(url, { accept: mime })
                         .then(r => r.blob())
                         .then(r => readBlob(r))
                         .then(r => playAmrArray(r))
@@ -93,10 +93,12 @@ export function createAudio(mime, url) {
                             context = null;
                             clearInterval(timer);
                             timestamp.textContent = '00:00 / ' + getTimeLabel(ctx.duration);
+                            button.className = 'play';
                             button.replaceChildren(createIcon('fa-solid', 'play'));
                         }))
                         .then(ctx => {
                             context = ctx;
+                            button.className = 'stop';
                             button.replaceChildren(createIcon('fa-solid', 'stop'));
                             const total = getTimeLabel(ctx.duration);
                             const refresh = () => timestamp.textContent = getTimeLabel(ctx.currentTime) + ' / ' + total;
@@ -128,8 +130,8 @@ export function createVideo(url) {
     });
 }
 
-function createFileElement(url, icon) {
-    return createElement('div', 'ui-media-file',
+export function createFile(url, icon = 'file-alt') {
+    return createElement('div', `ui-media-file ${icon}`,
         createIcon('fa-solid', icon),
         createElement('a', a => {
             a.target = '_blank';
@@ -137,24 +139,4 @@ function createFileElement(url, icon) {
             a.innerText = 'Click here to view the file';
         })
     );
-}
-
-export function createPdf(url) {
-    return createFileElement(url, 'file-pdf');
-}
-
-export function createSmilefile(url) {
-    return createFileElement(url, 'smile');
-}
-
-export function createVcard(url) {
-    return createFileElement(url, 'id-card');
-}
-
-export function createVideofile(url) {
-    return createFileElement(url, 'photo-video');
-}
-
-export function createFile(url) {
-    return createFileElement(url, 'file-alt');
 }