From 51d9c96566ddb1fff540f1e5adea671dd13483ed Mon Sep 17 00:00:00 2001
From: Dan Dohotaru <dan.dohotaru@gmail.com>
Date: Fri, 27 Oct 2017 08:25:56 +0200
Subject: [PATCH 1/4] fix scroll to value

---
 examples/demo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/demo.js b/examples/demo.js
index 17ff731..7337fd6 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -36,7 +36,7 @@ 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) {

From 501c712b547ef0867d9b0f086ea0708a02410ac9 Mon Sep 17 00:00:00 2001
From: Dan Dohotaru <dan.dohotaru@gmail.com>
Date: Fri, 27 Oct 2017 11:05:47 +0200
Subject: [PATCH 2/4] implement remove item feature

---
 src/bricklayer.ts | 50 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/bricklayer.ts b/src/bricklayer.ts
index 8d43d8d..cbe1d2a 100644
--- a/src/bricklayer.ts
+++ b/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,6 +206,10 @@ module Bricklayer {
         case 'prepend':
           column.insertBefore(item, column.firstChild)
           break
+        case 'remove':
+          column.removeChild(item);
+          this.redraw();
+          break
       }
       trigger('after')
     }
@@ -200,6 +217,33 @@ module Bricklayer {
   }
 }
 
+// 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
 

From c437152ee324236fde889054d077930c70b16f14 Mon Sep 17 00:00:00 2001
From: Dan Dohotaru <dan.dohotaru@gmail.com>
Date: Fri, 27 Oct 2017 11:08:26 +0200
Subject: [PATCH 3/4] update dist via gulp export

---
 dist/bricklayer-node.js | 38 ++++++++++++++++++++++++++++++++++++--
 dist/bricklayer.js      | 38 ++++++++++++++++++++++++++++++++++++--
 dist/bricklayer.min.js  |  2 +-
 3 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/dist/bricklayer-node.js b/dist/bricklayer-node.js
index 3c84ea0..54e028f 100644
--- a/dist/bricklayer-node.js
+++ b/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,6 +195,10 @@ var Bricklayer;
                 case 'prepend':
                     column.insertBefore(item, column.firstChild);
                     break;
+                case 'remove':
+                    column.removeChild(item);
+                    this.redraw();
+                    break;
             }
             trigger('after');
         };
@@ -189,6 +206,23 @@ var Bricklayer;
     }());
     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(); });
diff --git a/dist/bricklayer.js b/dist/bricklayer.js
index 613e494..df2df3e 100644
--- a/dist/bricklayer.js
+++ b/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,6 +196,10 @@ var Bricklayer;
                 case 'prepend':
                     column.insertBefore(item, column.firstChild);
                     break;
+                case 'remove':
+                    column.removeChild(item);
+                    this.redraw();
+                    break;
             }
             trigger('after');
         };
@@ -190,6 +207,23 @@ var Bricklayer;
     }());
     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(); });
diff --git a/dist/bricklayer.min.js b/dist/bricklayer.min.js
index fc975d3..5451c46 100644
--- a/dist/bricklayer.min.js
+++ b/dist/bricklayer.min.js
@@ -1 +1 @@
-!function t(e,n,r){function o(s,u){if(!n[s]){if(!e[s]){var l="function"==typeof require&&require;if(!u&&l)return l(s,!0);if(i)return i(s,!0);var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[s]={exports:{}};e[s][0].call(p.exports,function(t){var n=e[s][1][t];return o(n?n:t)},p,p.exports,t,e,n,r)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)o(r[s]);return o}({1:[function(t,e,n){var r,o=this&&this.__extends||function(t,e){function n(){this.constructor=t}for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r]);t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)};!function(t){function e(t){return[].slice.call(t)}function n(t,e,n){if(window.CustomEvent)var r=new CustomEvent(e,{detail:n});else{var r=document.createEvent("CustomEvent");r.initCustomEvent(e,!0,!0,n)}return t.dispatchEvent(r)}var r={rulerClassName:"bricklayer-column-sizer",columnClassName:"bricklayer-column"},i=function(){function t(t){this.element=document.createElement("div"),this.element.className=t}return t.prototype.destroy=function(){this.element.parentNode.removeChild(this.element)},t}(),s=function(t){function e(){t.apply(this,arguments)}return o(e,t),e.prototype.getWidth=function(){this.element.setAttribute("style","\n        display: block;\n        visibility: hidden !important;\n        top: -1000px !important;\n      ");var t=this.element.offsetWidth;return this.element.removeAttribute("style"),t},e}(i),u=function(t){function e(){t.apply(this,arguments)}return o(e,t),e}(i),l=function(){function t(t,e){void 0===e&&(e=r),this.element=t,this.options=e,this.build(),this.buildResponsive()}return t.prototype.append=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.append(t)});var r=this.findMinHeightColumn();this.elements=e(this.elements).concat([t]),this.applyPosition("append",r,t)},t.prototype.prepend=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.prepend(t)});var r=this.findMinHeightColumn();this.elements=[t].concat(e(this.elements)),this.applyPosition("prepend",r,t)},t.prototype.on=function(t,e){return this.element.addEventListener("bricklayer."+t,e),this},t.prototype.redraw=function(){var t=this.columnCount;this.checkColumnCount(!1),this.reorderElements(t),n(this.element,"bricklayer.redraw",{columnCount:t})},t.prototype.destroy=function(){var t=this;this.ruler.destroy(),e(this.elements).forEach(function(e){return t.element.appendChild(e)}),e(this.getColumns()).forEach(function(t){return t.parentNode.removeChild(t)}),n(this.element,"bricklayer.destroy",{})},t.prototype.build=function(){this.ruler=new s(this.options.rulerClassName),this.elements=this.getElementsInOrder(),this.element.insertBefore(this.ruler.element,this.element.firstChild)},t.prototype.buildResponsive=function(){var t=this;window.addEventListener("resize",function(e){return t.checkColumnCount()}),this.checkColumnCount(),this.on("breakpoint",function(e){return t.reorderElements(e.detail.columnCount)}),this.columnCount>=1&&this.reorderElements(this.columnCount)},t.prototype.getColumns=function(){return this.element.querySelectorAll(":scope > ."+this.options.columnClassName)},t.prototype.findMinHeightColumn=function(){var t=e(this.getColumns()),n=t.map(function(t){return t.offsetHeight}),r=Math.min.apply(null,n);return t[n.indexOf(r)]},t.prototype.getElementsInOrder=function(){return this.element.querySelectorAll(":scope > *:not(."+this.options.columnClassName+"):not(."+this.options.rulerClassName+")")},t.prototype.checkColumnCount=function(t){void 0===t&&(t=!0);var e=this.getColumnCount();this.columnCount!==e&&(t&&n(this.element,"bricklayer.breakpoint",{columnCount:e}),this.columnCount=e)},t.prototype.reorderElements=function(t){var n=this;void 0===t&&(t=1),(t==1/0||1>t)&&(t=1);for(var r=e(this.elements).map(function(t){var e=t.parentNode?t.parentNode.removeChild(t):t;return e}),o=this.getColumns(),i=0;i<o.length;i++)o[i].parentNode.removeChild(o[i]);for(var i=0;t>i;i++){var s=new u(this.options.columnClassName).element;this.element.appendChild(s)}r.forEach(function(t){var e=n.findMinHeightColumn();e.appendChild(t)})},t.prototype.getColumnCount=function(){var t=this.element.offsetWidth,e=this.ruler.getWidth();return Math.round(t/e)},t.prototype.applyPosition=function(t,e,r){var o=this,i=function(i){var s=i+t.charAt(0).toUpperCase()+t.substr(1);n(o.element,"bricklayer."+s,{item:r,column:e})};switch(i("before"),t){case"append":e.appendChild(r);break;case"prepend":e.insertBefore(r,e.firstChild)}i("after")},t}();t.Container=l}(r||(r={})),function(t,n){"function"==typeof define&&define.amd?define(function(){return n()}):"undefined"!=typeof window&&t===window?t.Bricklayer=n():"object"==typeof e&&e.exports&&(e.exports=n())}("undefined"!=typeof window?window:this,function(){return r.Container})},{}]},{},[1]);
\ No newline at end of file
+!function t(e,n,r){function o(s,u){if(!n[s]){if(!e[s]){var l="function"==typeof require&&require;if(!u&&l)return l(s,!0);if(i)return i(s,!0);var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[s]={exports:{}};e[s][0].call(p.exports,function(t){var n=e[s][1][t];return o(n?n:t)},p,p.exports,t,e,n,r)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)o(r[s]);return o}({1:[function(t,e,n){var r,o=this&&this.__extends||function(t,e){function n(){this.constructor=t}for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r]);t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)};!function(t){function e(t){return[].slice.call(t)}function n(t,e,n){if(window.CustomEvent)var r=new CustomEvent(e,{detail:n});else{var r=document.createEvent("CustomEvent");r.initCustomEvent(e,!0,!0,n)}return t.dispatchEvent(r)}var r={rulerClassName:"bricklayer-column-sizer",columnClassName:"bricklayer-column"},i=function(){function t(t){this.element=document.createElement("div"),this.element.className=t}return t.prototype.destroy=function(){this.element.parentNode.removeChild(this.element)},t}(),s=function(t){function e(){t.apply(this,arguments)}return o(e,t),e.prototype.getWidth=function(){this.element.setAttribute("style","\n        display: block;\n        visibility: hidden !important;\n        top: -1000px !important;\n      ");var t=this.element.offsetWidth;return this.element.removeAttribute("style"),t},e}(i),u=function(t){function e(){t.apply(this,arguments)}return o(e,t),e}(i),l=function(){function t(t,e){void 0===e&&(e=r),this.element=t,this.options=e,this.build(),this.buildResponsive()}return t.prototype.append=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.append(t)});var r=this.findMinHeightColumn();this.elements=e(this.elements).concat([t]),this.applyPosition("append",r,t)},t.prototype.prepend=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.prepend(t)});var r=this.findMinHeightColumn();this.elements=[t].concat(e(this.elements)),this.applyPosition("prepend",r,t)},t.prototype.on=function(t,e){return this.element.addEventListener("bricklayer."+t,e),this},t.prototype.redraw=function(){var t=this.columnCount;this.checkColumnCount(!1),this.reorderElements(t),n(this.element,"bricklayer.redraw",{columnCount:t})},t.prototype.destroy=function(){var t=this;this.ruler.destroy(),e(this.elements).forEach(function(e){return t.element.appendChild(e)}),e(this.getColumns()).forEach(function(t){return t.parentNode.removeChild(t)}),n(this.element,"bricklayer.destroy",{})},t.prototype.build=function(){this.ruler=new s(this.options.rulerClassName),this.elements=this.getElementsInOrder(),this.element.insertBefore(this.ruler.element,this.element.firstChild)},t.prototype.buildResponsive=function(){var t=this;window.addEventListener("resize",function(e){return t.checkColumnCount()}),this.checkColumnCount(),this.on("breakpoint",function(e){return t.reorderElements(e.detail.columnCount)}),this.columnCount>=1&&this.reorderElements(this.columnCount)},t.prototype.getColumns=function(){return this.element.querySelectorAll(":scope > ."+this.options.columnClassName)},t.prototype.findMinHeightColumn=function(){var t=e(this.getColumns()),n=t.map(function(t){return t.offsetHeight}),r=Math.min.apply(null,n);return t[n.indexOf(r)]},t.prototype.getElementsInOrder=function(){return this.element.querySelectorAll(":scope > *:not(."+this.options.columnClassName+"):not(."+this.options.rulerClassName+")")},t.prototype.checkColumnCount=function(t){void 0===t&&(t=!0);var e=this.getColumnCount();this.columnCount!==e&&(t&&n(this.element,"bricklayer.breakpoint",{columnCount:e}),this.columnCount=e)},t.prototype.reorderElements=function(t){var n=this;void 0===t&&(t=1);for(var r=e(this.elements).map(function(t){var e=t.parentNode?t.parentNode.removeChild(t):t;return e}),o=this.getColumns(),i=0;i<o.length;i++)o[i].parentNode.removeChild(o[i]);for(var i=0;i<t;i++){var s=new u(this.options.columnClassName).element;this.element.appendChild(s)}r.forEach(function(t){var e=n.findMinHeightColumn();e.appendChild(t)})},t.prototype.getColumnCount=function(){var t=this.element.offsetWidth,e=this.ruler.getWidth();return 0==e?1:Math.round(t/e)},t.prototype.applyPosition=function(t,e,r){var o=this,i=function(i){var s=i+t.charAt(0).toUpperCase()+t.substr(1);n(o.element,"bricklayer."+s,{item:r,column:e})};switch(i("before"),t){case"append":e.appendChild(r);break;case"prepend":e.insertBefore(r,e.firstChild)}i("after")},t}();t.Container=l}(r||(r={})),function(t,n){"function"==typeof define&&define.amd?define(function(){return n()}):"undefined"!=typeof window&&t===window?t.Bricklayer=n():"object"==typeof e&&e.exports&&(e.exports=n())}("undefined"!=typeof window?window:this,function(){return r.Container})},{}]},{},[1]);
\ No newline at end of file

From e5cd4173d0f009bd8965b341f53c961d3e4a6158 Mon Sep 17 00:00:00 2001
From: Dan Dohotaru <dan.dohotaru@gmail.com>
Date: Fri, 27 Oct 2017 11:15:33 +0200
Subject: [PATCH 4/4] enhance demo add support for item removal on item click.
 add support for first item removal via button.

---
 examples/basic.html |  1 +
 examples/demo.js    | 32 +++++++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/examples/basic.html b/examples/basic.html
index 22af968..fd978d4 100644
--- a/examples/basic.html
+++ b/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>
diff --git a/examples/demo.js b/examples/demo.js
index 7337fd6..551e65b 100644
--- a/examples/demo.js
+++ b/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);
 })
@@ -41,25 +52,32 @@ function goToScroll(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);
+      }
+    }
   });
 });