├── LICENSE ├── README.md ├── css ├── kanban.css └── kanban.min.css ├── images └── dragger.png └── js ├── kanban.js └── kanban.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 craig-davey96 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Kanban-jQuery 2 | Kanban Board jQuery Plugin 3 | 4 | # Requirements 5 | 6 | 1. jQuery v3.2.1+ (https://jquery.com/download/) 7 | 2. jQuery UI v1.12.1+ (https://jqueryui.com/) 8 | 9 | # Example 10 | 11 | Include styles and script 12 | ```html 13 | 14 | 15 | ``` 16 | 17 | Example of the HTML element 18 | ```html 19 |
20 | ``` 21 | 22 | Example of the javascript call to create a Kanban Board 23 | ```js 24 | $('#kanban').kanban({ 25 | titles: ['Task' , 'Estimate' , 'Complete' , 'Invoiced' , 'Paid'], 26 | colours: ['#00aaff','#ff921d','#00ff40','#ffe54b','#8454ff'], 27 | items: [ 28 | { 29 | id: 1, 30 | title: 'Test', 31 | block: 'Task', 32 | link: '[URL]', 33 | link_text: 'TEST001', 34 | footer: ' 1
1/4
' 35 | }, 36 | { 37 | id: 2, 38 | title: 'Test 2', 39 | block: 'Estimate', 40 | footer: ' 1
1/4
' 41 | }, 42 | { 43 | id: 3, 44 | title: 'Test 3', 45 | block: 'Estimate', 46 | footer: ' 1
1/4
' 47 | }, 48 | { 49 | id: 4, 50 | title: 'Test 5', 51 | block: 'Estimate', 52 | footer: ' 1
1/4
' 53 | }, 54 | { 55 | id: 5, 56 | title: 'Test 5', 57 | block: 'Estimate', 58 | footer: ' 1
1/4
' 59 | }, 60 | ] 61 | }); 62 | ``` 63 | -------------------------------------------------------------------------------- /css/kanban.css: -------------------------------------------------------------------------------- 1 | /* 2 | --------------------------- 3 | BOARD STYLES 4 | --------------------------- 5 | */ 6 | 7 | .cd_kanban_board{ 8 | width: 100%; 9 | height:auto; 10 | display: block; 11 | clear: both; 12 | overflow-x: auto; 13 | } 14 | .cd_kanban_board > .cd_kanban_board_titles{ 15 | margin:0px; 16 | padding:0px; 17 | display: flex; 18 | clear: both; 19 | } 20 | .cd_kanban_board > .cd_kanban_board_titles:after{ 21 | content: ''; 22 | display: block; 23 | clear: both; 24 | } 25 | .cd_kanban_board > .cd_kanban_board_titles .cd_kanban_board_title{ 26 | margin:0 10px 0 0; 27 | padding: 1rem; 28 | color: #FFF; 29 | position: relative; 30 | flex: 1; 31 | } 32 | .cd_kanban_board > .cd_kanban_board_titles .cd_kanban_board_title:before{ 33 | width: 80%; 34 | height: 100%; 35 | background: #343a40; 36 | display: block; 37 | clear: both; 38 | position: absolute; 39 | top:0px; 40 | left:0px; 41 | content: ""; 42 | } 43 | .cd_kanban_board > .cd_kanban_board_titles .cd_kanban_board_title p{ 44 | position: relative; 45 | z-index: 10; 46 | margin: 0px; 47 | } 48 | .cd_kanban_board > .cd_kanban_board_titles .cd_kanban_board_title:last-child{ 49 | margin: 0px; 50 | } 51 | .cd_kanban_board > .cd_kanban_board_blocks{ 52 | margin:0px; 53 | padding:0px; 54 | display: flex; 55 | clear: both; 56 | } 57 | .cd_kanban_board > .cd_kanban_board_blocks:after{ 58 | content: ''; 59 | display: block; 60 | clear: both; 61 | } 62 | .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block{ 63 | height: 70%; 64 | margin:10px 10px 10px 0; 65 | padding: 1rem; 66 | flex: 1; 67 | background: #f2f2f2; 68 | overflow-y: auto; 69 | } 70 | .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block:last-child{ 71 | margin: 10px 0 0; 72 | } 73 | .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item{ 74 | width: 100%; 75 | height: auto; 76 | margin: 0 0 10px; 77 | padding: 0.75rem; 78 | display: block; 79 | clear: both; 80 | background: #FFF; 81 | border: 1px solid #c0c2cd; 82 | -webkit-transition: -webkit-transform 300ms ease-in-out; 83 | -moz-transition: -moz-transform 300ms ease-in-out; 84 | -ms-transition: -ms-transform 300ms ease-in-out; 85 | -o-transition: -o-transform 300ms ease-in-out; 86 | transition: transform 300ms ease-in-out; 87 | transform: rotate(0deg); 88 | } 89 | .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item a{ 90 | font-style: italic; 91 | text-decoration: underline; 92 | margin: 5px 0 0; 93 | display: block; 94 | } 95 | .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item .cd_kanban_board_block_item_title{ 96 | margin: 0 0 0.25rem; 97 | padding: 0 0 0 20px; 98 | background: url("images/dragger.png") 0px 0px no-repeat; 99 | font-size: 1rem !important; 100 | line-height: 1rem; 101 | font-weight: bold; 102 | } 103 | .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item.ui-sortable-helper{ transform: rotate(-4deg); } 104 | .cd_kanban_board_block_item_placeholder{ 105 | width: 100%; 106 | height: 60px; 107 | margin: 0 0 10px; 108 | display: block; 109 | clear: both; 110 | border: 1px dashed #000; 111 | } 112 | 113 | .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item .cd_kanban_board_block_item_footer{ 114 | margin: 0.75rem -0.75rem -0.75rem; 115 | padding: 0.75rem; 116 | display: block; 117 | clear: both; 118 | border-top: 1px solid #c0c2cd; 119 | } -------------------------------------------------------------------------------- /css/kanban.min.css: -------------------------------------------------------------------------------- 1 | .cd_kanban_board{width:100%;height:auto;display:block;clear:both;overflow-x:auto}.cd_kanban_board>.cd_kanban_board_titles{margin:0;padding:0;display:flex;clear:both}.cd_kanban_board>.cd_kanban_board_titles:after{content:'';display:block;clear:both}.cd_kanban_board>.cd_kanban_board_titles .cd_kanban_board_title{margin:0 10px 0 0;padding:1rem;color:#FFF;position:relative;flex:1}.cd_kanban_board>.cd_kanban_board_titles .cd_kanban_board_title:before{width:80%;height:100%;background:#343a40;display:block;clear:both;position:absolute;top:0;left:0;content:""}.cd_kanban_board>.cd_kanban_board_titles .cd_kanban_board_title p{position:relative;z-index:10;margin:0}.cd_kanban_board>.cd_kanban_board_titles .cd_kanban_board_title:last-child{margin:0}.cd_kanban_board>.cd_kanban_board_blocks{margin:0;padding:0;display:flex;clear:both}.cd_kanban_board>.cd_kanban_board_blocks:after{content:'';display:block;clear:both}.cd_kanban_board>.cd_kanban_board_blocks .cd_kanban_board_block{height:70%;margin:10px 10px 10px 0;padding:1rem;flex:1;background:#f2f2f2;overflow-y:auto}.cd_kanban_board>.cd_kanban_board_blocks .cd_kanban_board_block:last-child{margin:10px 0 0}.cd_kanban_board>.cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item{width:100%;height:auto;margin:0 0 10px;padding:.75rem;display:block;clear:both;background:#FFF;border:1px solid #c0c2cd;-webkit-transition:-webkit-transform 300ms ease-in-out;-moz-transition:-moz-transform 300ms ease-in-out;-ms-transition:-ms-transform 300ms ease-in-out;-o-transition:-o-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;transform:rotate(0deg)}.cd_kanban_board>.cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item a{font-style:italic;text-decoration:underline;margin:5px 0 0;display:block}.cd_kanban_board>.cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item .cd_kanban_board_block_item_title{margin:0 0 .25rem;padding:0 0 0 20px;background:url(images/dragger.png) 0 0 no-repeat;font-size:1rem!important;line-height:1rem;font-weight:700}.cd_kanban_board>.cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item.ui-sortable-helper{transform:rotate(-4deg)}.cd_kanban_board_block_item_placeholder{width:100%;height:60px;margin:0 0 10px;display:block;clear:both;border:1px dashed #000}.cd_kanban_board>.cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item .cd_kanban_board_block_item_footer{margin:.75rem -.75rem -.75rem;padding:.75rem;display:block;clear:both;border-top:1px solid #c0c2cd} -------------------------------------------------------------------------------- /images/dragger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craig-davey96/Kanban-jQuery/0bc1d4146e818ac630ee350250962ff9849e4399/images/dragger.png -------------------------------------------------------------------------------- /js/kanban.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | $.fn.kanban = function(options) { 4 | 5 | // defaults 6 | 7 | var $this = $(this); 8 | 9 | var settings = $.extend({ 10 | titles: ['Block 1', 'Block 2', 'Block 3', 'Block 4'], 11 | colours: [], 12 | items: [], 13 | onChange: function(e,ui){}, 14 | onReceive: function(e,ui){} 15 | }, options) 16 | 17 | var classes = { 18 | kanban_board_class: "cd_kanban_board", 19 | kanban_board_titles_class: "cd_kanban_board_titles", 20 | kanban_board_title_class: "cd_kanban_board_title", 21 | kanban_board_blocks_class: "cd_kanban_board_blocks", 22 | kanban_board_block_class: "cd_kanban_board_block", 23 | kanban_board_item_class: "cd_kanban_board_block_item", 24 | kanban_board_item_placeholder_class: "cd_kanban_board_block_item_placeholder", 25 | kanban_board_item_title_class: "cd_kanban_board_block_item_title", 26 | kanban_board_item_footer_class: "cd_kanban_board_block_item_footer" 27 | }; 28 | 29 | function build_kanban(){ 30 | 31 | $this.addClass(classes.kanban_board_class); 32 | $this.append('
'); 33 | $this.append('
'); 34 | 35 | build_titles(); 36 | build_blocks(); 37 | build_items(); 38 | 39 | } 40 | 41 | function build_titles() { 42 | 43 | settings.titles.forEach(function (item, index, array) { 44 | var item = '
' + '

'+item+'

' + '
'; 45 | $this.find('.'+classes.kanban_board_titles_class).append(item); 46 | }); 47 | 48 | } 49 | 50 | function build_blocks() { 51 | settings.titles.forEach(function (item, index, array) { 52 | var item = '
'; 53 | $this.find('.'+classes.kanban_board_blocks_class).append(item); 54 | }); 55 | 56 | $( "."+classes.kanban_board_block_class ).sortable({ 57 | connectWith: "."+classes.kanban_board_block_class, 58 | containment: "."+classes.kanban_board_blocks_class, 59 | placeholder: classes.kanban_board_item_placeholder_class, 60 | scroll: true, 61 | cursor: "move", 62 | change: settings.onChange, 63 | receive: settings.onReceive 64 | }).disableSelection(); 65 | 66 | } 67 | 68 | function build_items(){ 69 | settings.items.forEach(function (item , index , array) { 70 | var block = $this.find('.'+classes.kanban_board_block_class+'[data-block="'+item.block+'"]'); 71 | var append = '
'; 72 | append += '
'+item.title+'
'; 73 | 74 | if(item.link){ 75 | append += ''+item.link_text+''; 76 | } 77 | 78 | if(item.footer){ 79 | append += '
'+item.footer+'
'; 80 | } 81 | 82 | append += '
'; 83 | 84 | 85 | 86 | block.append(append); 87 | }); 88 | } 89 | 90 | build_kanban(); 91 | 92 | } 93 | 94 | }(jQuery)); 95 | -------------------------------------------------------------------------------- /js/kanban.min.js: -------------------------------------------------------------------------------- 1 | (function(a){a.fn.kanban=function(d){var i=a(this);var g=a.extend({titles:["Block 1","Block 2","Block 3","Block 4"],colours:[],items:[],onChange:function(k,j){},onReceive:function(k,j){}},d);var e={kanban_board_class:"cd_kanban_board",kanban_board_titles_class:"cd_kanban_board_titles",kanban_board_title_class:"cd_kanban_board_title",kanban_board_blocks_class:"cd_kanban_board_blocks",kanban_board_block_class:"cd_kanban_board_block",kanban_board_item_class:"cd_kanban_board_block_item",kanban_board_item_placeholder_class:"cd_kanban_board_block_item_placeholder",kanban_board_item_title_class:"cd_kanban_board_block_item_title",kanban_board_item_footer_class:"cd_kanban_board_block_item_footer"};function f(){i.addClass(e.kanban_board_class);i.append('
');i.append('
');c();b();h()}function c(){g.titles.forEach(function(k,j,l){var k='

'+k+"

";i.find("."+e.kanban_board_titles_class).append(k)})}function b(){g.titles.forEach(function(k,j,l){var k='
';i.find("."+e.kanban_board_blocks_class).append(k)});a("."+e.kanban_board_block_class).sortable({connectWith:"."+e.kanban_board_block_class,containment:"."+e.kanban_board_blocks_class,placeholder:e.kanban_board_item_placeholder_class,scroll:true,cursor:"move",change:g.onChange,receive:g.onReceive}).disableSelection()}function h(){g.items.forEach(function(l,k,n){var m=i.find("."+e.kanban_board_block_class+'[data-block="'+l.block+'"]');var j='
';j+='
'+l.title+"
";if(l.link){j+=''+l.link_text+""}if(l.footer){j+='
'+l.footer+"
"}j+="
";m.append(j)})}f()}}(jQuery)); --------------------------------------------------------------------------------