diff --git a/src/Ghost.js b/src/KanBanGhost.js similarity index 100% rename from src/Ghost.js rename to src/KanBanGhost.js diff --git a/src/Board.js b/src/KanbanBoard.js similarity index 56% rename from src/Board.js rename to src/KanbanBoard.js index 6e83372..c81e20b 100644 --- a/src/Board.js +++ b/src/KanbanBoard.js @@ -1,4 +1,9 @@ +/** A Kanban Board */ class KanbanBoard { + /** + * Create a kanban board + * @param {string} selector - the selector for the container + **/ constructor(selector) { this.selector = selector this.lanes = [] @@ -12,54 +17,86 @@ class KanbanBoard { this.addListeners() } + /** + * Creates the board, appends to the container + **/ create() { this.html.container = document.querySelector(this.selector) - this.html.board = this.createBoard() + this.html.board = document.createElement('kanban') this.html.container.appendChild(this.html.board) this.html.cards = [] } + /** + * Creates the Ghost element that will follow the cursor + **/ createGhost() { this.ghost = new KanbanGhost(this.html.board) this.html.board.appendChild(this.ghost.html) } + /** + * Adds event listeners for global events + **/ addListeners() { window.addEventListener('mouseup', (e) => { this.mouseUp() }) window.addEventListener('mousemove', (e) => { this.mouseMove(e.clientX, e.clientY) }) document.body.addEventListener('blur', (e) => { this.cardUp() }) } - createBoard() { - return document.createElement('kanban') - } - + /** + * Adds a lane to the board + * @param {KanbanLane} lane - the kanban lane to add + **/ addLane(lane) { this.lanes.push(lane) lane.onMouseEnterLane = (lane) => { this.mouseEnterLane(lane) } this.html.board.appendChild(lane.html.lane) } - addCard(card) { + /** + * Adds a card to the board + * @param {KanbanCard} card - the kanban card to add + * @param {laneID} laneID - lane to add in + **/ + addCard(card, laneID) { this.cards.push(card) card.onMouseEnter = (card) => { this.mouseEnterCard(card) } card.onMouseDown = (card, offX, offY) => { this.mouseDownOnCard(card, offX, offY) } - this.putCardInLane(card.id, card.lane) + this.putCardInLane(card.id, laneID) } + /** + * Finds a lane on the board + * @param {string} laneID - the lane ID of the lane to find + **/ findLane(laneID) { return this.lanes.find((e) => { return e.id == laneID }) } + /** + * Finds a card on the board + * @param {string} cardID - the card ID of the card to find + **/ findCard(cardID) { return this.cards.find((e) => { return e.id == cardID }) } + /** + * Moves a card to a lane at the end + * @param {string} cardID - the card ID to move + * @param {string} laneID - the lane ID to put the card in + **/ putCardInLane(cardID, laneID){ this.ghost.lane = this.findLane(laneID) this.findLane(laneID).append(this.findCard(cardID)) } + /** + * Puts a card around a card + * @param {string} cardID1 - the card ID to move + * @param {string} cardID2 - the card ID to put around + **/ putCardAroundCard(cardID1, cardID2){ var card1 = this.findCard(cardID1) var card2 = this.findCard(cardID2) @@ -67,31 +104,50 @@ class KanbanBoard { this.findLane(card2.lane).appendCardAroundCard(card1, card2) } - // All the events + /** + * Fires when the mouse enters a lane + * @param {KanbanLane} lane - the lane the mouse entered + **/ mouseEnterLane(lane) { if(this.heldCard) { this.putCardInLane(this.heldCard.id, lane.id) } } + /** + * Fires when the mouse enters a card + * @param {KanbanCard} card - the card the mouse entered + **/ mouseEnterCard(card) { if(this.heldCard) { this.putCardAroundCard(this.heldCard.id, card.id) } } - mouseDownOnCard(card, offX, offY) { + /** + * Fires when the mouse presses down on a card + * @param {KanbanCard} card - the card the mouse clicked + **/ + mouseDownOnCard(card) { this.heldCard = card this.heldCard.grab() this.ghost.grab(card) } + /** + * Fires when the mouse comes up + **/ mouseUp() { this.heldCard.drop() this.ghost.hide() this.heldCard = undefined } + /** + * Fires when the mouse moves + * @param {number} x - the mouse x pos + * @param {number} y - the mouse y pos + **/ mouseMove(x, y) { if(this.heldCard) { if(!this.heldCard.moved) { diff --git a/src/Card.js b/src/KanbanCard.js similarity index 94% rename from src/Card.js rename to src/KanbanCard.js index cb4f22a..6bde17a 100644 --- a/src/Card.js +++ b/src/KanbanCard.js @@ -1,7 +1,7 @@ class KanbanCard { - constructor(id, lane, content, template){ + constructor(id, content, template){ this.id = id - this.lane = lane + this.lane = undefined this.content = content this.template = template this.html = {} diff --git a/src/Lane.js b/src/KanbanLane.js similarity index 100% rename from src/Lane.js rename to src/KanbanLane.js