tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjustment

Browse Source
This commit is contained in:
Chen Lily
2023-07-27 10:03:53 +08:00
parent 3e9ee59178
commit 29209a3a00
17 changed files with 456 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
lib/app/communications/internal.js
View File

@ -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');