Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
bricklayer
Advanced tools
bricklayer - npm Package Compare versions
Comparing version 0.3.3 to 0.4.0
| { | ||
| "name": "bricklayer", | ||
| "version": "0.3.3", | ||
| "version": "0.4.0", | ||
| "authors": [ | ||
@@ -5,0 +5,0 @@ "Adem İlter <ademilter@gmail.com>", |
@@ -31,2 +31,5 @@ var __extends = (this && this.__extends) || function (d, b) { | ||
| } | ||
| SimpleElement.prototype.destroy = function () { | ||
| this.element.parentNode.removeChild(this.element); | ||
| }; | ||
| return SimpleElement; | ||
@@ -59,3 +62,2 @@ }()); | ||
| this.options = options; | ||
| this.ruler = new Ruler(options.rulerClassName); | ||
| this.build(); | ||
@@ -94,3 +96,14 @@ this.buildResponsive(); | ||
| }; | ||
| Container.prototype.redraw = function (columnCount) { | ||
| if (columnCount === void 0) { columnCount = this.columnCount; } | ||
| this.reorderElements(columnCount); | ||
| }; | ||
| Container.prototype.destroy = function () { | ||
| var _this = this; | ||
| this.ruler.destroy(); | ||
| toArray(this.elements).forEach(function (el) { return _this.element.appendChild(el); }); | ||
| toArray(this.getColumns()).forEach(function (el) { return el.parentNode.removeChild(el); }); | ||
| }; | ||
| Container.prototype.build = function () { | ||
| this.ruler = new Ruler(this.options.rulerClassName); | ||
| this.elements = this.getElementsInOrder(); | ||
@@ -112,9 +125,6 @@ this.element.insertBefore(this.ruler.element, this.element.firstChild); | ||
| Container.prototype.findMinHeightColumn = function () { | ||
| var allColumns = this.getColumns(); | ||
| 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 column[0]; | ||
| var allColumns = toArray(this.getColumns()); | ||
| var heights = allColumns.map(function (column) { return column.offsetHeight; }); | ||
| var minHeight = Math.min.apply(null, heights); | ||
| return allColumns[heights.indexOf(minHeight)]; | ||
| }; | ||
@@ -121,0 +131,0 @@ Container.prototype.getElementsInOrder = function () { |
@@ -32,2 +32,5 @@ (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){ | ||
| } | ||
| SimpleElement.prototype.destroy = function () { | ||
| this.element.parentNode.removeChild(this.element); | ||
| }; | ||
| return SimpleElement; | ||
@@ -60,3 +63,2 @@ }()); | ||
| this.options = options; | ||
| this.ruler = new Ruler(options.rulerClassName); | ||
| this.build(); | ||
@@ -95,3 +97,14 @@ this.buildResponsive(); | ||
| }; | ||
| Container.prototype.redraw = function (columnCount) { | ||
| if (columnCount === void 0) { columnCount = this.columnCount; } | ||
| this.reorderElements(columnCount); | ||
| }; | ||
| Container.prototype.destroy = function () { | ||
| var _this = this; | ||
| this.ruler.destroy(); | ||
| toArray(this.elements).forEach(function (el) { return _this.element.appendChild(el); }); | ||
| toArray(this.getColumns()).forEach(function (el) { return el.parentNode.removeChild(el); }); | ||
| }; | ||
| Container.prototype.build = function () { | ||
| this.ruler = new Ruler(this.options.rulerClassName); | ||
| this.elements = this.getElementsInOrder(); | ||
@@ -113,9 +126,6 @@ this.element.insertBefore(this.ruler.element, this.element.firstChild); | ||
| Container.prototype.findMinHeightColumn = function () { | ||
| var allColumns = this.getColumns(); | ||
| 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 column[0]; | ||
| var allColumns = toArray(this.getColumns()); | ||
| var heights = allColumns.map(function (column) { return column.offsetHeight; }); | ||
| var minHeight = Math.min.apply(null, heights); | ||
| return allColumns[heights.indexOf(minHeight)]; | ||
| }; | ||
@@ -122,0 +132,0 @@ Container.prototype.getElementsInOrder = function () { |
@@ -1,1 +0,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 c=n[s]={exports:{}};e[s][0].call(c.exports,function(t){var n=e[s][1][t];return o(n?n:t)},c,c.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}(),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.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?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]); | ||
| !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 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 o(n?n:t)},a,a.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(t){void 0===t&&(t=this.columnCount),this.reorderElements(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)})},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(){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?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]); |
| { | ||
| "name": "bricklayer", | ||
| "version": "0.3.3", | ||
| "version": "0.4.0", | ||
| "description": "Lightweight and strong Masonry alternative", | ||
@@ -5,0 +5,0 @@ "main": "dist/bricklayer-node.js", |
@@ -35,3 +35,2 @@ <img src="https://raw.githubusercontent.com/ademilter/bricklayer/master/logo.png" width="416"> | ||
| - Play with Bricklayer on [JSFiddle](https://jsfiddle.net/fka/totn2yL0/) | ||
| - Play with Bricklayer on [Webpackbin](http://www.webpackbin.com/V1L4KdVeW) | ||
@@ -43,4 +42,4 @@ --- | ||
| ```html | ||
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.2.4/bricklayer.min.css"> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.2.4/bricklayer.min.js"></script> | ||
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.0/bricklayer.min.css"> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.0/bricklayer.min.js"></script> | ||
| ``` | ||
@@ -73,3 +72,3 @@ | ||
| - Create a simple list: | ||
| ##### Create a simple list: | ||
@@ -87,3 +86,3 @@ ```html | ||
| - Define **bricklayer column size**: | ||
| ##### Define **bricklayer column size**: | ||
@@ -106,3 +105,3 @@ ```css | ||
| - Make them bricks using `Bricklayer` class: | ||
| ##### Make them bricks using `Bricklayer` class: | ||
@@ -116,2 +115,6 @@ ```js | ||
| #### `append(element)` | ||
| Allows you to append bricks. | ||
| ```js | ||
@@ -123,6 +126,12 @@ bricklayer.append( | ||
| #### `prepend(element)` | ||
| Allows you to prepend bricks. | ||
| #### Appending/Prepending Multiple Elements at Once | ||
| You can also add multiple bricks at once: | ||
| ```js | ||
| bricklayer.prepend([ | ||
| bricklayer.append([ | ||
| myAwesomeElement, | ||
@@ -133,2 +142,27 @@ myAwesomeButVeryLongElement | ||
| #### `destroy()` | ||
| Destroys bricklayer and related auto-generated elements. | ||
| ``` | ||
| bricklayer.destroy() | ||
| ``` | ||
| To rebuild the Bricklayer for an element, you should rerun `Bricklayer`. | ||
| ``` | ||
| bricklayer = new Bricklayer(bricklayer.element) | ||
| ``` | ||
| #### `redraw(columnCount)` | ||
| Redraws all columns with given `columnCount`. **If `columnCount` is `null`** it will be decided by | ||
| media queries. **If browser size changes it will be recalculated.** | ||
| In this example you'll force layout to be `5` columns. | ||
| ```js | ||
| bricklayer.on("breakpoint", function () { bricklayer.redraw(5) }) | ||
| ``` | ||
| ### Events | ||
@@ -174,7 +208,7 @@ | ||
| ```html | ||
| <link rel="stylesheet" href="//npmcdn.com/bricklayer/dist/bricklayer.min.css"> | ||
| <script src="//npmcdn.com/bricklayer/dist/bricklayer.min.js"></script> | ||
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.0/bricklayer.min.css"> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.0/bricklayer.min.js"></script> | ||
| <!-- You should also add jquery.bricklayer.js --> | ||
| <script src="//npmcdn.com/bricklayer/dist/jquery.bricklayer.min.js"></script> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.0/jquery.bricklayer.min.js"></script> | ||
| ``` | ||
@@ -181,0 +215,0 @@ |
@@ -34,2 +34,6 @@ interface IOptions { | ||
| } | ||
| destroy() { | ||
| this.element.parentNode.removeChild(this.element) | ||
| } | ||
| } | ||
@@ -58,3 +62,2 @@ | ||
| constructor(public element: HTMLElement, protected options : IOptions = DEFAULTS) { | ||
| this.ruler = new Ruler(options.rulerClassName) | ||
| this.build() | ||
@@ -95,3 +98,14 @@ this.buildResponsive() | ||
| redraw(columnCount = this.columnCount) { | ||
| this.reorderElements(columnCount) | ||
| } | ||
| destroy() { | ||
| this.ruler.destroy() | ||
| toArray(this.elements).forEach(el => this.element.appendChild(el)) | ||
| toArray(this.getColumns()).forEach(el => el.parentNode.removeChild(el)) | ||
| } | ||
| private build() { | ||
| this.ruler = new Ruler(this.options.rulerClassName) | ||
| this.elements = this.getElementsInOrder() | ||
@@ -114,11 +128,7 @@ this.element.insertBefore(this.ruler.element, this.element.firstChild) | ||
| private findMinHeightColumn() { | ||
| var allColumns = this.getColumns() | ||
| let column = toArray(allColumns).sort((a, b) => { | ||
| let aHeight = a.offsetHeight | ||
| let bHeight = b.offsetHeight | ||
| return aHeight > bHeight ? 1 : (aHeight == bHeight ? 0 : -1) | ||
| }) | ||
| return column[0] | ||
| var allColumns = toArray(this.getColumns()) | ||
| let heights = allColumns.map(column => column.offsetHeight) | ||
| let minHeight = Math.min.apply(null, heights) | ||
| return allColumns[heights.indexOf(minHeight)] | ||
| } | ||
@@ -125,0 +135,0 @@ |
Sorry, the diff of this file is not supported yet
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.07%
3557011
- Lines of code
- increased by3.04%
949
- Number of lines in readme file
- increased by14.05%
276
No dependency changes