bricklayer - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

bower.json

@@ -25,3 +25,3 @@ {
   ],
-  "version": "0.1.3",
+  "version": "0.2.0",
   "dependencies": {
@@ -28,0 +28,0 @@ "jquery": "^2.2.3"

dist/bricklayer.js

 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-/// <reference path="typings/jquery.d.ts" />
 var __extends = (this && this.__extends) || function (d, b) {
@@ -10,2 +9,16 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 (function (Bricklayer) {
+    // Helper Functions
+    function toArray(arrayLike) {
+        return [].slice.call(arrayLike);
+    }
+    function triggerEvent(el, eventName, data) {
+        if (window["CustomEvent"]) {
+            var event = new CustomEvent(eventName, { detail: data });
+        }
+        else {
+            var event = document.createEvent('CustomEvent');
+            event.initCustomEvent(eventName, true, true, data);
+        }
+        return el.dispatchEvent(event);
+    }
     var DEFAULTS = {
@@ -27,2 +40,8 @@ rulerClassName: "bricklayer-column-sizer",
         }
+        Ruler.prototype.getWidth = function () {
+            this.element.setAttribute('style', "\n        display: block;\n        visibility: hidden !important;\n        top: -1000px !important;\n      ");
+            var width = this.element.offsetWidth;
+            this.element.removeAttribute('style');
+            return width;
+        };
         return Ruler;
@@ -38,8 +57,7 @@ }(SimpleElement));
     var Container = (function () {
-        function Container(selector, options) {
+        function Container(element, options) {
             if (options === void 0) { options = DEFAULTS; }
+            this.element = element;
             this.options = options;
-            this.element = jQuery(selector);
             this.ruler = new Ruler(options.rulerClassName);
-            this.element.data('bricklayer', this);
             this.build();
@@ -50,3 +68,3 @@ this.buildResponsive();
             var _this = this;
-            if (jQuery.isArray(item)) {
+            if (Array.isArray(item)) {
                 item.forEach(function (item) { return _this.append(item); });
@@ -56,3 +74,3 @@ return;
             var column = this.findMinHeightColumn();
-            this.elements = jQuery(this.elements.get().concat([item]));
+            this.elements = toArray(this.elements).concat([item]);
             this.applyPosition('append', column, item);
@@ -62,3 +80,3 @@ };
             var _this = this;
-            if (jQuery.isArray(item)) {
+            if (Array.isArray(item)) {
                 item.forEach(function (item) { return _this.prepend(item); });
@@ -68,33 +86,24 @@ return;
             var column = this.findMinHeightColumn();
-            this.elements = jQuery([item].concat(this.elements.get()));
+            this.elements = [item].concat(toArray(this.elements));
             this.applyPosition('prepend', column, item);
         };
-        Container.prototype.onBreakpoint = function (handler) {
-            this.element.on('bricklayer.breakpoint', handler);
+        Container.prototype.on = function (eventName, handler) {
+            // eventName may be:
+            // - breakpoint
+            // - afterAppend
+            // - beforeAppend
+            // - afterPrepend
+            // - beforePrepend
+            this.element.addEventListener("bricklayer." + eventName, handler);
             return this;
         };
-        Container.prototype.onAfterAppend = function (handler) {
-            this.element.on('bricklayer.afterAppend', handler);
-            return this;
-        };
-        Container.prototype.onBeforeAppend = function (handler) {
-            this.element.on('bricklayer.beforeAppend', handler);
-            return this;
-        };
-        Container.prototype.onAfterPrepend = function (handler) {
-            this.element.on('bricklayer.afterPrepend', handler);
-            return this;
-        };
-        Container.prototype.onBeforePrepend = function (handler) {
-            this.element.on('bricklayer.beforePrepend', handler);
-            return this;
-        };
         Container.prototype.build = function () {
             this.elements = this.getElementsInOrder();
-            this.element.prepend(this.ruler.element);
+            this.element.insertBefore(this.ruler.element, this.element.firstChild);
         };
         Container.prototype.buildResponsive = function () {
             var _this = this;
-            jQuery(window).on("resize", function (e) { return _this.checkColumnCount(); }).trigger("resize");
-            this.onBreakpoint(function (e, size) { return _this.reorderElements(size); });
+            window.addEventListener("resize", function (e) { return _this.checkColumnCount(); });
+            this.checkColumnCount();
+            this.on("breakpoint", function (e) { return _this.reorderElements(e.detail.columnCount); });
             if (this.columnCount >= 1) {
@@ -105,17 +114,15 @@ this.reorderElements(this.columnCount);
         Container.prototype.getColumns = function () {
-            return this.element.find("> ." + this.options.columnClassName);
+            return this.element.querySelectorAll(":scope > ." + this.options.columnClassName);
         };
         Container.prototype.findMinHeightColumn = function () {
             var allColumns = this.getColumns();
-            var column = allColumns.get().sort(function (a, b) {
-                var aHeight = jQuery(a).height();
-                var bHeight = jQuery(b).height();
+            var column = toArray(allColumns).sort(function (a, b) {
+                var aHeight = a.offsetHeight;
+                var bHeight = b.offsetHeight;
                 return aHeight > bHeight ? 1 : (aHeight == bHeight ? 0 : -1);
             });
-            return jQuery(column).eq(0);
+            return column[0];
         };
         Container.prototype.getElementsInOrder = function () {
-            return this.element.find("> *")
-                .not("> ." + this.options.columnClassName)
-                .not("> ." + this.options.rulerClassName);
+            return this.element.querySelectorAll(":scope > *:not(." + this.options.columnClassName + "):not(." + this.options.rulerClassName + ")");
         };
@@ -125,3 +132,3 @@ Container.prototype.checkColumnCount = function () {
             if (this.columnCount !== columnCount) {
-                this.element.trigger('bricklayer.breakpoint', columnCount);
+                triggerEvent(this.element, "bricklayer.breakpoint", { columnCount: columnCount });
                 this.columnCount = columnCount;
@@ -132,16 +139,26 @@ }
             var _this = this;
-            var elements = this.elements.detach();
-            this.getColumns().remove();
+            if (columnCount === void 0) { columnCount = 1; }
+            if (columnCount == Infinity || columnCount < 1) {
+                columnCount = 1;
+            }
+            var elements = toArray(this.elements).map(function (item) {
+                var element = item.parentNode.removeChild(item);
+                return element;
+            });
+            var columns = this.getColumns();
+            for (var i = 0; i < columns.length; i++) {
+                columns[i].parentNode.removeChild(columns[i]);
+            }
             for (var i = 0; i < columnCount; i++) {
                 var element = (new Column(this.options.columnClassName)).element;
-                this.element.append(element);
+                this.element.appendChild(element);
             }
-            elements.each(function (i, item) {
+            elements.forEach(function (item) {
                 var column = _this.findMinHeightColumn();
-                column.append(item);
+                column.appendChild(item);
             });
         };
         Container.prototype.getColumnCount = function () {
-            var containerWidth = this.element.width();
-            var columnWidth = jQuery(this.ruler.element).width();
+            var containerWidth = this.element.offsetWidth;
+            var columnWidth = this.ruler.getWidth();
             return Math.round(containerWidth / columnWidth);
@@ -153,6 +170,13 @@ };
                 var eventName = timing + pos.charAt(0).toUpperCase() + pos.substr(1);
-                _this.element.trigger("bricklayer." + eventName, [item, column]);
+                triggerEvent(_this.element, "bricklayer." + eventName, { item: item, column: column });
             };
             trigger('before');
-            column[pos](item);
+            switch (pos) {
+                case 'append':
+                    column.appendChild(item);
+                    break;
+                case 'prepend':
+                    column.insertBefore(item, column.firstChild);
+                    break;
+            }
             trigger('after');
@@ -164,6 +188,15 @@ };
 })(Bricklayer || (Bricklayer = {}));
-jQuery.fn.bricklayer = function (options) {
-    return new Bricklayer.Container(this, options);
-};
+window["Bricklayer"] = Bricklayer.Container;
+if (jQuery !== undefined) {
+    (function ($) {
+        $.fn.bricklayer = function (options) {
+            $(this).forEach(function () {
+                var instance = new Bricklayer.Container(this, options);
+                $(this).data('bricklayer', instance);
+            });
+            return this;
+        };
+    })(jQuery);
+}
 
 },{}]},{},[1]);

dist/bricklayer.min.js

@@ -1,1 +0,1 @@
-!function e(t,n,r){function o(u,s){if(!n[u]){if(!t[u]){var p="function"==typeof require&&require;if(!s&&p)return p(u,!0);if(i)return i(u,!0);var l=new Error("Cannot find module '"+u+"'");throw l.code="MODULE_NOT_FOUND",l}var a=n[u]={exports:{}};t[u][0].call(a.exports,function(e){var n=t[u][1][e];return o(n?n:e)},a,a.exports,e,t,n,r)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u<r.length;u++)o(r[u]);return o}({1:[function(e,t,n){var r,o=this&&this.__extends||function(e,t){function n(){this.constructor=e}for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r]);e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)};!function(e){var t={rulerClassName:"bricklayer-column-sizer",columnClassName:"bricklayer-column"},n=function(){function e(e){this.element=document.createElement("div"),this.element.className=e}return e}(),r=function(e){function t(){e.apply(this,arguments)}return o(t,e),t}(n),i=function(e){function t(){e.apply(this,arguments)}return o(t,e),t}(n),u=function(){function e(e,n){void 0===n&&(n=t),this.options=n,this.element=jQuery(e),this.ruler=new r(n.rulerClassName),this.build(),this.buildResponsive()}return e.prototype.append=function(e){var t=this;if(jQuery.isArray(e))return void e.forEach(function(e){return t.append(e)});var n=this.findMinHeightColumn();this.elements=jQuery(this.elements.get().concat([e])),this.applyPosition("append",n,e)},e.prototype.prepend=function(e){var t=this;if(jQuery.isArray(e))return void e.forEach(function(e){return t.prepend(e)});var n=this.findMinHeightColumn();this.elements=jQuery([e].concat(this.elements.get())),this.applyPosition("prepend",n,e)},e.prototype.onBreakpoint=function(e){return this.element.on("bricklayer.breakpoint",e),this},e.prototype.onAfterAppend=function(e){return this.element.on("bricklayer.afterAppend",e),this},e.prototype.onBeforeAppend=function(e){return this.element.on("bricklayer.beforeAppend",e),this},e.prototype.onAfterPrepend=function(e){return this.element.on("bricklayer.afterPrepend",e),this},e.prototype.onBeforePrepend=function(e){return this.element.on("bricklayer.beforePrepend",e),this},e.prototype.build=function(){this.elements=this.getElementsInOrder(),this.element.prepend(this.ruler.element)},e.prototype.buildResponsive=function(){var e=this;jQuery(window).on("resize",function(t){return e.checkColumnCount()}).trigger("resize"),this.onBreakpoint(function(t,n){return e.reorderElements(n)}),this.columnCount>=1&&this.reorderElements(this.columnCount)},e.prototype.getColumns=function(){return this.element.find("> ."+this.options.columnClassName)},e.prototype.findMinHeightColumn=function(){var e=this.getColumns(),t=e.get().sort(function(e,t){var n=jQuery(e).height(),r=jQuery(t).height();return n>r?1:n==r?0:-1});return jQuery(t).eq(0)},e.prototype.getElementsInOrder=function(){return this.element.find("> *").not("> ."+this.options.columnClassName).not("> ."+this.options.rulerClassName)},e.prototype.checkColumnCount=function(){var e=this.getColumnCount();this.columnCount!==e&&(this.element.trigger("bricklayer.breakpoint",e),this.columnCount=e)},e.prototype.reorderElements=function(e){var t=this,n=this.elements.detach();this.getColumns().remove();for(var r=0;e>r;r++){var o=new i(this.options.columnClassName).element;this.element.append(o)}n.each(function(e,n){var r=t.findMinHeightColumn();r.append(n)})},e.prototype.getColumnCount=function(){var e=this.element.width(),t=jQuery(this.ruler.element).width();return Math.round(e/t)},e.prototype.applyPosition=function(e,t,n){var r=this,o=function(o){var i=o+e.charAt(0).toUpperCase()+e.substr(1);r.element.trigger("bricklayer."+i,[n,t])};o("before"),t[e](n),o("after")},e}();e.Container=u}(r||(r={})),jQuery.fn.bricklayer=function(e){return new r.Container(this,e)}},{}]},{},[1]);
+!function t(e,n,r){function i(s,u){if(!n[s]){if(!e[s]){var l="function"==typeof require&&require;if(!u&&l)return l(s,!0);if(o)return o(s,!0);var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}var c=n[s]={exports:{}};e[s][0].call(c.exports,function(t){var n=e[s][1][t];return i(n?n:t)},c,c.exports,t,e,n,r)}return n[s].exports}for(var o="function"==typeof require&&require,s=0;s<r.length;s++)i(r[s]);return i}({1:[function(t,e,n){var r,i=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"},o=function(){function t(t){this.element=document.createElement("div"),this.element.className=t}return t}(),s=function(t){function e(){t.apply(this,arguments)}return i(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}(o),u=function(t){function e(){t.apply(this,arguments)}return i(e,t),e}(o),l=function(){function t(t,e){void 0===e&&(e=r),this.element=t,this.options=e,this.ruler=new s(e.rulerClassName),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.build=function(){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=this.getColumns(),n=e(t).sort(function(t,e){var n=t.offsetHeight,r=e.offsetHeight;return n>r?1:n==r?0:-1});return n[0]},t.prototype.getElementsInOrder=function(){return this.element.querySelectorAll(":scope > *:not(."+this.options.columnClassName+"):not(."+this.options.rulerClassName+")")},t.prototype.checkColumnCount=function(){var t=this.getColumnCount();this.columnCount!==t&&(n(this.element,"bricklayer.breakpoint",{columnCount:t}),this.columnCount=t)},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.removeChild(t);return e}),i=this.getColumns(),o=0;o<i.length;o++)i[o].parentNode.removeChild(i[o]);for(var o=0;t>o;o++){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 i=this,o=function(o){var s=o+t.charAt(0).toUpperCase()+t.substr(1);n(i.element,"bricklayer."+s,{item:r,column:e})};switch(o("before"),t){case"append":e.appendChild(r);break;case"prepend":e.insertBefore(r,e.firstChild)}o("after")},t}();t.Container=l}(r||(r={})),window.Bricklayer=r.Container,void 0!==jQuery&&!function(t){t.fn.bricklayer=function(e){return t(this).forEach(function(){var n=new r.Container(this,e);t(this).data("bricklayer",n)}),this}}(jQuery)},{}]},{},[1]);

examples/demo.js

 function newBox() {
-  var randomColor = '#' + '0123456789abcdef'.split('').map(function (v, i, a) {
-      return i > 5 ? null : a[Math.floor(Math.random() * 16)]
-    }).join('');
-
+  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 = $("<div class='box' />").css({
-    backgroundColor: randomColor,
-    height: randomHeight
-  });
-  return $Box;
+  var box = document.createElement('div');
+  box.className = 'box';
+  box.style.backgroundColor = randomColor;
+  box.style.height = randomHeight + "px";
+  return box;
 }
 
-////////////////////////////////////////////////////////////
+var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
 
-//for (i = 0; i < 0; i++) {
-//var $Box = newBox();
-//$(".bricklayer").append($Box.text(i));
-//}
+bricklayer.on("breakpoint", function (e) {
+  console.log(e.detail.columnCount);
+})
 
-// TODO: eklediği item için scroll etsin mi?
+bricklayer.on("afterPrepend", function (e) {
+  var el = e.detail.item;
+  el.classList.add('is-prepend');
+  setTimeout(function () {
+    el.classList.remove('is-prepend');
+  }, 500);
+})
 
-var bricklayer = $('.bricklayer').bricklayer()
-  .onBreakpoint(function (e, size) {
-    console.log(size);
-  })
-  .onAfterPrepend(function (e, el) {
-    $(el).addClass("is-prepend");
-    setTimeout(function () {
-      $(el).removeClass("is-prepend");
-    }, 500);
-  })
-  .onAfterAppend(function (e, el) {
-    $(el).addClass("is-append");
-    setTimeout(function () {
-      $(el).removeClass("is-append");
-    }, 500);
-  });
+bricklayer.on("afterAppend", function (e) {
+  var el = e.detail.item;
+  el.classList.add('is-append');
+  setTimeout(function () {
+    el.classList.remove('is-append');
+  }, 500);
+});
 
 ////////////////////////////////////////////////////////////
 
-$("button").click(function () {
+var buttons = document.querySelectorAll("button");
 
-  var $Box = newBox();
-  $Box.text(bricklayer.elements.length + 1);
+function goToScroll(value) {
+  document.body.scrollTop = value
+}
+Array.prototype.slice.call(buttons).forEach(function (button) {
+  button.addEventListener('click', function (e) {
+    var button = e.target
+    var box = newBox();
 
-  if ($(this).is("[data-append]")) {
-    bricklayer.append($Box);
-    $(document.body).animate({scrollTop: document.body.scrollHeight})
-  }
+    box.innerHTML = (bricklayer.elements.length + 1);
 
-  if ($(this).is("[data-prepend]")) {
-    bricklayer.prepend($Box);
-    $(document.body).animate({scrollTop: 0})
-  }
+    if (button.hasAttribute("data-append")) {
+      bricklayer.append(box);
+      goToScroll(document.body.scrollHeight)
+    }
 
-  if ($(this).is("[data-append-multiple]")) {
-    var $AnotherBox = newBox();
-    $AnotherBox.text(bricklayer.elements.length + 2);
-    bricklayer.append([$Box, $AnotherBox]);
-    $(document.body).animate({scrollTop: document.body.scrollHeight})
-  }
+    if (button.hasAttribute("data-prepend")) {
+      bricklayer.prepend(box);
+      goToScroll(0)
+    }
 
+    if (button.hasAttribute("data-append-multiple")) {
+      var anotherBox = newBox();
+      anotherBox.innerHTML = (bricklayer.elements.length + 2);
+      bricklayer.append([box, anotherBox]);
+      goToScroll(document.body.scrollHeight)
+    }
+  });
 });

package.json

 {
   "name": "bricklayer",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Lightweight and strong Masonry alternative",
@@ -5,0 +5,0 @@ "main": "dist/bricklayer.js",

README.md

 # Bricklayer
 
-Lightweight cascading grid layout library. Inspired and a lighter alternative to [Masonry](http://masonry.desandro.com/)
+Lightweight & independent cascading grid layout library. Inspired and a lighter alternative to [Masonry](http://masonry.desandro.com/)
 
@@ -12,4 +12,4 @@ [Play with example](http://ademilter.github.io/bricklayer)
  - **Simpler** than any other cascading grid layout tools.
- - **Lightweight**, no fat. **(1.1KB gzipped)**
- - Integrates with **jQuery** seamlessly.
+ - **Lightweight**, no fat. **(1.5KB gzipped)**
+ - **No frameworks required**, but if you use jQuery it integrates itself as a plugin.
  - **Responsive** support with no glitch.
@@ -67,6 +67,6 @@ - Easy configuration.
 
-- Make them bricks using `bricklayer` plugin.
+- Make them bricks using `Bricklayer` class.
 
 ```js
-var bricklayer = $(".bricklayer").bricklayer()
+var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
 ```
@@ -79,3 +79,3 @@
 bricklayer.append(
-  $("<div>My awesome content</div>")
+  "<div>My awesome content</div>"
 )
@@ -88,13 +88,19 @@ ```
 bricklayer.prepend([
-  $("<div>My awesome content</div>"),
-  $("<div>My another awesome but very long content</div>")
+  "<div>My awesome content</div>",
+  "<div>My another awesome but very long content</div>"
 ])
 ```
 
-### Accessing Bricklayer Instance via `data` Attribute
+## Using with jQuery
 
+Bricklayer integrates itself into jQuery if it founds any jQuery instance on page.
+
 ```js
-$(".bricklayer").bricklayer().data('bricklayer').append([
+var bricklayer = $("#bricklayer").bricklayer()
+
+bricklayer.data('bricklayer').append([
   // items
 ])
+
+bricklayer.data('b
 ```
@@ -109,19 +115,41 @@
 ```js
-bricklayer.onBeforeAppend(function (e, itemElement, columnElement) {
+bricklayer.on('beforeAppend', function (e) {
+  var itemElement = e.detail.item
+  var columnElement = e.detail.column
   // `itemElement` will be appended to the end of `columnElement`
 })
 
-bricklayer.onBeforePrepend(function (e, itemElement, columnElement) {
+bricklayer.on('beforePrepend', function (e) {
+  var itemElement = e.detail.item
+  var columnElement = e.detail.column
   // `itemElement` will be prepended to the top of `columnElement`
 })
 
-bricklayer.onAfterAppend(function (e, itemElement, columnElement) {
+bricklayer.on('afterAppend', function (e) {
+  var itemElement = e.detail.item
+  var columnElement = e.detail.column
   // `itemElement` is appended to the end of `columnElement`
 })
 
-bricklayer.onAfterPrepend(function (e, itemElement, columnElement) {
+bricklayer.on('afterPrepend', function (e) {
+  var itemElement = e.detail.item
+  var columnElement = e.detail.column
   // `itemElement` is prepended to the top of `columnElement`
 })
+
+bricklayer.on('breakpoint', function (e) {
+  var columnCount = e.detail.columnCount
+  // In every breakpoint, this event will be fired with the count of columns
+})
 ```
 
+## Browser Support
+
+This plugin works seamlessly with these browsers:
+  - Safari 9.0.2
+  - Firefox 43.0.4
+  - Chrome 49
+
+Please add more and open a pull request if you tested successfully on more browsers.
+
 ## License
@@ -128,0 +156,0 @@

src/bricklayer.ts

@@ -1,3 +0,1 @@
-/// <reference path="typings/jquery.d.ts" />
-
 interface IOptions {
@@ -10,2 +8,17 @@ rulerClassName  : string
 
+  // Helper Functions
+  function toArray(arrayLike : {length : number}) {
+    return [].slice.call(arrayLike)
+  }
+
+  function triggerEvent(el, eventName : string, data) {
+    if (window["CustomEvent"]) {
+      var event = new CustomEvent(eventName, {detail: data});
+    } else {
+      var event = document.createEvent('CustomEvent');
+      event.initCustomEvent(eventName, true, true, data);
+    }
+    return el.dispatchEvent(event)
+  }
+
   const DEFAULTS : IOptions = {
@@ -17,3 +30,3 @@ rulerClassName: "bricklayer-column-sizer",
   abstract class SimpleElement {
-    element : Element
+    element : HTMLElement
     constructor(className : string) {
@@ -25,7 +38,17 @@ this.element = document.createElement("div")
 
-  class Ruler extends SimpleElement {}
+  class Ruler extends SimpleElement {
+    getWidth() {
+      this.element.setAttribute('style', `
+        display: block;
+        visibility: hidden !important;
+        top: -1000px !important;
+      `)
+      var width = this.element.offsetWidth
+      this.element.removeAttribute('style')
+      return width
+    }
+  }
   class Column extends SimpleElement {}
 
   export class Container {
-    element     : JQuery
     ruler       : Ruler
@@ -36,8 +59,4 @@
 
-    constructor(selector : string, protected options : IOptions = DEFAULTS) {
-      this.element = jQuery(selector)
+    constructor(public element: HTMLElement, protected options : IOptions = DEFAULTS) {
       this.ruler = new Ruler(options.rulerClassName)
-
-      this.element.data('bricklayer', this)
-
       this.build()
@@ -48,3 +67,3 @@ this.buildResponsive()
     append(item) {
-      if (jQuery.isArray(item)) {
+      if (Array.isArray(item)) {
         item.forEach(item => this.append(item))
@@ -54,3 +73,3 @@ return
       var column = this.findMinHeightColumn()
-      this.elements = jQuery(this.elements.get().concat([item]))
+      this.elements = toArray(this.elements).concat([item])
       this.applyPosition('append', column, item)
@@ -60,3 +79,3 @@ }
     prepend(item) {
-      if (jQuery.isArray(item)) {
+      if (Array.isArray(item)) {
         item.forEach(item => this.prepend(item))
@@ -66,39 +85,26 @@ return
       var column = this.findMinHeightColumn()
-      this.elements = jQuery([item].concat(this.elements.get()))
+      this.elements = [item].concat(toArray(this.elements))
       this.applyPosition('prepend', column, item)
     }
 
-    onBreakpoint(handler : (eventObject: JQueryEventObject, size : number) => any) {
-      this.element.on('bricklayer.breakpoint', handler)
+    on(eventName, handler) {
+      // eventName may be:
+      // - breakpoint
+      // - afterAppend
+      // - beforeAppend
+      // - afterPrepend
+      // - beforePrepend
+      this.element.addEventListener(`bricklayer.${eventName}`, handler)
       return this
     }
 
-    onAfterAppend(handler : (eventObject: JQueryEventObject) => any) {
-      this.element.on('bricklayer.afterAppend', handler)
-      return this
-    }
-
-    onBeforeAppend(handler : (eventObject: JQueryEventObject) => any) {
-      this.element.on('bricklayer.beforeAppend', handler)
-      return this
-    }
-
-    onAfterPrepend(handler : (eventObject: JQueryEventObject) => any) {
-      this.element.on('bricklayer.afterPrepend', handler)
-      return this
-    }
-
-    onBeforePrepend(handler : (eventObject: JQueryEventObject) => any) {
-      this.element.on('bricklayer.beforePrepend', handler)
-      return this
-    }
-
     private build() {
       this.elements = this.getElementsInOrder()
-      this.element.prepend(this.ruler.element)
+      this.element.insertBefore(this.ruler.element, this.element.firstChild)
     }
 
     private buildResponsive() {
-      jQuery(window).on("resize", e => this.checkColumnCount()).trigger("resize")
-      this.onBreakpoint((e, size) => this.reorderElements(size))
+      window.addEventListener("resize", e => this.checkColumnCount())
+      this.checkColumnCount()
+      this.on("breakpoint", e => this.reorderElements(e.detail.columnCount))
       if (this.columnCount >= 1) {
@@ -110,3 +116,3 @@ this.reorderElements(this.columnCount)
     private getColumns() {
-      return this.element.find(`> .${this.options.columnClassName}`)
+      return this.element.querySelectorAll(`:scope > .${this.options.columnClassName}`)
     }
@@ -117,14 +123,12 @@
       var allColumns = this.getColumns()
-      let column = allColumns.get().sort((a, b) => {
-        let aHeight = jQuery(a).height()
-        let bHeight = jQuery(b).height()
+      let column = toArray(allColumns).sort((a, b) => {
+        let aHeight = a.offsetHeight
+        let bHeight = b.offsetHeight
         return aHeight > bHeight ? 1 : (aHeight == bHeight ? 0 : -1)
       })
-      return jQuery(column).eq(0)
+      return column[0]
     }
 
     private getElementsInOrder() {
-      return this.element.find("> *")
-        .not(`> .${this.options.columnClassName}`)
-        .not(`> .${this.options.rulerClassName}`)
+      return this.element.querySelectorAll(`:scope > *:not(.${this.options.columnClassName}):not(.${this.options.rulerClassName})`)
     }
@@ -135,3 +139,3 @@
       if (this.columnCount !== columnCount) {
-        this.element.trigger('bricklayer.breakpoint', columnCount)
+        triggerEvent(this.element, "bricklayer.breakpoint", {columnCount})
         this.columnCount = columnCount
@@ -141,15 +145,25 @@ }
 
-    private reorderElements(columnCount : number) {
-      var elements = this.elements.detach()
+    private reorderElements(columnCount : number = 1) {
+      if (columnCount == Infinity || columnCount < 1) {
+        columnCount = 1
+      }
 
-      this.getColumns().remove()
+      var elements = toArray(this.elements).map(item => {
+        let element = item.parentNode.removeChild(item)
+        return element
+      })
 
+      var columns = this.getColumns()
+      for (var i = 0; i < columns.length; i++) {
+        columns[i].parentNode.removeChild(columns[i])
+      }
+
       for (var i = 0; i < columnCount; i++) {
         let {element} = new Column(this.options.columnClassName)
-        this.element.append(element)
+        this.element.appendChild(element)
       }
 
-      elements.each((i, item) => {
+      elements.forEach(item => {
         var column = this.findMinHeightColumn()
-        column.append(item)
+        column.appendChild(item)
       })
@@ -159,4 +173,4 @@ }
     private getColumnCount() {
-      var containerWidth = this.element.width()
-      var columnWidth = jQuery(this.ruler.element).width()
+      var containerWidth = this.element.offsetWidth
+      var columnWidth = this.ruler.getWidth()
       return Math.round(containerWidth / columnWidth)
@@ -168,13 +182,33 @@ }
         let eventName = timing + pos.charAt(0).toUpperCase() + pos.substr(1)
-        this.element.trigger(`bricklayer.${eventName}`, [item, column])
+        triggerEvent(this.element, `bricklayer.${eventName}`, {item, column})
       }
       trigger('before')
-      column[pos](item)
+      switch (pos) {
+        case 'append':
+          column.appendChild(item)
+          break
+        case 'prepend':
+          column.insertBefore(item, column.firstChild)
+          break
+      }
       trigger('after')
     }
+
   }
 }
 
-jQuery.fn.bricklayer = function (options) {
-  return new Bricklayer.Container(this, options)
+window["Bricklayer"] = Bricklayer.Container
+
+declare var jQuery
+
+if (jQuery !== undefined) {
+  (function ($) {
+    $.fn.bricklayer = function (options) {
+      $(this).forEach(function () {
+        var instance = new Bricklayer.Container(this, options)
+        $(this).data('bricklayer', instance)
+      })
+      return this
+    }
+  })(jQuery)
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of lines in readme file

174

increased by19.18%

Worsened metrics

Total package byte prevSize

2200225

decreased by-6.26%

Number of package files

15

decreased by-6.25%

Lines of code

632

decreased by-82.23%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes