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-card /demo /
Current File : /var/www/html/libs/absol-card/demo/listboard.html <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ListBoard</title>
<!-- <link rel="stylesheet" href="https://absol.cf/css/googlematerialicons/material-icons.css">-->
<link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
<script src="https://absol.cf/hightlight/highlight.pack.js"></script>
<script src="../dist/absol-card.js?timestamp=<?php echo stat('../dist/absol-card.js')['mtime'];?>"></script>
</head>
<body>
<style>
html, body {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
font-size: 14px;
width: 100%;
height: 100%;
}
body > .absol-single-page {
width: 100%;
height: 100%;
}
.header {
font-size: 2em;
padding: 0 1em;
line-height: 2;
box-sizing: border-box;
}
.ac-main {
width: 100%;
height: 100%;
}
.am-mobile-theme body {
overflow: hidden;
}
#demo2{
width: 90vw;
height: 90vh;
box-sizing: content-box;
border: solid 1px black;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
</style>
<h1 id="list_board">List Board</h1>
<div id="demo2"></div>
<style>
.table-of-list-board .cd-list-board:not(:last-child) {
margin-right: 20px;
}
.table-of-list-board .cd-list-board {
margin-bottom: 20px;
}
.table-of-list-board{
height: 70vh;
width: 70vw;
}
.action-bar {
position: fixed;
left: 10%;
bottom: 10px;
width: 80%;
border-collapse: collapse;
border: solid 1px black;
table-layout: fixed;
background: white;
font-weight: bolder;
font-family: arial;
transition: bottom 0.5s;
}
.action-bar-cell {
width: 25%;
border: solid 1px black;
height: 50px;
line-height: 50px;
text-align: center;
}
.action-bar.action-bar-hidden {
bottom: -160px;
}
</style>
<script class="viewable" type="text/javascript">
/* global absol*/
(function () {
var _ = absol._;
var $ = absol.$;
var demo2 = $('#demo2');
var mTLBoardTable = _({
tag:'tlboardtable',
style:{
width: '100%',
height: '100%',
boxSizing:'border-box'
}
});
demo2.addChild(mTLBoardTable);
var board1 = _({
tag: 'listboard',
props: {
title: 'Tiếp cận (3)',
priority: 5
},
on: {
presspluscard: function () {
alert('todo: add card 1');
},
orderchange: function (event) {
console.log(event);
},
cardleave: function (event) {
console.log(event);
},
cardenter: function (event) {
console.log(event);
}
}
});
mTLBoardTable.addItem(board1);
var card1 = _({
tag: 'taskcard',
props: {
title: 'Giới thiệu sản phẩm mới',
},
child: [
{
style: {
'font-weight': 'bold',
'margin-bottom': '10px'
},
child: { text: 'Cửa hàng B' }
},
{
child: [
{
tag: 'span',
style: {
color: 'rgb(80,80, 255)'
},
child: { text: 'Chat: ' }
},
{
tag: 'span',
child: {
text: 'Sản phẩm của đối thủ có giá rẻ hơn'
}
}
]
},
{
child: [
{
tag: 'span',
style: {
color: 'rgb(80,80, 255)'
},
child: { text: 'Task: ' }
},
{
tag: 'span',
child: {
text: 'Gửi catalogue cho khách hàng (xx/xx/xxxx)'
}
}
]
},
{
child: [
{
tag: 'span',
style: {
color: 'rgb(190,30, 30)'
},
child: { text: 'Call: ' }
},
{
tag: 'span',
child: {
text: 'Hỏi thăm về sản phẩm mới, (xx/xx/xxxx)'
}
}
]
}
]
});
var card2 = _({
tag: 'taskcard',
props: {
title: 'Giới thiệu sản phẩm mới',
},
child: [
{
tag: 'img',
style: {
width: '100%'
},
props: {
src: 'https://i.pinimg.com/originals/3d/1a/da/3d1ada2607633fd746c7f03f2c7a7bab.jpg'
}
}
]
});
var card3 = _({
tag: 'taskcard',
props: {
title: 'Giới thiệu sản phẩm mới',
},
child: [
{
tag: 'img',
style: {
width: '100%'
},
props: {
src: 'https://kenh68.net/wp-content/uploads/2019/06/anh-meo-de-thuong-009.jpg'
}
}
]
});
var card4 = _({
tag: 'taskcard',
props: {
title: 'Giới thiệu sản phẩm mới',
status: ['pin', 'important', 'delay']
},
child: [
{
text: "Ô này hơi nhỏ"
}
]
});
var card4 = _({
tag: 'taskcard',
props: {
title: 'Giới thiệu sản phẩm mới',
status: ['pin', 'important', 'delay']
},
child: [
{
text: "From HTML5 reference: Like other JavaScript objects, you can treat the localStorage object as an associative array. Instead of using the ..."
}
]
});
var card5 = _({
tag: 'taskcard',
props: {
title: 'Giới thiệu sản phẩm mới',
status: ['pin', 'important', 'delay']
},
child: [
{
text: "From HTML5"
}
]
});
board1.addCard(card1);
board1.addCard(card2);
board1.addCard(card3);
board1.addCard(card4);
board1.addCard(card5);
var board2 = _({
tag: 'listboard',
style: {
'background-color': 'rgb(145, 228, 251)'
},
props: {
title: 'Chào giá (4)',
seeMoreText:"Xem thêm"
},
on: {
presspluscard: function () {
alert('todo: add card 2');
},
orderchange: function (event) {
console.log(event);
},
cardleave: function (event) {
console.log(event);
},
cardenter: function (event) {
console.log(event);
}
}
});
mTLBoardTable.addItem(board2);
var board3 = _({
tag: 'listboard',
style: {
'background-color': 'rgb(174, 221, 148)'
},
props: {
title: 'Chào giá (4)'
},
on: {
presspluscard: function () {
alert('todo: add card 3');
},
cardleave: function (event) {
console.log(event);
},
cardenter: function (event) {
console.log(event);
}
}
});
mTLBoardTable.addItem(board3);
var actionBar = _({
tag: 'table',
class: ['action-bar', 'action-bar-hidden'],
child: {
tag: 'tbody',
child: {
tag: 'tr',
child: [
['Xóa', 'red'],
['THÀNH CÔNG', 'rgb(174, 221, 184)'],
['THẤT BẠI', 'rgb(255, 131, 81)'],
['THẤT BẠI CẦN PHÂN TÍCH', 'rgb(218, 202, 215)'],
].map(function (it) {
return {
tag: 'td',
class: 'action-bar-cell',
style: {
'background-color': it[1],
color: absol.Color.parse(it[1]).getContrastYIQ().toString('rgb')
},
child: {
text: it[0]
}
}
})
}
}
}).addTo(document.body);
// có thể truyền chung 1 bộ listener
var controlActionBarEvents = {
dragcardstart: function (event) {
actionBar.removeClass('action-bar-hidden');
console.log(event.boardElt);// cho biết board nào đang bị kéo đi
console.log('dragcardstart');
},
dragcardend: function (event) {
console.log('dragcardend');
actionBar.addClass('action-bar-hidden');
}
};
board1.on(controlActionBarEvents);
board2.on(controlActionBarEvents);
board3.on(controlActionBarEvents);
})();
</script>
<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>
</body>
</html> 
Server : Apache/2.4.41 (Ubuntu)