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-mobile /demo /
Current File : /var/www/html/libs/absol-mobile/demo/mmessageinput.html <!DOCTYPE html>
<html>
<head>
<title>MessageInput</title>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
<script src="https://absol.cf/absol/dist/polyfill.js"></script>
<!-- <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css"> -->
<link href="https://pictogrammers.github.io/@mdi/font/5.3.45/css/materialdesignicons.min.css" media="all"
rel="stylesheet" type="text/css">
<!-- <script src="https://absol.cf/hightlight/highlight.pack.js"></script> -->
<!-- <script>hljs.initHighlightingOnLoad();</script> -->
<script src="../dist/absol-mobile.js?"></script>
<link rel="stylesheet" href="app.css?">
<style>
.app {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(test.jpg);
background-size: cover;
}
.message-ctn {
overflow-y: auto;
}
.input-ctn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.card-chatbox-message-me-ctn {
position: fixed;
left: 0;
right: 0;
height: 100%;
overflow: hidden;
padding: 5px;
box-sizing: border-box;
overflow-y: auto;
}
.card-chatbox-message-me {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid black;
white-space: pre-wrap;
overflow-wrap: break-word;
/* -webkit-line-break: after-white-space; */
display: inline-block;
}
.card-chatbox-message-me img.as-emoji,
.card-chatbox-message-other img.as-emoji {
display: inline;
height: 1.2em;
width: 1.2em;
vertical-align: middle;
}
.card-chatbox-message-me > img,
.card-chatbox-message-other > img {
max-width: 50vw;
max-height: 50vh;
}
.card-chatbox-message-me > canvas,
.card-chatbox-message-other > canvas {
display: inline-block;
width: 60px;
height: 60px;
}
.card-chatbox-message-line {
padding: 20px;
}
</style>
</head>
<body class="app">
<div class="input-ctn"></div>
<div class="message-ctn"></div>
<script>
// runDebugTask();
</script>
<script>
var _ = absol._;
var $ = absol.$;
absol.ContextCaptor.auto();
// var fileIconsSync = absol.XHR.getRequest(catalogiUrl).then(function (result) {
// return JSON.parse(result);
// });
var messageCtn = $('.message-ctn');
function makeMessage(text) {
var messageChild = absol.parseMessage(text);
var messageElt = _({
class: 'card-chatbox-message-me',
extendEvent: 'contextmenu',
child: messageChild,
on: {
contextmenu: function (event) {
event.showContextMenu({
items: [
{ icon: 'span.mdi.mdi-file-document-edit-outline', text: "Sửa", cmd: 'edit' }
],
}, function (event) {
var cmd = event.menuItem.cmd;
switch (cmd) {
case 'edit':
mInput.text = text;
mInput.mode = 'edit';
mInput.on('send', sendCallback);
mInput.on('cancel', cancelCalback);
break;
case 'del':
break;
}
console.log(event.menuItem);
})
}
}
})
;
function cancelCalback() {
mInput.off('send', sendCallback);
mInput.off('cancel', cancelCalback);
mInput.mode = 'new';
this.clearAllContent();
}
function sendCallback() {
text = mInput.text;
messageElt.firstChild.data = text;
cancelCalback();
this.clearAllContent();
}
var lineElt = _('.card-chatbox-message-line').addChild(messageElt)
messageCtn.addChild(lineElt);
messageCtn.scrollTop = messageCtn.scrollHeight;
return messageElt;
}
function makeImage(src) {
return _({
class: 'card-chatbox-message-line', child: {
class: 'card-chatbox-message-me',
child: {
tag: 'img', props: { src: src }, on: {
load: function () {
messageCtn.scrollTop = messageCtn.scrollHeight;
console.log('load')
}
}
}
}
}).addTo(messageCtn);
}
var mInput = _({
tag: 'mmessageinput',
on: {
change: function () {
console.log('change');
},
send: function () {
// console.log('send', this.text, this.files, this.images);
if (this.mode == 'new') {
var text = this.text;
var images = this.images;
var files = this.files;
if (text) {
makeMessage(text);
this.clearAllContent();
}
if (images && images.length > 0) {
images.forEach(function (image) {
var src = URL.createObjectURL(image);
makeImage(src);
});
this.images = [];
}
messageCtn.scrollTop = messageCtn.scrollHeight;
}
},
sizechange: function (event) {
console.log(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);
*/
console.log('add_file', 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)
}));
}
}
}).addTo($('.input-ctn'));
</script>
</body>
</html> 
Server : Apache/2.4.41 (Ubuntu)