VaKeR CYBER ARMY
Apache/2.4.41 (Ubuntu) Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 www-data ( 33 )7.4.33 pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, / var /www /html /libs /absol-acomp /demo /
Current File : /var/www/html/libs/absol-acomp/demo/messageinput.html <!DOCTYPE html>
<html>
<head>
<title>Media Input</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://absol.cf/absol/dist/polyfill.js"></script>
<!-- <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css"> -->
<!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> -->
<!-- <script src="https://absol.cf/hightlight/highlight.pack.js"></script> -->
<!-- <script>hljs.initHighlightingOnLoad();</script> -->
<script src="../dist/absol-acomp.js?<?php echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
<style>
</style>
</head>
<body>
<script>
// runDebugTask();
</script>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.as-conversation-box {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-sizing: border-box;
border: solid 1px #ddd;
overflow-y: auto;
font-size: 14px;
}
.message {
padding: 10px;
background-color: #5bc0de;
display: inline-block;
margin: 5px;
border-radius: 5px;
}
.message .as-sprite {
width: 60px;
height: 60px;
}
</style>
<div class="as-conversation-box">
<div class="as-conversation-box-message-ctn absol-bscroller"></div>
<div class="as-conversation-box-input-ctn"></div>
</div>
<script>
(function () {
var _ = absol._;
var $ = absol.$;
var syncElt = _('.sync').addTo(document.body)
var messBox = $('.as-conversation-box');
absol.require('contextcaptor').auto();
var inputCtn = $('.as-conversation-box-input-ctn');
var messageCtn = $('.as-conversation-box-message-ctn');
var messInput = _({
tag: 'messageinput',
data: {
v2: true
},
props: {
// autoSend: true
},
on: {
change: function () {
syncElt.innerHTML = this.text;
// console.log(this.tagList)
// console.log(this.text, this.files, this.images);// files, images : Array<Files> text: String
},
sizechange: function (event) {
// messageCtn.addStyle('height', 'calc(100% - ' + (event.bound.height) + 'px)')
},
useraddfile: function (event) {
var files = event.files;
/* trong trường hợp chỉ lấy những file < 3MB và không có bất đồng bộ
var files = event.files;
files = files.filter(function (file) {
return file.size < 1024 * 1024 * 3;
})
event.resolve(files);
*/
var bigFiles = files.filter(function (file) {
return file.size > 1024 * 600;
});
var smallFiles = files.filter(function (file) {
return file.size <= 1024 * 600;
});
if (bigFiles.length > 0)// ngược lại không cần gọi resolve
event.resolve(new Promise(function (resolve) {
var windowElt = _({
style: {
backgroundColor: 'white',
border: '1px solid #ddd',
boxShadow: '1px 1px 2px 2px rgba(0,0,0,0.3)',
borderRadius: '8px',
padding: '10px'
},
child: [
'<h3>Không thể thêm file lớn hơn 600KB</h3>',
{
child: bigFiles.map(function (file) {
return {
child: [
{ tag: 'strong', child: { text: file.name } },
'<span> - </span>',
{ tag: 'span', text: file.size + 'B' },
]
};
})
},
"br",
{
style: {
textAlign: 'center',
},
child: {
tag: 'flexiconbutton',
style: { height: '30px', width: '80px' },
props: {
text: "OK",
icon: 'span.mdi.mdi-send'
},
on: {
click: function () {
modal.remove();
resolve(smallFiles);
}
}
}
}
]
});
var modal = _({
tag: 'modal',
style: {
zIndex: 1000
},
child: windowElt
});
document.body.appendChild(modal)
}));
},
send: function () {
if (this.mode == 'edit') return;
var text = this.text;
if (text) {
var message = absol.parseMessage(text, {tagMap: tagMap, lengthLimit: 300, inline: true});
var now = new Date();
var messElt = _({
extendEvent: 'contextmenu',
class: 'message',
child: message,
on: {
contextmenu: function (event) {
event.showContextMenu({
items: [
{
text: 'Sửa',
icon: 'span.mdi.mdi-pencil-outline',
cmd: 'edit'
},
{
text: 'Xóa',
icon: 'span.mdi.mdi-delete',
cmd: 'delete'
},
{
text: 'Trích dẫn',
icon: 'span.mdi.mdi-format-quote-open-outline',
cmd: 'quote'
}
]
}, function (event) {
var item = event.menuItem;
if (item.cmd === 'delete') {
messElt.remove();
}
else if (item.cmd === 'edit') {
function onSend() {
messInput.off({
cancel: onCancel,
send: onSend
});
text = messInput.text;
messInput.clearAllContent();
messElt.clearChild();
_({ elt: messElt, child: absol.parseMessage(text, {tagMap: tagMap, lengthLimit: 300, inline: true}) })
messInput.mode = 'new';
}
function onCancel() {
messInput.off({
cancel: onCancel,
send: onSend
});
messInput.clearAllContent();
messInput.mode = 'new';
}
messInput.on({
cancel: onCancel,
send: onSend
});
messInput.mode = 'edit';
messInput.clearAllContent();
messInput.focus();
messInput.text = text;
setTimeout(function () {
messInput.$preInput.applyData(text, text.length)
}, 100)
}
else if (item.cmd === 'quote') {
messInput.quote = {
text: text,
desc: "Pham Quoc Du Thien - " + now.toLocaleString()
};
// messInput.quote = {
// file: 'php',
// text: "[File] jsdom.php",
// desc: "Pham Quoc Du Thien - " + now.toLocaleString()
// };
// messInput.quote = {
// img: 'https://lab.daithangminh.vn/home_co/carddone/./uploads/images/1610513358591_JPEG_example_flower.jpg.upload',
// text: "[File] jsdom.php",
// desc: "Pham Quoc Du Thien - " + now.toLocaleString()
// };
}
});
}
}
}).addTo(messageCtn);
_('br').addTo(messageCtn);
messageCtn.scrollTop = messageCtn.scrollHeight;
this.clearAllContent();
this.focus();
}
else {
this.images = [];
this.files = [];
}
}
}
});
// messInput.text = 'Xin chào';
var tagMap = {
8278372: "Nguyễn Văn B",
153875: "Lê Văn A"
};
messInput.tagMap = tagMap;
inputCtn.addChild(messInput);
messInput.addCommand({
name: 'haha',
keyBiding: 'escape',
exec: function ($input) {
console.log(this, $input, 'haha');
}
});
messInput.addPlugin({
icon: '<span>@</span>',
id: 'sample_message',
alwaysVisible: true,
popupAlign: 'right',
order: 0,
onOpen: function ($input, _, $) {
var thisPlugin = this;
var contentElt = this.contentElt;
contentElt.clearChild();
var children = Object.keys(tagMap).map(id => {
return _({
tag: 'flexiconbutton',
style: {
height: '30px'
},
props: {
text: tagMap[id],
icon: '<span>@<span></span>'
},
on: {
click: function () {
thisPlugin.appendText('@[id:' + id + ']');
thisPlugin.closePopup();
}
}
})
});
contentElt.addChild(children);
}
});
})
()
</script>
</body>
</html> 
Server : Apache/2.4.41 (Ubuntu)