Merge pull request #17 from nelsonni/stacks-class-tesing

Stacks class testing
EPICLab · Aug 18, 2017 · 819ac21 · 819ac21
2 parents aabd16c + a9edaa6
commit 819ac21
Show file tree

Hide file tree

Showing 6 changed files with 296 additions and 985 deletions.
diff --git a/app/Card.js b/app/Card.js
@@ -1,6 +1,7 @@
 "use strict";
 const Error = require('../lib/error.js');
 const uuidv4 = require('uuid/v4');
+const Stack = require('../app/Stacks.js');
 
 module.exports = class Card {
   constructor({
@@ -28,10 +29,21 @@ module.exports = class Card {
     this.title = document.createElement('span');
     $(this.title).html("My Card");
 
+    this.closeButton = document.createElement('button');
+      $(this.closeButton).click(() => console.log('close button clicked'))
+    this.saveButton = document.createElement('button');
+      $(this.saveButton).click(() => console.log('save button clicked'))
+    this.fullscreenButton = document.createElement('button');
+      $(this.fullscreenButton).click(() => console.log('fullscreen button clicked'));
+
     this.header.appendChild(this.title);
+    this.header.appendChild(this.closeButton);
+    this.header.appendChild(this.saveButton);
+    this.header.appendChild(this.fullscreenButton);
     this.card.appendChild(this.header);
     context.appendChild(this.card);
     if (modal) this.toggleDraggable();
+    this.toggleDroppable();
   }
 
   updateMetadata() {
@@ -53,12 +65,16 @@ module.exports = class Card {
       $(this.card).draggable({
         handle: '.card-header',
         containment: 'window',
+        stack: '.card, .stack',
         start: function() {
           $(this).css({
             transform: 'none',
             top: $(this).offset().top+'px',
             left: $(this).offset().left+'px'
           });
+        },
+        drag: (event, ui) => {
+          this.updateMetadata();
         }
       });
     }
@@ -68,7 +84,17 @@ module.exports = class Card {
     if ($(this.card).data('droppable')) {
       $(this.card).droppable('disable');
     } else {
-      $(this.card).droppable();
+      $(this.card).droppable({
+        accept: '.card, .stack',
+        drop: function(event, ui) {
+          //handles card-to-card drop events
+          if ($(ui.draggable).hasClass('card')) {
+            new Stack($(this), $(ui.draggable));
+            // console.log(this, ui.draggable);
+            // console.log($(this), $(ui.draggable));
+          }
+        },
+      });
     }
   }
 }
diff --git a/app/Stacks.js b/app/Stacks.js
@@ -5,20 +5,26 @@ const TOTAL_SIZE = CARD_WIDTH + CARD_PADDING;
 const OFFSET_LEFT = 35;
 const OFFSET_TOP = 15;
 const uuidv4 = require('uuid/v4');
+const Card = require('../app/Card.js');
 
 module.exports = class Stack {
   // constructor uses ECMA-262 rest parameters and spread syntax
-  constructor() {
+  constructor(...cards) {
     this.cards = [];
     this.id = 3;
     this.uuid = uuidv4();
     this.state = 'collapsed';
 
     this.stack = document.createElement('div');
-    $(this.stack).attr('class', 'stack');
-
+    $(this.stack).attr('class', 'stack')
+      // .css({
+      //   top: $(cards[0]).offset().top - 25,
+      //   left: $(cards[0]).offset().left - 25,
+      // });
     this.closeButton = document.createElement('button');
     $(this.closeButton).attr('class', 'stackClose');
+    $(this.closeButton).click(() => console.log('close button clicked'))
+
 
     this.annotation = document.createElement('textarea');
     $(this.annotation).attr({
@@ -28,16 +34,27 @@ module.exports = class Stack {
 
     this.expandButton = document.createElement('button');
     $(this.expandButton).attr('class', 'stackExpandButton');
+    $(this.expandButton).click(() => console.log('expand button clicked'))
 
     this.stack.appendChild(this.closeButton);
     this.stack.appendChild(this.annotation);
     this.stack.appendChild(this.expandButton);
     document.body.appendChild(this.stack);
+
+    for(var i = 0; i < cards.length; i++){
+      this.addCard(cards[i]);
+    }
+    this.toggleDraggable();
+    this.cascadeCards();
   }
 
   // add individual card to the top of the stack
-  addCard(card) {
-    this.cards.push(card);
+  addCard(currCard) {
+    this.cards.push(currCard);
+    let body = document.querySelector('.card');
+    this.stack.appendChild(body);
+    // currCard.droppable('disable');
+    console.log('card added');
   }
 
   // remove individual card from the stack
@@ -47,12 +64,28 @@ module.exports = class Stack {
 
   // position all stacked cards according to their index within the stack
   cascadeCards() {
-    this.cards.forEach((cards, index) => {
-      $(cards.card).css({
-        top: $(this.stack).offset().top + ((index + 1) * 25) + 'px',
-        left: $(this.stack).offset().left + ((index + 1) * 25) + 'px',
-        'z-index': (index + 1),
+    for(var i = 0; i < this.cards.length; i++){
+      $(this.cards[i]).css({
+        top: $(this.stack).offset().top + ((i + 1) * 25) + 'px',
+        left: $(this.stack).offset().left + ((i + 1) * 25) + 'px',
+        'z-index': (i + 1),
+      });
+    }
+  }
+
+  //enables a stack to be dragged
+  toggleDraggable() {
+    if($(this.stack).data('draggable')) {
+      $(this.stack).draggable('disable');
+    }
+    else {
+      $(this.stack).draggable({
+        containment: 'window',
+        stack: '.stack, .card',
+        drag: (event, ui) => this.cascadeCards(),
       });
-    });
+    }
   }
+
+
 }