bricklayer - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

bower.json

 {
   "name": "bricklayer",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "authors": [
@@ -5,0 +5,0 @@ "Adem İlter <[e-mail]>",

dist/bricklayer-node.js

@@ -95,4 +95,6 @@ var __extends = (this && this.__extends) || function (d, b) {
         Container.prototype.redraw = function () {
+            var columnCount = this.columnCount;
             this.checkColumnCount(false);
-            this.reorderElements(this.columnCount);
+            this.reorderElements(columnCount);
+            triggerEvent(this.element, "bricklayer.redraw", { columnCount: columnCount });
         };
@@ -104,2 +106,3 @@ Container.prototype.destroy = function () {
             toArray(this.getColumns()).forEach(function (el) { return el.parentNode.removeChild(el); });
+            triggerEvent(this.element, "bricklayer.destroy", {});
         };
@@ -106,0 +109,0 @@ Container.prototype.build = function () {

dist/bricklayer.js

@@ -96,4 +96,6 @@ (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){
         Container.prototype.redraw = function () {
+            var columnCount = this.columnCount;
             this.checkColumnCount(false);
-            this.reorderElements(this.columnCount);
+            this.reorderElements(columnCount);
+            triggerEvent(this.element, "bricklayer.redraw", { columnCount: columnCount });
         };
@@ -105,2 +107,3 @@ Container.prototype.destroy = function () {
             toArray(this.getColumns()).forEach(function (el) { return el.parentNode.removeChild(el); });
+            triggerEvent(this.element, "bricklayer.destroy", {});
         };
@@ -107,0 +110,0 @@ Container.prototype.build = function () {

dist/bricklayer.min.js

@@ -1,1 +0,1 @@
-!function t(e,n,o){function r(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 p=new Error("Cannot find module '"+s+"'");throw p.code="MODULE_NOT_FOUND",p}var a=n[s]={exports:{}};e[s][0].call(a.exports,function(t){var n=e[s][1][t];return r(n?n:t)},a,a.exports,t,e,n,o)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<o.length;s++)r(o[s]);return r}({1:[function(t,e,n){var o,r=this&&this.__extends||function(t,e){function n(){this.constructor=t}for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o]);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 o=new CustomEvent(e,{detail:n});else{var o=document.createEvent("CustomEvent");o.initCustomEvent(e,!0,!0,n)}return t.dispatchEvent(o)}var o={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 r(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 r(e,t),e}(i),l=function(){function t(t,e){void 0===e&&(e=o),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 o=this.findMinHeightColumn();this.elements=e(this.elements).concat([t]),this.applyPosition("append",o,t)},t.prototype.prepend=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.prepend(t)});var o=this.findMinHeightColumn();this.elements=[t].concat(e(this.elements)),this.applyPosition("prepend",o,t)},t.prototype.on=function(t,e){return this.element.addEventListener("bricklayer."+t,e),this},t.prototype.redraw=function(){this.checkColumnCount(!1),this.reorderElements(this.columnCount)},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)})},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}),o=Math.min.apply(null,n);return t[n.indexOf(o)]},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 o=e(this.elements).map(function(t){var e=t.parentNode?t.parentNode.removeChild(t):t;return e}),r=this.getColumns(),i=0;i<r.length;i++)r[i].parentNode.removeChild(r[i]);for(var i=0;t>i;i++){var s=new u(this.options.columnClassName).element;this.element.appendChild(s)}o.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,o){var r=this,i=function(i){var s=i+t.charAt(0).toUpperCase()+t.substr(1);n(r.element,"bricklayer."+s,{item:o,column:e})};switch(i("before"),t){case"append":e.appendChild(o);break;case"prepend":e.insertBefore(o,e.firstChild)}i("after")},t}();t.Container=l}(o||(o={})),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 o.Container})},{}]},{},[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]);

gulpfile.js

@@ -42,12 +42,12 @@ var gulp = require('gulp'),
 
-gulp.task("jquery", function () {
-  gulp.src('src/jquery.bricklayer.js')
-    .pipe(gulp.dest("./dist"))
+gulp.task("plugins", function () {
+  gulp.src('src/plugins/**/*.js')
+    .pipe(gulp.dest("./dist/plugins"))
 })
 
-gulp.task("jquerymin", function () {
-  gulp.src('src/jquery.bricklayer.js')
+gulp.task("pluginsmin", function () {
+  gulp.src('src/plugins/**/*.js')
     .pipe(uglify())
     .pipe(rename({suffix: ".min"}))
-    .pipe(gulp.dest("./dist"))
+    .pipe(gulp.dest("./dist/plugins"))
 })
@@ -86,2 +86,2 @@
 gulp.task("default", ["watch"])
-gulp.task("export", ["css", "cssmin", "js", "browserify", "jsmin", "jquery", "jquerymin"])
+gulp.task("export", ["css", "cssmin", "js", "browserify", "jsmin", "plugins", "pluginsmin"])

package.json

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

README.md

 <img src="https://raw.githubusercontent.com/ademilter/bricklayer/master/logo.png" width="416">
 ---
 
-
 [![Join the chat at https://gitter.im/ademilter/bricklayer](https://badges.gitter.im/ademilter/bricklayer.svg)](https://gitter.im/ademilter/bricklayer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -9,8 +8,7 @@ [![npm version](https://badge.fury.io/js/bricklayer.svg)](https://badge.fury.io/js/bricklayer)
 
+Lightweight and independent Pinterest-like cascading grid layout library.
 
-Lightweight & independent cascading grid layout library. Inspired by and a lighter alternative to [Masonry](http://masonry.desandro.com/).
-
 [**Play with example** :point_right:](http://ademilter.github.io/bricklayer)
 
-[![Image](https://rawgit.com/ademilter/bricklayer/master/assets/screenshot.gif)](http://ademilter.github.io/bricklayer)
+[![Image](assets/screenshot.gif)](http://ademilter.github.io/bricklayer)
 
@@ -47,12 +45,17 @@ ## Why Bricklayer?
 If you are using modular JavaScript, you can use **NPM** or **Bower**
-```
-npm install bricklayer # using npm
-```
 
 ```
-bower install bricklayer # or using bower
+npm install bricklayer
+bower install bricklayer
 ```
 
-## Bricklayer with Frameworks
+## Plugins
 
+| Extension | Description | Vendor | Demo |
+| --------- | ----------- | ------ | ---- |
+| [bricklayer-jquery](src/plugins/jquery/README.md) | Adds jQuery support as jQuery plugin | Official | [http://codepen.io/f/pen/zqLJNa](http://codepen.io/f/pen/zqLJNa) |
+| [bricklayer-lazyElement](src/plugins/lazyElement/README.md) | Adds lazy element appending/prepending support. Useful for **adding lazily loaded elements like images or ajax** | Official | N/A |
+
+## Bricklayer with Popular Frameworks
+
 Since Bricklayer is purely vanilla, you can use it with your frameworks. Here some framework examples:
@@ -62,5 +65,4 @@
 | --------- | -------------------- | ---------- |
-| **jQuery** | [Built-in Support](https://github.com/ademilter/bricklayer/blob/master/README.md#built-in-jquery-support) (Add `jquery.bricklayer.js`) | [http://codepen.io/f/pen/zqLJNa](http://codepen.io/f/pen/zqLJNa) |
+| **Angular.js** | You can use [JohnnyTheTank/angular-bricklayer](https://github.com/JohnnyTheTank/angular-bricklayer) | [http://plnkr.co/edit/mo3G36](http://plnkr.co/edit/mo3G36?p=info) |
 | **React** | Built-in Support (Check out Playground) | [http://www.webpackbin.com/V1L4KdVeW](http://www.webpackbin.com/V1L4KdVeW) |
-| **Angular.js** | You can use [JohnnyTheTank/angular-bricklayer](https://github.com/JohnnyTheTank/angular-bricklayer) | [http://plnkr.co/edit/mo3G36](http://plnkr.co/edit/mo3G36?p=info) |
 
@@ -156,3 +158,3 @@ You can also [add your examples](https://github.com/ademilter/bricklayer/issues/new?title=Bricklayer%20Framework%20Example) to the list!
 
-```
+```js
 bricklayer.destroy()
@@ -182,3 +184,48 @@ ```
 
+#### Layout Based Events
+
+They are useful when you want to detect if the layout is changed, gives information about Bricklayer's lifecycle.
+
+##### `breakpoint`
+
+It will be fired when browser is resized and CSS media query breakpoint changes. `event.detail` gives calculated `columnCount`.
+
 ```js
+bricklayer.on('breakpoint', function (e) {
+  var columnCount = e.detail.columnCount
+  // In every breakpoint, this event will be fired with the count of columns
+})
+```
+
+##### `redraw`
+
+It will be fired when something called `redraw` method. `event.detail` gives calculated `columnCount`.
+
+```js
+bricklayer.on('redraw', function (e) {
+  var columnCount = e.detail.columnCount
+  // In every breakpoint, this event will be fired with the count of columns
+})
+```
+
+##### `destroy`
+
+It will be fired when `destroy` method is called and the Bricklayer is destroyed.
+
+```js
+bricklayer.on('destroy', function (e) {
+  // Bricklayer is destroyed :(
+})
+```
+
+#### Element Based Events
+
+They are useful when you want to make **animations** or element based works.
+
+##### `beforeAppend`
+
+It will be fired just before a brick **appends** to a column. `event.detail` gives `item` and `column`
+as DOM elements.
+
+```js
 bricklayer.on('beforeAppend', function (e) {
@@ -189,3 +236,10 @@ var itemElement = e.detail.item
 })
+```
 
+#### `beforePrepend`
+
+It will be fired just before a brick **prepends** to a column. `event.detail` gives `item` and `column`
+as DOM elements.
+
+```js
 bricklayer.on('beforePrepend', function (e) {
@@ -196,3 +250,10 @@ var itemElement = e.detail.item
 })
+```
 
+#### `afterAppend`
+
+It will be fired just after a brick **appended** to a column. `event.detail` gives `item` and `column`
+as DOM elements.
+
+```js
 bricklayer.on('afterAppend', function (e) {
@@ -203,3 +264,10 @@ var itemElement = e.detail.item
 })
+```
 
+#### `afterPrepend`
+
+It will be fired just after a brick **prepended** to a column. `event.detail` gives `item` and `column`
+as DOM elements.
+
+```js
 bricklayer.on('afterPrepend', function (e) {
@@ -210,36 +278,4 @@ var itemElement = e.detail.item
 })
-
-bricklayer.on('breakpoint', function (e) {
-  var columnCount = e.detail.columnCount
-  // In every breakpoint, this event will be fired with the count of columns
-})
 ```
 
-### Built-in jQuery Support
-
-```html
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.1/bricklayer.min.css">
-<script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.1/bricklayer.min.js"></script>
-
-<!-- You should also add jquery.bricklayer.js -->
-<script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.1/jquery.bricklayer.min.js"></script>
-```
-
-Then you should enable plugin for your bricklayer elements.
-```js
-// Initialize
-$(".bricklayer").bricklayer()
-
-// Append Elements
-$(".bricklayer").appendElements(elements)
-
-// Prepend Elements
-$(".bricklayer").prependElements(elements)
-
-// Listen Events (bricklayer.breakpoint, bricklayer.afterAppend, bricklayer.afterPrepend, bricklayer.beforeAppend, bricklayer.beforePrepend)
-$(".bricklayer").on("bricklayer.breakpoint", handlerFunction)
-```
-
-For more information you can [play on playground](http://codepen.io/f/pen/zqLJNa).
-
 ## Are you using Bricklayer.js for your next project?
@@ -251,9 +287,4 @@
 
-This plugin works seamlessly with these browsers:
-  - Safari 9.0.2
-  - Firefox 43.0.4
-  - Chrome 49
+This plugin works seamlessly with, Safari, Firefox, Chrome and all other modern browsers.
 
-Please add more and open a pull request if you tested successfully on other browsers.
-
 ## Contribution
@@ -260,0 +291,0 @@

src/bricklayer.ts

@@ -97,4 +97,6 @@ interface IOptions {
     redraw() {
+      var {columnCount} = this
       this.checkColumnCount(false)
-      this.reorderElements(this.columnCount)
+      this.reorderElements(columnCount)
+      triggerEvent(this.element, "bricklayer.redraw", {columnCount})
     }
@@ -106,2 +108,3 @@
       toArray(this.getColumns()).forEach(el => el.parentNode.removeChild(el))
+      triggerEvent(this.element, "bricklayer.destroy", {})
     }
@@ -108,0 +111,0 @@

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

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

Improved metrics

Total package byte prevSize

3563832

increased by0.18%

Number of package files

29

increased by31.82%

Lines of code

1038

increased by8.35%

Number of lines in readme file

319

increased by10.76%

No dependency changes