diff --git a/README.md b/README.md index e747c7c..241f518 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # kanban -> Pure JavaScript KanBan: +> Pure JavaScript KanBan: ## Demo ![example](https://github.com/sean-codes/kanban/blob/master/image.gif?raw=true) @@ -13,8 +13,8 @@ var kanban = new Kanban({ { title: 'Lane 1', name: 'lane1' } ], title: (title) => { return title }, - content: (content) => { content }, - cards: [ + content: (content) => { return content }, + cards: [ { lane: 'lane1', content: 'Test Card 1' @@ -29,7 +29,7 @@ var kanban = new Kanban({ The options are detailed below. -#### `lanes [array]` +#### `lanes [array]` An array of lanes. A lane has title and id. The title value is passed to the title callback @@ -44,4 +44,3 @@ Called when creating a lane. return the html to be placed within lane title #### `content [function(content)]` Called when creating a card. return the html to be placed within a cards content - diff --git a/dist/scripts.min.js b/dist/scripts.min.js index 881754e..f182979 100644 --- a/dist/scripts.min.js +++ b/dist/scripts.min.js @@ -1 +1 @@ -"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function t(t,e){for(var n=0;nl.top+l.height&&(o.scrollTop+=a+s-(l.top+l.height)),ar.left+r.width&&(this.html.board.scrollLeft+=n+i-(r.left+r.width))}}},{key:"laneHide",value:function(t){console.log(t),t.classList.toggle("collapse")}},{key:"cardDragOver",value:function(t){if(this.held&&t!=this.held){if("lane-cards"==t.tagName.toLowerCase())return this.movedToCardAndLane||t.appendChild(this.held),this.movedToLane=!0,void(this.movedToCardAndLane=!1);this.movedToCardAndLane=t.parentElement!=this.held.parentElement,t.nextSibling==this.held||this.movedToLane||this.movedToCardAndLane?t.parentElement.insertBefore(this.held,t):t.parentElement.insertBefore(this.held,t.nextSibling),this.movedToLane=!1}}},{key:"cardCreate",value:function(t){var e=document.createElement("card");e.innerHTML=this.content(t.content);var n=this;return e.addEventListener("mouseenter",function(t){n.cardDragOver(this)}),e.addEventListener("mousedown",function(t){var e=t.target.getBoundingClientRect(),a=this.getBoundingClientRect();n.mouse={offsetX:-t.offsetX-(e.left-a.left),offsetY:-t.offsetY-(e.top-a.top)},n.cardDown(this)}),e}},{key:"createLane",value:function(t){var e=document.createElement("lane"),n=document.createElement("lane-title"),a=document.createElement("lane-cards");e.setAttribute("name",t.name),n.innerHTML=this.title(t.title);var i=this;return a.addEventListener("mouseenter",function(t){i.cardDragOver(this)}),n.addEventListener("click",function(t){i.laneHide(this.parentElement)}),e.appendChild(n),e.appendChild(a),e}},{key:"createBoard",value:function(){return document.createElement("kanban")}},{key:"loadLanes",value:function(){var t=!0,e=!1,n=void 0;try{for(var a,i=this.lanes[Symbol.iterator]();!(t=(a=i.next()).done);t=!0){var s=a.value;this.html.board.appendChild(this.createLane(s))}}catch(t){e=!0,n=t}finally{try{!t&&i.return&&i.return()}finally{if(e)throw n}}}},{key:"loadCards",value:function(){var t=!0,e=!1,n=void 0;try{for(var a,i=this.cards[Symbol.iterator]();!(t=(a=i.next()).done);t=!0){var s=a.value;this.loadCard(s)}}catch(t){e=!0,n=t}finally{try{!t&&i.return&&i.return()}finally{if(e)throw n}}}},{key:"loadCard",value:function(t){var e=this.cardCreate(t);this.html.cards.push(e),this.getLaneCardHolder(t.lane).appendChild(e)}},{key:"getLaneCardHolder",value:function(t){var e="lane[name="+t+"] lane-cards";return this.html.board.querySelector(e)}}]),t}(); \ No newline at end of file +"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function t(t,e){for(var n=0;nl.top+l.height&&(o.scrollTop+=a+s-(l.top+l.height)),ar.left+r.width&&(this.html.board.scrollLeft+=n+i-(r.left+r.width))}}},{key:"laneHide",value:function(t){console.log(t),t.classList.toggle("collapse")}},{key:"cardDragOver",value:function(t){if(this.held&&t!=this.held){if("lane-cards"==t.tagName.toLowerCase())return this.movedToCardAndLane||t.appendChild(this.held),this.movedToLane=!0,void(this.movedToCardAndLane=!1);this.movedToCardAndLane=t.parentElement!=this.held.parentElement,t.nextSibling==this.held||this.movedToLane||this.movedToCardAndLane?t.parentElement.insertBefore(this.held,t):t.parentElement.insertBefore(this.held,t.nextSibling),this.movedToLane=!1}}},{key:"cardCreate",value:function(t){var e=document.createElement("card");e.innerHTML=this.content(t.content);var n=this;return e.addEventListener("mouseenter",function(t){n.cardDragOver(this)}),e.addEventListener("mousedown",function(t){var e=t.target.getBoundingClientRect(),a=this.getBoundingClientRect();n.mouse={offsetX:-t.offsetX-(e.left-a.left),offsetY:-t.offsetY-(e.top-a.top)},n.cardDown(this)}),e}},{key:"createLane",value:function(t){var e=document.createElement("lane"),n=document.createElement("lane-title"),a=document.createElement("lane-cards");e.setAttribute("name",t.name),n.innerHTML=this.title(t.title);var i=this;return a.addEventListener("mouseenter",function(t){i.cardDragOver(this)}),n.addEventListener("click",function(t){i.laneHide(this.parentElement)}),e.appendChild(n),e.appendChild(a),e}},{key:"createBoard",value:function(){return document.createElement("kanban")}},{key:"loadLanes",value:function(){var t=!0,e=!1,n=void 0;try{for(var a,i=this.lanes[Symbol.iterator]();!(t=(a=i.next()).done);t=!0){var s=a.value;this.html.board.appendChild(this.createLane(s))}}catch(t){e=!0,n=t}finally{try{!t&&i.return&&i.return()}finally{if(e)throw n}}}},{key:"loadCards",value:function(){var t=!0,e=!1,n=void 0;try{for(var a,i=this.cards[Symbol.iterator]();!(t=(a=i.next()).done);t=!0){var s=a.value;this.loadCard(s)}}catch(t){e=!0,n=t}finally{try{!t&&i.return&&i.return()}finally{if(e)throw n}}}},{key:"loadCard",value:function(t){var e=this.cardCreate(t);this.html.cards.push(e),this.getLaneCardHolder(t.lane).appendChild(e)}},{key:"getLaneCardHolder",value:function(t){var e="lane[name="+t+"] lane-cards";return this.html.board.querySelector(e)}}]),t}(); \ No newline at end of file diff --git a/dist/styles.min.css b/dist/styles.min.css index 06accaf..ba384c3 100644 --- a/dist/styles.min.css +++ b/dist/styles.min.css @@ -1 +1 @@ -body,html{padding:0;margin:0;height:100%}:before,body,body *,body :after{font-family:Karla,sans-serif;color:#000;box-sizing:border-box;display:block;padding:0;margin:0;background:0 0;border:none;user-select:none}script,style{display:none}kanban{width:100%;height:100%;background:#fff;display:flex;overflow:auto}kanban lane{flex:1;min-width:200px;border-right:1px solid #cdcdcd;display:flex;flex-direction:column;user-select:none}kanban lane:last-of-type{border-right:none}kanban lane lane-title{padding:10px;text-align:center;user-select:none;white-space:nowrap}kanban lane lane-cards{flex:1;overflow:auto}kanban lane lane-cards card{border:.1px solid transparent;user-select:none;position:relative}kanban lane lane-cards card.held{visibility:hidden}kanban lane lane-cards card.held:after{visibility:visible;content:'';background:rgba(0,0,0,.1);position:absolute;top:0;left:0;width:100%;height:100%}kanban lane.collapse{max-width:40px;min-width:40px}kanban lane.collapse lane-title{writing-mode:vertical-rl;text-orientation:upright;min-height:100%;height:100%;flex:1}kanban lane.collapse lane-cards{display:none}kanban ghost{border:.1px solid transparent;user-select:none;position:fixed;top:0;left:0;pointer-events:none;z-index:1000;opacity:.5}#myKanBan{height:100%;box-shadow:0 2px 4px rgba(0,0,0,.25)}#myKanBan lane lane-title{background:#333;color:#fff}card mycard-container,ghost mycard-container{width:100%;height:100%;padding:10px;padding-bottom:0;overflow:hidden}card mycard-container mycard-content,ghost mycard-container mycard-content{border-radius:3px;overflow:hidden}card mycard-container mycard-title,ghost mycard-container mycard-title{background:#444;color:#fff;padding:10px}card mycard-container mycard-title button,ghost mycard-container mycard-title button{display:inline;float:right;padding:0 5px}card mycard-container mycard-title button:hover,ghost mycard-container mycard-title button:hover{background:rgba(0,0,0,.1)}card mycard-container mycard-text,ghost mycard-container mycard-text{position:relative;padding:20px 10px;font-size:.8em;color:#fff}card mycard-container .bg-green,ghost mycard-container .bg-green{background:#33a852}card mycard-container .bg-blue,ghost mycard-container .bg-blue{background:#5fc3eb}card mycard-container .bg-orange,ghost mycard-container .bg-orange{background:#ffb440}card mycard-container .bg-red,ghost mycard-container .bg-red{background:#ff4747} \ No newline at end of file +body,html{padding:0;margin:0;height:100%}:before,body,body *,body :after{font-family:Karla,sans-serif;color:#000;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;padding:0;margin:0;background:0 0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}script,style{display:none}kanban{width:100%;height:100%;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:auto}kanban lane{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:200px;border-right:1px solid #cdcdcd;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kanban lane:last-of-type{border-right:none}kanban lane lane-title{padding:10px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}kanban lane lane-cards{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:auto}kanban lane lane-cards card{border:.1px solid transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}kanban lane lane-cards card.held{visibility:hidden}kanban lane lane-cards card.held:after{visibility:visible;content:'';background:rgba(0,0,0,.1);position:absolute;top:0;left:0;width:100%;height:100%}kanban lane.collapse{max-width:40px;min-width:40px}kanban lane.collapse lane-title{-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;text-orientation:upright;min-height:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}kanban lane.collapse lane-cards{display:none}kanban ghost{border:.1px solid transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;top:0;left:0;pointer-events:none;z-index:1000;opacity:.5}#myKanBan{height:100%;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.25);box-shadow:0 2px 4px rgba(0,0,0,.25)}#myKanBan lane lane-title{background:#333;color:#fff}card mycard-container,ghost mycard-container{width:100%;height:100%;padding:10px;padding-bottom:0;overflow:hidden}card mycard-container mycard-content,ghost mycard-container mycard-content{border-radius:3px;overflow:hidden}card mycard-container mycard-title,ghost mycard-container mycard-title{background:#444;color:#fff;padding:10px}card mycard-container mycard-title button,ghost mycard-container mycard-title button{display:inline;float:right;padding:0 5px}card mycard-container mycard-title button:hover,ghost mycard-container mycard-title button:hover{background:rgba(0,0,0,.1)}card mycard-container mycard-text,ghost mycard-container mycard-text{position:relative;padding:20px 10px;font-size:.8em;color:#fff}card mycard-container .bg-green,ghost mycard-container .bg-green{background:#33a852}card mycard-container .bg-blue,ghost mycard-container .bg-blue{background:#5fc3eb}card mycard-container .bg-orange,ghost mycard-container .bg-orange{background:#ffb440}card mycard-container .bg-red,ghost mycard-container .bg-red{background:#ff4747} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 03bac72..96ebaa6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -185,6 +185,20 @@ "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", "dev": true }, + "autoprefixer": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.6.tgz", + "integrity": "sha512-C9yv/UF3X+eJTi/zvfxuyfxmLibYrntpF3qoJYrMeQwgUJOZrZvpJiMG2FMQ3qnhWtF/be4pYONBBw95ZGe3vA==", + "dev": true, + "requires": { + "browserslist": "2.9.0", + "caniuse-lite": "1.0.30000766", + "normalize-range": "0.1.2", + "num2fraction": "1.2.2", + "postcss": "6.0.14", + "postcss-value-parser": "3.3.0" + } + }, "aws-sign2": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", @@ -1090,6 +1104,21 @@ "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true }, + "color-convert": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", + "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, "combined-stream": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", @@ -2691,6 +2720,19 @@ "vinyl-fs": "0.3.14" } }, + "gulp-autoprefixer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-4.0.0.tgz", + "integrity": "sha1-4AqMVxuF0GUWrCY0G+kN/Z/B6rA=", + "dev": true, + "requires": { + "autoprefixer": "7.1.6", + "gulp-util": "3.0.8", + "postcss": "6.0.14", + "through2": "2.0.3", + "vinyl-sourcemaps-apply": "0.2.1" + } + }, "gulp-babel": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/gulp-babel/-/gulp-babel-7.0.0.tgz", @@ -2909,6 +2951,12 @@ "ansi-regex": "2.1.1" } }, + "has-flag": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", + "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", + "dev": true + }, "has-gulplog": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz", @@ -3864,6 +3912,12 @@ "remove-trailing-separator": "1.1.0" } }, + "normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", + "dev": true + }, "npmlog": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", @@ -3876,6 +3930,12 @@ "set-blocking": "2.0.0" } }, + "num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", + "dev": true + }, "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", @@ -4133,6 +4193,60 @@ "pinkie": "2.0.4" } }, + "postcss": { + "version": "6.0.14", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz", + "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==", + "dev": true, + "requires": { + "chalk": "2.3.0", + "source-map": "0.6.1", + "supports-color": "4.5.0" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", + "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", + "dev": true, + "requires": { + "color-convert": "1.9.1" + } + }, + "chalk": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz", + "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", + "dev": true, + "requires": { + "ansi-styles": "3.2.0", + "escape-string-regexp": "1.0.5", + "supports-color": "4.5.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", + "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", + "dev": true, + "requires": { + "has-flag": "2.0.0" + } + } + } + }, + "postcss-value-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", + "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", + "dev": true + }, "preserve": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",