function resolveCheckbox(container: HTMLElement): HTMLElement
+ function resolveCheckbox(container: HTMLElement, legacy?: boolean): HTMLElement
将把此 HTML 元素下的所有 label[data-checkbox] 元素解析为复选框，[data-id] 为复选框元素的 id，包含
- [data-checked] 时复选框默认选中。
[data-checked] 时复选框默认选中。
+
当该元素无子元素时，[data-type] 同上述参数中的 type?: string，[data-label] 同上述参数中的
label?: string。
当该元素有子元素时，解析为图片复选框，class 为 checked、unchecked 的子元素将分别在选中与未选中时显示。
+ 是否开启兼容模式，启用兼容模式时将试图匹配 input[type="checkbox"] 标签，与其周围的 label，将其转换为统一样式的复选框。
+
-<div id="checkbox-sample"> +<div id="checkbox-sample"> <label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label> <label data-checkbox data-checked data-label="Checkbox Regular"></label> <label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"></label> @@ -73,10 +78,12 @@ <code class="checked">Checked</code> <code class="unchecked">Unchecked</code> </label> + <input id="check-status" type="checkbox"/> + <label for="check-status">Label for Status</label> </div> <script type="text/javascript"> - window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample")); + window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true); </script>@@ -86,8 +93,10 @@\ No newline at end of file diff --git a/lib/ui/checkbox.js b/lib/ui/checkbox.js index 98a91db..0322324 100644 --- a/lib/ui/checkbox.js +++ b/lib/ui/checkbox.js @@ -49,7 +49,40 @@ function createCheckbox(opts) { return container; } -function resolveCheckbox(container) { +function resolveCheckbox(container, legacy) { + if (legacy) { + const checks = container.querySelectorAll('input[type="checkbox"]'); + for (let chk of checks) { + const id = chk.id; + let label; + if (id != null) { + label = container.querySelector(`label[for="${id}"]`); + } + if (label == null) { + const e = chk.nextElementSibling; + if (e != null && e.tagName === 'LABEL') { + label = e; + } + } + if (label == null) { + const e = chk.previousElementSibling; + if (e != null && e.tagName === 'LABEL') { + label = e; + } + } + let text; + if (label == null) { + label = document.createElement('label'); + chk.parentElement.insertBefore(label, chk); + } else { + text = label.innerText; + } + label.className = 'checkbox-wrapper'; + label.replaceChildren(); + fillCheckbox(label, 'fa-regular', text); + label.insertBefore(chk, label.firstChild); + } + } const boxes = container.querySelectorAll('label[data-checkbox]'); for (let box of boxes) { if (!box.classList.contains('checkbox-wrapper')) { diff --git a/lib/ui/icon.html b/lib/ui/icon.html index f02228e..8b15233 100644 --- a/lib/ui/icon.html +++ b/lib/ui/icon.html @@ -24,9 +24,9 @@ 同上述CheckedUnchecked+ +id: string，[data-type]同上述type: string+
示例
--<div id="icon-sample"> +<div id="icon-sample"> <svg data-id="address-card" data-type="fa-regular"></svg> <svg data-id="user-edit" data-type="fa-light"></svg> <svg data-id="frog" data-type="fa-solid"></svg> diff --git a/lib/ui/tooltip.html b/lib/ui/tooltip.html index a9e6665..17c3d70 100644 --- a/lib/ui/tooltip.html +++ b/lib/ui/tooltip.html @@ -20,9 +20,9 @@给此元素下的所有含有 title 属性的子元素设置成统一样式的 tooltip
+
示例
--<div id="tooltip-sample"> +<div id="tooltip-sample"> <blockquote title="From MDN Website">To send an HTTP request, create an XMLHttpRequest object, open a URL, and send the request. After the transaction completes, the object will contain useful information such as the response body and the HTTP status of the result.</blockquote> diff --git a/lib/utility/cookie.html b/lib/utility/cookie.html new file mode 100644 index 0000000..06fb465 --- /dev/null +++ b/lib/utility/cookie.html @@ -0,0 +1,40 @@ ++\ No newline at end of file diff --git a/lib/utility/lgres.d.ts b/lib/utility/lgres.d.ts index ca946af..2ed7f99 100644 --- a/lib/utility/lgres.d.ts +++ b/lib/utility/lgres.d.ts @@ -3,7 +3,11 @@ interface LgresOptions { callback?: (result: any) => void } -export function init(dom?: HTMLElement, options?: LgresOptions): Promisecookie
+
++ cookie 操作工具类：获取、设置、删除。 +
+getCookie
+function getCookie(name: string): string+name: string
++ 待获取的 cookie 关键字 +
+setCookie
+function setCookie(name: string, value: string, expireDays?: Number): void+name: string
++ 待设置的 cookie 关键字 +
+value: string
++ 待设置的值 +
+expireDays?: Number
++ 有效期天数 +
+deleteCookie
+function deleteCookie(name: string): void+name: string
++ 待删除的 cookie 关键字 +
+
+用法
+const cookie = window["lib-utility"]; + +cookie.getCookie('user_id'); +cookie.setCookie('user_id', 'guest'); +cookie.deleteCookie('user_id');++interface LanguageResource { + r(key: string, defaultValue?: any): any +} + +export function init(dom?: HTMLElement, options?: LgresOptions): Promise export function r(key: string, defaultValue?: any): any export const lang: { get current(): string, diff --git a/lib/utility/lgres.html b/lib/utility/lgres.html new file mode 100644 index 0000000..d1dd8dd --- /dev/null +++ b/lib/utility/lgres.html @@ -0,0 +1,74 @@ + +\ No newline at end of file diff --git a/lib/utility/lgres.js b/lib/utility/lgres.js index 4daaf19..8ea6aa1 100644 --- a/lib/utility/lgres.js +++ b/lib/utility/lgres.js @@ -51,19 +51,25 @@ async function doRefreshLgres(template) { const r = await get(`language/${lgid}${template}`); const dict = await r.json(); localStorage.setItem(getStorageKey(lgid), JSON.stringify(dict)); - cache = dict; return dict; } async function refreshLgres(template, lgres) { if (lgres == null || typeof consts === 'undefined') { - return await doRefreshLgres(template); + lgres = await doRefreshLgres(template); } const ver = Number(consts.resver); if (isNaN(lgres.ver) || isNaN(ver) || ver > lgres.ver) { console.log(`found new language res version: ${lgres.ver} => ${ver}`); - return await doRefreshLgres(template); + lgres = await doRefreshLgres(template); } + Object.defineProperty(lgres, 'r', { + writable: false, + configurable: false, + value: function (key, defaultValue) { + return getLanguage(this, key, defaultValue); + } + }); cache = lgres; return lgres; } diff --git a/lib/utility/request.d.ts b/lib/utility/request.d.ts index 1a20447..9a3d1c1 100644 --- a/lib/utility/request.d.ts +++ b/lib/utility/request.d.ts @@ -9,4 +9,4 @@ interface RequestOptions { export function get(url: string, options?: RequestOptions): Promiselgres
+
++ 语言资源工具类，用以设置页面以及脚本中的多语言。 +
+r
+function r(key: string, defaultValue?: any): any+key: string
++ 语言资源的关键字 +
+defaultValue?: any
++ 资源的默认值，如无法获取该语言资源，则返回该值 +
+lang
+const lang : {}+get current(): string
++ 返回当前语言 id +
+get unknownError(): string
++ 未知错误的语言资源，默认为
+'An unknown error occurred, please contact the administrator.'+get savedSuccessfully(): string
++ 保存成功的语言资源，默认为
+'Saved successfully.'+init
+function init(dom?: HTMLElement, options?: LgresOptions): Promise<LanguageResource>+dom?: HTMLElement
++ 待处理的元素，为空时处理整个页面 +
+options?: LgresOptions
++ 初始化参数，结构为 +
interface LgresOptions { + template?: string, + callback?: (result: any) => void +}+ +template?: string
++ 语言资源文件的后缀，资源文件 url 为
+`language/${lgid}${template}`+callback?: (result: any) => void
++ 资源初始化后的回调函数，可能在 DOM 加载完成之前触发。 +
+return: Promise<LanguageResource>
++ 返回一个包含资源结果的 Promise，将在 DOM 加载完成之后触发。 +
+
LanguageResource结构为 +interface LanguageResource { + r(key: string, defaultValue?: any): any +}+ +
+用法
+const lgres = window["lib-utility"]; + +lgres.init(document.body, { + template: '/res.json', + callback: (res) => document.title = res.r('title', 'Default Title') +}).then(res => { + document.querySelector('#header').innerText = res.r('header', 'My Header'); + const msg = lgres.lang.unknownError; + document.querySelector('#message').innerText = lgres.lang.unknownError; +});+export function post(url: string, data?: BodyInit | null, options?: RequestOptions): Promise -export function upload(url: string, data: FormData, options?: RequestOptions): Promise \ No newline at end of file +export function upload(url: string, data: FormData, options?: RequestOptions): Promise \ No newline at end of file diff --git a/lib/utility/request.html b/lib/utility/request.html new file mode 100644 index 0000000..1c9539f --- /dev/null +++ b/lib/utility/request.html @@ -0,0 +1,37 @@ + +\ No newline at end of file diff --git a/style.css b/style.css index a72f5fc..6a017ff 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ :root { - font-family: 'Franklin Gothic Book', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: 'Segoe UI Variable Display', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-size: 1.125rem; line-height: 1.5; font-weight: 400;request
+
++ 网络请求工具类，可以实现比较常见的一些请求操作。 +
+get
+function get(url: string, options?: RequestOptions): Promise<Response>+url: string
++ url 地址 +
+options?: RequestOptions
++ 请求的配置参数，结构为 +
interface RequestOptions { + method?: string; + accept?: string; + contentType?: string; + customerHeaders?: { [key: string]: string }; + signal?: AbortSignal | null; + progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent<XMLHttpRequestEventTarget>) => any +}+ +method?: string
++ 请求类型，默认为 GET 或 POST +
+accept?: string
++ Accept 请求头的值 +
+contentType?: string
++ Content-Type 请求头的值 +
+