element removal with remaining elements filling in the gaps

dist/bricklayer-node.js

@@ -81,13 +81,26 @@ var Bricklayer;
             this.elements = [item].concat(toArray(this.elements));
             this.applyPosition('prepend', column, item);
         };
+        Container.prototype.remove = function (item) {
+            var _this = this;
+            if (Array.isArray(item)) {
+                item.forEach(function (item) { return _this.remove(item); });
+                return;
+            }
+            var index = this.elements.indexOf(item);
+            this.elements.splice(index, 1);
+            var column = item.closest(".bricklayer-column");
+            this.applyPosition('remove', column, item);
+        };
         Container.prototype.on = function (eventName, handler) {
             // eventName may be:
             // - breakpoint
-            // - afterAppend
             // - beforeAppend
-            // - afterPrepend
+            // - afterAppend
             // - beforePrepend
+            // - afterPrepend
+            // - beforeRemove
+            // - afterRemove
             this.element.addEventListener("bricklayer." + eventName, handler);
             return this;
         };
@@ -182,13 +195,34 @@ var Bricklayer;
                 case 'prepend':
                     column.insertBefore(item, column.firstChild);
                     break;
+                case 'remove':
+                    column.removeChild(item);
+                    this.redraw();
+                    break;
             }
             trigger('after');
         };
         return Container;
     }());
     Bricklayer.Container = Container;
 })(Bricklayer || (Bricklayer = {}));
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector
+        || Element.prototype.webkitMatchesSelector;
+}
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function (selector) {
+        var element = this;
+        if (!document.documentElement.contains(element))
+            return null;
+        do {
+            if (element.matches(selector))
+                return element;
+            element = element.parentElement;
+        } while (element !== null);
+        return null;
+    };
+}
 (function (root, factory) {
     if (typeof define === 'function' && define.amd) {
         define(function () { return factory(); });

dist/bricklayer.js

@@ -82,13 +82,26 @@ var Bricklayer;
             this.elements = [item].concat(toArray(this.elements));
             this.applyPosition('prepend', column, item);
         };
+        Container.prototype.remove = function (item) {
+            var _this = this;
+            if (Array.isArray(item)) {
+                item.forEach(function (item) { return _this.remove(item); });
+                return;
+            }
+            var index = this.elements.indexOf(item);
+            this.elements.splice(index, 1);
+            var column = item.closest(".bricklayer-column");
+            this.applyPosition('remove', column, item);
+        };
         Container.prototype.on = function (eventName, handler) {
             // eventName may be:
             // - breakpoint
-            // - afterAppend
             // - beforeAppend
-            // - afterPrepend
+            // - afterAppend
             // - beforePrepend
+            // - afterPrepend
+            // - beforeRemove
+            // - afterRemove
             this.element.addEventListener("bricklayer." + eventName, handler);
             return this;
         };
@@ -183,13 +196,34 @@ var Bricklayer;
                 case 'prepend':
                     column.insertBefore(item, column.firstChild);
                     break;
+                case 'remove':
+                    column.removeChild(item);
+                    this.redraw();
+                    break;
             }
             trigger('after');
         };
         return Container;
     }());
     Bricklayer.Container = Container;
 })(Bricklayer || (Bricklayer = {}));
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector
+        || Element.prototype.webkitMatchesSelector;
+}
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function (selector) {
+        var element = this;
+        if (!document.documentElement.contains(element))
+            return null;
+        do {
+            if (element.matches(selector))
+                return element;
+            element = element.parentElement;
+        } while (element !== null);
+        return null;
+    };
+}
 (function (root, factory) {
     if (typeof define === 'function' && define.amd) {
         define(function () { return factory(); });

examples/basic.html

@@ -14,6 +14,7 @@
   <button data-append>APPEND</button>
   <button data-prepend>PREPEND</button>
   <button data-append-multiple>APPEND MULTIPLE</button>
+  <button data-remove>REMOVE FIRST</button>
 </div>
 
 <script src="../dist/bricklayer.js"></script>

examples/demo.js

@@ -1,16 +1,27 @@
-function newBox() {
+function newBox(index) {
   var randomColor = '#' + Math.random().toString(16).substr(-6);
   var heights = [50, 90, 150, 190, 230];
   var randomHeight = heights[Math.floor(Math.random() * heights.length)];
   var box = document.createElement('div');
+  box.innerHTML = index;
   box.className = 'box';
   box.style.backgroundColor = randomColor;
   box.style.height = randomHeight + "px";
+  box.addEventListener("click", function () {
+    bricklayer.remove(box);
+  });
   return box;
 }
 
 var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
 
+var i = 1;
+bricklayer.append(newBox(i++));
+bricklayer.append(newBox(i++));
+bricklayer.append(newBox(i++));
+bricklayer.append(newBox(i++));
+bricklayer.append(newBox(i++));
+
 bricklayer.on("breakpoint", function (e) {
   console.log(e.detail.columnCount);
 })
@@ -36,30 +47,37 @@ bricklayer.on("afterAppend", function (e) {
 var buttons = document.querySelectorAll("button");
 
 function goToScroll(value) {
-  document.body.scrollTop = value
+  document.documentElement.scrollTop = value
 }
 Array.prototype.slice.call(buttons).forEach(function (button) {
   button.addEventListener('click', function (e) {
     var button = e.target
-    var box = newBox();
-
-    box.innerHTML = (bricklayer.elements.length + 1);
 
     if (button.hasAttribute("data-append")) {
+      let box = newBox(bricklayer.elements.length + 1)
       bricklayer.append(box);
       goToScroll(document.body.scrollHeight)
     }
 
     if (button.hasAttribute("data-prepend")) {
+      let box = newBox(bricklayer.elements.length + 1)
       bricklayer.prepend(box);
       goToScroll(0)
     }
 
     if (button.hasAttribute("data-append-multiple")) {
-      var anotherBox = newBox();
-      anotherBox.innerHTML = (bricklayer.elements.length + 2);
-      bricklayer.append([box, anotherBox]);
+      bricklayer.append([
+        newBox(bricklayer.elements.length + 1), 
+        newBox(bricklayer.elements.length + 2)
+      ]);
       goToScroll(document.body.scrollHeight)
     }
+
+    if (button.hasAttribute("data-remove")) {
+      if (bricklayer.elements && bricklayer.elements.length > 0) {
+        let box = bricklayer.elements[0];
+        bricklayer.remove(box);
+      }
+    }
   });
 });

src/bricklayer.ts

@@ -4,7 +4,7 @@ interface IOptions {
 }
 
 module Bricklayer {
-
+  
   // Helper Functions
   function toArray(arrayLike : {length : number}) {
     return [].slice.call(arrayLike)
@@ -82,13 +82,26 @@ module Bricklayer {
       this.applyPosition('prepend', column, item)
     }
 
+    remove(item) {
+      if (Array.isArray(item)) {
+        item.forEach(item => this.remove(item))
+        return
+      }
+      let index = this.elements.indexOf(item);
+      this.elements.splice(index, 1);
+      let column = item.closest(".bricklayer-column");
+      this.applyPosition('remove', column, item);
+    }
+
     on(eventName, handler) {
       // eventName may be:
       // - breakpoint
-      // - afterAppend
       // - beforeAppend
-      // - afterPrepend
+      // - afterAppend
       // - beforePrepend
+      // - afterPrepend
+      // - beforeRemove
+      // - afterRemove
       this.element.addEventListener(`bricklayer.${eventName}`, handler)
       return this
     }
@@ -193,13 +206,44 @@ module Bricklayer {
         case 'prepend':
           column.insertBefore(item, column.firstChild)
           break
+        case 'remove':
+          column.removeChild(item);
+          this.redraw();
+          break
       }
       trigger('after')
     }
 
   }
 }
 
+// Polyfills
+interface Element{
+  matches(selectors: string);
+  closest(selector: string);
+}
+
+if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector
+    || Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function (selector) {
+    var element = this;
+    if (!document.documentElement.contains(element))
+      return null;
+
+    do {
+      if (element.matches(selector))
+        return element;
+      element = element.parentElement;
+    } while (element !== null);
+
+    return null;
+  };
+}
+
 declare var define
 declare var module