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/multicheckmenu.html <!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, user-scale=0">
<meta charset="UTF-8">
<title>MultiCheckMenu</title>
<script src="../dist/absol-acomp.js?<?php echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
</head>
<body>
<style>
:root {
font-size: 14px;
}
</style>
<script>
(function () {
var _ = absol._;
var $ = absol.$;
var Color = absol.Color;
_('<h3>Item</h3>').addTo(document.body);
var bg, cc;
for (var i = 0; i < 5; ++i) {
bg = new Color([Math.random(), Math.random(), Math.random(), 1]);
cc = bg.getContrastYIQ();
_({
tag: 'checklistitem',
style: {
backgroundColor: bg.toString('hex6'),
color: cc.toString('hex6'),
},
props: {
data: {
text: i + ' - text of item',
desc: 'item level = ' + i
},
level: i
}
}).addTo(document.body);
}
/********************************************/
_('<h3>CheckListBox</h3>').addTo(document.body);
var bt1 = _({
style: {
border: '1px solid #ddd',
minHeight: '30px',
minWidth: '60px',
marginBottom: '350px'
}
}).addTo(document.body);
var items = Array(1600).fill(null).map(function (u, i) {
return {
icon: 'span.mdi.mdi-account',
text: `[${i}, ${i / 3 >> 0}] ${absol.string.randomPhrase(30)}`,
value: i ,
desc: absol.string.randomPhrase(20),
lastInGroup: i % 8 == 2
};
});
var now = new Date().getTime();
// var clb1 = _({
// tag: 'checklistbox',
// style: {
// '--max-height': '300px'
// },
// props: {
// enableSearch: true,
// items: items
// },
// on: {
// change: function (event) {
// console.log(this.values, this.selectedIndexes, this.selectedItems);
// },
// submit: function () {
// bt1.innerHTML = this.values.join(', ');
// this.updatePosition();
// }
// }
// }).addTo(document.body);
// clb1.followTarget = bt1;
console.log("build list", new Date().getTime() - now);
/********************************************/
_('<h3>MultiCheckMenu</h3>').addTo(document.body);
var menu6 = _({
tag: 'multicheckmenu',
style: {
'height': '30px',
width: '300px',
overflow: 'hidden'
},
props: {
enableSearch: true,
items: items,
itemFocusable: true,
values: [1, 4, 5, 6],
},
on: {
change: function (event) {
console.trace(event.type, this.values);
}
}
}).addTo(document.body);
var menu0 = _({
tag: 'multicheckmenu',
style: {
'max-height': '300px',
},
props: {
enableSearch: false,
items: [
{ text: 'dem', value: 1 }
],
itemFocusable: true
}
}).addTo(document.body);
var menu1 = _({
tag: 'multicheckmenu',
style: {
'max-height': '300px',
},
props: {
enableSearch: true,
items: items,
itemFocusable: true,
values: [1, 4, 5, 6]
},
on: {
change: function (event) {
console.trace(event.type, this.values);
}
}
}).addTo(document.body);
var menu4 = _({
tag: 'multicheckmenu',
style: {
'max-height': '300px',
marginBottom: '800px'
},
props: {
enableSearch: true,
itemFocusable: true,
items: Array(100).fill().map((u, i) => ({ text: absol.string.randomPhrase(300), value: i })),
values: [1, 2, 3, 4, 5, 6]
},
on: {
change: function (event) {
console.trace(event.type, this.values);
}
}
}).addTo(document.body);
var menu2 = _({
tag: 'multicheckmenu',
style: {
'max-height': '300px',
marginBottom: '800px'
},
props: {
enableSearch: false,
items: items,
itemFocusable: true,
disabled: true
},
on: {
change: function (event) {
console.trace(event.type, this.values);
}
}
}).addTo(document.body);
var menu3 = _({
tag: 'multicheckmenu',
attr:{'data-debug': 'true'},
style: {
'max-height': '300px',
marginBottom: '800px',
},
props: {
debug: true,
enableSearch: false,
items: Array(100).fill().map((u, i) => ({ text: absol.string.randomPhrase(300), value: i }))
},
on: {
change: function (event) {
console.log(event.type, this.values);
}
}
}).addTo(document.body);
window.menu3 = menu3;
console.log("menu3", menu3)
return;
fetch('./demo_tree_list_2.js').then(res => res.text()).then(text => {
var factory = new Function('module', 'exports', text + '\nreturn module.exports;');
var module = { exports: {} };
return factory.call(window, module, module.exports);
}).then(items => {
console.log(items)
_('<h3>MultiCheckMenu(with tree)</h3>').addTo(document.body);
var menu2 = _({
tag: 'multicheckmenu',
style: {
'--max-height': '300px',
marginBottom: '800px'
},
props: {
enableSearch: true,
items: items,
itemFocusable: true
},
on: {
change: function (event) {
// console.log(this.values);
},
// add: function (event) {
// console.log("add", event.itemData, event.value);
// },
// remove: function (event) {
// console.log("remove", event.itemData, event.value);
// }
}
}).addTo(document.body);
});
// MultiCheckMenu
})();
</script>
</body>
</html> 
Server : Apache/2.4.41 (Ubuntu)