From b04917109d0db31e8a4da66d635f7a148be0dbc0 Mon Sep 17 00:00:00 2001 From: Tsanie Lily Date: Fri, 31 Mar 2023 09:10:13 +0800 Subject: [PATCH] complete `strings` document, adjust structure --- {lib/fonts => fonts}/fa-brands.svg | 0 {lib/fonts => fonts}/fa-light.svg | 0 {lib/fonts => fonts}/fa-regular.svg | 0 {lib/fonts => fonts}/fa-solid.svg | 0 lib/ui/checkbox.d.ts | 2 +- lib/ui/checkbox.html | 6 +-- lib/ui/checkbox.js | 27 ++++++++++--- lib/ui/icon.js | 2 +- lib/ui/tooltip.d.ts | 2 +- lib/ui/tooltip.html | 6 +-- lib/ui/tooltip.js | 3 ++ lib/utility/strings.html | 61 +++++++++++++++++++++++++++++ 12 files changed, 94 insertions(+), 15 deletions(-) rename {lib/fonts => fonts}/fa-brands.svg (100%) rename {lib/fonts => fonts}/fa-light.svg (100%) rename {lib/fonts => fonts}/fa-regular.svg (100%) rename {lib/fonts => fonts}/fa-solid.svg (100%) create mode 100644 lib/utility/strings.html diff --git a/lib/fonts/fa-brands.svg b/fonts/fa-brands.svg similarity index 100% rename from lib/fonts/fa-brands.svg rename to fonts/fa-brands.svg diff --git a/lib/fonts/fa-light.svg b/fonts/fa-light.svg similarity index 100% rename from lib/fonts/fa-light.svg rename to fonts/fa-light.svg diff --git a/lib/fonts/fa-regular.svg b/fonts/fa-regular.svg similarity index 100% rename from lib/fonts/fa-regular.svg rename to fonts/fa-regular.svg diff --git a/lib/fonts/fa-solid.svg b/fonts/fa-solid.svg similarity index 100% rename from lib/fonts/fa-solid.svg rename to fonts/fa-solid.svg diff --git a/lib/ui/checkbox.d.ts b/lib/ui/checkbox.d.ts index c7514e2..52f2e6d 100644 --- a/lib/ui/checkbox.d.ts +++ b/lib/ui/checkbox.d.ts @@ -10,4 +10,4 @@ interface CheckboxOptions { } export function createCheckbox(opts?: CheckboxOptions): HTMLElement -export function resolveCheckbox(container: HTMLElement, legacy?: boolean): HTMLElement \ No newline at end of file +export function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement \ No newline at end of file diff --git a/lib/ui/checkbox.html b/lib/ui/checkbox.html index a221420..a6ab2a4 100644 --- a/lib/ui/checkbox.html +++ b/lib/ui/checkbox.html @@ -54,10 +54,10 @@ 复选框改变时触发的事件

resolveCheckbox

- function resolveCheckbox(container: HTMLElement, legacy?: boolean): HTMLElement -

container: HTMLElement

+ function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement +

container?: HTMLElement

- 将把此 HTML 元素下的所有 label[data-checkbox] 元素解析为复选框，[data-id] 为复选框元素的 id，包含 + 将把此 HTML 元素，为 null 则把 document.body 下的所有 label[data-checkbox] 元素解析为复选框，[data-id] 为复选框元素的 id，包含 [data-checked] 时复选框默认选中。

当该元素无子元素时，[data-type] 同上述参数中的 type?: string，[data-label] 同上述参数中的 diff --git a/lib/ui/checkbox.js b/lib/ui/checkbox.js index 0322324..48a11c5 100644 --- a/lib/ui/checkbox.js +++ b/lib/ui/checkbox.js @@ -50,27 +50,42 @@ function createCheckbox(opts) { } function resolveCheckbox(container, legacy) { + if (container == null) { + container = document.body; + } if (legacy) { const checks = container.querySelectorAll('input[type="checkbox"]'); for (let chk of checks) { + if (chk.parentElement.querySelector('layer.check-box-inner') != null) { + continue; + } const id = chk.id; - let label; + let label, text; 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 (e != null) { + if (e.tagName === 'LABEL') { + label = e; + } else if (e.tagName === 'SPAN' && e.getAttribute('data-lgid') != null) { + text = e.innerText; + e.style.display = 'none'; + } } } if (label == null) { const e = chk.previousElementSibling; - if (e != null && e.tagName === 'LABEL') { - label = e; + if (e != null) { + if (e.tagName === 'LABEL') { + label = e; + } else if (text == null && e.tagName === 'SPAN' && e.getAttribute('data-lgid') != null) { + text = e.innerText; + e.style.display = 'none'; + } } } - let text; if (label == null) { label = document.createElement('label'); chk.parentElement.insertBefore(label, chk); diff --git a/lib/ui/icon.js b/lib/ui/icon.js index c308342..ab56660 100644 --- a/lib/ui/icon.js +++ b/lib/ui/icon.js @@ -5,7 +5,7 @@ function createUse(type, id) { const path = c.path || ''; const ver = c.resver == null ? '' : `?${c.resver}`; const use = document.createElementNS(svgns, 'use'); - use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${path}lib/fonts/${type}.svg${ver}#${id}`); + use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${path}fonts/${type}.svg${ver}#${id}`); return use; } diff --git a/lib/ui/tooltip.d.ts b/lib/ui/tooltip.d.ts index ea024d7..aa43040 100644 --- a/lib/ui/tooltip.d.ts +++ b/lib/ui/tooltip.d.ts @@ -1,2 +1,2 @@ export function setTooltip(container: HTMLElement, content: string | HTMLElement): void -export function resolveTooltip(container: HTMLElement): HTMLElement \ No newline at end of file +export function resolveTooltip(container?: HTMLElement): HTMLElement \ No newline at end of file diff --git a/lib/ui/tooltip.html b/lib/ui/tooltip.html index 17c3d70..91ed355 100644 --- a/lib/ui/tooltip.html +++ b/lib/ui/tooltip.html @@ -15,10 +15,10 @@ 要设置的 tooltip 内容，允许为字符串或者 HTML 元素

resolveTooltip

- function resolveTooltip(container: HTMLElement): HTMLElement -

container: HTMLElement

+ function resolveTooltip(container?: HTMLElement): HTMLElement +

container?: HTMLElement

- 给此元素下的所有含有 title 属性的子元素设置成统一样式的 tooltip + 给此元素，为 null 则把 document.body 下的所有含有 title 属性的子元素设置成统一样式的 tooltip

示例

diff --git a/lib/ui/tooltip.js b/lib/ui/tooltip.js index 5b7a344..2fc8b75 100644 --- a/lib/ui/tooltip.js +++ b/lib/ui/tooltip.js @@ -49,6 +49,9 @@ function setTooltip(container, content) { } function resolveTooltip(container) { + if (container == null) { + container = document.body; + } const tips = container.querySelectorAll('[title]'); for (let tip of tips) { const title = tip.getAttribute('title'); diff --git a/lib/utility/strings.html b/lib/utility/strings.html new file mode 100644 index 0000000..f08923b --- /dev/null +++ b/lib/utility/strings.html @@ -0,0 +1,61 @@ +
+

strings

+
+

+ 字符串操作工具类。 +

+

nullOrEmpty

+ function nullOrEmpty(s?: string | any | null): boolean +

s?: string | any | null

+

+ 待判断的对象，非字符串或者长度为 0 则返回 true +

+

contains

+ function contains(s: string, key: string | any, ignoreCase?: boolean): boolean +

s: string

+

+ 待判断的字符串 +

+

key: string | any

+

+ 检查字符串中是否含有该值，非字符串会先转换为字符串后再进行判断 +

+

ignoreCase?: boolean

+

+ 判断时是否忽略大小写 +

+

endsWith

+ function endsWith(s: string, suffix: string): boolean +

s: string

+

+ 待判断的字符串 +

+

suffix: string

+

+ 检查字符串是否以该字符串结尾 +

+

padStart

+ function padStart(s: string, num: Number, char: string): boolean +

s: string

+

+ 基础字符串 +

+

num: Number

+

+ 对齐字符个数 +

+

char: string

+

+ 用此字符串填充，使得字符串对齐，默认为 ' ' +

+
+

用法

+ 
const util = window["lib-utility"];
+
+let s = 'test string';
+console.log(util.nullOrEmpty(s));   // false
+console.log(util.contains(s, 'abc'));    // true
+console.log(util.endsWith(s, 'string'));    // true
+s = util.padStart(s, 16, '0');
+// '00000test string'
+
\ No newline at end of file