Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
bricklayer
Advanced tools
bricklayer - npm Package Compare versions
Comparing version 0.4.2 to 0.4.3
| { | ||
| "name": "bricklayer", | ||
| "version": "0.4.2", | ||
| "version": "0.4.3", | ||
| "authors": [ | ||
@@ -5,0 +5,0 @@ "Adem İlter <ademilter@gmail.com>", |
@@ -146,5 +146,2 @@ var __extends = (this && this.__extends) || function (d, b) { | ||
| if (columnCount === void 0) { columnCount = 1; } | ||
| if (columnCount == Infinity || columnCount < 1) { | ||
| columnCount = 1; | ||
| } | ||
| var elements = toArray(this.elements).map(function (item) { | ||
@@ -170,2 +167,5 @@ var element = item.parentNode ? item.parentNode.removeChild(item) : item; | ||
| var columnWidth = this.ruler.getWidth(); | ||
| if (columnWidth == 0) { | ||
| return 1; | ||
| } | ||
| return Math.round(containerWidth / columnWidth); | ||
@@ -172,0 +172,0 @@ }; |
@@ -147,5 +147,2 @@ (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){ | ||
| if (columnCount === void 0) { columnCount = 1; } | ||
| if (columnCount == Infinity || columnCount < 1) { | ||
| columnCount = 1; | ||
| } | ||
| var elements = toArray(this.elements).map(function (item) { | ||
@@ -171,2 +168,5 @@ var element = item.parentNode ? item.parentNode.removeChild(item) : item; | ||
| var columnWidth = this.ruler.getWidth(); | ||
| if (columnWidth == 0) { | ||
| return 1; | ||
| } | ||
| return Math.round(containerWidth / columnWidth); | ||
@@ -173,0 +173,0 @@ }; |
| { | ||
| "name": "bricklayer", | ||
| "version": "0.4.2", | ||
| "version": "0.4.3", | ||
| "description": "Lightweight and strong Masonry alternative", | ||
@@ -5,0 +5,0 @@ "main": "dist/bricklayer-node.js", |
259
README.md
| <img src="https://raw.githubusercontent.com/ademilter/bricklayer/master/logo.png" width="416"> | ||
| --- | ||
| #### Bricklayer is a Lightweight and Independent Pinterest-like Cascading Grid Layout Library | ||
| [](https://gitter.im/ademilter/bricklayer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) | ||
@@ -8,10 +9,4 @@ [](https://badge.fury.io/js/bricklayer) | ||
| Lightweight and independent Pinterest-like cascading grid layout library. | ||
| [](http://ademilter.github.io/bricklayer) | ||
| [**Play with example** :point_right:](http://ademilter.github.io/bricklayer) | ||
| [](http://ademilter.github.io/bricklayer) | ||
| ## Why Bricklayer? | ||
| - :gem: **Simpler** than any other cascading grid layout tools. | ||
@@ -25,250 +20,11 @@ - :snowflake: **Lightweight**, no fat. **(1.5KB gzipped)** | ||
| ## Examples | ||
| [Read Tutorial and Documentation →](https://github.com/ademilter/bricklayer/wiki/Quick-Start) | ||
| - [Colourful Boxes](http://bricklayer.js.org/index.html) | ||
| - [Gradient Wall](http://bricklayer.js.org/gradient-wall.html) | ||
| --- | ||
| ## Playgrounds | ||
| - Play with Bricklayer on [CodePen.io](http://codepen.io/f/pen/QNBwrO) | ||
| - Play with Bricklayer on [JSFiddle](https://jsfiddle.net/fka/totn2yL0/) | ||
| - [Play with Bricklayer on CodePen.io](http://codepen.io/f/pen/QNBwrO) | ||
| - [Play with Bricklayer on JSFiddle](https://jsfiddle.net/fka/totn2yL0/) | ||
| --- | ||
| ## Installation | ||
| ```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> | ||
| ``` | ||
| If you are using modular JavaScript, you can use **NPM** or **Bower** | ||
| ``` | ||
| npm install bricklayer | ||
| bower install bricklayer | ||
| ``` | ||
| ## 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: | ||
| | Framework | How to use? | Playground | | ||
| | --------- | -------------------- | ---------- | | ||
| | **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) | | ||
| You can also [add your examples](https://github.com/ademilter/bricklayer/issues/new?title=Bricklayer%20Framework%20Example) to the list! | ||
| --- | ||
| ## Overview | ||
| ##### Create a simple list: | ||
| ```html | ||
| <div class="bricklayer"> | ||
| <div>Your item</div> | ||
| <div>Your another item</div> | ||
| <div>Your another but long item</div> | ||
| <div>Your another but very short item</div> | ||
| <div>Your one more item</div> | ||
| <div>Your smallest item</div> | ||
| </div> | ||
| ``` | ||
| ##### Define **bricklayer column size**: | ||
| ```css | ||
| @media screen and (min-width: 1200px) { | ||
| .bricklayer-column-sizer { | ||
| /* divide by 3. */ | ||
| width: 33.3%; | ||
| } | ||
| } | ||
| @media screen and (min-width: 768px) { | ||
| .bricklayer-column-sizer { | ||
| /* divide by 2. */ | ||
| width: 50%; | ||
| } | ||
| } | ||
| ``` | ||
| ##### Make them bricks using `Bricklayer` class: | ||
| ```js | ||
| var bricklayer = new Bricklayer(document.querySelector('.bricklayer')) | ||
| ``` | ||
| --- | ||
| ### Methods | ||
| With Bricklayer, you can add new bricks (some elements with heights) using `append` and `prepend`. | ||
| #### `append(element)` to add new element to bottom | ||
| Allows you to append bricks. | ||
| ```js | ||
| bricklayer.append( | ||
| myAwesomeElement | ||
| ) | ||
| ``` | ||
| #### `prepend(element)` to add new element to top | ||
| Allows you to prepend bricks. | ||
| ```js | ||
| bricklayer.prepend( | ||
| myAwesomeElement | ||
| ) | ||
| ``` | ||
| #### `append`/`prepend` multiple elements at once | ||
| You can also add multiple bricks at once by giving an array of elements: | ||
| ```js | ||
| bricklayer.append([ | ||
| myAwesomeElement, | ||
| myAwesomeButVeryLongElement | ||
| ]) | ||
| bricklayer.prepend([ | ||
| myAwesomeElement, | ||
| myAwesomeButVeryLongElement | ||
| ]) | ||
| ``` | ||
| #### `destroy()` to destroy Bricklayer | ||
| Destroys bricklayer and related auto-generated elements. | ||
| ```js | ||
| bricklayer.destroy() | ||
| ``` | ||
| To rebuild the Bricklayer for an element, you should rerun `Bricklayer`: | ||
| ``` | ||
| bricklayer = new Bricklayer(bricklayer.element) | ||
| ``` | ||
| #### `redraw()` to reload all the elements | ||
| Redraws all columns. Column counts will be recalculated and it rebuilds columns | ||
| with elements. | ||
| ```js | ||
| bricklayer.redraw() | ||
| ``` | ||
| ### Events | ||
| You can add listeners to Bricklayer for full control. These allow you to | ||
| create more extensible layouts. You can use these events especially for | ||
| animations. Please see examples. | ||
| #### 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) { | ||
| var itemElement = e.detail.item | ||
| var columnElement = e.detail.column | ||
| // `itemElement` will be appended to the end of `columnElement` | ||
| }) | ||
| ``` | ||
| #### `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) { | ||
| var itemElement = e.detail.item | ||
| var columnElement = e.detail.column | ||
| // `itemElement` will be prepended to the top of `columnElement` | ||
| }) | ||
| ``` | ||
| #### `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) { | ||
| var itemElement = e.detail.item | ||
| var columnElement = e.detail.column | ||
| // `itemElement` is appended to the end of `columnElement` | ||
| }) | ||
| ``` | ||
| #### `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) { | ||
| var itemElement = e.detail.item | ||
| var columnElement = e.detail.column | ||
| // `itemElement` is prepended to the top of `columnElement` | ||
| }) | ||
| ``` | ||
| ## Are you using Bricklayer.js for your next project? | ||
@@ -320,2 +76,1 @@ | ||
| OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | ||
@@ -151,6 +151,2 @@ interface IOptions { | ||
| private reorderElements(columnCount : number = 1) { | ||
| if (columnCount == Infinity || columnCount < 1) { | ||
| columnCount = 1 | ||
| } | ||
| var elements = toArray(this.elements).map(item => { | ||
@@ -180,2 +176,7 @@ let element = item.parentNode ? item.parentNode.removeChild(item) : item | ||
| var columnWidth = this.ruler.getWidth() | ||
| if (columnWidth == 0) { | ||
| return 1 | ||
| } | ||
| return Math.round(containerWidth / columnWidth) | ||
@@ -182,0 +183,0 @@ } |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.05%
3565720
- Number of package files
- increased by10.34%
32
Worsened metrics
- Number of lines in readme file
- decreased by-76.8%
74
No dependency changes