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/mcabinettreetlist.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CabinetTreeList</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="../dist/absol-mobile.js?"></script>
<script>
var $ = absol.$;
var _ = absol._;
</script>
<style>
html, body {
overflow-x: hidden;
width: 100%;
height: 100%;
margin: 0;
}
html {
overflow-y: hidden;
}
body {
overflow-y: auto;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
(function () {
if (!absol.BrowserDetector.isMobile) {
alert("Hãy mở bằng chế độ mobile và tải lại");
return;
}
var _ = absol._;
var $ = absol.$;
function render(o) {
return _(o).addTo(document.body);
}
function makeQuickMenu(treeElt) {
return {
props: {
extendClasses: 'cd-context-menu',
items: [
{
text: 'Trạng thái',
extendClasses: "bsc-quickmenu",
icon: {
tag: "i",
class: "material-icons",
child: { text: "info" }
},
cmd: 'status'
},
{
text: 'Di chuyển',
extendClasses: "bsc-quickmenu",
icon: {
tag: "i",
class: "material-icons",
child: { text: "open_with" }
},
cmd: 'move'
},
{
text: 'Sửa',
extendClasses: "bsc-quickmenu",
icon: {
tag: "i",
class: "material-icons",
child: { text: "mode_edit" }
},
cmd: 'edit'
},
{
text: 'Xóa',
extendClasses: "bsc-quickmenu red",
icon: {
tag: "i",
class: "material-icons",
child: { text: "delete" }
},
cmd: 'delete'
},
{
text: 'Lưu trữ',
extendClasses: "bsc-quickmenu",
icon: {
tag: "i",
class: "material-icons",
child: { text: "turned_in_not" }
},
cmd: 'store'
}
]
},
onSelect: function (item) {
console.log(item, treeElt)
// console.log('cmd: ', item.cmd);
}
}
}
function makeTree(props) {
var tree = _({
tag: 'mcabinettree',
class: 'am-flex-content',
props: {
content: [
{
style: { fontSize: '18px', flexGrow: 1 },
child: { text: absol.string.randomPhrase(30) }
},
{
child: {
tag: 'flexiconbutton',
style: {
height: '30px'
},
props: {
text: 'Edit',
icon: 'span.mdi.mdi-pencil'
}
}
}
],
draggable: true,
rightActions: [
{ text: 'Xoá', otherPropertiesYouNeed: "Some data...", cmd: 'delete' },
{ text: 'Sửa', otherPropertiesYouNeed: "Some data..." },
],
quickmenuX: makeQuickMenu()
},
on: {
action: function (event) {
console.log(event.action)
if (event.action.cmd === 'delete') {
this.selfRemove();
}
console.log(event.action);
},
click: function (event) {
absol.require('snackbar').show(this.somethingLikeId + '')
}
}
});
tree.quickmenu = makeQuickMenu(tree);
Object.assign(tree, props);
return tree;
}
var addBtn = render({
tag: 'button',
child: { text: 'addChild' },
on: {
click: function () {
var i = Math.random() * 1000 + 1000 >> 0;
var newItem = makeTree({ somethingLikeId: i });
list.addChildBefore(newItem, list.getChildren()[6]);
newItem.scrollIntoView();
}
}
});
var searchInput = _('searchtextinput');
var list = _({
tag: 'mcabinettreelist',
style: {
height: '80vh',
overflowY: 'auto'
},
props: {
draggable: true
},
on: {
orderchange: function () {
var newIdOrder = this.getChildren().map(function (itemElt) {
return itemElt.somethingLikeId;
})
console.log(newIdOrder);
}
},
child: Array(30).fill(null).map(function (u, i) {
var tree = makeTree({ somethingLikeId: i });
var children = Array(Math.random() * 5 + 2 >> 0).fill(0).map(function (uu, j) {
return makeTree({ somethingLikeId: i * 100 + j });
});
tree.addChild(children);
return tree;
})
});
document.body.appendChild(searchInput);
document.body.appendChild(list);
list.attachSearchInput(searchInput);
})();
</script>
</body>
</html> 
Server : Apache/2.4.41 (Ubuntu)