/*========================================================================================= File Name: kanban.js Description: kanban plugin ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ $(document).ready(function () { var kanban_curr_el, kanban_curr_item_id, kanban_item_title, kanban_data, kanban_item, kanban_users; // Kanban Board and Item Data passed by json var kanban_board_data = [{ id: "kanban-board-1", title: "Marketing", item: [{ id: "11", title: "Facebook Campaign 😎", border: "success", dueDate: "Feb 6", comment: 1, attachment: 3, users: [ "../../../app-assets/images/portrait/small/avatar-s-11.png", "../../../app-assets/images/portrait/small/avatar-s-12.png" ] }, { id: "12", title: "Type Something", border: "info", image: "../../../app-assets/images/banner/banner-21.jpg", dueDate: "Feb 10" }, { id: "13", title: "Social Media Graphics", border: "warning", dueDate: "Jan 3", comment: 23, attachment: 4, users: [ "../../../app-assets/images/portrait/small/avatar-s-1.png", "../../../app-assets/images/portrait/small/avatar-s-18.png" ] }, { id: "14", title: "Book newspaper ads online in popular newspapers.", border: "danger", comment: 56, attachment: 2, users: [ "../../../app-assets/images/portrait/small/avatar-s-26.png", "../../../app-assets/images/portrait/small/avatar-s-16.png" ] }, { id: "15", title: "Twitter Marketing", border: "secondary" } ] }, { id: "kanban-board-2", title: "UI Designing", item: [{ id: "21", title: "Flat UI Kit Design", border: "secondary" }, { id: "22", title: "Drag people onto a card to indicate that.", border: "info", dueDate: "Jan 1", comment: 8, users: [ "../../../app-assets/images/portrait/small/avatar-s-24.png", "../../../app-assets/images/portrait/small/avatar-s-14.png" ] }, { id: "23", title: "Application Design", border: "warning" }, { id: "24", title: "BBQ Logo Design 😱", border: "primary", dueDate: "Jan 6", comment: 10, attachment: 6, badgeContent: "AK", badgeColor: "danger" } ] }, { id: "kanban-board-3", title: "Developing", item: [{ id: "31", title: "Database Management System (DBMS) is a collection of programs", border: "warning", dueDate: "Mar 1", comment: 10, users: [ "../../../app-assets/images/portrait/small/avatar-s-20.png", "../../../app-assets/images/portrait/small/avatar-s-22.png", "../../../app-assets/images/portrait/small/avatar-s-13.png" ] }, { id: "32", title: "Admin Dashboard 🙂", border: "success", dueDate: "Mar 6", comment: 7, badgeContent: "AD", badgeColor: "primary" }, { id: "33", title: "Fix bootstrap progress bar with & issue", border: "primary", dueDate: "Mar 9", users: [ "../../../app-assets/images/portrait/small/avatar-s-1.png", "../../../app-assets/images/portrait/small/avatar-s-2.png" ] } ] } ]; // Kanban Board var KanbanExample = new jKanban({ element: "#kanban-wrapper", // selector of the kanban container buttonContent: "+ Add New Item", // text or html content of the board button // click on current kanban-item click: function (el) { // kanban-overlay and sidebar display block on click of kanban-item $(".kanban-overlay").addClass("show"); $(".kanban-sidebar").addClass("show"); // Set el to var kanban_curr_el, use this variable when updating title kanban_curr_el = el; // Extract the kan ban item & id and set it to respective vars kanban_item_title = $(el).contents()[0].data; kanban_curr_item_id = $(el).attr("data-eid"); // set edit title $(".edit-kanban-item .edit-kanban-item-title").val(kanban_item_title); }, buttonClick: function (el, boardId) { // create a form to add add new element var formItem = document.createElement("form"); formItem.setAttribute("class", "itemform"); formItem.innerHTML = '
' + '' + "
" + '
' + '' + '' + "
"; // add new item on submit click KanbanExample.addForm(boardId, formItem); formItem.addEventListener("submit", function (e) { e.preventDefault(); var text = e.target[0].value; KanbanExample.addElement(boardId, { title: text }); formItem.parentNode.removeChild(formItem); }); $(document).on("click", "#CancelBtn", function () { $(this).closest(formItem).remove(); }); }, addItemButton: true, // add a button to board for easy item creation boards: kanban_board_data // data passed from defined variable }); // Add html for Custom Data-attribute to Kanban item var board_item_id, board_item_el; // Kanban board loop for (kanban_data in kanban_board_data) { // Kanban board items loop for (kanban_item in kanban_board_data[kanban_data].item) { var board_item_details = kanban_board_data[kanban_data].item[kanban_item]; // set item details board_item_id = $(board_item_details).attr("id"); // set 'id' attribute of kanban-item (board_item_el = KanbanExample.findElement(board_item_id)), // find element of kanban-item by ID (board_item_users = board_item_dueDate = board_item_comment = board_item_attachment = board_item_image = board_item_badge = " "); // check if users are defined or not and loop it for getting value from user's array if (typeof $(board_item_el).attr("data-users") !== "undefined") { for (kanban_users in kanban_board_data[kanban_data].item[kanban_item].users) { board_item_users += '
  • ' + 'Avatar' + "
  • "; } } // check if dueDate is defined or not if (typeof $(board_item_el).attr("data-dueDate") !== "undefined") { board_item_dueDate = '
    ' + '' + '' + $(board_item_el).attr("data-dueDate") + "" + "
    "; } // check if comment is defined or not if (typeof $(board_item_el).attr("data-comment") !== "undefined") { board_item_comment = '
    ' + '' + '' + $(board_item_el).attr("data-comment") + "" + "
    "; } // check if attachment is defined or not if (typeof $(board_item_el).attr("data-attachment") !== "undefined") { board_item_attachment = '
    ' + '' + '' + $(board_item_el).attr("data-attachment") + "" + "
    "; } // check if Image is defined or not if (typeof $(board_item_el).attr("data-image") !== "undefined") { board_item_image = '
    ' + 'kanban-image'; ("
    "); } // check if Badge is defined or not if (typeof $(board_item_el).attr("data-badgeContent") !== "undefined") { board_item_badge = '
    ' + '
    ' + kanban_board_data[kanban_data].item[kanban_item].badgeContent + "
    "; ("
    "); } // add custom 'kanban-footer' if ( typeof ( $(board_item_el).attr("data-dueDate") || $(board_item_el).attr("data-comment") || $(board_item_el).attr("data-users") || $(board_item_el).attr("data-attachment") ) !== "undefined" ) { $(board_item_el).append( '" ); } // add Image prepend to 'kanban-Item' if (typeof $(board_item_el).attr("data-image") !== "undefined") { $(board_item_el).prepend(board_item_image); } } } // Add new kanban board //--------------------- var addBoardDefault = document.getElementById("add-kanban"); var i = 1; addBoardDefault.addEventListener("click", function () { KanbanExample.addBoards([{ id: "kanban-" + i, // generate random id for each new kanban title: "Default Title" }]); var kanbanNewBoard = KanbanExample.findBoard("kanban-" + i) if (kanbanNewBoard) { $(".kanban-title-board").on("mouseenter", function () { $(this).attr("contenteditable", "true"); $(this).addClass("truncate"); }); kanbanNewBoardData = '"; var kanbanNewDropdown = $(kanbanNewBoard).find("header"); $(kanbanNewDropdown).append(kanbanNewBoardData); } i++; }); // Delete kanban board //--------------------- $(document).on("click", ".kanban-delete", function (e) { var $id = $(this) .closest(".kanban-board") .attr("data-id"); addEventListener("click", function () { KanbanExample.removeBoard($id); }); }); // Kanban board dropdown // --------------------- var kanban_dropdown = document.createElement("div"); kanban_dropdown.setAttribute("class", "dropdown"); dropdown(); function dropdown() { kanban_dropdown.innerHTML = '' + '"; if (!$(".kanban-board-header div").hasClass("dropdown")) { $(".kanban-board-header").append(kanban_dropdown); } } // Kanban-overlay and sidebar hide // -------------------------------------------- $( ".kanban-sidebar .delete-kanban-item, .kanban-sidebar .close-icon, .kanban-sidebar .update-kanban-item, .kanban-overlay" ).on("click", function () { $(".kanban-overlay").removeClass("show"); $(".kanban-sidebar").removeClass("show"); }); // Updating Data Values to Fields // ------------------------------- $(".update-kanban-item").on("click", function (e) { e.preventDefault(); }); // Delete Kanban Item // ------------------- $(".delete-kanban-item").on("click", function () { $delete_item = kanban_curr_item_id; addEventListener("click", function () { KanbanExample.removeElement($delete_item); }); }); // Kanban Quill Editor // ------------------- var composeMailEditor = new Quill(".snow-container .compose-editor", { modules: { toolbar: ".compose-quill-toolbar" }, placeholder: "Write a Comment... ", theme: "snow" }); // Making Title of Board editable // ------------------------------ $(".kanban-title-board").on("mouseenter", function () { $(this).attr("contenteditable", "true"); $(this).addClass("truncate"); }); // kanban Item - Pick-a-Date $(".edit-kanban-item-date").pickadate(); // Perfect Scrollbar - card-content on kanban-sidebar if ($(".kanban-sidebar .edit-kanban-item .card-content").length > 0) { var kanbanSidebar = new PerfectScrollbar(".kanban-sidebar .edit-kanban-item .card-content", { wheelPropagation: false }); } // select default bg color as selected option $("select").addClass($(":selected", this).attr("class")); // change bg color of select form-control $("select").change(function () { $(this) .removeClass($(this).attr("class")) .addClass($(":selected", this).attr("class") + " form-control text-white"); }); });