moving card from lanes / events

sean-codes · Nov 18, 2017 · d82cf28 · d82cf28
1 parent 8354b38
commit d82cf28
Show file tree

Hide file tree

Showing 8 changed files with 474 additions and 291 deletions.
diff --git a/dist/scripts.js b/dist/scripts.js
diff --git a/dist/scripts.min.js b/dist/scripts.min.js
diff --git a/example/basic.html b/example/basic.html
@@ -8,19 +8,30 @@
 
       <script src="./../dist/scripts.js"></script>
       <script>
+         var laneTemplate = (content) => { return content }
+         var cardTemplate = (content) => { return `<div style='background:#465'>${content}</div>` }
+
+         // Create the board
+         var mykanban = new KanbanBoard('#myKanBan')
+
+         // Add Lanes
+         mykanban.addLane(new KanbanLane('lane1', 'Lane 1', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane2', 'Lane 2', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane3', 'Lane 3', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane4', 'Lane 4', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane5', 'Lane 5', laneTemplate))
+
+         // Add Cards
+         mykanban.addCard(new KanbanCard('card1', 'lane1', 'demo', cardTemplate))
+
+         /*
+
          document.body.onload = function() {
             // User Code
-            var kanban = new Kanban({
+            kanban = new Kanban({
                selector: '#myKanBan',
-               lanes: [
-                  { id: 'lane1', content: 'Lane 1' },
-                  { id: 'lane2', content: 'Lane 2' },
-                  { id: 'lane3', content: 'Lane 3' },
-                  { id: 'lane4', content: 'Lane 4' },
-                  { id: 'lane5', content: 'Lane 5' }
-               ],
-               title: (title) => { return title },
-               content: (content) => {
+               htmlLane: (title) => { return title },
+               htmlCard: (content) => {
                   return `
                      <mycard-container>
                         <mycard-content>
@@ -32,6 +43,13 @@
                      </mycard-container>
                   `
                },
+               lanes: [
+                  { id: 'lane1', content: 'Lane 1' },
+                  { id: 'lane2', content: 'Lane 2' },
+                  { id: 'lane3', content: 'Lane 3' },
+                  { id: 'lane4', content: 'Lane 4' },
+                  { id: 'lane5', content: 'Lane 5' }
+               ],
                cards: randomCards(10)
             })
 
@@ -62,6 +80,7 @@
                return arr[Math.floor(Math.random()*arr.length)]
             }
          }
+         */
       </script>
    </body>
 </html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -31,7 +31,10 @@ gulp.task('js', function(){
    gulp.src('src/*.js')
       .pipe(concat('scripts.js'))
       .pipe(babel({ presets: ['env'] }))
-      .on('error', (error) => { console.log('JavaScript Error: ', error.loc); this.emit('end') })
+      .on('error', (error) => {
+         console.log('JavaScript Error: ', error.loc);
+         console.log('JavaScript Error: ', error); 
+         this.emit('end') })
       .pipe(gulp.dest('dist'))
 });
 

diff --git a/src/Board.js b/src/Board.js
@@ -1,97 +1,100 @@
-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
+class KanbanBoard {
+   constructor(selector) {
+      this.selector = selector
+      this.lanes = []
+      this.cards = []
+      this.heldCard = undefined
+      this.heldCardMoved = false
 
       this.html = {}
+      this.create()
+      this.createGhost()
+
+      // Initialize
+      this.html.container.appendChild(this.html.board)
+      this.addListeners()
+   }
+   create() {
       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)
+   }
 
-      // Initialize
-      this.html.container.appendChild(this.html.board)
-      this.createLanes()
-      // this.loadCards()
-      // this.addListeners()
+   createGhost() {
+      this.ghost = new KanbanGhost()
+      this.html.board.appendChild(this.ghost.html)
    }
 
    addListeners() {
-      window.addEventListener('mouseup', (e) => {
-         this.cardUp()
-      })
+      window.addEventListener('mouseup', (e) => { this.mouseUp() })
+      window.addEventListener('mousemove', (e) => { this.mouseMove(e.clientX, e.clientY) })
+      document.body.addEventListener('blur', (e) => { this.cardUp() })
+   }
 
-      window.addEventListener('mousemove', (e) => {
-         this.cardMove(e.clientX, e.clientY)
-      })
+   createBoard() {
+      return document.createElement('kanban')
+   }
 
-      document.body.addEventListener('blur', (e) => {
-         this.cardUp()
-      })
+   addLane(lane) {
+      this.lanes.push(lane)
+      lane.onMouseEnterLane = (lane) => { this.mouseEnterLane(lane) }
+      this.html.board.appendChild(lane.html.lane)
    }
 
-   cardDown(card) {
-      this.held = card
+   addCard(card) {
+      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)
    }
 
-   cardUp() {
-      if(this.held){
-         this.html.ghost.style.display = 'none'
-         this.held.classList.remove('held')
-         this.held = undefined
-      }
+   findLane(laneID) {
+      return this.lanes.find((e) => { return e.id == laneID })
    }
 
-   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'
-         }
+   findCard(cardID) {
+      return this.cards.find((e) => { return e.id == cardID })
+   }
 
-         // 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)
-         }
+   putCardInLane(cardID, laneID){
+      this.findLane(laneID).append(this.findCard(cardID))
+   }
 
-         if(ghostY < laneRect.top){
-            lane.scrollTop -= laneRect.top - ghostY
-         }
+   // All the events
+   mouseEnterLane(lane) {
+      if(this.heldCard){
+         this.putCardInLane(this.heldCard.id, lane.id)
+      }
+   }
 
-         // Auto scrolling board
-         var boardRect = this.html.board.getBoundingClientRect()
-         if(ghostX < boardRect.left){
-            this.html.board.scrollLeft -= boardRect.left - ghostX
-         }
+   mouseEnterCard(card) {
+      console.log('board knows: mouse enter card')
+      // move card to the lane
+   }
 
-         if(ghostX + ghostWidth > boardRect.left + boardRect.width){
-            this.html.board.scrollLeft += (ghostX + ghostWidth) - (boardRect.left + boardRect.width)
-         }
-      }
+   mouseDownOnCard(card, offX, offY) {
+      console.log('board knows: mouse down card')
+      this.heldCard = card
+      this.heldCard.grab()
+      this.ghost.grab(card)
+   }
+
+   mouseUp() {
+      console.log('board knows: mouse up')
+      this.heldCard.drop()
+      this.ghost.hide()
+      this.heldCard = undefined
    }
 
-   laneHide(lane) {
-      lane.classList.toggle('collapse')
+   mouseMove(x, y) {
+      console.log('board knows: mouse move')
+      if(this.heldCard) {
+         if(!this.heldCard.moved) {
+            this.heldCard.hold()
+            this.ghost.show()
+         }
+         this.ghost.move(x, y)
+      }
    }
 
    cardDragOver(ele){
@@ -116,36 +119,6 @@ class Kanban {
       this.movedToLane = false
    }
 
-   createBoard() {
-      return document.createElement('kanban')
-   }
-
-   createLanes() {
-      this.lanes.forEach((lane) => this.createLane(lane))
-   }
-
-   createLane(lane) {
-      var kabbanLane = new KanbanLane(this, lane, this.title)
-      kabbanLane.mouseEnterLane = this.dragCardToLane
-      this.html.board.appendChild(kabbanLane.html.lane)
-   }
-
-   createCards() {
-      this.cards.forEach((card) => this.createCard(card))
-   }
-
-   createCard(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)
-   }
-
-   moveCardToLane(){
-      console.log('test')
-   }
+   // This one will get scarey
+   scroll() { }
 }