johnnythetank / angular-bricklayer Goto Github PK

View Code? Open in Web Editor NEW

43.0 3.0 5.0 30 KB

AngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library

Home Page: http://plnkr.co/edit/mo3G36

License: MIT License

JavaScript 100.00%

angular angular-grid grid bricklayer mansonry layout

angular-bricklayer's Introduction

angular-bricklayer

AngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library

Demos

Simple demo on GitHub
Simple demo on Plnkr
Demo with images from flickr (made with apiNG)

Installation

Install via either bower, npm or downloaded files:
1. via bower: bower install --save angular-bricklayer
2. via npm: npm install --save angular-bricklayer
3. via CDN (jsDelivr)
4. via downloaded files

Include dependencies and angular-bricklayer in your HTML.

When using bower

<link rel="stylesheet" href="bower_components/bricklayer/dist/bricklayer.min.css">
<script src="bower_components/bricklayer/dist/bricklayer.min.js"></script>
<script src="bower_components/angular-bricklayer/dist/angular-bricklayer.min.js"></script>

When using npm

<link rel="stylesheet" href="node_modules/bricklayer/dist/bricklayer.min.css">
<script src="node_modules/bricklayer/dist/bricklayer.min.js"></script>
<script src="node_modules/angular-bricklayer/dist/angular-bricklayer.min.js"></script>

When using CDN

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/angular-bricklayer.min.js"></script>

When using downloaded files

<link rel="stylesheet" href="YOUR_PATH/bricklayer.min.css">
<script src="YOUR_PATH/bricklayer.min.js"></script>
<script src="YOUR_PATH/angular-bricklayer.min.js"></script>

Add jtt_bricklayer to your application's module dependencies, like this:
```
angular.module('app', ['jtt_bricklayer']);
```

Usage

Create a simple list and set the css class bricklayer like this

<div class="bricklayer" ng-cloak>
    <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:

@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%;
  }
}

Add bricks dynamically

Use bricklayer-append or bricklayer-prepend as attribute, class or element name inside of your bricklayer instance

<div class="bricklayer" ng-cloak>
    <!-- append -->
    <div bricklayer-append ng-repeat="item in appendData" ng-cloak></div>

    <!-- prepend -->
    <div bricklayer-prepend ng-repeat="item in prependData" ng-cloak></div>
</div>

Images

Since v1.1.0 the grid gets redrawn when images have been loaded, by including and using desandro's imagesloaded

License

MIT

angular-bricklayer's People

Contributors

Stargazers

Watchers

Forkers

bonbonpiment babarayub jeroenlammerts dystudio lukasdrgon

angular-bricklayer's Issues

Duplicate value on update for the array on scope.

Hi,

If I updated the appendData in the $scope with a new array values, it won't update correctly the array and the items get always append to the array. In my case the array get updated every 30seg. So it will always present new duplicate values.

<div class="bricklayer" ng-cloak>
    <!-- append -->
    <div bricklayer-append ng-repeat="item in appendData" ng-cloak></div>

    <!-- prepend -->
    <div bricklayer-prepend ng-repeat="item in prependData" ng-cloak></div>
</div>

Doesn't seem to work when filters applied to ngRepeat

Here's an example of what I'm trying to do:

<input type="text" ng-model="vm.filterTags" />
<div class="bricklayer" ng-cloak>
    <div bricklayer-append ng-repeat="image in vm.images | filter:{tags:vm.filterTags}" ng-cloak>
		<img src="....." style="max-width:100%;" />
	</div>
</div>

vm.images = [
			{ filename: "1.jpg", tags: "nature" },
			{ filename: "2.jpg", tags: "ball" },
			{ filename: "3.jpg", tags: "car" }
	   ];

Delete element, and multiple bricklaer on same page.

I was working in this issue on my "own" version of this plugin (Just rewrote in my application style), and with this slight changes you can:

Have multiple bricklayer on same page
Remove elements without trouble.

This is a gist with the plugin code https://gist.github.com/epicleptico/27e6e8e444d11d0aa4686f112ea7964f (As you must see i have application specific code style).

You can take a look on working plunkr on https://plnkr.co/edit/3NmNUIfACo6Yb8qCniZb (Use full screen preview)

Just to note, for multiple versions you must place id and data-target on main div and child divs. And for delete you must place inside a $timeout a $broadcast with removing data.

Hope that helps. Thanks

imagesLoaded packaged inside

I have imagesLoaded library used on my project and when tried your plugin i reach the trouble that is loaded twice.

Just split it and add imagesLoaded as dependency.

creating logo

Need someone who combines both logos of bricklayer and angularjs

How to redraw?

HI,

I am having bricklayer grid in tab. In my case I am able see the images but only one column and 100% width when I resize the browser I am able to see 4 column grid(desktop default view). In this case how to redraw the grid?

Please find attached Plunk http://plnkr.co/edit/5i4wrO0UvHCICxp3R6rg?p=preview
Bricklayer grid is in second tab. by default nothing is visible if you resize the grid everything shows up.

Thanks

It is working fine If I just load two items.