ademilter / bricklayer Goto Github PK

I try to use it in my rails application.
however, how can I append element into already build bricklayer element?

Hi!

I tried to use bricklayer in my ES6/babelified code and the import seems to fail:

import Bricklayer from 'bricklayer'

The Bricklayer results in an empty object.

Hi,

I use bricklayer in my final term project, but there is a distracting problem when the Internet speed is slow. Here're the photos. I hope you will get the problem from screenshots... 😇

Hello guys,

I have erron on internet explore 11. Error description "SCRIPT445: Object doesn't support this action, Column 744".

Thanks

bricklayer.redraw() is causing the page to scroll to the top. I was previously using masonry and didn't run across this issue. Is there a way to prevent this?

Thanks for this layout plugin!
Tried to run it on ie10 and edge and failed on both. Haven't checked details yet but on ie10 the console throws an error and on edge it just won't work. Will come back with more info if possible.

Any ideas?

Hi folks, any suggestions on how to set the distance between columns?
I'm playing with Padding and Margin customizing the CSS but the results are horrifying.

Bricklayer doesn't work unless style-src: 'unsafe-inline' is allowed because of bricklayer.ts#L42-L48.
I didn't get into any issues applying standard style properties:

this.element.style.display = 'block';
this.element.style.visibility = 'hidden !important';
this.element.style.top = '-1000px !important';
var width = this.element.offsetWidth;
this.element.style.display = '';
this.element.style.visibility = '';
this.element.style.top = '';

This is rather a bug but more a call for help. I'm trying to get bricklayer work within my angular2/ionic2 app. This is what I have so far:

HTML

<button (click)="addBrick()">Add a brick</button>
<section #bricklayer class="bricklayer"></section>

JS

export class MyPage {
  bricklayer: Bricklayer;
  @ViewChild('bricklayer') bricklayer:ElementRef;

  constructor() { }

  ngAfterViewInit() {
    console.log(this.bricklayer.nativeElement);
    this.bricklayer = new Bricklayer(this.bricklayer.nativeElement);
    console.log(this.bricklayer);
  }

  newBox() {
    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.className = 'box';
    box.style.backgroundColor = randomColor;
    box.style.height = randomHeight + "px";
    return box;
  }

  addBrick() {
    var box = this.newBox();
    box.innerHTML = (this.bricklayer.elements.length + 1);
    this.bricklayer.append(box);
  }
}

CSS

.bricklayer {
  margin: 10px 5px;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 10px;
}

The 2 console.logs (one for the HTML element and another one for the bricklayer reference) log out correct (as far as I can tell) but as soon as try to append a brick I get an error:

TypeError: Cannot read property 'appendChild' of undefined

Please add this to the list!

Website: http://www.bether.me
Title: Angular 2+ with gridLayer

Thank you very much for your esfort in that library
First I was testing bootstrap cards-columns but it was incredible that they have horizontal order.
Your library save tons of hours in work

Hello, i really dont know is this issue...
i'm trying to integrate bricklayer with default WP gallery, i include all the stuff, and in developer tools i can see appended stuff,
but columns are 100% width

DEMO: http://hafizovic.ba/wp/246-2/

This is link to file where i initialized script
http://hafizovic.ba/wp/wp-content/themes/hafizovic/js/custom.js?ver=05012016

Please add this to the list!

Website: metis.eecs.wsu.edu
Title: Pathways College Finder

This is a senior design project that will be used by the company SCALE. The server provided will go down in June, but sometime later the app will be redeployed elsewhere. When more colleges are added to our database, the true benefits of bricklayer can be seen. After hours of playing with bootstrap card columns and decks, bricklayer was the easy choice and huge time saver.

Since jQuery is not much used, we can remove jQuery and make the plugin vanilla.

Used jQuery helpers:

• #width(), #height()
• #isArray()
• #append()
• #prepend()
• #on("resize", fn)
• #not(..)
• #find(..)
• #trigger()

Would you consider adding drag/drop, like the old Shapeshift library?

Hi Folks, it seems this great plug-in isn't available on nuget. Any intention on making it available there soon?

I just discovered bricklayer and i am happy who it works.

I was just wondering is it possible to make certain boxes wider? e.g. standard box and also column is for example 25%
but i want certain boxes be like 50% while the rest goes around it.
So not that the whole column is 50% width.

Thanks in advance

I use bricklayer for a very long feed of social media posts and as soon as bricklayer needs to recalculate the columns (resize or change the orientation) it jumps to the top of the page, which is very bad for the user experience. It would be nice to include an option to prevent this and stay at the last scrollposition on resize/orientation change.

http://www.fascinatingnepal.com/photo-gallery/ Doesn't seem to actually be using bricklayer.js

Hello! Love your library!

I've come across an issue when using bricklayer in a SPA (using Aurelia as the MVC framework). Using two simple routes/views: one is a 'menu' route/view with 2 instances of bricklayer for 2 different "module" menus on the same page. Bricklayer is initialized with the following after attaching the template/DOM to the window.

var bricklayer = new Bricklayer(document.querySelector('#bricklayer-m' + mid));

where mid is the module id, thus initializing bricklayer on both #bricklayer-m0 and #bricklayer-m1. Works perfect. Using a custom on('breakpoint') listener, columnCount shows the correct number when a breakpoint is reached.

I then leave this menu route/view, going to a different route/view in the SPA, and then come back to the menu route/view again. The menu is built again and bricklayer is initialized again for each instance. Again, bricklayer appears to be working fine, like above.

However, I'm now get this additional error whenever I resize the browser (Chrome). This error will fire twice on every browser resize, not just at the predefined breakpoints.

Uncaught TypeError: Cannot read property 'appendChild' of undefined
(anonymous function) @ bricklayer-node.js:147
Container.reorderElements @ bricklayer-node.js:145
(anonymous function) @ bricklayer-node.js:100
triggerEvent @ bricklayer-node.js:20
Container.checkColumnCount @ bricklayer-node.js:123
(anonymous function) @ bricklayer-node.js:98

The custom on('breakpoint') listener displays columnCount as NaN. It's almost as if it's still looking for the two initial bricklayer instances, but is unable to find them (as they've been removed and reinitialized again upon changing routes).

Any thoughts on this? I've also tried to delete each instance of bricklayer with bricklayer = null as well before navigating away from the menu view/route, but no luck there either. If more info is needed, let me know...thanks!

.destroy() method must remove all bricklayer stuff and restore previous content structure, but now it just simple deletes container with content from DOM.

Should we support browsers with no support of flexbox? Seems IE 9 and 8 does not have support for flexbox. Maybe we can fallback to table view with columns:

<table>
  <tr>
    <td class="bricklayer-column">items..</td>
    <td class="bricklayer-column">items..</td>
  </tr>
</table>

@ademilter If you think supporting this is not required and will be overkill for its simplicity, we can just do not support.

PS. Calculating height of table columns may have problems and we can have problems with responsiveness.

Hello — bricklayer working OK in this preview site :: https://gresfordarchitects.co.uk/projects

But Chrome is giving a strange 'flash' of a large content item each time the page is accessed... (try clicking the 'project' button several times... this issue seems specific to Chrome...

Any clues as to what this might be?!

thanks

Please add this to the list!

Website:
Title:

In wall example, if there are lots of columns appear, it fails with finding min height column when all columns are empty. It finds it when at least one element exists.

Hello Guys! (Selam Beyler)

I believe minified version of the script is corrupt. I had an issue with it "dist/bricklayer.min.js" when I try with the raw version "dist/bricklayer.js" everything works fine.

The issue happened when I initialize few instances of bricklayer in one page on resize event and it happens on line 161 (unminified version)

You check attachment for the error I had.

Thanks, Nice stuff!

Trying to use Bricklayer.js in multiple IDs in same page. Or even it will be helpful to know, how to bricklayer all .bricklayer classes.

Any proper way to use bricklayer.destroy(); ? Is there any good example?

I tried:
bricklayer.destroy();
var bricklayer = new Bricklayer(document.getElementById('bricklayer'));

The code throws error Uncaught TypeError: Cannot read property 'destroy' of undefined

In the quick start page, there's an example that shows the following CSS:

@media screen and (min-width: 1200px) {
   ...
}
@media screen and (min-width: 768px) {
  ...
}

The order of these two rules should be reversed. The way it is now, a page with width > 1200 will actually use the 768 rule because it will overwrite the other one because it's defined later.

• with imagesloaded
• with infinite-scroll
• with $.get

I am unable to make React work with Bricklayer reliably. Problem happens when you mount a component which has Bricklayer content in it and update the component w/o unmounting.

Repro Steps

git clone [email protected]:tugberkugurlu/ReactJsSamples.git
cd ReactJsSamples/BricklayerRepro
git checkout -qf f8cf2f2d958e597cb9aa3129c7d5c2f045f7f3f9
yarn
npm start

Open the app on http://localhost:3000 and fire up Chrome Dev Tools as well to see the errors. The app initially loads random items and bricklayer nicely shapes them (see componentDidMount). However, HomePage component updates the content of ItemsList component without unmounting it in every 3 seconds. That's why I have the destroy and reinitialize code inside componentDidUpdate.

However, any update that ItemsList receives makes react upset and it fails even before getting to componentDidUpdate and it's not able to remove any elements from the DOM and it builds up indefinitely like that.

The first error is the below one:

DOMChildrenOperations.js:67 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.removeChild @ DOMChildrenOperations.js:67processUpdates @ DOMChildrenOperations.js:183dangerouslyProcessChildrenUpdates @ ReactDOMIDOperations.js:30processQueue @ ReactMultiChild.js:139_updateChildren @ ReactMultiChild.js:359updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129_updateRenderedComponent @ ReactCompositeComponent.js:784_performComponentUpdate @ ReactCompositeComponent.js:753updateComponent @ ReactCompositeComponent.js:670receiveComponent @ ReactCompositeComponent.js:564receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129_updateRenderedComponent @ ReactCompositeComponent.js:784_performComponentUpdate @ ReactCompositeComponent.js:753updateComponent @ ReactCompositeComponent.js:670performUpdateIfNecessary @ ReactCompositeComponent.js:578performUpdateIfNecessary @ ReactReconciler.js:163runBatchedUpdates @ ReactUpdates.js:151perform @ Transaction.js:138perform @ Transaction.js:138perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173closeAll @ Transaction.js:204perform @ Transaction.js:151batchedUpdates @ ReactDefaultBatchingStrategy.js:63enqueueUpdate @ ReactUpdates.js:201enqueueUpdate @ ReactUpdateQueue.js:25enqueueSetState @ ReactUpdateQueue.js:210ReactComponent.setState @ ReactComponent.js:64(anonymous function) @ index.js:103
16DOMChildrenOperations.js:67 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.removeChild @ DOMChildrenOperations.js:67processUpdates @ DOMChildrenOperations.js:183dangerouslyProcessChildrenUpdates @ ReactDOMIDOperations.js:30processQueue @ ReactMultiChild.js:139_updateChildren @ ReactMultiChild.js:359updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129_updateRenderedComponent @ ReactCompositeComponent.js:784_performComponentUpdate @ ReactCompositeComponent.js:753updateComponent @ ReactCompositeComponent.js:670receiveComponent @ ReactCompositeComponent.js:564receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129_updateRenderedComponent @ ReactCompositeComponent.js:784_performComponentUpdate @ ReactCompositeComponent.js:753updateComponent @ ReactCompositeComponent.js:670performUpdateIfNecessary @ ReactCompositeComponent.js:578performUpdateIfNecessary @ ReactReconciler.js:163runBatchedUpdates @ ReactUpdates.js:151perform @ Transaction.js:138perform @ Transaction.js:138perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173closeAll @ Transaction.js:204perform @ Transaction.js:151batchedUpdates @ ReactDefaultBatchingStrategy.js:63enqueueUpdate @ ReactUpdates.js:201enqueueUpdate @ ReactUpdateQueue.js:25enqueueSetState @ ReactUpdateQueue.js:210ReactComponent.setState @ ReactComponent.js:64(anonymous function) @ index.js:103

After that, subsequent errors are the same as below one for each update that happens every 3 seconds:

DOMChildrenOperations.js:67 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.removeChild @ DOMChildrenOperations.js:67processUpdates @ DOMChildrenOperations.js:183dangerouslyProcessChildrenUpdates @ ReactDOMIDOperations.js:30processQueue @ ReactMultiChild.js:139_updateChildren @ ReactMultiChild.js:359updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129_updateRenderedComponent @ ReactCompositeComponent.js:784_performComponentUpdate @ ReactCompositeComponent.js:753updateComponent @ ReactCompositeComponent.js:670receiveComponent @ ReactCompositeComponent.js:564receiveComponent @ ReactReconciler.js:129updateChildren @ ReactChildReconciler.js:107_reconcilerUpdateChildren @ ReactMultiChild.js:213_updateChildren @ ReactMultiChild.js:316updateChildren @ ReactMultiChild.js:303_updateDOMChildren @ ReactDOMComponent.js:960updateComponent @ ReactDOMComponent.js:780receiveComponent @ ReactDOMComponent.js:734receiveComponent @ ReactReconciler.js:129_updateRenderedComponent @ ReactCompositeComponent.js:784_performComponentUpdate @ ReactCompositeComponent.js:753updateComponent @ ReactCompositeComponent.js:670performUpdateIfNecessary @ ReactCompositeComponent.js:578performUpdateIfNecessary @ ReactReconciler.js:163runBatchedUpdates @ ReactUpdates.js:151perform @ Transaction.js:138perform @ Transaction.js:138perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173closeAll @ Transaction.js:204perform @ Transaction.js:151batchedUpdates @ ReactDefaultBatchingStrategy.js:63enqueueUpdate @ ReactUpdates.js:201enqueueUpdate @ ReactUpdateQueue.js:25enqueueSetState @ ReactUpdateQueue.js:210ReactComponent.setState @ ReactComponent.js:64(anonymous function) @ index.js:103

This is what I see in this repro example. However, in my actual application, I am observing the below error on the same issue which is a bit different:

VM26259:1 Uncaught TypeError: error.stack is not a function
    at eval (eval at evaluate (unknown source), <anonymous>:1:7)
    at eval (webpack:///./src/components/common/formUtils.js?:17:13)(anonymous function) @ VM26259:1(anonymous function) @ formUtils.js:17
error
TypeError: Cannot read property 'getHostNode' of null
    at Object.getHostNode (webpack:///./~/react/lib/ReactReconciler.js?:64:28)
    at ReactCompositeComponentWrapper.getHostNode (webpack:///./~/react/lib/ReactCompositeComponent.js?:383:28)
    at Object.getHostNode (webpack:///./~/react/lib/ReactReconciler.js?:64:29)
    at Object.updateChildren (webpack:///./~/react/lib/ReactChildReconciler.js?:130:46)
    at ReactDOMComponent._reconcilerUpdateChildren (webpack:///./~/react/lib/ReactMultiChild.js?:210:32)
    at ReactDOMComponent._updateChildren (webpack:///./~/react/lib/ReactMultiChild.js?:314:31)
    at ReactDOMComponent.updateChildren (webpack:///./~/react/lib/ReactMultiChild.js?:301:12)
    at ReactDOMComponent._updateDOMChildren (webpack:///./~/react/lib/ReactDOMComponent.js?:942:12)
    at ReactDOMComponent.updateComponent (webpack:///./~/react/lib/ReactDOMComponent.js?:760:10)
    at ReactDOMComponent.receiveComponent (webpack:///./~/react/lib/ReactDOMComponent.js?:718:10)

Sample Code

Adding the code used for repro steps here just for reference. However, it has dependencies as you can see. So, it will not work as is. Look at here to make it work with the above repro steps.

import './bootswatch.less';
import 'bricklayer/dist/bricklayer.css';
import './index.scss';
import React from 'react';
import ReactDom from 'react-dom';
import Bricklayer from 'bricklayer';
import loremIpsum from 'lorem-ipsum';
import _ from 'underscore';

const ItemsList = React.createClass({
    componentDidMount: function() {
        this.itemsListContainerBricklayer = new Bricklayer(this.refs.itemsListContainer);
    },
    componentDidUpdate: function() {
        this.itemsListContainerBricklayer.destroy();
        this.itemsListContainerBricklayer = new Bricklayer(this.refs.itemsListContainer);
    },
    render: function() {
        const { items } = this.props;
        return <div className="search-results-container">
            <div className="row">
                <div className="col-xs-12">
                    <div className="bricklayer cards-list" ref="itemsListContainer">
                        {items.map(item =>
                            <div key={item.id} className="card">{item.content}</div> 
                        )}
                    </div>
                </div>
            </div>
        </div>;
    }
});

export const guid = () => {
    const s4 = () => {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    };

    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
        s4() + '-' + s4() + s4() + s4();
};

const getRandomItems = () => {
    const count = _.random(20, 100);
    return _(_.range(count)).map(i => ({
        id: guid(),
        content: loremIpsum()
    }));
};

const HelloWorld = React.createClass({
    getInitialState: function() {
        return {
            items: getRandomItems()
        };
    },
    componentDidMount: function() {
        this.timerId = window.setInterval(() => {
            this.setState({
                items: getRandomItems()
            });
        }, 3000);
    },
    componentWillUnmount: function() {
        window.clearInterval(this.timerId);
    },
    render: function() {
        return <div>
            <ItemsList items={this.state.items} />
        </div>;
    }
});

ReactDom.render(
    <HelloWorld />, 
    document.getElementById('app')
);

Please add this to the list!

Website: http://www.fascinatingnepal.com/photo-gallery/
Title: Fascinating Nepal Photo Gallery

Beautiful pictures of Nepal

Issue: See how the pictures are tiled non-uniformly in the same column sometimes.

It seems, fascinatingnepal.com no longer uses bricklayer.

Hi!

How can I change the value of .bricklayer-column-sizer with jQuery dynamically?
I need to show an item 100% wide

regards,

I just tried your work. It works like magic, but only for one gallery on a page. I tried to use more generated galleries, where in every gallery i use bricklayer class. But it takes only first appearance and not the others. Can I ask you for help. Javascript amateur here, sorry.

Do not really know if this is an issue of it or not.

Hello Guys,
I've created a angular module for bricklayer: https://github.com/JohnnyTheTank/angular-bricklayer
Any wishes?