282 lines
9.8 KiB
HTML
282 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<title>Title</title>
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js" integrity="sha512-2V49R8ndaagCOnwmj8QnbT1Gz/rie17UouD9Re5WxbzRVUGoftCu5IuqqtAM9+UC3fwfHCSJR1hkzNQh/2wdtg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone-min.js" integrity="sha512-TztyCWDNoN0YKl30gDCMKsiWs35juID+W7ZM2uvPeLLmiNvZg789SglgB/QeUbewqIF2Z4mVq3PyIEa+YXXADQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
|
|
|
|
|
|
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/appfactory3.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afssponsorship.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afssubscriber.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsnotifications.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afspayments.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsform.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsextras.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsevents.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsdocuments.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsaccount.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsemail.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsanalytics.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsdonations.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsspinner.js"></script>
|
|
|
|
|
|
<link href="/portal/admin/core/api/styles/tabler/tabler.min.css" rel="stylesheet"/>
|
|
<script src="/portal/admin/core/api/js/libs/tabler/tabler.js"></script>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/portal/admin/core/api/php/includes/playground/link/kanban/one/jkanban/dist/jkanban.min.css" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Lato"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<style>
|
|
body {
|
|
font-family: "Lato";
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#myKanban {
|
|
overflow-x: auto;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.success {
|
|
background: #00b961;
|
|
}
|
|
|
|
.info {
|
|
background: #2a92bf;
|
|
}
|
|
|
|
.warning {
|
|
background: #f4ce46;
|
|
}
|
|
|
|
.error {
|
|
background: #fb7d44;
|
|
}
|
|
|
|
.custom-button {
|
|
background-color: #4CAF50;
|
|
border: none;
|
|
color: white;
|
|
padding: 7px 15px;
|
|
margin: 10px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container-fluid">
|
|
<div class="row d-flex justify-content-center">
|
|
<div class="col-12">
|
|
<div id="myKanban"></div>
|
|
<button id="addDefault">Add "Default" board</button>
|
|
<br />
|
|
<button id="addToDo">Add element in "To Do" Board</button>
|
|
<br />
|
|
<button id="addToDoAtPosition">Add element in "To Do" Board at position 2</button>
|
|
<br />
|
|
<button id="removeBoard">Remove "Done" Board</button>
|
|
<br />
|
|
<button id="removeElement">Remove "My Task Test"</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/portal/admin/core/api/php/includes/playground/link/kanban/one/jkanban/dist/jkanban.js"></script>
|
|
<script>
|
|
var KanbanTest = new jKanban({
|
|
element: "#myKanban",
|
|
gutter: "10px",
|
|
widthBoard: "300px",
|
|
itemHandleOptions:{
|
|
enabled: true,
|
|
},
|
|
click: function(el) {
|
|
console.log("Trigger on all items click!");
|
|
},
|
|
context: function(el, e) {
|
|
console.log("Trigger on all items right-click!");
|
|
},
|
|
dropEl: function(el, target, source, sibling){
|
|
console.log(target.parentElement.getAttribute('data-id'));
|
|
console.log(el, target, source, sibling)
|
|
},
|
|
buttonClick: function(el, boardId) {
|
|
console.log(el);
|
|
console.log(boardId);
|
|
// create a form to enter element
|
|
var formItem = document.createElement("form");
|
|
formItem.setAttribute("class", "itemform");
|
|
formItem.innerHTML =
|
|
'<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs pull-right">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>';
|
|
|
|
KanbanTest.addForm(boardId, formItem);
|
|
formItem.addEventListener("submit", function(e) {
|
|
e.preventDefault();
|
|
var text = e.target[0].value;
|
|
KanbanTest.addElement(boardId, {
|
|
title: text
|
|
});
|
|
formItem.parentNode.removeChild(formItem);
|
|
});
|
|
document.getElementById("CancelBtn").onclick = function() {
|
|
formItem.parentNode.removeChild(formItem);
|
|
};
|
|
},
|
|
itemAddOptions: {
|
|
enabled: true,
|
|
content: '+ Add New Card',
|
|
class: 'custom-button',
|
|
footer: true
|
|
},
|
|
boards: [
|
|
{
|
|
id: "_todo",
|
|
title: "To Do (Can drop item only in working)",
|
|
class: "info,good",
|
|
dragTo: ["_working"],
|
|
item: [
|
|
{
|
|
id: "_test_delete",
|
|
title: "Try drag this (Look the console)",
|
|
drag: function(el, source) {
|
|
console.log("START DRAG: " + el.dataset.eid);
|
|
},
|
|
dragend: function(el) {
|
|
console.log("END DRAG: " + el.dataset.eid);
|
|
},
|
|
drop: function(el) {
|
|
console.log("DROPPED: " + el.dataset.eid);
|
|
}
|
|
},
|
|
{
|
|
title: "Try Click This!",
|
|
click: function(el) {
|
|
alert("click");
|
|
},
|
|
context: function(el, e){
|
|
alert("right-click at (" + `${e.pageX}` + "," + `${e.pageX}` + ")")
|
|
},
|
|
class: ["peppe", "bello"]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "_working",
|
|
title: "Working (Try drag me too)",
|
|
class: "warning",
|
|
item: [
|
|
{
|
|
title: "Do Something!"
|
|
},
|
|
{
|
|
title: "Run?"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "_done",
|
|
title: "Done (Can drop item only in working)",
|
|
class: "success",
|
|
dragTo: ["_working"],
|
|
item: [
|
|
{
|
|
title: "All right"
|
|
},
|
|
{
|
|
title: "Ok!"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
var toDoButton = document.getElementById("addToDo");
|
|
toDoButton.addEventListener("click", function() {
|
|
KanbanTest.addElement("_todo", {
|
|
title: "Test Add"
|
|
});
|
|
});
|
|
|
|
var toDoButtonAtPosition = document.getElementById("addToDoAtPosition");
|
|
toDoButtonAtPosition.addEventListener("click", function() {
|
|
KanbanTest.addElement("_todo", {
|
|
title: "Test Add at Pos"
|
|
}, 1);
|
|
});
|
|
|
|
var addBoardDefault = document.getElementById("addDefault");
|
|
addBoardDefault.addEventListener("click", function() {
|
|
KanbanTest.addBoards([
|
|
{
|
|
id: "_default",
|
|
title: "Kanban Default",
|
|
item: [
|
|
{
|
|
title: "Default Item"
|
|
},
|
|
{
|
|
title: "Default Item 2"
|
|
},
|
|
{
|
|
title: "Default Item 3"
|
|
}
|
|
]
|
|
}
|
|
]);
|
|
});
|
|
|
|
var removeBoard = document.getElementById("removeBoard");
|
|
removeBoard.addEventListener("click", function() {
|
|
KanbanTest.removeBoard("_done");
|
|
});
|
|
|
|
var removeElement = document.getElementById("removeElement");
|
|
removeElement.addEventListener("click", function() {
|
|
KanbanTest.removeElement("_test_delete");
|
|
});
|
|
|
|
var allEle = KanbanTest.getBoardElements("_todo");
|
|
allEle.forEach(function(item, index) {
|
|
//console.log(item);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|