From 882c748d24e43fdaca32b6bcaa5f2b46934d41f1 Mon Sep 17 00:00:00 2001 From: sean-codes Date: Fri, 17 Nov 2017 01:00:59 -0600 Subject: [PATCH] fixed example --- dist/scripts.js | 408 +++++++++++++++-------------------- dist/styles.css | 0 dist/styles.min.css | 0 dist/styles.scss | 162 ++++++++++++++ example/basic.html | 4 +- src/scripts.js | 408 ++++++++++++++++++++--------------- {dist => src}/scripts.min.js | 0 src/styles.css | 116 ++++++++++ src/styles.min.css | 1 + src/styles.scss | 0 10 files changed, 689 insertions(+), 410 deletions(-) delete mode 100644 dist/styles.css delete mode 100644 dist/styles.min.css create mode 100644 dist/styles.scss rename {dist => src}/scripts.min.js (100%) create mode 100644 src/styles.css create mode 100644 src/styles.min.css delete mode 100644 src/styles.scss diff --git a/dist/scripts.js b/dist/scripts.js index a2b3e71..a7e7093 100644 --- a/dist/scripts.js +++ b/dist/scripts.js @@ -1,258 +1,192 @@ -'use strict'; +class Kanban { + constructor(options) { + this.selector = options.selector + this.lanes = options.lanes + this.cards = options.cards + this.title = options.title + this.content = options.content + this.held = undefined + this.mouse = { offsetX: 0, offsetY: 0 } + this.pos = undefined + this.posLane = undefined + + this.html = {} + this.html.container = document.querySelector(this.selector) + this.html.board = this.createBoard() + this.html.cards = [] + this.html.ghost = document.createElement('ghost') + this.html.board.appendChild(this.html.ghost) -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + // Initialize + this.html.container.appendChild(this.html.board) + this.loadLanes() + this.loadCards() + this.addListeners() + } -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + addListeners() { + window.addEventListener('mouseup', (e) => { + this.cardUp() + }) -var Kanban = function () { - function Kanban(options) { - _classCallCheck(this, Kanban); + window.addEventListener('mousemove', (e) => { + this.cardMove(e.clientX, e.clientY) + }) - this.selector = options.selector; - this.lanes = options.lanes; - this.cards = options.cards; - this.title = options.title; - this.content = options.content; - this.held = undefined; - this.mouse = { offsetX: 0, offsetY: 0 }; - this.pos = undefined; - this.posLane = undefined; + document.body.addEventListener('blur', (e) => { + this.cardUp() + }) + } - this.html = {}; - this.html.container = document.querySelector(this.selector); - this.html.board = this.createBoard(); - this.html.cards = []; - this.html.ghost = document.createElement('ghost'); - this.html.board.appendChild(this.html.ghost); + cardDown(card) { + this.held = card + } - // Initialize - this.html.container.appendChild(this.html.board); - this.loadLanes(); - this.loadCards(); - this.addListeners(); + cardUp() { + if(this.held){ + this.html.ghost.style.display = 'none' + this.held.classList.remove('held') + this.held = undefined + } } - _createClass(Kanban, [{ - key: 'addListeners', - value: function addListeners() { - var _this = this; + cardMove(x, y) { + this.html.ghost.style.transform = `translateX(${x}px) translateY(${y}px)` + + var ghostX = x + this.mouse.offsetX + var ghostY = y + this.mouse.offsetY + var ghostWidth = this.html.ghost.offsetWidth + var ghostHeight = this.html.ghost.offsetHeight + if(this.held){ + if(!this.heldmoved){ + this.held.classList.add('held') + this.html.ghost.innerHTML = this.held.innerHTML + this.html.ghost.style.width = this.held.offsetWidth + 'px' + this.html.ghost.style.left = this.mouse.offsetX + 'px' + this.html.ghost.style.top = this.mouse.offsetY + 'px' + this.html.ghost.style.display = 'block' + } - window.addEventListener('mouseup', function (e) { - _this.cardUp(); - }); + // Auto scrolling lanes + var lane = this.held.parentElement + var laneRect = lane.getBoundingClientRect() + if(ghostY + ghostHeight > laneRect.top + laneRect.height){ + lane.scrollTop += (ghostY + ghostHeight) - (laneRect.top + laneRect.height) + } - window.addEventListener('mousemove', function (e) { - _this.cardMove(e.clientX, e.clientY); - }); + if(ghostY < laneRect.top){ + lane.scrollTop -= laneRect.top - ghostY + } - document.body.addEventListener('blur', function (e) { - _this.cardUp(); - }); - } - }, { - key: 'cardDown', - value: function cardDown(card) { - this.held = card; - } - }, { - key: 'cardUp', - value: function cardUp() { - if (this.held) { - this.html.ghost.style.display = 'none'; - this.held.classList.remove('held'); - this.held = undefined; + // Auto scrolling board + var boardRect = this.html.board.getBoundingClientRect() + if(ghostX < boardRect.left){ + this.html.board.scrollLeft -= boardRect.left - ghostX } - } - }, { - key: 'cardMove', - value: function cardMove(x, y) { - this.html.ghost.style.transform = 'translateX(' + x + 'px) translateY(' + y + 'px)'; - - var ghostX = x + this.mouse.offsetX; - var ghostY = y + this.mouse.offsetY; - var ghostWidth = this.html.ghost.offsetWidth; - var ghostHeight = this.html.ghost.offsetHeight; - if (this.held) { - if (!this.heldmoved) { - this.held.classList.add('held'); - this.html.ghost.innerHTML = this.held.innerHTML; - this.html.ghost.style.width = this.held.offsetWidth + 'px'; - this.html.ghost.style.left = this.mouse.offsetX + 'px'; - this.html.ghost.style.top = this.mouse.offsetY + 'px'; - this.html.ghost.style.display = 'block'; - } - - // Auto scrolling lanes - var lane = this.held.parentElement; - var laneRect = lane.getBoundingClientRect(); - if (ghostY + ghostHeight > laneRect.top + laneRect.height) { - lane.scrollTop += ghostY + ghostHeight - (laneRect.top + laneRect.height); - } - - if (ghostY < laneRect.top) { - lane.scrollTop -= laneRect.top - ghostY; - } - - // Auto scrolling board - var boardRect = this.html.board.getBoundingClientRect(); - if (ghostX < boardRect.left) { - this.html.board.scrollLeft -= boardRect.left - ghostX; - } - - if (ghostX + ghostWidth > boardRect.left + boardRect.width) { - this.html.board.scrollLeft += ghostX + ghostWidth - (boardRect.left + boardRect.width); - } + + if(ghostX + ghostWidth > boardRect.left + boardRect.width){ + this.html.board.scrollLeft += (ghostX + ghostWidth) - (boardRect.left + boardRect.width) } } - }, { - key: 'laneHide', - value: function laneHide(lane) { - console.log(lane); - lane.classList.toggle('collapse'); - } - }, { - key: 'cardDragOver', - value: function cardDragOver(ele) { - // Chrome - Safari: Move to lane hack - if (!this.held || ele == this.held) return; - if (ele.tagName.toLowerCase() == 'lane-cards') { - // Safari calls child first skip this - if (!this.movedToCardAndLane) ele.appendChild(this.held); - this.movedToLane = true; - this.movedToCardAndLane = false; - return; - } + } - // Chrome calls parent first - // If that happened OR safari calls child first. Set above - this.movedToCardAndLane = ele.parentElement != this.held.parentElement; - ele.nextSibling == this.held || this.movedToLane || this.movedToCardAndLane ? ele.parentElement.insertBefore(this.held, ele) : ele.parentElement.insertBefore(this.held, ele.nextSibling); + laneHide(lane) { + console.log(lane) + lane.classList.toggle('collapse') + } - this.movedToLane = false; - } - }, { - key: 'cardCreate', - value: function cardCreate(card) { - var cardEle = document.createElement('card'); - cardEle.innerHTML = this.content(card.content); - - var that = this; - - cardEle.addEventListener('mouseenter', function (e) { - that.cardDragOver(this); - }); - - cardEle.addEventListener('mousedown', function (e) { - // Click Offset - var downBox = e.target.getBoundingClientRect(); - var cardBox = this.getBoundingClientRect(); - that.mouse = { - offsetX: -e.offsetX - (downBox.left - cardBox.left), - offsetY: -e.offsetY - (downBox.top - cardBox.top) - }; - that.cardDown(this); - }); - - return cardEle; + cardDragOver(ele){ + // Chrome - Safari: Move to lane hack + if(!this.held || ele == this.held) return + if(ele.tagName.toLowerCase() == 'lane-cards'){ + // Safari calls child first skip this + if(!this.movedToCardAndLane) + ele.appendChild(this.held) + this.movedToLane = true + this.movedToCardAndLane = false + return } - }, { - key: 'createLane', - value: function createLane(lane) { - var laneEle = document.createElement('lane'); - var titleEle = document.createElement('lane-title'); - var cardsEle = document.createElement('lane-cards'); - - laneEle.setAttribute('name', lane.name); - titleEle.innerHTML = this.title(lane.title); - - var that = this; - cardsEle.addEventListener('mouseenter', function (e) { - that.cardDragOver(this); - }); - - titleEle.addEventListener('click', function (e) { - that.laneHide(this.parentElement); - }); - - laneEle.appendChild(titleEle); - laneEle.appendChild(cardsEle); - return laneEle; - } - }, { - key: 'createBoard', - value: function createBoard() { - return document.createElement('kanban'); - } - }, { - key: 'loadLanes', - value: function loadLanes() { - var _iteratorNormalCompletion = true; - var _didIteratorError = false; - var _iteratorError = undefined; - - try { - for (var _iterator = this.lanes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { - var lane = _step.value; - - this.html.board.appendChild(this.createLane(lane)); - } - } catch (err) { - _didIteratorError = true; - _iteratorError = err; - } finally { - try { - if (!_iteratorNormalCompletion && _iterator.return) { - _iterator.return(); - } - } finally { - if (_didIteratorError) { - throw _iteratorError; - } - } - } - } - }, { - key: 'loadCards', - value: function loadCards() { - var _iteratorNormalCompletion2 = true; - var _didIteratorError2 = false; - var _iteratorError2 = undefined; - - try { - for (var _iterator2 = this.cards[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { - var card = _step2.value; - - this.loadCard(card); - } - } catch (err) { - _didIteratorError2 = true; - _iteratorError2 = err; - } finally { - try { - if (!_iteratorNormalCompletion2 && _iterator2.return) { - _iterator2.return(); - } - } finally { - if (_didIteratorError2) { - throw _iteratorError2; - } - } + + // Chrome calls parent first + // If that happened OR safari calls child first. Set above + this.movedToCardAndLane = ele.parentElement != this.held.parentElement + ele.nextSibling == this.held || this.movedToLane || this.movedToCardAndLane + ? ele.parentElement.insertBefore(this.held, ele) + : ele.parentElement.insertBefore(this.held, ele.nextSibling) + + this.movedToLane = false + } + + cardCreate(card) { + var cardEle = document.createElement('card') + cardEle.innerHTML = this.content(card.content) + + var that = this + + cardEle.addEventListener('mouseenter', function(e){ + that.cardDragOver(this) + }) + + cardEle.addEventListener('mousedown', function(e){ + // Click Offset + var downBox = e.target.getBoundingClientRect() + var cardBox = this.getBoundingClientRect() + that.mouse = { + offsetX: -e.offsetX - (downBox.left - cardBox.left), + offsetY: -e.offsetY - (downBox.top - cardBox.top) } + that.cardDown(this) + }) + + return cardEle + } + + createLane(lane) { + var laneEle = document.createElement('lane') + var titleEle = document.createElement('lane-title') + var cardsEle = document.createElement('lane-cards') + + laneEle.setAttribute('name', lane.name) + titleEle.innerHTML = this.title(lane.title) + + var that = this + cardsEle.addEventListener('mouseenter', function(e){ + that.cardDragOver(this) + }) + + titleEle.addEventListener('click', function(e){ + that.laneHide(this.parentElement) + }) + + laneEle.appendChild(titleEle) + laneEle.appendChild(cardsEle) + return laneEle + } + + createBoard() { + return document.createElement('kanban') + } + + loadLanes() { + for(var lane of this.lanes) { + this.html.board.appendChild(this.createLane(lane)) } - }, { - key: 'loadCard', - value: function loadCard(card) { - var newCard = this.cardCreate(card); - this.html.cards.push(newCard); - this.getLaneCardHolder(card.lane).appendChild(newCard); - } - }, { - key: 'getLaneCardHolder', - value: function getLaneCardHolder(name) { - var selector = 'lane[name=' + name + '] lane-cards'; - return this.html.board.querySelector(selector); + } + + loadCards() { + for(var card of this.cards) { + this.loadCard(card) } - }]); + } - return Kanban; -}(); \ No newline at end of file + loadCard(card) { + var newCard = this.cardCreate(card) + this.html.cards.push(newCard) + this.getLaneCardHolder(card.lane).appendChild(newCard) + } + + getLaneCardHolder(name){ + var selector = `lane[name=${name}] lane-cards` + return this.html.board.querySelector(selector) + } +} diff --git a/dist/styles.css b/dist/styles.css deleted file mode 100644 index e69de29..0000000 diff --git a/dist/styles.min.css b/dist/styles.min.css deleted file mode 100644 index e69de29..0000000 diff --git a/dist/styles.scss b/dist/styles.scss new file mode 100644 index 0000000..a8fe2d5 --- /dev/null +++ b/dist/styles.scss @@ -0,0 +1,162 @@ +$color-font: #000; +$color-border: #CDCDCD; +$color-background: #FFF; +$color-selected: rgba(0, 0, 0, 0.1); +$whitespace: 10px; + +html, body{ + padding:0px; + margin:0px; + height:100%; +} + +body *, body *:after, body, *:before{ + font-family: 'Karla', sans-serif; + color:$color-font; + box-sizing:border-box; + display:block; + padding:0px; + margin:0px; + background:none; + border:none; +} +script, style{ display:none; } + +kanban{ + width:100%; + height:100%; + background: $color-background; + display:flex; + overflow:auto; + lane{ + flex:1; + min-width:200px; + border-right:1px solid $color-border; + display:flex; + flex-direction: column; + user-select:none; + &:last-of-type{ + border-right:none; + } + lane-title{ + padding:$whitespace; + text-align:center; + user-select:none; + white-space:nowrap; + } + + lane-cards{ + flex:1; + overflow:auto; + card{ + border:0.1px solid transparent; + user-select:none; + position:relative; + + &.held{ + visibility:hidden; + &:after{ + visibility:visible; + content: ''; + background:$color-selected; + position:absolute; + top:0px; left:0px; + width:100%; height:100%; + } + } + } + } + + &.collapse{ + max-width:40px; + min-width:40px; + + lane-title{ + writing-mode: vertical-rl; + text-orientation: upright; + min-height:100%; + height:100%; + flex:1; + } + + lane-cards{ + display:none; + } + } + } + + ghost{ + border:0.1px solid transparent; + user-select:none; + position:fixed; + top:0px; + left:0px; + pointer-events:none; + z-index:1000; + opacity:0.5; + } +} + +// User styles +#myKanBan{ + height:100%; + //max-height:400px; + //max-width:625px; + //margin:40px auto; + box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25); + + lane lane-title{ + background:#333; + color:#FFF; + } +} +card, ghost{ + + mycard-container{ + width:100%; + height:100%; + padding:$whitespace; + padding-bottom:0px; + overflow:hidden; + + mycard-content { + border-radius:3px; + overflow:hidden; + } + + mycard-title { + background:#444; + color:#FFF; + padding:$whitespace; + button{ + display:inline; + float:right; + padding:0px 5px; + &:hover{ + background:$color-selected; + } + } + } + + mycard-text { + position:relative; + padding:$whitespace*2 $whitespace; + font-size:0.8em; + color:#FFF; + + } + + .bg-green{ + background:#33A852; + } + .bg-blue{ + background:#5FC3EB; + } + .bg-orange{ + background:#ffb440; + } + .bg-red{ + background: #ff4747; + } + } +} diff --git a/example/basic.html b/example/basic.html index 5146494..5ae5d0a 100644 --- a/example/basic.html +++ b/example/basic.html @@ -1,12 +1,12 @@ - +
- +