From 29209a3a00acd98641076c9c8a62380420105eb2 Mon Sep 17 00:00:00 2001 From: Tsanie Date: Thu, 27 Jul 2023 10:03:53 +0800 Subject: [PATCH] adjustment --- lib/app/communications/contact.js | 8 +- lib/app/communications/customer.js | 148 ++++++++++++++++++++------- lib/app/communications/internal.js | 135 ++++++++++++++++++++++-- lib/app/communications/lib.d.ts | 4 +- lib/app/communications/lib.js | 120 ++++++++++++++++++++-- lib/app/communications/style.scss | 59 +++++++++++ lib/ui.js | 6 +- lib/ui/checkbox.js | 12 +-- lib/ui/css/media.scss | 6 +- lib/ui/css/variables/definition.scss | 1 + lib/ui/icon.js | 12 +-- lib/ui/media.d.ts | 29 +----- lib/ui/media.js | 32 ++---- lib/utility/cookie.js | 12 +-- lib/utility/lgres.js | 12 +-- lib/utility/request.js | 12 +-- lib/utility/strings.js | 21 ++-- 17 files changed, 456 insertions(+), 173 deletions(-) diff --git a/lib/app/communications/contact.js b/lib/app/communications/contact.js index eb0e73a..5766087 100644 --- a/lib/app/communications/contact.js +++ b/lib/app/communications/contact.js @@ -1,7 +1,7 @@ import { Grid, Dropdown, createElement, createCheckbox, Popup, showAlert } from "../../ui"; import { isEmail, nullOrEmpty, r } from "../../utility"; -class Contact { +export class Contact { #option; #refs; @@ -191,7 +191,7 @@ class Contact { } } -class CustomerRecordContact { +export class CustomerRecordContact { #option; #grid; @@ -252,6 +252,4 @@ class CustomerRecordContact { this.#grid.source = contacts; } } -} - -export { Contact, CustomerRecordContact }; \ No newline at end of file +} \ No newline at end of file diff --git a/lib/app/communications/customer.js b/lib/app/communications/customer.js index e9115fb..10b4e95 100644 --- a/lib/app/communications/customer.js +++ b/lib/app/communications/customer.js @@ -1,6 +1,6 @@ -import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup, createPicture, createAudio, createVideo, createPdf, createSmilefile, createVcard, createVideofile, createFile } from "../../ui"; +import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup } from "../../ui"; import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility"; -import { createBox } from "./lib"; +import { createBox, appendMedia, fileSupported, insertFile } from "./lib"; import { Contact, CustomerRecordContact } from "./contact"; import Follower from "./follower"; @@ -35,6 +35,8 @@ class CustomerCommunication { #followers; #buttonFollower; #enter; + #fileControl; + #file; #message; #data = {}; #gridContact; @@ -118,6 +120,38 @@ class CustomerCommunication { } } + get file() { return this.#file || this.#fileControl?.files?.[0] } + set file(f) { + this.#fileControl?.remove(); + const label = this.#container.querySelector('.file-selector>.selector-name'); + if (f == null) { + this.#fileControl = null; + this.#file = null; + if (label != null) { + label.style.display = 'none'; + label.innerText = ''; + label.querySelector('.ui-tooltip-wrapper')?.remove(); + } + } else { + if (f instanceof HTMLInputElement) { + this.#fileControl = f; + this.#file = f.files[0]; + const link = this.#container.querySelector('.file-selector>.selector-link'); + if (link != null) { + link.appendChild(f); + } + } else { + this.#fileControl = null; + this.#file = f; + } + if (label != null) { + label.style.display = ''; + label.innerText = f.name; + setTooltip(label, f.name); + } + } + } + get customerName() { return this.#container.querySelector('.customer-name>.ui-input')?.value } set customerName(name) { const element = this.#container.querySelector('.customer-name>.ui-input'); @@ -400,10 +434,20 @@ class CustomerCommunication { // enter.disabled = true; // } enter.addEventListener('input', () => { - const val = this.#enter.value; + const val = this.text; const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(option.maxLength); this.#container.querySelector('.message-bar .prompt-count').innerText = s; }); + enter.addEventListener('paste', e => { + if (option.customerNameVisible === true) { + return; + } + const file = e.clipboardData.files[0]; + if (file != null) { + e.preventDefault(); + this.file = insertFile(container, file); + } + }); this.#enter = enter; container.appendChild( createElement('div', div => { @@ -411,6 +455,28 @@ class CustomerCommunication { if (readonly === true) { div.style.display = 'none'; } + div.addEventListener('dragover', e => { + if (option.readonly !== true) { + const item = e.dataTransfer.items[0]; + if (item?.kind === 'file') { + e.preventDefault(); + if (item.type.length > 0 && fileSupported.indexOf(item.type) < 0) { + e.dataTransfer.dropEffect = 'none'; + } else { + e.dataTransfer.dropEffect = 'link'; + } + } + } + }); + div.addEventListener('drop', e => { + if (option.readonly !== true) { + const file = e.dataTransfer.files[0]; + if (file != null) { + e.preventDefault(); + this.file = insertFile(container, file); + } + } + }); }, enter, createElement('div', div => div.style.textAlign = 'right', @@ -426,6 +492,41 @@ class CustomerCommunication { input.className = 'ui-input'; }) ), + createElement('div', selector => { + selector.className = 'file-selector'; + if (option.customerNameVisible === true) { + selector.style.display = 'none'; + } + }, + createElement('div', div => { + div.className = 'selector-link'; + div.addEventListener('click', () => { + this.#fileControl?.remove(); + const file = createElement('input', input => { + input.type = 'file'; + input.accept = fileSupported.join(','); + input.addEventListener('change', () => { + const file = insertFile(container, input.files?.[0]); + if (file != null) { + this.file = file; + } + }); + }); + div.appendChild(this.#fileControl = file); + file.dispatchEvent(new MouseEvent('click')); + }); + }, + createIcon('fa-regular', 'link') + ), + createElement('span', span => { + span.className = 'selector-name'; + span.style.display = 'none'; + }), + createElement('layer', layer => { + layer.appendChild(createIcon('fa-regular', 'times')); + layer.addEventListener('click', () => this.file = null); + }) + ), createElement('div', 'prompt-count'), createElement('button', button => { button.className = 'roundbtn button-send-message'; @@ -436,7 +537,7 @@ class CustomerCommunication { button.appendChild(createIcon('fa-solid', 'paper-plane')); setTooltip(button, r('sendMessage', 'Send Message')); button.addEventListener('click', () => { - const val = this.#enter.value; + const val = this.text; if (nullOrEmpty(val?.trim())) { const p = showAlert(r('error', 'Error'), r('messageRequired', 'Please input the message.'), 'warn'); if (typeof option.onMasking === 'function') { @@ -446,7 +547,7 @@ class CustomerCommunication { return; } if (typeof option.onAddMessage === 'function') { - option.onAddMessage(this.#enter.value); + option.onAddMessage(this.text, this.file); } }) }) @@ -1063,43 +1164,20 @@ class CustomerCommunication { } })); const content = createElement('div', 'item-content'); + const emoji = s => s.replace(/(=[A-Fa-f0-9]{2}){4}/, s => decodeURIComponent(s.replaceAll('=', '%'))); + const mmsParts = createElement('div', div => div.style.display = 'none'); content.appendChild(createElement('span', span => { if (/https?:\/\//i.test(comm.Message)) { - span.innerHTML = formatUrl(comm.Message); + span.innerHTML = emoji(formatUrl(comm.Message)); } else { - span.innerText = comm.Message; + span.innerText = emoji(comm.Message); } + span.appendChild(mmsParts); })); if (comm.IsMMS && comm.MMSParts?.length > 0) { + mmsParts.style.display = ''; for (let kv of comm.MMSParts) { - switch (kv.Key) { - case 'application/pdf': - content.appendChild(createPdf(kv.Value)); - break; - case 'application/smil': - content.appendChild(createSmilefile(kv.Value)); - break; - case 'audio/amr': - content.appendChild(createAudio(kv.Key)); - break; - case 'image/gif': - case 'image/jpeg': - case 'image/png': - content.appendChild(createPicture(kv.Value)); - break; - case 'text/x-vcard': - content.appendChild(createVcard(kv.Value)); - break; - case 'video/3gpp': - content.appendChild(createVideofile(kv.Value)); - break; - case 'video/mp4': - content.appendChild(createVideo(kv.Value)); - break; - default: - content.appendChild(createFile(kv.Value)); - break; - } + appendMedia(mmsParts, kv.Key, kv.Value); } } if (comm.IsReply) { diff --git a/lib/app/communications/internal.js b/lib/app/communications/internal.js index b970233..1ea5eaa 100644 --- a/lib/app/communications/internal.js +++ b/lib/app/communications/internal.js @@ -1,11 +1,13 @@ -import { createElement, setTooltip, createIcon } from "../../ui"; +import { createElement, setTooltip, createIcon, showAlert } from "../../ui"; import { r, nullOrEmpty, escapeHtml } from "../../utility"; -import { createBox } from "./lib"; +import { createBox, appendMedia, fileSupported, insertFile } from "./lib"; class InternalComment { #container; #option; #enter; + #fileControl; + #file; #message; constructor(opt) { @@ -22,6 +24,50 @@ class InternalComment { } } + /** + * @param {boolean} flag + */ + set loading(flag) { + if (this.#container == null) { + return; + } + this.#enter.disabled = flag; + this.#container.querySelector('.button-send-message').disabled = flag; + this.#container.querySelector('.button-post-note').disabled = flag; + } + + get file() { return this.#file || this.#fileControl?.files?.[0] } + set file(f) { + this.#fileControl?.remove(); + const label = this.#container.querySelector('.file-selector>.selector-name'); + if (f == null) { + this.#fileControl = null; + this.#file = null; + if (label != null) { + label.style.display = 'none'; + label.innerText = ''; + label.querySelector('.ui-tooltip-wrapper')?.remove(); + } + } else { + if (f instanceof HTMLInputElement) { + this.#fileControl = f; + this.#file = f.files[0]; + const link = this.#container.querySelector('.file-selector>.selector-link'); + if (link != null) { + link.appendChild(f); + } + } else { + this.#fileControl = null; + this.#file = f; + } + if (label != null) { + label.style.display = ''; + label.innerText = f.name; + setTooltip(label, f.name); + } + } + } + /** * @param {boolean} flag */ @@ -50,18 +96,85 @@ class InternalComment { enter.placeholder = r('typeComment', 'Enter Comment Here'); enter.maxLength = this.#option.maxLength ??= 3000; enter.addEventListener('input', () => { - const val = this.#enter.value; + const val = this.text; const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(this.#option.maxLength); this.#container.querySelector('.message-bar .prompt-count').innerText = s; }); if (readonly === true) { enter.disabled = true; } + // enter.addEventListener('paste', e => { + // const file = e.clipboardData.files[0]; + // if (file != null) { + // e.preventDefault(); + // this.file = insertFile(container, file); + // } + // }); this.#enter = enter; container.appendChild( - createElement('div', 'message-bar', + createElement('div', div => { + div.className = 'message-bar'; + // div.addEventListener('dragover', e => { + // if (option.readonly !== true) { + // const item = e.dataTransfer.items[0]; + // if (item?.kind === 'file') { + // e.preventDefault(); + // if (item.type.length > 0 && fileSupported.indexOf(item.type) < 0) { + // e.dataTransfer.dropEffect = 'none'; + // } else { + // e.dataTransfer.dropEffect = 'link'; + // } + // } + // } + // }); + // div.addEventListener('drop', e => { + // if (option.readonly !== true) { + // const file = e.dataTransfer.files[0]; + // if (file != null) { + // e.preventDefault(); + // this.file = insertFile(container, file); + // } + // } + // }); + }, enter, createElement('div', div => div.style.textAlign = 'right', + createElement('div', selector => { + selector.className = 'file-selector'; + if (this.#option.noMessage === true) { + selector.style.display = 'none'; + } + }, + createElement('div', div => { + div.className = 'selector-link'; + div.style.display = 'none'; + // div.addEventListener('click', () => { + // this.#fileControl?.remove(); + // const file = createElement('input', input => { + // input.type = 'file'; + // input.accept = fileSupported.join(','); + // input.addEventListener('change', () => { + // const file = insertFile(container, input.files?.[0]); + // if (file != null) { + // this.file = file; + // } + // }); + // }); + // div.appendChild(this.#fileControl = file); + // file.dispatchEvent(new MouseEvent('click')); + // }); + }, + createIcon('fa-regular', 'link') + ), + createElement('span', span => { + span.className = 'selector-name'; + span.style.display = 'none'; + }), + createElement('layer', layer => { + layer.appendChild(createIcon('fa-regular', 'times')); + layer.addEventListener('click', () => this.file = null); + }) + ), createElement('div', 'prompt-count'), createElement('button', button => { button.className = 'roundbtn button-send-message'; @@ -73,7 +186,7 @@ class InternalComment { setTooltip(button, r('sendMessage', 'Send Message')); button.addEventListener('click', () => { if (typeof this.#option.onAddMessage === 'function') { - this.#option.onAddMessage(this.#enter.value); + this.#option.onAddMessage(this.text); } }) }), @@ -88,7 +201,7 @@ class InternalComment { setTooltip(button, r('postNote', 'Post Note')); button.addEventListener('click', () => { if (typeof this.#option.onAddComment === 'function') { - this.#option.onAddComment(this.#enter.value); + this.#option.onAddComment(this.text, this.file); } }) }) @@ -115,7 +228,15 @@ class InternalComment { div.innerText = comment.UserName; })); const content = createElement('div', 'item-content'); - content.appendChild(createElement('span', span => span.innerHTML = escapeHtml(comment.Comment))); + const emoji = s => s.replace(/(=[A-Fa-f0-9]{2}){4}/, s => decodeURIComponent(s.replaceAll('=', '%'))); + const mmsParts = createElement('div', div => div.style.display = 'none'); + content.appendChild(createElement('span', span => span.innerHTML = emoji(escapeHtml(comment.Comment)), mmsParts)); + if (comment.IsMMS && comment.MMSParts?.length > 0) { + mmsParts.style.display = ''; + for (let kv of comment.MMSParts) { + appendMedia(mmsParts, kv.Key, kv.Value); + } + } if (comment.FollowUp?.length > 0) { div.classList.add('item-sent'); const sendto = r('sendToColon', 'Send To :') + '\r\n' + comment.FollowUp.split(';').join('\r\n'); diff --git a/lib/app/communications/lib.d.ts b/lib/app/communications/lib.d.ts index a08b025..6acff9a 100644 --- a/lib/app/communications/lib.d.ts +++ b/lib/app/communications/lib.d.ts @@ -1 +1,3 @@ -export function createBox(title: HTMLElement, functions: HTMLElement[]): HTMLElement \ No newline at end of file +export function createBox(title: HTMLElement, functions: HTMLElement[]): HTMLElement + +export function appendMedia(container: HTMLElement, mimeType: string, url: string): HTMLElement \ No newline at end of file diff --git a/lib/app/communications/lib.js b/lib/app/communications/lib.js index 8696905..6c44c11 100644 --- a/lib/app/communications/lib.js +++ b/lib/app/communications/lib.js @@ -1,6 +1,7 @@ -import { createElement } from "../../ui"; +import { createElement, setTooltip, showAlert, createPicture, createAudio, createVideo, createFile } from "../../ui"; +import { r } from "../../utility"; -function createBox(title, functions) { +export function createBox(title, functions) { const container = createElement('div', 'comm'); const header = createElement('div', 'title-bar', title, @@ -8,8 +9,115 @@ function createBox(title, functions) { ); container.appendChild(header); return container; -} +}; -export { - createBox -} \ No newline at end of file +export function appendMedia(container, mimeType, url) { + switch (mimeType) { + case 'application/pdf': + container.appendChild(createFile(url, 'file-pdf')); + break; + case 'application/smil': + // TODO: ignore smil files + // container.appendChild(createFile(url, 'smile')); + break; + case 'audio/amr': + case 'audio/mp3': + case 'audio/mpeg': + case 'audio/x-mpeg': + case 'audio/aac': + case 'audio/ogg': + case 'audio/opus': + case 'audio/wav': + case 'audio/webm': + container.appendChild(createAudio(mimeType, url)); + break; + case 'image/gif': + case 'image/jpeg': + case 'image/png': + container.appendChild(createPicture(url)); + break; + case 'text/x-vcard': + container.appendChild(createFile(url, 'id-card')); + break; + case 'video/mp4': + case 'video/mpeg': + case 'video/x-mpeg': + case 'video/mp2t': + case 'video/webm': + case 'video/quicktime': + container.appendChild(createVideo(url)); + break; + default: + if (/^audio\//.test(mimeType)) { + container.appendChild(createFile(url, 'music')); + } else if (/^video\//.test(mimeType)) { + container.appendChild(createFile(url, 'video')); + } else { + container.appendChild(createFile(url)); + } + break; + } + return container; +}; + +const MaxAttachmentSize = { + limit: 2 * 1024 * 1024, + text: '2MB' +}; + +export const fileSupported = [ + 'application/pdf', + 'audio/mpeg', + 'audio/x-mpeg', + 'audio/amr', + '.amr', + 'image/bmp', + 'image/gif', + 'image/jpeg', + 'image/png', + 'image/tiff', + 'text/plain', + 'text/x-vcard', + 'video/3gpp', + 'video/mp4', + 'video/webm', + 'video/quicktime' +]; + +export function insertFile(container, file) { + const label = container.querySelector('.file-selector>.selector-name'); + if (label != null && file != null) { + let type = file.type; + if (type == null || type.length === 0) { + type = file.name; + type = type.substring(type.lastIndexOf('.')); + } + if (fileSupported.indexOf(type) < 0) { + showAlert(r('error', 'Error'), r('notSupported', 'File type "{type}" is now not supported.').replace('{type}', type)); + return; + } + const isImage = /^image\//.test(type); + if (!isImage && file.size > MaxAttachmentSize.limit) { + showAlert(r('error', 'Error'), r('fileTooLarge', `File is too large. (> ${MaxAttachmentSize.text})`), 'warn'); + return; + } + const fn = file.name; + label.style.display = ''; + label.innerText = fn; + if (isImage) { + const img = new Image(); + const reader = new FileReader(); + reader.onload = e => { + img.src = e.target.result; + setTooltip(label, img); + }; + reader.onerror = () => setTooltip(label, fn); + reader.readAsDataURL(file); + // img.src = URL.createObjectURL(file); + // setTooltip(label, img); + } else { + setTooltip(label, fn); + } + return file; + } +}; \ No newline at end of file diff --git a/lib/app/communications/style.scss b/lib/app/communications/style.scss index daa9158..5ddd1db 100644 --- a/lib/app/communications/style.scss +++ b/lib/app/communications/style.scss @@ -290,6 +290,61 @@ } } + >.file-selector { + float: left; + display: inline-flex; + align-items: center; + height: 30px; + + >.selector-link { + cursor: pointer; + display: flex; + + >svg { + width: 16px; + height: 16px; + fill: var(--secondary-link-color); + } + + >input { + display: none; + } + } + + >.selector-name { + max-width: 130px; + padding: 0 20px 0 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + +layer { + display: none; + margin-left: -20px; + cursor: pointer; + + >svg { + width: 16px; + height: 16px; + fill: var(--red-color); + } + + &:hover { + display: flex; + } + } + + &:hover+layer { + display: flex; + } + + >.ui-tooltip-wrapper img { + max-width: 120px; + max-height: 80px; + } + } + } + >.prompt-count { display: inline-block; color: var(--light-color); @@ -340,6 +395,10 @@ max-width: 240px; background-color: rgb(244, 244, 244); + audio[controls] { + width: 220px; + } + a>svg { width: 13px; height: 13px; diff --git a/lib/ui.js b/lib/ui.js index 655cc96..a7e9d89 100644 --- a/lib/ui.js +++ b/lib/ui.js @@ -8,7 +8,7 @@ import { Dropdown } from "./ui/dropdown"; import { Grid } from "./ui/grid/grid"; import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn } from './ui/grid/column'; import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup"; -import { createPicture, createAudio, createVideo, createPdf, createSmilefile, createVcard, createVideofile, createFile } from './ui/media'; +import { createPicture, createAudio, createVideo, createFile } from './ui/media'; export { createElement, @@ -42,9 +42,5 @@ export { createPicture, createAudio, createVideo, - createPdf, - createSmilefile, - createVcard, - createVideofile, createFile } diff --git a/lib/ui/checkbox.js b/lib/ui/checkbox.js index 324fb5c..0f04cf2 100644 --- a/lib/ui/checkbox.js +++ b/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 } \ No newline at end of file diff --git a/lib/ui/css/media.scss b/lib/ui/css/media.scss index d14da9f..c763eae 100644 --- a/lib/ui/css/media.scss +++ b/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 { diff --git a/lib/ui/css/variables/definition.scss b/lib/ui/css/variables/definition.scss index 2488eb1..763d3bd 100644 --- a/lib/ui/css/variables/definition.scss +++ b/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); diff --git a/lib/ui/icon.js b/lib/ui/icon.js index 4c085c2..a5d0eb0 100644 --- a/lib/ui/icon.js +++ b/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 } \ No newline at end of file diff --git a/lib/ui/media.d.ts b/lib/ui/media.d.ts index 06dd9d3..9e3639b 100644 --- a/lib/ui/media.d.ts +++ b/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 \ No newline at end of file +export function createFile(url: string, icon?: string): HTMLDivElement \ No newline at end of file diff --git a/lib/ui/media.js b/lib/ui/media.js index aa4f651..1d32e35 100644 --- a/lib/ui/media.js +++ b/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'); } \ No newline at end of file diff --git a/lib/utility/cookie.js b/lib/utility/cookie.js index b8b3b93..295692b 100644 --- a/lib/utility/cookie.js +++ b/lib/utility/cookie.js @@ -1,4 +1,4 @@ -function setCookie(name, value, expireDays) { +export function setCookie(name, value, expireDays) { if (name == null) { return; } @@ -14,7 +14,7 @@ function setCookie(name, value, expireDays) { document.cookie = `${name}=${encodeURIComponent(value)}${extra}`; } -function getCookie(name) { +export function getCookie(name) { if (name == null) { return null; } @@ -29,12 +29,6 @@ function getCookie(name) { return null; } -function deleteCookie(name) { +export function deleteCookie(name) { setCookie(name, '', -1); -} - -export { - getCookie, - setCookie, - deleteCookie } \ No newline at end of file diff --git a/lib/utility/lgres.js b/lib/utility/lgres.js index 4019bf9..fe6aa2f 100644 --- a/lib/utility/lgres.js +++ b/lib/utility/lgres.js @@ -98,7 +98,7 @@ function applyLanguage(dom, result) { } } -async function init(dom = document.body, options = {}) { +export async function init(dom = document.body, options = {}) { const lgid = getCurrentLgId(); let lgres = localStorage.getItem(getStorageKey(lgid)); let result; @@ -139,14 +139,14 @@ async function init(dom = document.body, options = {}) { } } -function r(key, defaultValue) { +export function r(key, defaultValue) { if (cache != null) { return getLanguage(cache, key, defaultValue); } return defaultValue; } -const lang = { +export const lang = { get current() { return getCurrentLgId(); }, @@ -156,10 +156,4 @@ const lang = { get savedSuccessfully() { return r('savedSuccessfully', 'Saved successfully.'); } -} - -export { - init, - r, - lang } \ No newline at end of file diff --git a/lib/utility/request.js b/lib/utility/request.js index 74edca3..7796ba0 100644 --- a/lib/utility/request.js +++ b/lib/utility/request.js @@ -8,7 +8,7 @@ function combineUrl(url) { return (consts.path || '') + url; } -function get(url, options = {}) { +export function get(url, options = {}) { return fetch(combineUrl(url), { method: options.method || 'GET', headers: { @@ -21,7 +21,7 @@ function get(url, options = {}) { }); } -function post(url, data, options = {}) { +export function post(url, data, options = {}) { // let contentType; if (data instanceof FormData) { // contentType = 'multipart/form-data'; @@ -46,7 +46,7 @@ function post(url, data, options = {}) { }); } -function upload(url, data, options = {}) { +export function upload(url, data, options = {}) { return new Promise((resolve, reject) => { const request = new XMLHttpRequest(); request.onreadystatechange = function () { @@ -73,10 +73,4 @@ function upload(url, data, options = {}) { } request.send(data); }); -} - -export { - get, - post, - upload } \ No newline at end of file diff --git a/lib/utility/strings.js b/lib/utility/strings.js index 36760e3..cc75435 100644 --- a/lib/utility/strings.js +++ b/lib/utility/strings.js @@ -1,8 +1,8 @@ -function nullOrEmpty(s) { +export function nullOrEmpty(s) { return s == null || typeof s !== 'string' || s.length === 0; } -function contains(s, key, ignoreCase) { +export function contains(s, key, ignoreCase) { if (nullOrEmpty(s) || key == null) { return false; } @@ -15,21 +15,21 @@ function contains(s, key, ignoreCase) { return s.indexOf(key) >= 0; } -function endsWith(s, suffix) { +export function endsWith(s, suffix) { if (nullOrEmpty(s) || nullOrEmpty(suffix)) { return false; } return s.indexOf(suffix) === s.length - suffix.length; } -function padStart(s, num, char) { +export function padStart(s, num, char) { if (nullOrEmpty(s) || isNaN(num) || num <= s.length) { return s; } return (char ?? ' ').repeat(num - s.length); } -function formatUrl(msg) { +export function formatUrl(msg) { //const urlReg = /(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?/ig; //const urlArrray = str.match(urlReg); const p = /(http|ftp|https):\/\/.+?(\s|\r\n|\r|\n|\"|\'|\*|$)/g; @@ -53,7 +53,7 @@ function formatUrl(msg) { return msg; } -function escapeHtml(text) { +export function escapeHtml(text) { if (text == null) { return ''; } @@ -64,13 +64,4 @@ function escapeHtml(text) { .replaceAll('\r\n', '
') .replaceAll('\n', '
') .replaceAll(' ', ' '); -} - -export { - nullOrEmpty, - contains, - endsWith, - padStart, - formatUrl, - escapeHtml } \ No newline at end of file