feat: add (optional) prepend argument (#107)

* Bugfix [onSpringUpdate used Card.transform instead of config.transform]

* Optionally prepend cards instead of appending. Possible fix for #4

* Syntax consistency + fixed comments

* updating param for stack.createCard function

* adding @param for prepend to card constructor

README.md

@@ -148,7 +148,7 @@ const card = stack.createCard(HTMLElement);
 
 | Name | Description |
 | --- | --- |
-| `stack.createCard(element)` | Creates an instance of Card and associates it with the element. |
+| `stack.createCard(element, prepend)` | Creates an instance of Card and associates it with the element. If prepend is true, the card is prepended to the stack, instead of appended [default: false]. |
 | `stack.getCard(element)` | Returns card associated with an element. |
 | `stack.on(event, listener)` | Attaches an [event listener](#events). |
 | `card.on(event, listener)` | Attaches an [event listener](#events). |

src/Card.js

@@ -34,9 +34,10 @@ const computeDirection = (fromX, fromY, allowedDirections) => {
 /**
  * @param {Stack} stack
  * @param {HTMLElement} targetElement
+ * @param {boolean} prepend
  * @returns {Object} An instance of Card.
  */
-const Card = (stack, targetElement) => {
+const Card = (stack, targetElement, prepend) => {
   let card;
   let config;
   let currentX;
@@ -97,7 +98,11 @@ const Card = (stack, targetElement) => {
       ]
     });
 
-    Card.appendToParent(targetElement);
+    if (prepend) {
+      Card.prependToParent(targetElement);
+    } else {
+      Card.appendToParent(targetElement);
+    }
 
     eventEmitter.on('panstart', () => {
       Card.appendToParent(targetElement);
@@ -296,7 +301,7 @@ const Card = (stack, targetElement) => {
       lastTranslate.coordinateX = coordinateX || 0;
       lastTranslate.coordinateY = coordinateY || 0;
 
-      Card.transform(targetElement, coordinateX, coordinateY, rotation);
+      config.transform(targetElement, coordinateX, coordinateY, rotation);
     };
 
     /**
@@ -452,6 +457,23 @@ Card.appendToParent = (element) => {
   }
 };
 
+/**
+ * Prepend element to the parentNode.
+ *
+ * This makes the element last among the siblings.
+ *
+ * Invoked when card is added to the stack (when prepend is true).
+ *
+ * @param {HTMLElement} element The target element.
+ * @return {undefined}
+ */
+Card.prependToParent = (element) => {
+  const parentNode = element.parentNode;
+
+  parentNode.removeChild(element);
+  parentNode.insertBefore(element, parentNode.firstChild);
+};
+
 /**
  * Returns a value between 0 and 1 indicating the completeness of the throw out condition.
  *

src/Stack.js

@@ -55,10 +55,11 @@ const Stack = (config) => {
    * Creates an instance of Card and associates it with an element.
    *
    * @param {HTMLElement} element
+   * @param {boolean} prepend
    * @returns {Card}
    */
-  stack.createCard = (element) => {
-    const card = Card(stack, element);
+  stack.createCard = (element, prepend) => {
+    const card = Card(stack, element, prepend);
     const events = [
       'throwout',
       'throwoutend',